/* EmTech Oil V2 — scroll-scene layer.
   Scrubbed scenes: every element with [data-scrub] gets a live --p (0→1) as it
   travels the viewport; CSS below consumes it. Horizontal pinned tracks, section
   tinting, per-word reveals and a section rail live here too. */

/* ------------------------------------------------------------- hero exit */
/* Scenes that REDUCE opacity are gated behind html.scenes-live, which the engine
   adds only once it has confirmed it is running. If the driver never starts, the
   static fallback is the fully-visible state — a stalled engine cannot hide content. */
[data-hero-exit]{--p:0}
.scenes-live .hx-copy{transform:translate3d(0,calc(var(--p) * -110px),0);opacity:calc(1 - var(--p) * 1.25);will-change:transform,opacity}
.scenes-live .hx-art{transform:translate3d(0,calc(var(--p) * -46px),0) scale(calc(1 + var(--p) * .07));opacity:calc(1 - var(--p) * .85);will-change:transform,opacity}
.hx-scan{transform:translate3d(0,calc(var(--p) * 90px),0);opacity:calc(1 - var(--p) * .7)}
.hx-field{transform:translate3d(0,calc(var(--p) * 130px),0) scale(calc(1 + var(--p) * .12))}
.scenes-live .hx-stats{transform:translate3d(0,calc(var(--p) * -26px),0);opacity:calc(1 - var(--p) * .9)}

/* -------------------------------------------------------- generic scrubs */
.scenes-live .sc-rise{transform:translate3d(0,calc((1 - var(--p,0)) * 60px),0);opacity:var(--p,0)}
.scenes-live .sc-slide-l{transform:translate3d(calc((1 - var(--p,0)) * -70px),0,0);opacity:var(--p,0)}
.scenes-live .sc-slide-r{transform:translate3d(calc((1 - var(--p,0)) * 70px),0,0);opacity:var(--p,0)}
/* Ken Burns: scale only. Never dims — a half-opacity photo reads as a broken image. */
.sc-zoom{transform:scale(calc(1.1 - var(--p,0) * .1));transform-origin:50% 42%;will-change:transform}
.sc-para-up{transform:translate3d(0,calc(var(--p,0) * -70px),0)}
.sc-para-dn{transform:translate3d(0,calc(var(--p,0) * 70px),0)}
.sc-grow{width:calc(var(--p,0) * 100%)}
[data-scrub]{--p:0}

/* ------------------------------------------------------ per-word reveal */
.w-split{display:inline}
.w-split .w{display:inline-block;overflow:hidden;vertical-align:top}
.w-split .w>i{display:inline-block;font-style:normal;transform:translateY(105%);opacity:0;transition:transform .75s var(--v2-ease),opacity .5s ease}
.w-split .w.on>i{transform:none;opacity:1}

/* --------------------------------------------- horizontal pinned track */
.hs{position:relative}
.hs-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.hs-track{display:flex;flex:1;will-change:transform;align-items:stretch;padding:clamp(118px,16vh,186px) 0 clamp(88px,13vh,132px)}
.hs-panel{flex:0 0 auto;width:min(88vw,1020px);display:grid;align-content:center;gap:30px;padding:0 clamp(24px,5vw,72px);border-right:1px solid var(--v2-hair)}
@media(min-width:900px){.hs-panel{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,5vw,72px);padding-right:clamp(64px,8vw,132px)}}
.hs-head{position:absolute;left:0;right:0;top:0;z-index:3;pointer-events:none}
.hs-head-in{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(90px,11vh,132px) 0 0}
.hs-rail{position:absolute;left:0;right:0;bottom:clamp(24px,5vh,48px);z-index:3}
.hs-rail-in{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap}
.hs-dot{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.42);background:none;border:0;padding:0;cursor:pointer;transition:color .3s}
.hs-dot i{display:block;width:26px;height:2px;background:rgba(255,255,255,.2);font-style:normal;transition:background .3s,width .4s var(--v2-ease)}
.hs-dot.on{color:#fff}
.hs-dot.on i{background:var(--copper-500);width:46px}
.hs-dot:hover{color:rgba(255,255,255,.8)}
.hs-progress{height:1px;background:rgba(255,255,255,.14);margin-top:18px;position:relative;overflow:hidden}
.hs-progress i{position:absolute;inset:0 auto 0 0;display:block;background:var(--copper-500);width:calc(var(--p,0) * 100%)}
.hs-vessel{display:flex;align-items:flex-end;justify-content:center;min-height:clamp(180px,34vh,330px);gap:clamp(8px,1.6vw,20px)}
.hs-vessel i{display:block;border-radius:4px;background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid var(--v2-hair-2);transition:background .5s,border-color .5s,transform .7s var(--v2-ease);transform:translateY(14px);opacity:.5}
.hs-panel.on .hs-vessel i{transform:none;opacity:1}
.hs-vessel i.lit{background:linear-gradient(165deg,var(--copper-400),var(--copper-700));border-color:var(--copper-400);box-shadow:0 18px 50px -14px rgba(230,140,25,.55)}
.hs-n{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-400)}
.hs-title{font-family:var(--font-display);font-weight:500;letter-spacing:-.032em;line-height:1.02;font-size:clamp(30px,4.4vw,56px);margin:16px 0 0;color:#fff}
.hs-body{font-size:16px;line-height:1.6;color:rgba(255,255,255,.76);margin:20px 0 0;max-width:48ch}
.hs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--v2-hair);border:1px solid var(--v2-hair);margin-top:28px}
.hs-facts>div{background:#101010;padding:16px 16px 18px}
.hs-facts b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.02em;color:#fff;margin-top:8px}
.hs-facts p{margin:6px 0 0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.62)}
@media(max-width:899px){.hs-panel{width:min(92vw,640px)}.hs-vessel{min-height:150px}}

