/* =============================================================
   Vitarix Landing — animations.css
   All @keyframes, transition utilities, and reveal classes.
   Existing animations extracted from inline <style>.
   Will be expanded in later phases with GSAP-driven effects.
   ============================================================= */

/* ─── Page background shimmer ──────────────────────────────── */
.shimmer-bg {
  background: radial-gradient(circle at 50% 0%, rgba(215, 255, 63, 0.05) 0%, transparent 60%);
}

/* ─── Glow hover (used on download cards, etc.) ─────────────── */
.glow-hover {
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo),
    background-color var(--dur-base) var(--ease-out-expo);
}
.glow-hover:hover {
  box-shadow: var(--glow-lime);
  transform: translateY(-2px) scale(1.02);
}

.ring-glow {
  filter: drop-shadow(0 0 8px rgba(215, 255, 63, 0.4));
}

/* ─── Social icons ─────────────────────────────────────────── */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #c4c7c8;
  transition: all 0.3s var(--ease-out-expo);
  cursor: pointer;
}
.social-icon:hover {
  background: rgba(215, 255, 63, 0.10);
  border-color: rgba(215, 255, 63, 0.30);
  color: var(--neon-lime);
  transform: translateY(-3px) scale(1.10);
  box-shadow: 0 4px 20px rgba(215, 255, 63, 0.15);
}
.social-icon svg { transition: transform 0.3s ease; }
.social-icon:hover svg { transform: scale(1.15); }

/* ─── Floating phone mockup ────────────────────────────────── */
@keyframes floatPhone {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.phone-float {
  animation: floatPhone 4s ease-in-out infinite;
  will-change: transform;
}
.phone-float:hover {
  animation-play-state: paused;
}

/* ─── Animated progress ring ───────────────────────────────── */
@keyframes progressFill {
  from { stroke-dashoffset: 402; }
  to   { stroke-dashoffset: 100; }
}
.progress-ring-circle {
  animation: progressFill 2s ease-out 0.5s forwards;
  stroke-dashoffset: 402;
}

/* ─── Pulse glow on ring ───────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(215, 255, 63, 0.30)); }
  50%      { filter: drop-shadow(0 0 16px rgba(215, 255, 63, 0.60)); }
}
.pulse-ring {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ─── Shimmer on badges ────────────────────────────────────── */
@keyframes shimmerBadge {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.shimmer-badge {
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, rgba(196,255,0,0.06) 0%, rgba(196,255,0,0.15) 50%, rgba(196,255,0,0.06) 100%);
  animation: shimmerBadge 4s linear infinite;
}

/* ─── Scroll-reveal utilities ──────────────────────────────── */
/* Phase 6: section-specific choreography. The .reveal base class
   stays (backward compat) but each section can also drive its
   children via .reveal-child--<variant> classes.
   Safety: only hide when .js is present on <html>. If JS fails
   to load, content is visible immediately (no invisible sections). */
html.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
  will-change: transform, opacity;
}
html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* no-js fallback: reveal everything */
html.no-js .reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}
html.js .reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

html.js .reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}
html.js .reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

html.js .reveal-scale {
  opacity: 0;
  transform: scale(0.90);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}
html.js .reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ─── Phase 6: section-specific child choreography ────────── */
/* Each variant has its own entrance motion. The .reveal-child
   base sets the hidden state; .reveal-child--visible triggers
   the entrance. transition-delay is set inline by reveal-init.js
   for staggered children. */

html.no-js .reveal-child { opacity: 1; transform: none; }
html.js .reveal-child {
  opacity: 0;
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
  will-change: transform, opacity;
}

/* pop: scale up from 0.92 with a slight Y lift (stat cards) */
.reveal-child--pop {
  transform: translateY(20px) scale(0.92);
}
.reveal-child--pop.reveal-child--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* slide-alt: alternate left/right based on :nth-child (feature cards) */
.reveal-child--slide-alt {
  transform: translateX(0);
}
.reveal-child--slide-alt:nth-child(odd) {
  transform: translateX(-30px);
}
.reveal-child--slide-alt:nth-child(even) {
  transform: translateX(30px);
}
.reveal-child--slide-alt.reveal-child--visible {
  opacity: 1;
  transform: translateX(0) !important;
}

