/* InfuseAI · Daybreak — atmosphere + motion layer (loaded after styles.css)
 * film grain · dawn glow · cinematic reveals · line-mask headlines · parallax
 * magnetic buttons · scroll progress · intro curtain. All reduced-motion safe.
 */

/* ============================================================= film grain */
.grain {
  position: fixed; inset: -60%; width: 220%; height: 220%;
  pointer-events: none; z-index: 60; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(4) infinite;
  mix-blend-mode: soft-light;
}
@keyframes grain {
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,2%)}
}

/* ============================================================= scroll progress */
.progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--color-gold), var(--color-accent));
  transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* ============================================================= intro curtain */
.intro {
  position: fixed; inset: 0; z-index: 200; background: var(--color-paper);
  display: grid; place-items: center;
  transition: transform 900ms var(--ease-in-out), visibility 0s 900ms;
  animation: introBackstop 0.01s linear 2.8s forwards;   /* lifts even if JS never runs */
}
@keyframes introBackstop { to { transform: translateY(-101%); visibility: hidden; } }
.intro__wm {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: -.02em; color: var(--color-ink);
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.intro__wm span { color: var(--color-accent-2); }
.intro.is-lit .intro__wm { opacity: 1; transform: none; }
.intro.is-done { transform: translateY(-101%); visibility: hidden; }

/* ============================================================= cinematic reveals */
/* dreamy: rise + fade + de-blur. Only under .js (no-JS shows everything) */
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(9px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out), filter .95s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }

/* per-row stagger inside grouped sections */
.js .steps.is-in .step:nth-child(2), .js .stats.is-in .stat:nth-child(2) { transition-delay: .09s; }
.js .steps.is-in .step:nth-child(3), .js .stats.is-in .stat:nth-child(3) { transition-delay: .18s; }
.js .sys { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .systems__list.is-in .sys { opacity: 1; transform: none; }
.js .systems__list.is-in .sys:nth-child(2){transition-delay:.07s}
.js .systems__list.is-in .sys:nth-child(3){transition-delay:.14s}
.js .systems__list.is-in .sys:nth-child(4){transition-delay:.21s}

/* ============================================================= line-mask headlines */
.mask .line { display: block; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.js .mask .ln { display: block; transform: translateY(115%); transition: transform 1s var(--ease-out); }
.js .mask.is-in .ln, .js .hero.hero-in .mask .ln { transform: translateY(0); }
.js .mask .line:nth-child(2) .ln { transition-delay: .1s; }
.js .mask .line:nth-child(3) .ln { transition-delay: .2s; }

/* ============================================================= hero staged entrance */
.js .hero .kicker, .js .hero__sub, .js .hero__cta, .js .hero__scroll {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--ease-out) var(--_d,0s), transform .8s var(--ease-out) var(--_d,0s);
}
.js .hero.hero-in .kicker { --_d:.15s; opacity: 1; transform: none; }
.js .hero.hero-in .hero__sub { --_d:.5s; opacity: 1; transform: none; }
.js .hero.hero-in .hero__cta { --_d:.65s; opacity: 1; transform: none; }
.js .hero.hero-in .hero__scroll { --_d:1s; opacity: .9; transform: none; }
/* gold underline drawing under hero kicker */
.hero .kicker { position: relative; }
.hero .kicker::after { content:""; position:absolute; inset-inline-start:0; inset-block-end:-6px; height:2px; width:100%;
  background: var(--color-gold); transform: scaleX(0); transform-origin:left; transition: transform .7s var(--ease-out) .4s; }
.js .hero.hero-in .kicker::after { transform: scaleX(1); }

/* ============================================================= parallax media */
/* media children sit slightly oversized so they can drift without exposing edges */
.hero__media video,
.subhero__media img, .subhero__media video,
.life__media img, .life__media video,
.offer__media img, .offer__media video,
.close__media img, .close__media video {
  top: -7%; height: 114%; will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  [data-parallax] { transition: transform 80ms linear; }
}

/* cinematic vignette on full-bleed media */
.hero::after, .offer::after, .close::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  box-shadow: inset 0 0 180px 40px oklch(16% .02 60 / .45);
}
.offer::after { border-radius: var(--radius-lg); }
.hero .wrap, .hero__scroll { position: relative; z-index: 3; }
.offer__inner, .offer__veil { position: relative; z-index: 2; }
.close .wrap, .close__veil { position: relative; z-index: 2; }

