/* neil-scene.css - scroll-driven scenes (from the weblance.studios "Find Real Estate" before/after reel, 2026-10-27).
   A page you scroll THROUGH, not past: a pinned stage whose layers move at different speeds, a subject that rises out of fog,
   a giant wordmark behind it, words that swap and glow as you scroll, photos that float at different depths, a band that grows to full bleed.
   Pairs with neil-scene.js (it writes the progress vars). Opt in with attributes. Compositor-only: transform + opacity, never layout.

   <section data-scene="280">                  pinned scene, 280 = scroll length in vh
     <div data-stage>                          sticky 100dvh viewport
       <div data-layer="-14">...</div>         parallax: drifts d vh over the scene (negative = up)
       <div data-wordmark>FIND</div>           giant type behind the subject: grows + fades as you scroll
       <div data-fog></div>                    cloud/haze layer: drifts sideways, thins out
       <img data-rise>                         subject rises from below into place (eased)
       <p data-swap><span>Sell</span><span>Rent</span><span>Buy</span></p>   the active word glows, the rest dim
     </div>
   </section>
   data-float="8"        any element: drifts d vh while it crosses the screen (depth). Give photos different numbers.
   data-bandzoom         a band grows from an inset rounded card to full bleed as it scrolls into view
   data-depth="12"       inside a [data-stage] or [data-tilt]: shifts with the cursor (mouse only), px per unit
   data-ns-off           on <html> or any section: turn the auto image drift off there
   Palette helper: .ns-paper (warm paper bg, ink text) and --ns-accent. 60% base / 30% ink / 10% accent (the 3-color rule).
   No JS or reduced motion: scenes collapse to their finished frame (no pinning, no movement). */
:root{
  --ns-paper:#faf8f5; --ns-ink:#141414; --ns-accent:#ff8a3d; --ns-glow:rgba(255,160,90,.55);
  --ns-ease:cubic-bezier(.22,1,.36,1);
}
/* finished frame is the default; the JS only takes over when it is allowed to move things */
[data-scene],[data-float],[data-bandzoom],[data-stage]{--p:1;--e:1;--v:0;--tx:0;--ty:0}
.ns-paper{background:var(--ns-paper);color:var(--ns-ink)}

@media (prefers-reduced-motion:no-preference){
  html.ns-on [data-scene]{position:relative;height:calc(var(--len,260)*1vh)}
  html.ns-on [data-stage]{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;contain:layout paint}
  html.ns-on [data-scene] [data-stage]{--p:0;--e:0}  /* the JS overwrites these inline every frame the scene is on screen */

  /* parallax layer */
  html.ns-on [data-layer]{will-change:transform;transform:translate3d(0,calc(var(--p)*var(--d,0)*1vh),0)}
  /* giant wordmark: sits behind the subject, swells and thins as you move on */
  html.ns-on [data-wordmark]{will-change:transform,opacity;transform-origin:50% 60%;
    transform:translate3d(0,calc(var(--e)*-6vh),0) scale(calc(1 + var(--e)*.22));opacity:calc(1 - var(--p)*.85)}
  /* fog: slides sideways and thins */
  html.ns-on [data-fog]{will-change:transform,opacity;transform:translate3d(calc(var(--p)*var(--dx,10)*1vw),calc(var(--p)*-3vh),0) scale(1.15);opacity:calc(.95 - var(--p)*.55)}
  /* subject rises from low and settles (the --e ramp is eased in JS) */
  html.ns-on [data-rise]{will-change:transform;transform-origin:50% 100%;
    transform:translate3d(0,calc((1 - var(--e))*var(--from,34)*1vh),0) scale(calc(.9 + var(--e)*.1))}
  /* cursor parallax layers */
  html.ns-on [data-depth]{will-change:transform;transform:translate3d(calc(var(--tx)*var(--k,1)*1px),calc(var(--ty)*var(--k,1)*1px),0)}
  html.ns-on [data-rise][data-depth]{transform:translate3d(calc(var(--tx)*var(--k,1)*1px),calc((1 - var(--e))*var(--from,34)*1vh + var(--ty)*var(--k,1)*1px),0) scale(calc(.9 + var(--e)*.1))}

  /* swapping words: all visible, the active one is lit */
  html.ns-on [data-swap]{display:grid;gap:.1em;justify-items:start}
  html.ns-on [data-swap]>*{opacity:.22;transform:translate3d(-.18em,0,0) scale(.96);transform-origin:0 50%;
    text-shadow:0 0 .5em var(--ns-glow);transition:opacity 420ms var(--ns-ease),transform 520ms var(--ns-ease)}
  html.ns-on [data-swap]>.ns-on{opacity:1;transform:none}

  /* floating photos: depth drift (--v runs -1..1 while the element crosses the screen) */
  html.ns-on [data-float]{will-change:transform;transform:translate3d(0,calc(var(--v)*var(--f,8)*1vh),0)}

  /* band that grows to full bleed */
  html.ns-on [data-bandzoom]{will-change:transform;transform-origin:50% 50%;border-radius:calc((1 - var(--e))*28px);overflow:hidden;
    transform:scale(calc(.74 + var(--e)*.26))}
  html.ns-on [data-bandzoom]>img,html.ns-on [data-bandzoom]>video{transform:scale(calc(1.18 - var(--e)*.18));will-change:transform}

  /* auto image drift (set by the JS on cover images inside overflow:hidden frames) */
  html.ns-on img.ns-drift{will-change:transform;transform:translate3d(0,calc(var(--v)*-4.5%),0) scale(1.12)}
}