/* fade: simple opacity (faq items, fitness-tools) */
.reveal-child--fade {
  transform: translateY(12px);
}
.reveal-child--fade.reveal-child--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Staggered children ───────────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.5s var(--ease-out-expo),
    transform 0.5s var(--ease-out-expo);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.08s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.24s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.32s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.40s; }
.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Counter values ───────────────────────────────────────── */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── Scroll indicator bounce ──────────────────────────────── */
@keyframes scrollDrift {
  0%, 100% { transform: translateY(0);    opacity: 0.6; }
  50%      { transform: translateY(8px);  opacity: 1;   }
}
.scroll-indicator {
  animation: scrollDrift 2s var(--ease-in-out-quart) infinite;
}

/* ─── Emphasis text (solid color, no clipped gradient) ───── */
/* Impeccable bans clipped-text gradients. Use solid brand color
   and rely on weight/size contrast for emphasis. */
.gradient-text {
  color: var(--neon-lime);
  font-weight: 800;
}

/* Animated emphasis (was a flowing clipped gradient).
   Now a single color with a subtle opacity pulse to retain the
   "alive" feel without the banned pattern. */
.gradient-text-animated {
  color: var(--neon-lime);
  font-weight: 800;
  animation: emphasisPulse 4s ease-in-out infinite;
}

@keyframes emphasisPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* ─── Hero text reveal ─────────────────────────────────────── */
@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}
.hero-reveal {
  animation: heroTextReveal 0.8s var(--ease-out-expo) forwards;
}
.hero-reveal-1 { animation-delay: 0.10s; opacity: 0; }
.hero-reveal-2 { animation-delay: 0.25s; opacity: 0; }
.hero-reveal-3 { animation-delay: 0.40s; opacity: 0; }
.hero-reveal-4 { animation-delay: 0.55s; opacity: 0; }

/* ─── Testimonial card hover ───────────────────────────────── */
.testimonial-card {
  transition: all 0.4s var(--ease-out-expo);
  cursor: pointer;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(215, 255, 63, 0.20);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.30),
    0 0 20px rgba(215, 255, 63, 0.05);
}

/* ─── CTA button pulse ─────────────────────────────────────── */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(215, 255, 63, 0.30); }
  50%      { box-shadow: 0 0 0 12px rgba(215, 255, 63, 0);    }
}
.cta-pulse {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

/* ─── Feature card hover ───────────────────────────────────── */
.feature-card {
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-lime), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(215, 255, 63, 0.25);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.25),
    0 0 24px rgba(215, 255, 63, 0.06);
}
.feature-card .feature-icon {
  transition: transform 0.4s var(--ease-out-expo);
}
.feature-card:hover .feature-icon {
  transform: scale(1.15) rotate(-5deg);
}

/* ─── Step connector line ──────────────────────────────────── */
.step-connector { position: relative; }
.step-connector::after {
  content: "";
  position: absolute;
  top: 32px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(196,255,0,0.30), rgba(255,122,0,0.30));
  z-index: 0;
}

/* ─── Mobile menu animation ────────────────────────────────── */
/* Modern grid-rows technique: 0fr → 1fr animates the height
   without layout thrash (no max-height guesswork, no width anim).
   Impeccable ban: animating max-height. */
#mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out-expo);
}
#mobile-menu > * {
  overflow: hidden;
  min-height: 0;
}
#mobile-menu.open {
  grid-template-rows: 1fr;
}

