/* ============================================================
   ANIMATIONS — Reveal System, Keyframes, Motion
   ============================================================ */

/* ── Reveal System ────────────────────────────────────────── */
.reveal {
  --reveal-hidden-transform: translateY(30px);
  --reveal-visible-transform: translateY(0);
  --reveal-above-transform: translateY(-30px) scale(0.97);
  opacity: 0;
  transform: var(--reveal-hidden-transform);
  transition:
    opacity  var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  /* Stagger delay via CSS custom property --stagger (set by JS) */
  transition-delay: calc(var(--stagger, 0) * 80ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: var(--reveal-visible-transform);
}

/* Элемент ушёл выше viewport (прокрутили вниз мимо него) */
.reveal.is-above {
  opacity: 0;
  transform: var(--reveal-above-transform);
  transition-delay: 0ms; /* убираем stagger при обратном движении */
}

.reveal[data-reveal="left"] {
  --reveal-hidden-transform: translateX(-36px) translateY(8px) scale(0.96) rotate(-1.4deg);
  --reveal-above-transform: translateX(-18px) translateY(-30px) scale(0.96) rotate(-0.8deg);
}

.reveal[data-reveal="right"] {
  --reveal-hidden-transform: translateX(36px) translateY(8px) scale(0.96) rotate(1.4deg);
  --reveal-above-transform: translateX(18px) translateY(-30px) scale(0.96) rotate(0.8deg);
}

.reveal[data-reveal="top"] {
  --reveal-hidden-transform: translateY(-42px) scale(0.95) rotate(-1.2deg);
  --reveal-above-transform: translateY(-34px) scale(0.96) rotate(-0.6deg);
}

.reveal[data-reveal="bottom"] {
  --reveal-hidden-transform: translateY(42px) scale(0.95) rotate(1.2deg);
  --reveal-above-transform: translateY(-22px) scale(0.97) rotate(0.4deg);
}

.about__card.reveal[data-reveal="left"] {
  --reveal-hidden-transform: translateX(-28px) translateY(10px) scale(0.97);
}

.about__card.reveal[data-reveal="right"] {
  --reveal-hidden-transform: translateX(28px) translateY(10px) scale(0.97);
}

.about__card.reveal[data-reveal="bottom"] {
  --reveal-hidden-transform: translateY(36px) scale(0.97);
}

.skill-card.reveal[data-reveal="left"] {
  --reveal-hidden-transform: translateX(-56px) translateY(12px) scale(0.92) rotate(-3deg);
  --reveal-above-transform: translateX(-20px) translateY(-38px) scale(0.95) rotate(-1.2deg);
}

.skill-card.reveal[data-reveal="right"] {
  --reveal-hidden-transform: translateX(56px) translateY(-8px) scale(0.92) rotate(3deg);
  --reveal-above-transform: translateX(20px) translateY(-38px) scale(0.95) rotate(1.2deg);
}

.skill-card.reveal[data-reveal="top"] {
  --reveal-hidden-transform: translateY(-52px) scale(0.9) rotate(-2deg);
  --reveal-above-transform: translateY(-40px) scale(0.95) rotate(-0.8deg);
}

.skill-card.reveal[data-reveal="bottom"] {
  --reveal-hidden-transform: translateY(52px) scale(0.9) rotate(2deg);
  --reveal-above-transform: translateY(-26px) scale(0.96) rotate(0.8deg);
}

.timeline__item.reveal[data-reveal="left"] {
  --reveal-hidden-transform: translateX(-42px) translateY(12px) scale(0.96) rotate(-1.4deg);
  --reveal-above-transform: translateX(-18px) translateY(-34px) scale(0.97) rotate(-0.6deg);
}

.timeline__item.reveal[data-reveal="right"] {
  --reveal-hidden-transform: translateX(42px) translateY(12px) scale(0.96) rotate(1.4deg);
  --reveal-above-transform: translateX(18px) translateY(-34px) scale(0.97) rotate(0.6deg);
}

.timeline__item.reveal[data-reveal="bottom"] {
  --reveal-hidden-transform: translateY(44px) scale(0.95) rotate(1deg);
  --reveal-above-transform: translateY(-26px) scale(0.97) rotate(0.35deg);
}

.timeline__item.reveal .timeline__card {
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.timeline__item.reveal.is-visible .timeline__card {
  transform: translate3d(0, 0, 0);
}

.timeline__item.reveal.is-visible:hover .timeline__card {
  transform: translateY(-4px);
}

.project-card.reveal[data-reveal="left"] {
  --reveal-hidden-transform: translateX(-48px) translateY(18px) scale(0.94) rotate(-2deg);
  --reveal-above-transform: translateX(-16px) translateY(-34px) scale(0.97) rotate(-0.8deg);
}

.project-card.reveal[data-reveal="right"] {
  --reveal-hidden-transform: translateX(48px) translateY(18px) scale(0.94) rotate(2deg);
  --reveal-above-transform: translateX(16px) translateY(-34px) scale(0.97) rotate(0.8deg);
}

.project-card.reveal[data-reveal="bottom"] {
  --reveal-hidden-transform: translateY(50px) scale(0.93) rotate(1.5deg);
  --reveal-above-transform: translateY(-24px) scale(0.97) rotate(0.4deg);
}

.education__card.reveal[data-reveal="left"] {
  --reveal-hidden-transform: translateX(-34px) translateY(10px) scale(0.96) rotate(-1.1deg);
  --reveal-above-transform: translateX(-14px) translateY(-28px) scale(0.97) rotate(-0.4deg);
}

.education__card.reveal[data-reveal="right"] {
  --reveal-hidden-transform: translateX(34px) translateY(10px) scale(0.96) rotate(1.1deg);
  --reveal-above-transform: translateX(14px) translateY(-28px) scale(0.97) rotate(0.4deg);
}

.contact-card.reveal[data-reveal="left"] {
  --reveal-hidden-transform: translateX(-30px) translateY(12px) scale(0.97);
  --reveal-above-transform: translateX(-14px) translateY(-28px) scale(0.97);
}

.contact-card.reveal[data-reveal="right"] {
  --reveal-hidden-transform: translateX(30px) translateY(12px) scale(0.97);
  --reveal-above-transform: translateX(14px) translateY(-28px) scale(0.97);
}

.contact-card.reveal[data-reveal="bottom"] {
  --reveal-hidden-transform: translateY(38px) scale(0.96) rotate(0.8deg);
  --reveal-above-transform: translateY(-20px) scale(0.98) rotate(0.3deg);
}

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
  }
}

@keyframes aurora-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 15px) scale(0.9);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes kinetic-glow {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
  }
}

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}