/* reduced motion / no-JS: the pinned track degrades to a normal scroller */
.hs.hs-flat{height:auto!important}
.hs.hs-flat .hs-sticky{position:static;height:auto;overflow-x:auto;overflow-y:hidden}
.hs.hs-flat .hs-track{transform:none!important}
.hs.hs-flat .hs-panel{min-height:70vh}

/* ------------------------------------------------------- scrub counter */
.sc-count{font-family:var(--font-display);font-weight:500;letter-spacing:-.05em;line-height:.9;font-size:clamp(64px,15vw,220px);font-variant-numeric:tabular-nums;color:#fff;display:block}
.sc-count-row{display:flex;align-items:baseline;gap:clamp(10px,2vw,26px);flex-wrap:wrap}
.sc-count-unit{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,3vw,44px);letter-spacing:-.03em;color:var(--copper-400)}
.sc-tick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px;background:var(--v2-hair);border-top:1px solid var(--v2-hair);margin-top:clamp(30px,6vh,60px)}
.sc-tick>div{background:transparent;padding:18px 0 0}
.sc-tick span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sc-tick b{display:block;font-family:var(--font-display);font-weight:500;font-size:16px;color:#fff;margin-top:7px;letter-spacing:-.01em}
.sc-tick>div.on span{color:var(--copper-400)}

/* --------------------------------------------------------- section rail */
.rail{position:fixed;right:max(14px,2vw);top:50%;transform:translateY(-50%);z-index:38;display:none;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:auto}
@media(min-width:1180px){.rail{display:flex}}
.rail-i{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;cursor:pointer;color:inherit}
.rail-i span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:opacity .3s,transform .4s var(--v2-ease);white-space:nowrap;color:var(--ink-500)}
.rail-i i{display:block;width:20px;height:1.5px;background:var(--ink-400);opacity:.45;transition:width .4s var(--v2-ease),opacity .3s,background .3s;font-style:normal}
.rail-i:hover span,.rail-i.on span{opacity:1;transform:none}
.rail-i.on i{width:38px;opacity:1;background:var(--copper-500)}
.rail.on-dark .rail-i span{color:rgba(255,255,255,.78)}
.rail.on-dark .rail-i i{background:#fff}

/* ------------------------------------------------------------- utilities */
.v2-light .sc-count{color:var(--ink-900)}
.v2-light .sc-count-unit{color:var(--copper-text)}
.v2-light .sc-tick{border-top-color:var(--rule);background:transparent}
.v2-light .sc-tick span{color:var(--ink-500)}
.v2-light .sc-tick b{color:var(--ink-900)}
.v2-light .sc-tick>div.on span{color:var(--copper-text)}
.v2-light .sc-tick>div{border-top:1px solid transparent;transition:border-color .5s}
.v2-light .sc-tick>div.on{border-top-color:var(--copper-500)}
.sc-tick>div{border-top:1px solid transparent;transition:border-color .5s}
.v2-dark .sc-tick>div.on,.sc-tick>div.on{border-top-color:var(--copper-500)}
.sc-line{height:1px;background:var(--v2-hair);position:relative;overflow:hidden}
.sc-line i{position:absolute;inset:0 auto 0 0;background:var(--copper-500);width:calc(var(--p,0) * 100%);display:block}

@media (prefers-reduced-motion:reduce){
  .hx-copy,.hx-art,.hx-scan,.hx-field,.hx-stats,.sc-rise,.sc-slide-l,.sc-slide-r,.sc-zoom,.sc-para-up,.sc-para-dn{transform:none!important;opacity:1!important}
  .w-split .w>i{transform:none!important;opacity:1!important;transition:none}
  .hs-vessel i{transform:none;opacity:1}
}