/* ─── Nav scroll effect ────────────────────────────────────── */
.nav-scrolled {
  background: rgba(16, 20, 25, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* =============================================================
   PHASE 2 — PRELOADER + NAV PROGRESS + ACTIVE LINK
   ============================================================= */

/* ─── Preloader (fullscreen brand reveal) ─────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  pointer-events: auto;
  overflow: hidden;
}

.preloader__panel {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: var(--bg);
  z-index: 1;
  will-change: transform;
}
.preloader__panel--top    { top: 0;    }
.preloader__panel--bottom { bottom: 0; }

.preloader__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  will-change: transform, opacity;
}

.preloader__icon {
  width: 64px;
  height: 64px;
  color: var(--neon-lime);
  filter: drop-shadow(0 0 12px rgba(215, 255, 63, 0.5));
}
.preloader__icon svg { width: 100%; height: 100%; }

.preloader__heart-path,
.preloader__ecg-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* Phase 4: 1.1s -> 0.5s draw, no delay (was 0.1s) */
  animation: preloaderDraw 0.5s var(--ease-out-expo) 0s forwards;
}
.preloader__ecg-path {
  /* Phase 4: 0.45s delay -> 0.15s; ECG finishes by 0.65s */
  animation-delay: 0.15s;
  stroke-dashoffset: 100;
  opacity: 0;
}
.preloader__heart-path {
  opacity: 0;
  animation: preloaderFadeDraw 0.5s var(--ease-out-expo) 0s forwards;
}

@keyframes preloaderDraw {
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes preloaderFadeDraw {
  0%   { opacity: 0; stroke-dashoffset: 100; }
  10%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

.preloader__wordmark {
  display: flex;
  gap: 0.05em;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1;
}
.preloader__wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  /* Phase 4: 0.5s -> 0.25s per letter */
  animation: preloaderLetter 0.25s var(--ease-out-expo) forwards;
}
/* Phase 4: tighter stagger — 30ms between letters (was 60ms).
   First letter at 0.20s, last (7th) at 0.38s, last finishes at 0.63s. */
.preloader__wordmark span:nth-child(1) { animation-delay: 0.20s; }
.preloader__wordmark span:nth-child(2) { animation-delay: 0.23s; }
.preloader__wordmark span:nth-child(3) { animation-delay: 0.26s; }
.preloader__wordmark span:nth-child(4) { animation-delay: 0.29s; }
.preloader__wordmark span:nth-child(5) { animation-delay: 0.32s; }
.preloader__wordmark span:nth-child(6) { animation-delay: 0.35s; }
.preloader__wordmark span:nth-child(7) { animation-delay: 0.38s; }

@keyframes preloaderLetter {
  to { opacity: 1; transform: translateY(0); }
}

.preloader__bar {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.preloader__bar-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--neon-lime), var(--purple));
  border-radius: 9999px;
  transition: transform 0.25s var(--ease-out-expo);
  box-shadow: 0 0 8px rgba(215, 255, 63, 0.6);
}

/* ─── Preloader exit (panels split open) ───────────────────── */
/* Phase 4: 0.7s -> 0.4s panel slide (matches JS EXIT_ANIM_MS=400) */
.preloader.is-exiting {
  pointer-events: none;
}
.preloader.is-exiting .preloader__panel--top    { animation: preloaderPanelOut 0.4s var(--ease-in-out-quart) forwards; }
.preloader.is-exiting .preloader__panel--bottom { animation: preloaderPanelOut 0.4s var(--ease-in-out-quart) 0.03s forwards; }
.preloader.is-exiting .preloader__content       { animation: preloaderContentOut 0.3s var(--ease-in-out-quart) forwards; }

@keyframes preloaderPanelOut {
  to { transform: translateY(-100%); }
}
.preloader.is-exiting .preloader__panel--bottom {
  animation-name: preloaderPanelOutDown;
}
@keyframes preloaderPanelOutDown {
  to { transform: translateY(100%); }
}
@keyframes preloaderContentOut {
  to { opacity: 0; transform: scale(0.96); }
}

/* ─── Preloader skipped (no animation) ─────────────────────── */
.preloader.is-skipped {
  display: none;
}

/* ─── Preloader reduced-motion fallback ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none !important;
  }
}

/* =============================================================
   PHASE 2 — NAV SCROLL PROGRESS + ACTIVE LINK
   ============================================================= */

