/* ---------- the dive ---------- */
.dive{position:relative}
.dive .stage{display:none}
.dive .stops{display:grid;gap:14px;padding:24px 16px;max-width:760px;margin:0 auto}
.stop{background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);border-radius:20px;padding:20px}
.stop .dep{font-family:var(--f-mono);font-size:12.5px;color:var(--tc,var(--amber));letter-spacing:.06em;direction:ltr;text-align:right}
.stop h2{font-size:clamp(24px,4.4vw,34px);font-weight:900;margin:4px 0 6px}
.stop h1{font-size:clamp(32px,6.4vw,58px);font-weight:900;line-height:1.15}
.stop h1 em{font-style:normal;color:var(--amber)}
.stop p{color:var(--muted);margin:0 0 14px;line-height:1.75}
.stop .acts{display:flex;gap:8px;flex-wrap:wrap}
.stop .mini{display:grid;gap:4px;margin:0 0 14px;padding:0;list-style:none}
.stop .mini a{display:flex;gap:8px;font-size:14.5px;color:var(--ink);padding:4px 0;border-bottom:1px dashed var(--line)}
.stop .mini a::before{content:"▸";color:var(--tc)}
.stop .cnt{display:inline-flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 18px}
.stats div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.stats b{display:block;font-family:var(--f-mono);font-size:22px;font-weight:600;direction:ltr;text-align:right}
.stats span{font-size:12px;color:var(--muted)}
.hint{display:none}

.js .dive{height:calc(var(--n) * 100svh)}
.js .dive .stops{display:block;padding:0;max-width:none;margin:-100svh 0 0;position:sticky;top:0;height:100svh;pointer-events:none;z-index:3}
.js .dive .stage{display:block;position:sticky;top:0;height:100svh;overflow:hidden;background:#040A12}
.js .scene-wrap{position:absolute;top:0;left:50%;width:min(100vw,520px);transform:translateX(-50%)}
.js #scene{display:block;width:100%;height:auto;will-change:transform}
.js .stop{position:absolute;inset:auto 12px calc(76px + env(safe-area-inset-bottom,0px)) 12px;max-height:54svh;overflow:auto;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(24px) scale(.98);pointer-events:none;transition:opacity .45s,transform .45s;z-index:3}
.js .stop.on{opacity:1;transform:none;pointer-events:auto}
.js .stop.hero{inset:62px 0 auto 0;max-height:none;background:linear-gradient(to bottom,rgba(4,10,18,.92) 55%,rgba(4,10,18,0));backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-radius:0;padding:18px 16px 60px}
.js .stop.hero p{color:#B9CADA}
.js .hint{display:flex;position:absolute;inset:auto 0 calc(84px + env(safe-area-inset-bottom,0px)) 0;justify-content:center;z-index:2;color:#B9CADA;font-size:13px;gap:8px;align-items:center;transition:opacity .4s}
.hint i{width:22px;height:34px;border:2px solid currentColor;border-radius:12px;position:relative}
.hint i::after{content:"";position:absolute;top:6px;left:50%;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:currentColor;animation:wheel 1.6s infinite}
@keyframes wheel{to{transform:translateY(10px);opacity:0}}
.gauge{position:absolute;top:74px;left:12px;z-index:4;background:rgba(4,10,18,.78);border:1px solid var(--line);border-radius:12px;padding:6px 10px;text-align:left;direction:ltr;backdrop-filter:blur(8px)}
.gauge small{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.08em}
.gauge b{font-family:var(--f-mono);font-size:20px;font-weight:600;color:var(--amber)}
.gauge em{font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.rail{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:9px}
.rail button{width:10px;height:10px;border-radius:50%;background:rgba(233,242,249,.25);border:0;padding:0;transition:transform .3s,background .3s}
.rail button.on{background:var(--amber);transform:scale(1.5)}
.js .stop.hero .stats div{background:rgba(10,23,35,.7)}
@media (min-width:900px){
  .js .scene-wrap{left:5%;transform:none;width:480px}
  .js .stop,.js .stop.hero{inset:auto;top:50%;right:5%;width:min(500px,42vw);max-height:80svh;transform:translateY(-46%) scale(.98)}
  .js .stop.on{transform:translateY(-50%)}
  .js .hint{inset:auto 0 26px 0}
  .gauge{left:calc(5% + 494px);top:90px}
  .rail{right:auto;left:calc(5% + 500px);top:auto;bottom:40px;transform:none}
}

/* scene animation */
#scene{direction:ltr}
#scene text{font-family:var(--f-ui)}
#scene .sl{font-size:13px;font-weight:700;fill:#E9F2F9;fill-opacity:.85}
#scene .se,#scene .tk{font-family:var(--f-mono);font-size:9px;fill:#E9F2F9;fill-opacity:.55;letter-spacing:.05em}
#scene .tk{fill-opacity:.7}
.tw{animation:tw 3.4s ease-in-out infinite}
@keyframes tw{50%{opacity:.25}}
.blink{animation:tw 1.2s steps(2) infinite}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:fl .35s ease-in-out infinite alternate}
@keyframes fl{to{transform:scaleY(1.12) scaleX(.92)}}
#ramL,#ramR{transition:transform .8s cubic-bezier(.6,0,.2,1)}
#ramL{transform:translateX(-12px)}#ramR{transform:translateX(12px)}
.k-wc #ramL,.k-wc #ramR{transform:none}
#kick{opacity:.15;transition:opacity .6s}
.k-wc #kick{opacity:1}
.gas{fill:#BFE9FF;fill-opacity:.85;animation:gas 3s linear infinite}
@keyframes gas{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(-70px);opacity:0}}
.oil{animation:oil 4s linear infinite}
@keyframes oil{0%{transform:none;opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(var(--dx));opacity:0}}
.flowup{opacity:0;transition:opacity .6s;animation:flow 1.1s linear infinite}
.k-pr .flowup,.k-wt .flowup,.k-ch .flowup{opacity:.9}
@keyframes flow{to{stroke-dashoffset:26}}
.perf{transition:stroke .4s}
.k-pr .perf{stroke:#FFD27A}
#grp{transition:none}
@media (prefers-reduced-motion:reduce){.js .dive{height:auto}.js .dive .stage{display:none}.js .dive .stops{display:grid;gap:14px;padding:24px 16px;max-width:760px;margin:0 auto}.js .stop{position:static;opacity:1;transform:none;pointer-events:auto;max-height:none}}
/* hero intro */
.js .stop.hero .eyebrow{animation:rise .6s .1s both}
.js .stop.hero h1{animation:rise .8s .2s cubic-bezier(.2,.7,.3,1) both}
.js .stop.hero p{animation:rise .8s .35s both}
.js .stop.hero .stats{animation:rise .8s .5s both}
.js .stop.hero .acts{animation:rise .8s .65s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.derrick path{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.2s .3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mud{animation:flow 0.9s linear infinite reverse}
.td{animation:td 1.8s ease-in-out infinite}
@keyframes td{50%{transform:translateY(3px)}}
.needle{transform-box:view-box;transform-origin:300px 233px;animation:needle 2.4s ease-in-out infinite}
@keyframes needle{0%,100%{transform:rotate(-20deg)}40%{transform:rotate(38deg)}45%{transform:rotate(30deg)}50%{transform:rotate(36deg)}}
.pump{animation:pump .5s ease-in-out infinite alternate}
@keyframes pump{to{transform:translateX(6px)}}
.stop .acts .btn.primary{animation:breath 2.6s ease-in-out infinite}
@keyframes breath{50%{box-shadow:0 0 0 8px rgba(245,165,36,.18)}}