/* ==========================================================================
   AMEYRA GLOBAL — Animations Stylesheet
   Motion language: Fade · Reveal · Draw · Flow · Expansion (never bounce/spin)
   These define the *initial* states; GSAP/IO drives them to resolved states.
   ========================================================================== */

/* Base reveal — fade + 20px rise, 600ms */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-flow), transform 0.8s var(--ease-flow);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-flow), transform 0.7s var(--ease-flow);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 0.56s; }

/* Scale-in for media */
.reveal-scale {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s var(--ease-flow), transform 1.2s var(--ease-flow);
}
.reveal-scale.is-in { opacity: 1; transform: scale(1); }

/* Clip reveal for images (engineering wipe) */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-precise);
}
.reveal-clip.is-in { clip-path: inset(0 0 0 0); }

/* Hero text line reveal */
.hero-title .ln span {
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-flow);
}
.hero-title.is-in .ln:nth-child(1) span { transition-delay: 0.05s; }
.hero-title.is-in .ln:nth-child(2) span { transition-delay: 0.18s; }
.hero-title.is-in .ln:nth-child(3) span { transition-delay: 0.31s; }
.hero-title.is-in .ln span { transform: translateY(0); }

.hero-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease-flow), transform 0.9s var(--ease-flow);
}
.hero-fade.is-in { opacity: 1; transform: none; }
.hero-fade.d1 { transition-delay: 0.35s; }
.hero-fade.d2 { transition-delay: 0.48s; }
.hero-fade.d3 { transition-delay: 0.60s; }

/* Authentic logo symbol — reveal (clip wipe + fade), since it is filled artwork */
.real-mark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.8s var(--ease-flow), clip-path 1.4s var(--ease-precise);
}
.draw-on .real-mark,
.real-mark.is-in { opacity: 1; clip-path: inset(0 0 0 0); }

/* SVG draw animation (logo mark) */
.mark-arc {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.draw-on .mark-arc { animation: drawArc 1.8s var(--ease-precise) forwards; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }

.mark-fold { opacity: 0; transform-origin: 30px 53px; transform: scale(0.4) rotate(-8deg); }
.draw-on .mark-fold-1 { animation: foldIn 0.7s var(--ease-flow) 0.9s forwards; }
.draw-on .mark-fold-2 { animation: foldIn 0.7s var(--ease-flow) 1.05s forwards; }
.draw-on .mark-fold-3 { animation: foldIn 0.7s var(--ease-flow) 1.2s forwards; }
@keyframes foldIn { to { opacity: 1; transform: scale(1) rotate(0); } }

/* Gentle continuous rotation for the hero rings */
.spin-slow { animation: spinSlow 60s linear infinite; }
.spin-rev { animation: spinSlow 90s linear infinite reverse; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Floating chips */
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty.f2 { animation-duration: 7.5s; animation-delay: -2s; }
.floaty.f3 { animation-duration: 8.5s; animation-delay: -4s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Scroll-indicator pulse */
.hero-scroll .line { transform-origin: top; animation: scrollPulse 2.4s var(--ease-flow) infinite; }
@keyframes scrollPulse {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Count-up helper hidden state handled in JS; ensure no layout shift */
.stat-num { font-variant-numeric: tabular-nums; }

/* Link arrow nudge on hover handled in components; keyframe for CTA ring */
.cta-banner::after { animation: breathe 9s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Image parallax wrapper */
.parallax-media { overflow: hidden; }
.parallax-media img { will-change: transform; }