.nav__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--neon-lime) 0%, var(--purple) 100%);
  box-shadow: 0 0 8px rgba(215, 255, 63, 0.5);
  z-index: 51;
  transition: transform 0.05s linear;
  will-change: transform;
  pointer-events: none;
}
html[dir="rtl"] .nav__progress { transform-origin: right center; }

/* ─── Active nav link ──────────────────────────────────────── */
.nav__link {
  position: relative;
  padding-block: 0.25rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--neon-lime);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out-expo);
  box-shadow: 0 0 6px rgba(215, 255, 63, 0.6);
}
.nav__link.is-active {
  color: var(--neon-lime);
}
.nav__link.is-active::after {
  transform: scaleX(1);
}
html[dir="rtl"] .nav__link::after { left: auto; right: 0; transform-origin: right center; }

/* =============================================================
   PHASE 3 — AURORA MESH + PARTICLES
   Both layers are position:fixed, z-index:0, pointer-events:none.
   Body content sits above (z-index auto inside isolated body).
   ============================================================= */

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.aurora__blob {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform, opacity;
  /* Each blob sits on its own slow drift path */
}

/* Reduce blur on mobile for performance (blur is GPU-intensive) */
@media (max-width: 768px) {
  .aurora__blob {
    filter: blur(50px);
    width: 50vmax;
    height: 50vmax;
    opacity: 0.40;
  }
}
.aurora__blob--lime {
  top: -20vmax;
  left: -15vmax;
  background: radial-gradient(circle, rgba(215, 255, 63, 0.55) 0%, rgba(215, 255, 63, 0) 65%);
  /* Phase 4: 22s -> 45s — barely-perceptible drift is the goal */
  animation: auroraDrift1 45s var(--ease-in-out-quart) infinite alternate;
}
.aurora__blob--purple {
  top: -10vmax;
  right: -20vmax;
  background: radial-gradient(circle, rgba(164, 130, 255, 0.45) 0%, rgba(164, 130, 255, 0) 65%);
  /* Phase 4: 26s -> 52s */
  animation: auroraDrift2 52s var(--ease-in-out-quart) infinite alternate;
}
.aurora__blob--blue {
  bottom: -25vmax;
  left: -10vmax;
  background: radial-gradient(circle, rgba(80, 160, 255, 0.35) 0%, rgba(80, 160, 255, 0) 65%);
  /* Phase 4: 30s -> 60s */
  animation: auroraDrift3 60s var(--ease-in-out-quart) infinite alternate;
}
.aurora__blob--warm {
  bottom: -20vmax;
  right: -15vmax;
  width: 50vmax;
  height: 50vmax;
  background: radial-gradient(circle, rgba(255, 180, 90, 0.18) 0%, rgba(255, 180, 90, 0) 65%);
  /* Phase 4: 34s -> 70s */
  animation: auroraDrift4 70s var(--ease-in-out-quart) infinite alternate;
}

@keyframes auroraDrift1 {
  0%   { transform: translate3d(0, 0, 0)        scale(1);   opacity: 0.55; }
  50%  { transform: translate3d(8vmax, 6vmax, 0) scale(1.15); opacity: 0.7;  }
  100% { transform: translate3d(4vmax, 12vmax, 0) scale(0.95); opacity: 0.5;  }
}
@keyframes auroraDrift2 {
  0%   { transform: translate3d(0, 0, 0)         scale(1);   opacity: 0.45; }
  50%  { transform: translate3d(-10vmax, 8vmax, 0) scale(1.1);  opacity: 0.6;  }
  100% { transform: translate3d(-4vmax, 16vmax, 0)  scale(0.9);  opacity: 0.4;  }
}
@keyframes auroraDrift3 {
  0%   { transform: translate3d(0, 0, 0)          scale(1);    opacity: 0.35; }
  50%  { transform: translate3d(12vmax, -6vmax, 0) scale(1.2);  opacity: 0.5;  }
  100% { transform: translate3d(6vmax, -10vmax, 0)  scale(0.95); opacity: 0.3;  }
}
@keyframes auroraDrift4 {
  0%   { transform: translate3d(0, 0, 0)           scale(1);    opacity: 0.18; }
  50%  { transform: translate3d(-8vmax, -10vmax, 0) scale(1.15); opacity: 0.28; }
  100% { transform: translate3d(-14vmax, -4vmax, 0)  scale(0.9);  opacity: 0.15; }
}