/* ============================================================= dawn glow atmosphere */
/* soft warm light blooms behind light sections — single hue, low opacity (not aurora mesh) */
.glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(70px); opacity: .5; }
.glow--gold { background: radial-gradient(circle, var(--glow-gold), transparent 68%); }
.glow--teal { background: radial-gradient(circle, var(--glow-teal), transparent 70%); }
.section, .process, .trust { position: relative; }
.section > .wrap, .process > .wrap { position: relative; z-index: 1; }

/* gold hairline that draws across between select sections */
.seam { height: 1px; background: var(--color-rule); position: relative; overflow: hidden; }
.seam::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  transform: translateX(-100%); }
.js .seam.is-in::before { animation: seam 1.6s var(--ease-out) forwards; }
@keyframes seam { to { transform: translateX(100%); } }

/* ============================================================= magnetic buttons + hover shine */
.btn { position: relative; overflow: hidden; will-change: transform; }
.btn::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, oklch(100% 0 0 / .28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out); }
.btn:hover::before { transform: translateX(120%); }

/* systems row: accent bar grows on hover */
.sys { position: relative; }
.sys::before { content:""; position:absolute; inset-block:18% ; inset-inline-start:-2px; width:2px; background: var(--color-accent);
  transform: scaleY(0); transform-origin:center; transition: transform .35s var(--ease-out); }
.sys:hover::before { transform: scaleY(1); }
.sys:hover .sys__name .idx { color: var(--color-gold); }

/* nav: refined hide-on-scroll-down */
.nav { transition: transform .5s var(--ease-out); }
.nav.nav--hidden { transform: translateY(-140%); }

/* ============================================================= hero montage (crossfade + ken-burns) */
.hero__montage { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--plate-dawn); background-size: cover; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s var(--ease-in-out); will-change: opacity; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img, .hero__slide video { position: absolute; inset: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide video { opacity: 0; transition: opacity .8s var(--ease-out); }
.hero__slide.is-active video.is-playing { opacity: 1; }               /* video fades over its own poster once playing */
/* ken-burns: alternate drift direction per slide for variety */
.hero__slide.is-active img, .hero__slide.is-active video { animation: kenA 6.5s var(--ease-out) forwards; }
.hero__slide.is-active:nth-child(even) img, .hero__slide.is-active:nth-child(even) video { animation-name: kenB; }
@keyframes kenA { from { transform: scale(1.02); } to { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); } }
@keyframes kenB { from { transform: scale(1.13) translate3d(1.4%, 1%, 0); } to { transform: scale(1.02); } }
/* mobile: a 16:9 clip in a tall phone frame crops hard — soften the ken-burns zoom so more of each
   scene shows, and pull the framing up so faces/subjects stay in view rather than the dead-center crop */
@media (max-width: 640px) {
  .hero__slide img, .hero__slide video { object-position: center 45%; }
  .hero__slide.is-active img, .hero__slide.is-active video { animation-name: kenMobileA; animation-duration: 7.5s; }
  .hero__slide.is-active:nth-child(even) img, .hero__slide.is-active:nth-child(even) video { animation-name: kenMobileB; }
}
@keyframes kenMobileA { from { transform: scale(1); } to { transform: scale(1.05) translate3d(-1%, -0.8%, 0); } }
@keyframes kenMobileB { from { transform: scale(1.05) translate3d(1%, 0.6%, 0); } to { transform: scale(1); } }

/* ============================================================= reduced motion / no-js kill switch */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .intro { display: none; }
  .js .reveal, .js .sys { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .mask .ln { transform: none !important; }
  .js .hero .kicker, .js .hero__sub, .js .hero__cta, .js .hero__scroll { opacity: 1 !important; transform: none !important; }
  .hero .kicker::after, .js .seam.is-in::before { transition: none; animation: none; }
  .hero__media video, .subhero__media img, .subhero__media video, .life__media img, .life__media video, .offer__media img, .offer__media video,
  .close__media img, .close__media video { top: 0; height: 100%; }
  .hero::after, .offer::after, .close::after { box-shadow: inset 0 0 120px 30px oklch(16% .02 60 / .35); }
}