/* Spotlight Engine base styles: structure the engine relies on. Colors, fonts and layout come from
   the chosen LOOK (references/looks/). Override the --sp-* variables in the page's own :root. */
:root{
  --sp-bg:#0A0A0B; --sp-ink:#F3EADB; --sp-accent:#FF2E93; --sp-line:rgba(243,234,219,.14);
  --sp-grain:.06; --sp-hdr:76px; --sp-gutter:clamp(16px,3.2vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--sp-bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--sp-bg);color:var(--sp-ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* films: tall scroll driver + sticky stage + canvas */
.film{position:relative}
.film .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--sp-bg)}
.film canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shade{position:absolute;inset:0;pointer-events:none}
.fade-top{background:linear-gradient(to bottom,var(--sp-bg) 0%,transparent 45%)}
.fade-bot{background:linear-gradient(to top,var(--sp-bg) 0%,transparent 60%);opacity:0}

/* beats: hidden until the engine fades them in (visible without JS) */
[data-in]{opacity:0;will-change:opacity,transform}
.no-js [data-in]{opacity:1}
.slot{position:absolute;inset:0;display:flex;align-items:center;padding:var(--sp-hdr) var(--sp-gutter) 0;pointer-events:none}
.slot.right{justify-content:flex-end;text-align:right}
.slot.bottom{align-items:flex-end;padding-bottom:6vh}
.live{pointer-events:auto}

/* split letters */
.ch{display:inline-block;will-change:transform,opacity}
.ch>i{display:inline-block;font-style:normal}
[data-split] em{font-style:normal}
[data-fit]{white-space:nowrap}
[data-fit] .ln{white-space:nowrap}
@media (max-width:760px){[data-fit]{white-space:normal}[data-fit] .ln{display:block}}

/* marquee, words, tilt */
[data-marquee]{white-space:nowrap;will-change:transform}
[data-marquee] .track{display:inline-block;will-change:transform}
[data-words] .w{display:inline-block}
.tilt{transform:translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s cubic-bezier(.2,.8,.2,1)}

/* chrome */
[data-progress]{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--sp-accent);transform-origin:left;transform:scaleX(0)}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:var(--sp-grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:sp-grain 1.2s steps(6) infinite}
@keyframes sp-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
#loader{position:fixed;inset:0;z-index:100;background:var(--sp-bg);transition:opacity .9s ease,visibility .9s}
#loader.done{opacity:0;visibility:hidden}
[data-loader-bar]{transform-origin:left;transform:scaleX(0)}
[data-readout-bar]{transform-origin:left;transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){.grain{animation:none}}