/* Subtle grain texture on top of the blobs to break up gradient banding */
.aurora__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Disable grain on mobile — feTurbulence is a GPU killer on low-end devices */
@media (max-width: 768px) {
  .aurora__grain { display: none; }
}

/* ─── Particles canvas ──────────────────────────────────────── */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  /* Tint canvas slightly for fallback in case of black/white GPU */
  opacity: 0.85;
}
.particles.is-hidden {
  display: none;
}

/* Reduced motion: keep aurora static (no drift) and hide particles */
@media (prefers-reduced-motion: reduce) {
  .aurora__blob {
    animation: none !important;
  }
  .particles {
    display: none !important;
  }
}

/* Mobile performance: reduce aurora animation complexity.
   Phase 4: matched mobile to the new slower desktop range (was 35-50s,
   now 60-80s) so mobile doesn't feel busier than desktop. */
@media (max-width: 768px) {
  .aurora__blob--lime   { animation-duration: 60s; }
  .aurora__blob--purple { animation-duration: 65s; }
  .aurora__blob--blue   { animation-duration: 70s; }
  .aurora__blob--warm   { animation-duration: 80s; }
}

/* =============================================================
   PHASE 4 — PHONE DEMO ANIMATIONS
   Halo pulse, holographic shimmer, scan line, heart beat,
   water wave, ECG draw, ring fill, recording blink,
   active-dot pulse, toast slide, bar fill, pill float.
   ============================================================= */

/* Phone body gentle float (preserved from Phase 1) */
@keyframes floatPhone {
  0%, 100% { transform: perspective(1200px) translateY(0)    rotateX(0) rotateY(0); }
  50%      { transform: perspective(1200px) translateY(-10px) rotateX(0) rotateY(0); }
}
/* `floatPhone` is overridden dynamically by the tilt controller
   on mousemove; the @keyframes is kept as a fallback for non-tilt. */

/* Aurora-style halo pulse */
@keyframes haloPulse {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* Phase 4: shimmerSweep keyframe removed (the .phone__shimmer element
   that used it was deleted from HTML). */

/* AI scan line moving vertically inside the viewfinder */
@keyframes scanLine {
  0%   { transform: translateY(0);   opacity: 1; }
  48%  { transform: translateY(146px); opacity: 1; }
  50%  { transform: translateY(146px); opacity: 0; }
  51%  { transform: translateY(0);   opacity: 0; }
  52%  { transform: translateY(0);   opacity: 1; }
  100% { transform: translateY(146px); opacity: 1; }
}

/* Bounding-box pulse inside the scan window */
@keyframes bboxPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.98); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* Heart icon "lub-dub" beat */
@keyframes hrBeat {
  0%, 100% { transform: scale(1);    }
  14%      { transform: scale(1.22); }
  28%      { transform: scale(1);    }
  42%      { transform: scale(1.14); }
  70%      { transform: scale(1);    }
}

/* Live ECG line draw (re-draws in a loop) */
@keyframes ecgDraw {
  0%   { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0;   }
}

/* Recording indicator blink */
@keyframes recBlink {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.3; }
}

/* Active exercise dot pulse */
@keyframes pulseDot {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 6px var(--neon-lime); }
  50%      { transform: scale(1.4); box-shadow: 0 0 14px var(--neon-lime); }
}

/* Water bottle waves (back + front) */
@keyframes waveBack {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-160px); }
}
@keyframes waveFront {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-160px); }
}
/* Element hooks (used by the .bottle__wave rules) */
.bottle__wave--back  { animation: waveBack  4s linear infinite; }
.bottle__wave--front { animation: waveFront 3s linear infinite; opacity: 0.85; }

