/* The Drop — scroll-through 3D rail. Sky is CSS (the canvas is transparent), the horizon sits at 50vh. */
/* phones: the rail is driven by swipes, so the page itself must not scroll. iOS Safari ignores
   overflow:hidden on the body — it needs the body pinned — and without the pin a swipe scrolled
   the page down onto the storefront while the script still thought it was holding the wire. */
html.rail-locked, html.rail-locked body { overflow: hidden; height: 100%; }
html.rail-locked body { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
html.touch-rail.rail-released .stop { display: none; }                                  /* after the flag the storefront is the page */
/* no rail on this machine (reduced motion, no WebGL, or too little of it to be worth the wait):
   the storefront is the whole page, on a plain ground, with nothing 3D behind it */
html.rail-off .stop, html.rail-off #stage, html.rail-off #merchStage, html.rail-off #crt, html.rail-off #hud { display: none; }
html.rail-off body.world-page { background: #fff; }
html.rail-off .mini-rack { display: none; }
body.world-page {
  --sky: linear-gradient(180deg, #03071a 0%, #071440 34%, #2a1250 47%, #ff5a1f 49.6%, #ffb257 50%, #0a0e1a 50.2%, #0a0e1a 100%);
  margin: 0; overflow-x: hidden; color: #fff;
  background: var(--sky); background-attachment: fixed;
}
/* storefront.css sets body.hf { background: #fff }, which is right for the product page but was
   painting the SKY white here the moment the storefront took over — and the storefront takes over
   while the wire is still half on screen. A transparent canvas over a white body is the white band
   with wireframe mountains in it. The sky stays until the storefront actually reaches the top. */
body.world-page.hf { background: var(--sky); background-attachment: fixed; }
body.world-page.at-top { background: #fff; }
#stage, #merchStage, #menuStage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#stage { z-index: 0; image-rendering: pixelated; image-rendering: crisp-edges; }   /* the world: chunky, under the scan lines */
#merchStage { z-index: 3; pointer-events: none; }                                    /* the merch: full resolution, above the scan lines */
#menuStage { z-index: 6; pointer-events: none; }
#crt { position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .30) 0 2px, rgba(0, 0, 0, 0) 2px 4px); }
#crt::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%); }
#crt::after { content: ""; position: absolute; left: 0; right: 0; height: 18vh; top: -20vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, 0) 100%);
  animation: crt-band 7s linear infinite; }
@keyframes crt-band { to { top: 120vh; } }

.wbar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; font-family: 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem;
  background: linear-gradient(180deg, rgba(3, 7, 26, .85), rgba(3, 7, 26, 0)); }
.wbar-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.wbar-brand img { width: 30px; height: 30px; }
.wbar-brand img { width: 30px; height: 30px; border-radius: 6px; }
.wbar-nav { display: flex; gap: 22px; }
.wbar-nav a { color: var(--gold); text-decoration: none; padding: 5px 0;
  display: inline-flex; align-items: center; min-height: 24px; }   /* 2.5.8 */
.wbar-nav a:hover { color: #fff; }

#track { position: relative; }
.intro-copy { position: relative; z-index: 4; }   /* the title sits above the merch layer */
.stop { height: 100vh; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.stop.intro { align-items: flex-end; }
.intro-copy { text-align: center; padding-bottom: 12vh; pointer-events: auto; }
.intro-copy .eyebrow { font-family: 'Oswald', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-size: .8rem; margin: 0 0 10px; }
.intro-copy h1 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(52px, 11vw, 124px); line-height: .88; margin: 0; letter-spacing: .01em;
  color: #fff; text-shadow: 0 0 22px rgba(255, 90, 31, .45), 4px 4px 0 var(--blue); }
.intro-copy .lede { max-width: 420px; margin: 18px auto 0; color: #c7cfe6; font-size: .98rem; line-height: 1.5; }
.scroll-hint { font-family: 'Oswald', sans-serif; letter-spacing: .3em; text-transform: uppercase; font-size: .7rem; color: var(--gold); margin-top: 26px; }
.scroll-hint span { display: block; width: 1px; height: 38px; margin: 0 auto 8px; background: linear-gradient(180deg, var(--gold), transparent); animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }
/* phones: the hint bar slides up */
html.touch-rail .scroll-hint span { animation: hint-y 1.5s ease-in-out infinite; }
@keyframes hint-y { 0%, 100% { transform: translateY(12px); opacity: .4; } 50% { transform: translateY(-12px); opacity: 1; } }

/* the apex card */
#hud { position: fixed; left: 50%; bottom: 5vh; z-index: 4; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease; width: min(420px, calc(100vw - 32px)); }
#hud.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hud-card { background: rgba(3, 7, 26, .82); border: 1px solid rgba(240, 168, 48, .45); border-radius: 14px; padding: 14px 16px 16px;
  backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.hud-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.hud-name { font-size: 1.25rem; font-weight: 700; }
.hud-price { font-size: 1.35rem; color: var(--gold); font-weight: 700; }
.hud-tag { margin: 4px 0 10px; color: #b8c2d6; font-size: .9rem; }
.hud-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.hud-sizes:empty { display: none; }
/* the HUD buttons are .w95, the same retro control the storefront uses — bevel, grey
   face, hf-blue when chosen. Nothing here may restate colour or border: a .hud-* button
   selector is (0,1,1) and would quietly beat .w95 at (0,1,0). */
.hud-usa { display: flex; gap: 6px; margin-bottom: 10px; }
.hud-usa:empty { display: none; }
.hud-row { display: flex; align-items: center; gap: 12px; }
.hud-hint { font-size: .8rem; color: #ff8a65; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }   /* 1.4.11: the boundary needs 3:1 */

/* the flag transition stop has no content; the canvas does the work */
.stop.transition { pointer-events: none; }

/* the storefront: white, typewriter, numbered items — with a live 3D window on every card */
/* z-index 6 puts the storefront ABOVE the rail's bar (5) and the merch canvas (3). It is an opaque
   white section, so wherever it reaches the top of the screen its own sticky header covers the
   rail's — the page cannot show two bars even if the script that swaps them never runs. */
#menu { position: relative; z-index: 6; min-height: 100vh; padding: 0 0 40px; background: #fff; color: #111;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace; }
#menu .hf-wrap { padding-top: 18px; padding-bottom: 110px; }
.wbar, #crt { transition: opacity .45s ease, visibility 0s; }
/* the storefront has its own sticky header, so the rail's bar goes away entirely — not just
   transparent, or the two sit on top of each other while the page is scrolled between them.
   Coming back up the page it returns at once and fades in; going down it hides after the fade. */
body.in-menu .wbar, body.in-menu #crt { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s; }
body.in-menu #hud { display: none; }
/* one cart button, one place, on both halves of the page */
body.world-page #cartFab { position: fixed !important; top: 12px !important; right: 18px !important; bottom: auto !important; left: auto !important; width: auto !important; height: auto !important;
  padding: 6px 10px !important; border-radius: 6px !important; background: rgba(3, 7, 26, .55) !important; color: var(--gold) !important; box-shadow: none !important; border: 1px solid rgba(240, 168, 48, .35) !important;
  font: 700 .8rem 'Oswald', sans-serif !important; letter-spacing: .12em; text-transform: uppercase; z-index: 60; }
body.world-page #cartFab i, body.world-page #cartFab .cart-ico { display: none; }
body.world-page #cartFab::before { content: 'Cart ('; } body.world-page #cartFab::after { content: ')'; }
body.world-page #cartFab #cartCount { position: static !important; display: inline !important; background: none !important; color: inherit !important; font: inherit !important; padding: 0 !important; min-width: 0 !important; border: 0 !important; box-shadow: none !important; }
/* on the storefront the cart rides in the sticky black banner, so it is set in white */
body.world-page.hf #cartFab { top: 16px !important; background: transparent !important; border: 0 !important; color: #fff !important; font-family: 'Courier Prime', 'Courier New', monospace !important; }
.wbar-nav { padding-right: 112px; }
body.world-page .hf-support { display: none; }             /* the support tab belongs to the storefront half */
body.world-page.in-menu .hf-support { display: block; }
.menu-title { font-family: 'Oswald', sans-serif; font-size: clamp(34px, 5vw, 56px); text-transform: uppercase; margin: 6px 0 8px; letter-spacing: .02em; }
.menu-sub { color: #b8c2d6; max-width: 620px; margin: 0 0 34px; line-height: 1.5; }
.world-grid .product-card { overflow: visible; }
.card-body { padding: 16px 18px 20px; }
.card-name { font-family: 'Oswald', sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 4px; }
.card-tag { color: #b8c2d6; font-size: .88rem; margin: 0 0 12px; }
.card-price { font-family: 'Oswald', sans-serif; font-size: 1.4rem; color: var(--gold); margin: 0 0 12px; }
.card-sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.card-sizes button { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; padding: 7px 12px; font: 600 .82rem 'Oswald', sans-serif; letter-spacing: .06em; cursor: pointer; }
.card-sizes button.selected { border-color: var(--orange); background: rgba(250, 70, 22, .18); }
.card-hint { display: block; min-height: 18px; color: #ff8a65; font-size: .8rem; margin-top: 8px; }
.menu-foot { margin-top: 40px; color: #7f8bab; font-size: .85rem; }
.menu-foot a { color: var(--gold); }

/* wide screens: the card sits to the right so the piece stays whole in the middle of the frame */
@media (min-width: 900px) {
  #hud { left: auto; right: 4vw; bottom: 8vh; transform: translate(0, 24px); width: 360px; }
  #hud.show { transform: translate(0, 0); }
}
@media (max-width: 640px) {
  .wbar { padding: 12px 14px; }
  .wbar-nav { gap: 12px; font-size: .72rem; padding-right: 92px; white-space: nowrap; }
  .wbar-nav a:first-child { display: none; }            /* 'skip to the list' is a mouse thing; phones swipe */
  body.world-page #cartFab { top: 10px !important; right: 12px !important; font-size: .72rem !important; padding: 5px 8px !important; }
  /* the apex card on a phone: a strip, not a panel — the rail is a preview, the storefront below is the store */
  #hud { bottom: 2vh; width: min(360px, calc(100vw - 24px)); }
  .hud-card { padding: 8px 12px 10px; border-radius: 10px; }
  .hud-name { font-size: .95rem; } .hud-price { font-size: 1rem; }
  .hud-tag { display: none; }
  .hud-sizes { gap: 4px; margin: 6px 0 8px; }
  .hud-sizes button { padding: 4px 8px; font-size: .68rem; letter-spacing: .04em; }
  .hud-usa { margin-bottom: 6px; } .hud-usa button { padding: 4px 8px; font-size: .62rem; }
  .hud-row { gap: 8px; }
  .hud-row .w95 { padding: 8px 14px; font-size: .68rem; letter-spacing: .1em; }
  .hud-hint { font-size: .7rem; }
}