/* ═══════════════════════════════════════════════════════════
   QEDream – animations.css
   Keyframes · Reveal states · Motion system
═══════════════════════════════════════════════════════════ */

/* ─── KEYFRAMES ───────────────────────────────────────────── */

@keyframes kenBurns {
  0%   { transform: scale(1)    translateX(0)    translateY(0); }
  50%  { transform: scale(1.06) translateX(-1%)  translateY(-1%); }
  100% { transform: scale(1.1)  translateX(1.5%) translateY(0.5%); }
}

@keyframes scrollPulse {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

@keyframes tickFlip {
  0%   { transform: translateY(0);    opacity: 1; }
  40%  { transform: translateY(-12px); opacity: 0; }
  41%  { transform: translateY(12px);  opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(124,158,255,0.4)); }
  50%       { filter: drop-shadow(0 0 20px rgba(124,158,255,0.7)); }
}

@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes revealLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes counterEntrance {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ─── HERO REVEAL STATES ──────────────────────────────────── */
/* These classes are added by JS after page load */

.reveal-hero {
  /* Initial state set in main.css (opacity:0, translateY) */
  will-change: opacity, transform;
}

.reveal-hero.is-visible {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger each hero element by data-delay */
.reveal-hero[data-delay="0"].is-visible { animation-delay: 0.15s; }
.reveal-hero[data-delay="1"].is-visible { animation-delay: 0.32s; }
.reveal-hero[data-delay="2"].is-visible { animation-delay: 0.46s; }
.reveal-hero[data-delay="3"].is-visible { animation-delay: 0.58s; }
.reveal-hero[data-delay="4"].is-visible { animation-delay: 0.70s; }
.reveal-hero[data-delay="5"].is-visible { animation-delay: 0.84s; }

/* ─── SCROLL REVEAL CLASSES ───────────────────────────────── */

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-up[data-delay="1"] {
  transition-delay: 0.12s;
}
.reveal-up[data-delay="2"] {
  transition-delay: 0.24s;
}
.reveal-up[data-delay="3"] {
  transition-delay: 0.36s;
}
.reveal-up[data-delay="4"] {
  transition-delay: 0.48s;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.15s;
  will-change: opacity, transform;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─── COUNTDOWN ENTRANCE ──────────────────────────────────── */

.countdown-block {
  /* Extra: scale entrance when revealed */
}
.countdown-block.is-visible .countdown-number {
  animation: counterEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.countdown-block.is-visible .countdown-unit:nth-child(1) .countdown-number { animation-delay: 0.05s; }
.countdown-block.is-visible .countdown-unit:nth-child(3) .countdown-number { animation-delay: 0.15s; }
.countdown-block.is-visible .countdown-unit:nth-child(5) .countdown-number { animation-delay: 0.25s; }
.countdown-block.is-visible .countdown-unit:nth-child(7) .countdown-number { animation-delay: 0.35s; }

/* ─── STAGGERED FEATURE CARDS ─────────────────────────────── */

.feature-grid .feature-card,
.topics-grid .topic-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  /* Hover transitions added in main.css */
}

.feature-grid.is-visible .feature-card:nth-child(1),
.topics-grid.is-visible .topic-card:nth-child(1) {
  opacity: 1; transform: translateY(0); transition-delay: 0.05s;
}
.feature-grid.is-visible .feature-card:nth-child(2),
.topics-grid.is-visible .topic-card:nth-child(2) {
  opacity: 1; transform: translateY(0); transition-delay: 0.15s;
}
.feature-grid.is-visible .feature-card:nth-child(3),
.topics-grid.is-visible .topic-card:nth-child(3) {
  opacity: 1; transform: translateY(0); transition-delay: 0.25s;
}
.topics-grid.is-visible .topic-card:nth-child(4) {
  opacity: 1; transform: translateY(0); transition-delay: 0.35s;
}

/* Allow hover transforms to still work once visible */
.feature-grid.is-visible .feature-card,
.topics-grid.is-visible .topic-card {
  opacity: 1 !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── EXPECTATION ITEMS ────────────────────────────────────── */

.expectations-list .expectation-item {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.expectations-block.is-visible .expectation-item:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.05s; }
.expectations-block.is-visible .expectation-item:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.18s; }
.expectations-block.is-visible .expectation-item:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.31s; }

/* ─── EYEBROW DOT PULSE ────────────────────────────────────── */
.hero-eyebrow.is-visible .eyebrow-dot {
  animation: glow-pulse 2.5s ease-in-out infinite;
}
.hero-eyebrow.is-visible .eyebrow-dot:last-child {
  animation-delay: 0.5s;
}

/* ─── NAV LOGO FLOAT ──────────────────────────────────────── */
.nav-logo {
  animation: floatUp 4s ease-in-out infinite;
}

/* ─── SCROLL INDICATOR FADE ───────────────────────────────── */
.scroll-indicator {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.scroll-indicator.is-visible {
  opacity: 1;
}

/* ─── ABOUT COLS STAGGER ──────────────────────────────────── */
.about-col-left,
.about-col-right {
  will-change: opacity, transform;
}

/* ─── REDUCED MOTION PREFERENCE ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-hero {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .feature-grid .feature-card,
  .topics-grid .topic-card,
  .expectations-list .expectation-item {
    opacity: 1 !important;
    transform: none !important;
  }
}