/* Bubbles drift upward */
@keyframes bubbleRise {
  0%   { transform: translateY(0)    scale(1);   opacity: 0;   }
  10%  { opacity: 0.8; }
  100% { transform: translateY(-160px) scale(1.4); opacity: 0;   }
}
.bottle__bubble {
  animation: bubbleRise 3.2s ease-in infinite;
}
.bottle__bubble:nth-child(2) { animation-delay: 0.6s; }
.bottle__bubble:nth-child(3) { animation-delay: 1.2s; }
.bottle__bubble:nth-child(4) { animation-delay: 2.0s; }

/* Tracker bar fill (slides from 0 → final width) */
@keyframes barFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Orbit pills drift around the phone.
   Phase 4: 10px Y-drift -> 6px (calmer, less bouncy). */
@keyframes pillFloat {
  0%, 100% { transform: translate(0, 0);   }
  50%      { transform: translate(0, -6px); }
}

/* Toast slide-in / slide-out */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0)     scale(1);   }
  to   { opacity: 0; transform: translateY(-8px)  scale(0.94); }
}

/* =============================================================
   PHASE 5 — HERO TEXT EFFECTS
   Word reveal (stagger), scramble settle flicker, magnetic
   glow pulse, headline scroll parallax (transform on rAF).
   ============================================================= */

/* Each hero word: blur + lift into place */
@keyframes heroWordIn {
  0%   {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(10px);
  }
  60%  { filter: blur(0); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}
/* `.is-revealed` is toggled by hero-effects.js once the
   IntersectionObserver fires; the .hero-word base state stays
   pre-reveal until then. */

/* Scramble cursor blink (the cycling chars before settle) */
@keyframes scrambleBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Magnetic CTA hover glow ring (expanding from center) */
@keyframes magneticRing {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0;   }
}

/* =============================================================
   PHASE 6 — STATS / FEATURES / HOW-IT-WORKS
   Stat celebrate, feature spark swipe, step node pop,
   steps line draw, icon wave bounce.
   ============================================================= */

/* Tiny celebrate pop when a stat counter finishes */
@keyframes statCelebrate {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.10); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1);    }
}

/* Stat bottom-bar reveal */
@keyframes statBarFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Feature spark: radial gradient that follows the cursor */
@keyframes featureSparkShow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Step node: outer ring expands once on view */
@keyframes stepRingOut {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0;   }
}

/* Step node pulse while not yet reached (idle attention) */
@keyframes stepIdlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(215, 255, 63, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(215, 255, 63, 0);  }
}

/* Feature card icon wobble on hover */
@keyframes iconPop {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1);    }
}

/* =============================================================
   PHASE 7 — TESTIMONIALS MARQUEE
   Track scroll, quote-mark draw, avatar pop, star fill.
   ============================================================= */

/* Marquee: translate -50% so the duplicated track makes a seamless loop.
   Speed is set by the JS-injected custom property --marquee-duration. */
@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marqueeScrollReverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Quote SVG: subtle draw-in once on view */
@keyframes quoteDraw {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0);    }
}

/* Avatar pop when card enters viewport */
@keyframes avatarPop {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}

/* Star rating twinkles in one-by-one */
@keyframes starPop {
  0%   { transform: scale(0)   rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(15deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}

/* Subtle floating bob for the whole card (after reveal) */
@keyframes cardBob {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-4px); }
}

/* =============================================================
   PHASE 8 — APP DEMO PRODUCT TOUR
   4 step screens, callout stagger, scan line, ECG heart, ring fill.
   ============================================================= */

/* Tour screen enter: fade + slide up */
@keyframes tourScreenIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}

/* Tour callout: number reveal, then text stagger */
@keyframes tourCalloutIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0,    0); filter: blur(0);   }
}

