/* =========================================================
   SEVEN ARENA — animations.css
   Keyframes + on-scroll reveal states
   ========================================================= */

/* ---------- LIVE DOT ---------- */
@keyframes pulse-dot {
  0% {
    box-shadow:
      0 0 0 0 var(--mint-glow),
      0 0 8px 0 var(--mint);
  }
  70% {
    box-shadow:
      0 0 0 14px transparent,
      0 0 8px 0 var(--mint);
  }
  100% {
    box-shadow:
      0 0 0 0 transparent,
      0 0 8px 0 var(--mint);
  }
}

/* ---------- TICKER MARQUEE ---------- */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- HERO MOCKUP FLOATING ---------- */
@keyframes float-mockup-a {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-14px); }
}
@keyframes float-mockup-b {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(-22px); }
}
@keyframes float-mockup-c {
  0%, 100% { transform: rotate(3deg) translate(0, 0); }
  50%      { transform: rotate(3deg) translate(-6px, -12px); }
}

/* ---------- ROUTE LINE FLOW (bento gps) ---------- */
@keyframes dash-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}

/* ---------- PULSE CIRCLE (gps point) ---------- */
@keyframes pulse-circle {
  0%, 100% { r: 4; opacity: 1; }
  50%      { r: 8; opacity: .6; }
}

/* ---------- AI BUBBLE DOTS ---------- */
@keyframes dots-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------- FADE IN ---------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ---------- SCAN LINE (subtle moving line) ---------- */
@keyframes scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ---------- BENTO QR SCAN HIGHLIGHT ---------- */
.bento__cell--qr::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  opacity: .5;
  animation: scan-h 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan-h {
  0%, 100% { transform: translateY(-60px); opacity: 0; }
  50%      { transform: translateY(60px); opacity: .8; }
}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms cubic-bezier(.2,.7,.2,1),
    transform 800ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms cubic-bezier(.2,.7,.2,1),
    transform 700ms cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 640ms; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 720ms; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 800ms; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 880ms; }

/* ---------- HERO INTRO (page load) ---------- */
.hero .eyebrow,
.hero__title,
.hero__sub,
.hero__stats,
.hero__ctas {
  opacity: 0;
  animation: slide-up 900ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .eyebrow      { animation-delay: 120ms; }
.hero__title        { animation-delay: 220ms; }
.hero__sub          { animation-delay: 380ms; }
.hero__stats        { animation-delay: 520ms; }
.hero__ctas         { animation-delay: 640ms; }

.hero__visual { opacity: 0; animation: slide-up 1000ms cubic-bezier(.2,.7,.2,1) 280ms forwards; }

/* ---------- COUNTER TICK ---------- */
@keyframes tick-up {
  0%   { transform: translateY(100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.counter-flash {
  display: inline-block;
  animation: tick-up 600ms ease both;
}

/* ---------- HOVER MICRO ---------- */
.module-card,
.pain-card,
.bento__cell,
.step,
.portal,
.audience,
.faq-item {
  will-change: transform;
}

/* ---------- LANG SWITCH transition ---------- */
[data-i18n] { transition: opacity 240ms ease; }
.lang-switching [data-i18n] { opacity: 0; }