/* =========================================================================
   PHC London — Aurora Motion  ·  Motion layer
   Decorative chrome (grain, scroll progress, intro curtain) and the
   scroll-reveal initial states. Everything here degrades safely:
   - No JS .......... nothing is hidden, no curtain.
   - JS, no GSAP .... aurora.js flips html.aur-failsafe -> content shown at once.
   - aurora.js fails  a 4s inline timer flips html.aur-failsafe as a safety net.
   - reduced-motion . initial-hidden states never apply; animations are cut.
   ========================================================================= */

/* ---------- Film grain ---------- */
.aur-grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url(../img/grain.svg); background-size: 300px 300px; }
html.aur-js .aur-grain { animation: aur-grain 7s steps(6) infinite; }
@keyframes aur-grain {
	0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-4%); }
	60% { transform: translate(-3%,-2%); } 80% { transform: translate(4%,2%); } 100% { transform: translate(0,0); }
}

/* ---------- Scroll progress ---------- */
.aur-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1300; pointer-events: none; background: transparent; }
.aur-progress__bar { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--aur-emerald), var(--aur-gold)); }
html:not(.aur-js) .aur-progress { display: none; }

/* ---------- Intro curtain ---------- */
.aur-preloader { display: none; }
html.aur-js:not(.aur-reduced) .aur-preloader {
	display: grid; place-items: center; position: fixed; inset: 0; z-index: 1800;
	background: var(--aur-bg); overflow: hidden;
}
.aur-preloader__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.aur-preloader__crest img { width: 84px; height: 84px; opacity: .95; }
.aur-preloader__name { font-family: var(--aur-display); font-size: clamp(1.2rem, 3vw, 1.9rem); color: var(--aur-cream); letter-spacing: .01em; max-width: 22ch; }
.aur-preloader__count { position: absolute; right: clamp(1.2rem, 5vw, 3rem); bottom: clamp(1.2rem, 5vw, 3rem); z-index: 2; font-family: var(--aur-sans); font-size: clamp(2rem, 7vw, 4rem); line-height: 1.15; color: var(--aur-gold); font-variant-numeric: tabular-nums; }
.aur-preloader__count i { font-style: normal; }
.aur-preloader__curtain { position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, var(--aur-green) , var(--aur-green-deep)); transform: scaleY(0); transform-origin: bottom; }
html.aur-preload-done .aur-preloader { display: none; }

/* ---------- Reveal initial states (armed only with JS + motion + not failsafe) ---------- */
html.aur-js:not(.aur-reduced):not(.aur-failsafe) [data-reveal],
html.aur-js:not(.aur-reduced):not(.aur-failsafe) [data-stagger] > * {
	opacity: 0; transform: translateY(34px); will-change: transform, opacity;
}
html.aur-js:not(.aur-reduced):not(.aur-failsafe) [data-split] { opacity: 0; }
/* Split fragments injected by aurora.js */
/* The mask is overflow:hidden, so it must include room below the baseline or it
   crops descenders (g, y, p, comma). Pad the bottom and pull it back with a
   negative margin so line spacing is unchanged; aurora.js hides the word fully
   below this taller box before revealing it. */
.aur-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.aur-word > span { display: inline-block; will-change: transform; }

/* ---------- Marquee (CSS-driven, JS only tunes/pauses) ---------- */
.aur-marquee { display: flex; overflow: hidden; }
.aur-marquee__row { display: inline-flex; flex: none; white-space: nowrap; align-items: center; will-change: transform; }
html.aur-js:not(.aur-reduced) .aur-marquee__row { animation: aur-marquee var(--aur-marquee-dur, 38s) linear infinite; }
.aur-marquee:hover .aur-marquee__row { animation-play-state: paused; }
@keyframes aur-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero aurora drift ---------- */
html.aur-js:not(.aur-reduced) .aur-hero__aurora { animation: aur-drift 18s ease-in-out infinite alternate; }
@keyframes aur-drift {
	0%   { transform: translate3d(0,0,0) scale(1); }
	50%  { transform: translate3d(3%,-2%,0) scale(1.08); }
	100% { transform: translate3d(-2%,2%,0) scale(1.04); }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.aur-hero__slide { transition: opacity .2s linear; }
	.aur-grain, .aur-preloader, .aur-hero__scroll-line::after, .aur-ticker__pulse::after { display: none !important; }
	.aur-marquee__row { animation: none !important; }
}
html.aur-reduced .aur-grain, html.aur-reduced .aur-preloader { display: none !important; }