/* ==========================================================================
   animations.css — scroll reveals, micro-interactions, keyframes
   JS adds .is-in when an element scrolls into view (Intersection Observer).
   GSAP enhances where present; this file is the graceful baseline.
   ========================================================================== */

/* Base reveal: hidden until observed */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-in { transform: none; }

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1){ transition-delay: .04s; }
[data-stagger].is-in > *:nth-child(2){ transition-delay: .12s; }
[data-stagger].is-in > *:nth-child(3){ transition-delay: .20s; }
[data-stagger].is-in > *:nth-child(4){ transition-delay: .28s; }
[data-stagger].is-in > *:nth-child(5){ transition-delay: .36s; }
[data-stagger].is-in > *:nth-child(6){ transition-delay: .44s; }
[data-stagger].is-in > *:nth-child(7){ transition-delay: .52s; }
[data-stagger].is-in > *:nth-child(8){ transition-delay: .60s; }

/* Hero load sequence */
.hero [data-hero] { opacity: 0; transform: translateY(30px); animation: heroIn 1s var(--ease-out) forwards; }
.hero [data-hero="1"]{ animation-delay: .15s; }
.hero [data-hero="2"]{ animation-delay: .28s; }
.hero [data-hero="3"]{ animation-delay: .41s; }
.hero [data-hero="4"]{ animation-delay: .54s; }
.hero [data-hero="5"]{ animation-delay: .67s; }
.hero-media .frame { opacity: 0; transform: translateY(40px) scale(.97); animation: heroMediaIn 1.2s var(--ease-out) .35s forwards; }
.hero-badge { opacity: 0; animation: fadeIn .8s ease .95s forwards; }

@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroMediaIn { to { opacity: 1; transform: none; } }
@keyframes fadeIn { to { opacity: 1; } }

/* Parallax target — JS sets --py */
[data-parallax] { transition: transform .1s linear; will-change: transform; }

/* Counter pop */
.counted { animation: countPop .5s var(--ease-out); }
@keyframes countPop { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Underline sweep used on links handled in main.css */

/* Marquee logos / trust ticker */
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; gap: 3.5rem; width: max-content; animation: scrollX 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* Mobile nav drawer */
.nav-drawer { position: fixed; inset: 0; z-index: 1050; background: var(--paper); transform: translateX(100%); transition: transform .5s var(--ease); display: flex; flex-direction: column; padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem; visibility: hidden; }
.nav-drawer.is-open { transform: none; visibility: visible; }
.nav-drawer a { font-family: var(--display); font-size: 1.6rem; color: var(--navy); padding: .85rem 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.nav-drawer.is-open a { opacity: 1; transform: none; }
.nav-drawer.is-open a:nth-child(1){ transition-delay: .12s; }
.nav-drawer.is-open a:nth-child(2){ transition-delay: .17s; }
.nav-drawer.is-open a:nth-child(3){ transition-delay: .22s; }
.nav-drawer.is-open a:nth-child(4){ transition-delay: .27s; }
.nav-drawer.is-open a:nth-child(5){ transition-delay: .32s; }
.nav-drawer.is-open a:nth-child(6){ transition-delay: .37s; }
.nav-drawer.is-open a:nth-child(7){ transition-delay: .42s; }
.nav-drawer .drawer-cta { margin-top: auto; display: grid; gap: .75rem; opacity: 0; transition: opacity .5s ease .45s; }
.nav-drawer.is-open .drawer-cta { opacity: 1; }
body.nav-open { overflow: hidden; }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--green), var(--brown)); z-index: 1200; }

/* Page transition veil */
.page-veil { position: fixed; inset: 0; background: var(--navy); z-index: 3000; transform: translateY(100%); pointer-events: none; }
.page-veil.in { animation: veilIn .5s var(--ease) forwards; }
.page-veil.out { transform: translateY(0); animation: veilOut .6s var(--ease) forwards; }
@keyframes veilIn { to { transform: translateY(-100%); } }
@keyframes veilOut { to { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > *, .hero [data-hero], .hero-media .frame, .hero-badge { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ticker-track { animation: none; }
  .scroll-progress, .page-veil { display: none; }
}