/* v2 scroll story: fixed layers over one pinned stage. Layer order, back to front:
   #gl (3D line drawing) < #dial (Sam's altimeter, glued to the barrel bottom) < #fx (particles)
   < #burst < #ov (engineering labels) < copy + hero < nav. */
:root { --ink: #3d3a36; --ink-2: #6b665f; --orange: #ff6a2b; --cream: #efe9e1; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
.lay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#gl { z-index: 1; opacity: 0; }
#dial { position: fixed; left: 0; top: 0; width: 300px; height: 300px; margin: 0; max-width: none; aspect-ratio: auto;
  transform-origin: 0 0; z-index: 2; will-change: transform, opacity; }
#fx { z-index: 3; filter: drop-shadow(0 0 5px rgba(255, 120, 50, .35)); }
#burst { z-index: 4; mix-blend-mode: screen; }
#ov { z-index: 5; overflow: visible; font-family: var(--mono); }
#ov text { font-size: 11px; letter-spacing: .08em; }
#ov .big { font-size: 12px; font-weight: 600; }

/* hero header stays for the whole story; its colour follows the background */
#hero header { transition: none; }
#hero .hero, #hero .foot { will-change: opacity; }
.logo sup { margin-left: 1px; }

/* per-stage copy blocks (desktop: left column, phone: above the barrel) */
.copy { position: fixed; left: clamp(32px, 4.4vw, 64px); top: 19vh; max-width: min(30vw, 440px); z-index: 6;
  opacity: 0; will-change: opacity, transform; font-family: var(--sans); }
.copy .k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.copy h2 { margin: .5em 0 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.02; font-size: clamp(30px, 3.4vw, 52px); }
.copy p { margin: .7em 0 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; max-width: 32ch; }
.copy hr { border: 0; border-top: 1px solid currentColor; opacity: .35; width: 80%; margin: 1.1em 0 .9em; }
.copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.copy li { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 10px; opacity: .85; }
.copy li::before { content: "\2192"; opacity: .6; }
.copy ul.check li::before { content: "\25CF"; color: var(--orange); opacity: 1; }
.sketch { color: #2b2825; }
.sketch h2 em { font-style: normal; color: #d9530c; }
.neon { color: var(--cream); }
.neon h2 em, .neon .name { font-style: normal; color: var(--orange); }
.copy.cta { left: 50%; top: 50vh; transform: translateX(-50%); max-width: 640px; width: calc(100% - 32px); text-align: center; }
.copy.cta h2 { font-size: clamp(40px, 5.2vw, 76px); }
.copy.cta p { margin-inline: auto; }
.btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.6em; }
.btn2 { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 16px 20px; border-radius: 4px;
  border: 1px solid var(--orange); background: var(--orange); color: #1a1918; cursor: pointer; }
.btn2.ghost { background: transparent; color: var(--cream); border-color: #5a554f; }
.btn2:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

#tblock { position: fixed; left: clamp(32px, 4.4vw, 64px); bottom: 24px; z-index: 5; font: 500 10px/1.5 var(--mono);
  letter-spacing: .1em; color: var(--ink-2); border: 1px solid rgba(61, 58, 54, .45); padding: 6px 10px; opacity: 0; pointer-events: none; }
/* chapter dots (v1 style) with prev/next arrows; colour follows the header */
#dots { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; z-index: 7; }
#dots button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: grid; place-items: center; }
#dots .dot { width: 28px; height: 24px; position: relative; }
#dots .dot i { display: block; width: 8px; height: 8px; border-radius: 4px; background: currentColor; opacity: .4; }
#dots .dot.range i { height: 20px; }
#dots .dot.on i { opacity: 1; background: linear-gradient(to bottom, var(--orange) var(--f), rgba(255, 106, 43, .3) var(--f)); }
#dots .dot::after { content: attr(data-name); position: absolute; right: 30px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .15s; pointer-events: none; }
#dots .dot:hover::after, #dots .dot:focus-visible::after { opacity: .85; }
#dots .arr { width: 44px; height: 44px; opacity: .75; }
#dots .arr:hover { opacity: 1; }
#dots button:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; border-radius: 6px; }
#hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); font: 500 10px var(--mono); letter-spacing: .14em; color: #8a8a90; z-index: 7; }

@media (max-width: 699px) {
  .copy { left: 16px; right: 16px; top: 64px; max-width: none; }
  .copy h2 { font-size: 28px; }
  .copy p { font-size: 14px; margin-top: .5em; }
  .copy hr { margin: .7em 0 .6em; }
  .copy ul { gap: 5px; }
  .copy li { font-size: 10.5px; }
  .copy.cta { top: 50vh; }
  .copy.cta h2 { font-size: 44px; }
  #tblock, #hint { display: none; }
  /* phone: a compact row along the bottom edge, clear of the copy (top) and the barrel labels (right) */
  #dots { flex-direction: row; top: auto; right: 50%; bottom: max(4px, env(safe-area-inset-bottom, 0px)); transform: translateX(50%); }
  #dots .dot { width: 20px; height: 44px; }
  #dots .dot.range i { width: 18px; height: 8px; }
  #dots .dot.on i { background: linear-gradient(to right, var(--orange) var(--f), rgba(255, 106, 43, .3) var(--f)); }
  #dots .dot::after { display: none; }
  #ov text { font-size: 9.5px; }
  #ov .big { font-size: 10.5px; }
}