/* Tour tab dot: scale in when active */
@keyframes tourTabDot {
  0%   { transform: scaleX(0);    opacity: 0; }
  100% { transform: scaleX(1);    opacity: 1; }
}

/* Scan-line sweep across the viewfinder */
@keyframes tourScanLine {
  0%   { transform: translate3d(0, 0,    0); }
  50%  { transform: translate3d(0, 100%, 0); }
  100% { transform: translate3d(0, 0,    0); }
}

/* Live recording dot in workout screen */
@keyframes tourLiveDot {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.3; transform: scale(0.85); }
}

/* ECG line redraws continuously */
@keyframes tourEcgDraw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0;   }
}

/* Heart icon: lub-dub beat */
@keyframes tourHeartBeat {
  0%, 100% { transform: scale(1);    }
  20%      { transform: scale(1.18); }
  40%      { transform: scale(1);    }
  60%      { transform: scale(1.10); }
  80%      { transform: scale(1);    }
}

/* Progress ring fill from 0 to --p (set inline) */
@keyframes tourRingFill {
  from { stroke-dashoffset: 201; }
  to   { stroke-dashoffset: calc(201 - (201 * var(--p, 84)) / 100); }
}

/* Small stat bar fill (subset of stat) */
@keyframes tourBarFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* =============================================================
   PHASE 8 — ARABIC FOOD MARQUEE
   Same seamless loop pattern as testimonials, but for food pills.
   ============================================================= */

@keyframes foodMarqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes foodMarqueeScrollReverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Food card: subtle vertical bob while scrolling */
@keyframes foodCardBob {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-3px); }
}

/* Food card hover glow ring (driven by --c and --i) */
@keyframes foodCardGlow {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

/* =============================================================
   PHASE 8 — RAMADAN MODE
   24h clock arcs, crescent moon, toggle pill, stat swap.
   ============================================================= */

/* Toggle pill slides between Normal/Ramadan */
@keyframes ramadanPillSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}

/* Clock ring entrance: scale + rotate in */
@keyframes ramadanClockIn {
  from { opacity: 0; transform: scale(0.85) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1)    rotate(0);     }
}

/* Arc segments draw in sequentially when mode changes */
@keyframes ramadanArcDraw {
  from { stroke-dashoffset: 200; opacity: 0.2; }
  to   { stroke-dashoffset: 0;   opacity: 1;   }
}

/* Crescent moon: gentle glow pulse */
@keyframes ramadanCrescentGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(215, 255, 63, 0.4)); }
  50%      { filter: drop-shadow(0 0 14px rgba(215, 255, 63, 0.9)); }
}

/* Crescent fade in/out as mode changes */
@keyframes ramadanCrescentIn {
  from { opacity: 0; transform: rotate(-90deg) scale(0.5); }
  to   { opacity: 1; transform: rotate(0)      scale(1);   }
}

/* Time text crossfade */
@keyframes ramadanTimeIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}

/* Stat swap (used when toggling modes) */
@keyframes ramadanStatSwap {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0); filter: blur(4px); }
  100% { opacity: 1; transform: translate3d(0, 0,   0); filter: blur(0);   }
}

/* Star sparkle in the bottom CTA */
@keyframes ramadanStarTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.9) rotate(0);    }
  50%      { opacity: 1;   transform: scale(1.15) rotate(180deg); }
}

/* =============================================================
   PHASE 8.5 — SCAN MODES (food / label / barcode)
   Barcode laser vertical sweep, nutrition-label slide-in,
   result-card crossfade on mode change.
   ============================================================= */

/* Barcode red laser sweeps top → bottom → top inside the SVG */
@keyframes barcodeLaser {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(120px); }
  100% { transform: translateX(0); }
}

/* Nutrition label: small slide up + fade in */
@keyframes labelIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0,  0) scale(1);    }
}

/* Result card swap on mode change */
@keyframes resultSwap {
  0%   { opacity: 0; transform: translate3d(0, 6px, 0); filter: blur(3px); }
  100% { opacity: 1; transform: translate3d(0, 0,   0); filter: blur(0);   }
}
