:root {
  --abyss: #041215;
  --deep: #07211f;
  --brack: #0b3b38;
  --murk: #155550;
  --glint: #e9c46a;
  --glint-deep: #c9a03f;
  --eye: #e5484d;
  --foam: #eef5f3;
  --mute: #a9c2bd;
  --line: #1f4a46;
  --card: #0a2a28;
  --shade: #04121599;
  --clear: #04121500;
  --focus: #e9c46a;
  /* slot machine: placeholder block colours until the catch photos are in */
  --tile-a: #e9c46a; --tile-b: #4fd1c5; --tile-c: #e5484d; --tile-d: #c08457; --tile-e: #a78bfa; --tile-f: #eef5f3;
  --tile-ink: #041215;
  --chrome: #d7dde3; --chrome-deep: #7b8a90;

  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(3rem, 7vw, 6.6rem);
  --fs-big: clamp(2.4rem, 5vw, 4.4rem);
  --fs-lede: clamp(1.05rem, 1.7vw, 1.25rem);
  --fs-small: .9rem;
  --s-1: 8px; --s-2: 16px; --s-3: 28px; --s-4: 48px; --s-5: 88px;
  --gutter: 20px;
  --page: 1240px;
  --r: 18px;
  --bar-h: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--abyss); }
body { font: 400 1.04rem/1.55 var(--body); color: var(--foam); background: var(--abyss); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--glint); color: var(--abyss); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--glint); color: var(--abyss); font: 700 1rem/1 var(--body); text-decoration: none; border: 2px solid var(--glint);
  transition: background-color .2s ease-out, color .2s ease-out; }
.btn:hover { background: var(--foam); border-color: var(--foam); }
.btn.line { background: transparent; color: var(--foam); border-color: var(--foam); }
.btn.line:hover { background: var(--foam); color: var(--abyss); }
.btn.small { min-height: 40px; padding: 0 18px; font-size: .92rem; }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--bar-h); display: flex; align-items: center;
  background: linear-gradient(var(--shade), var(--clear)); }
.top .wrap { display: flex; align-items: center; gap: var(--s-3); }
.top.solid { background: var(--abyss); border-bottom: 1px solid var(--line); }
.brand { font: 400 1.6rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.brand span { color: var(--glint); }
.nav { display: none; gap: var(--s-3); margin-left: auto; }
.nav a { text-decoration: none; color: var(--mute); font-weight: 600; transition: color .2s ease-out; }
.nav a:hover { color: var(--foam); }
.top .btn { margin-left: auto; }

/* hero */
.hero { min-height: 100svh; padding: calc(var(--bar-h) + var(--s-3)) 0 var(--s-4); display: flex; align-items: center;
  background: radial-gradient(120% 80% at 70% 40%, var(--brack), var(--abyss) 70%); }
.kicker { color: var(--glint); font-weight: 700; letter-spacing: .02em; }
h1 { font: 400 var(--fs-hero)/.95 var(--display); text-transform: uppercase; margin-top: var(--s-2); }
.lede { color: var(--mute); font-size: var(--fs-lede); max-width: 28em; margin-top: var(--s-3); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }

/* hero: just the words, big and centred */
.hero-text { text-align: center; display: grid; justify-items: center; }
.hero-text h1 { font-size: clamp(3.4rem, 10vw, 9rem); max-width: 14ch; }
/* "Chase it." lands last, in gold, with a highlighter swipe under it */
.accent { position: relative; display: inline-block; white-space: nowrap; color: var(--glint); }
.swipe { position: absolute; left: 0; right: 0; bottom: .04em; height: .09em; border-radius: 99px; background: var(--glint);
  transform-origin: left center; }
.hero-text .lede { margin-inline: auto; }
.hero-text .cta { justify-content: center; }

/* the 3D viewer pop-up */
.viewer { width: min(980px, 100% - 24px); max-height: calc(100svh - 24px); margin: auto; padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--abyss); color: var(--foam); overflow: auto; }
.viewer::backdrop { background: var(--shade); backdrop-filter: blur(6px); }
.viewer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.viewer-head h2 { font: 400 clamp(1.6rem, 3.4vw, 2.4rem)/1 var(--display); text-transform: uppercase; }
.viewer-head h2 span { color: var(--glint); }
.viewer-close { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--card);
  color: var(--foam); font: 400 1.6rem/1 var(--body); cursor: pointer; transition: border-color .2s ease-out; }
.viewer-close:hover { border-color: var(--glint); }
.viewer-buy { margin-top: var(--s-3); }
body.viewing { overflow: hidden; }

.stage { position: relative; height: clamp(300px, 58vh, 520px); border-radius: var(--r); overflow: hidden; background: var(--deep); }
.stage canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.hero-fallback { display: none; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: var(--abyss); }
.no-3d .hero-fallback { display: block; }
.no-3d canvas { display: none; }

.swatches { margin-top: var(--s-2); }
.swatch-cap { color: var(--mute); font-size: var(--fs-small); }
.swatch-cap b { color: var(--foam); }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.swatch { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--card);
  color: var(--foam); font: 600 .9rem/1 var(--body); cursor: pointer; transition: border-color .2s ease-out, background-color .2s ease-out; }
.swatch:hover { border-color: var(--mute); }
.swatch[aria-pressed="true"] { border-color: var(--glint); background: var(--brack); }

/* ticker */
.ticker { overflow: hidden; background: var(--glint); color: var(--abyss); padding: 14px 0; }
.ticker-track { display: flex; gap: 28px; width: max-content; align-items: center; }
.ticker span { font: 400 clamp(1.5rem, 3vw, 2.4rem)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.ticker i { width: 12px; height: 12px; border-radius: 50%; background: var(--eye); flex: none; }

/* the glide: a pinned 3D scene */
.glide { position: relative; height: 300vh; background: var(--abyss); }
.glide-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.glide-pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.glide-word { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 0; font: 400 clamp(8rem, 26vw, 24rem)/1 var(--display);
  color: transparent; -webkit-text-stroke: 2px var(--line); letter-spacing: .02em; white-space: nowrap; user-select: none; }
.glide-copy { position: relative; z-index: 2; padding-top: calc(var(--bar-h) + 5vh); pointer-events: none; }
.glide-copy h2 { font: 400 var(--fs-big)/1 var(--display); text-transform: uppercase; }
.glide-steps { list-style: none; margin-top: var(--s-3); display: grid; gap: var(--s-2); max-width: 26em; }
.glide-steps li { color: var(--mute); padding-left: 16px; border-left: 3px solid var(--line); transition: color .25s ease-out, border-color .25s ease-out; }
.glide-steps li b { color: var(--foam); }
.glide-steps li.on { color: var(--foam); border-color: var(--glint); }

/* colours */
.colors { padding: var(--s-5) 0; background: var(--deep); }
.colors h2, .cast h2 { font: 400 var(--fs-big)/1 var(--display); text-transform: uppercase; max-width: 14ch; }
.sub { color: var(--mute); margin-top: var(--s-2); max-width: 32em; }
.cards { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-4); grid-template-columns: 1fr; }
.card { position: relative; background: var(--abyss); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-cap { padding: var(--s-2) var(--s-3) var(--s-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.card-cap h3 { font: 400 1.7rem/1 var(--display); text-transform: uppercase; flex: 1 0 100%; }
.card-cap p { color: var(--glint); font-weight: 700; }
.link { background: none; border: 0; color: var(--foam); font: 600 1rem/1.4 var(--body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link:hover { color: var(--glint); }

/* caught on the glide: the slot machine */
.catches { padding: var(--s-5) 0; background: var(--abyss); overflow: hidden; }
.catches h2 { font: 400 var(--fs-big)/1 var(--display); text-transform: uppercase; }
.machine { position: relative; margin: var(--s-4) auto 0; width: min(440px, 100% - 64px); padding: 0 0 var(--s-3);
  border-radius: 28px; background: linear-gradient(var(--brack), var(--deep)); border: 4px solid var(--glint);
  box-shadow: 0 0 0 6px var(--deep), 0 30px 80px var(--shade); }
.marquee { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  border-bottom: 3px solid var(--glint-deep); }
.marquee p { font: 400 clamp(2rem, 5vw, 2.8rem)/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--glint); text-shadow: 0 0 18px var(--glint-deep); }
.bulbs { flex: 1; height: 12px; max-width: 90px; border-radius: 99px;
  background: radial-gradient(circle, var(--glint) 0 3px, transparent 4px) 0 50% / 18px 12px repeat-x; animation: bulbs 1.1s steps(2) infinite; }
@keyframes bulbs { 50% { background-position: 9px 50%; filter: brightness(1.5); } }
.window { position: relative; display: grid; grid-template-columns: 1fr; gap: 12px; margin: var(--s-3) var(--s-3) 0;
  padding: 12px; border-radius: 18px; background: var(--abyss); box-shadow: inset 0 0 0 3px var(--line), inset 0 12px 30px var(--shade); }
.reel { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--card); }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* curved-glass shading on each reel */
  background: linear-gradient(var(--shade), var(--clear) 22%, var(--clear) 78%, var(--shade)); }
.strip { will-change: transform; }
.reel.blur .strip { filter: blur(3px); }
.tile { width: 100%; aspect-ratio: 3 / 4; display: grid; place-content: center; justify-items: center; gap: 4px;
  color: var(--tile-ink); background: var(--tile-a); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:has(img) { display: block; }
.tile-num { font: 400 clamp(3rem, 8vw, 5.5rem)/1 var(--display); }
.tile-cap { font: 700 .85rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; }
.tone-a { background: var(--tile-a); } .tone-b { background: var(--tile-b); } .tone-c { background: var(--tile-c); }
.tone-d { background: var(--tile-d); } .tone-e { background: var(--tile-e); } .tone-f { background: var(--tile-f); }
.payline { position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 99px;
  background: var(--eye); opacity: .55; pointer-events: none; }
.machine.won .reel { box-shadow: 0 0 0 3px var(--glint), 0 0 28px var(--glint-deep); transition: box-shadow .3s ease-out; }
.spark { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; z-index: 3;
  background: var(--glint); box-shadow: 0 0 10px var(--glint); pointer-events: none; }
.jackpot { margin: var(--s-3) var(--s-3) 0; padding: 14px 18px; border-radius: 14px; background: var(--abyss); border: 2px dashed var(--line);
  text-align: center; font: 600 1.05rem/1.3 var(--body); color: var(--mute); transition: border-color .3s ease-out; }
.jackpot span { font: 400 1.5rem/1 var(--display); text-transform: uppercase; color: var(--glint); margin-right: 6px; }
.jackpot b { color: var(--foam); }
.jackpot.show { border-color: var(--glint); }
/* the lever on the right side of the cabinet */
.lever-arm { position: absolute; right: -46px; top: 30%; width: 40px; height: 190px; }
.lever-base { position: absolute; left: 0; bottom: 0; width: 34px; height: 60px; border-radius: 10px;
  background: linear-gradient(90deg, var(--chrome-deep), var(--chrome), var(--chrome-deep)); }
.lever { position: absolute; left: 13px; bottom: 40px; width: 9px; height: 150px; border-radius: 6px; cursor: grab; touch-action: none;
  transform-origin: 50% 100%; background: linear-gradient(90deg, var(--chrome-deep), var(--chrome), var(--chrome-deep)); }
.lever:active { cursor: grabbing; }
.knob { position: absolute; left: 50%; top: -22px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--foam), var(--eye) 45%, var(--eye) 70%, var(--abyss)); box-shadow: 0 6px 16px var(--shade); }
.machine-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s-4); }
.btn[disabled] { opacity: .55; cursor: progress; }

/* last call */
.cast { padding: var(--s-5) 0; background: radial-gradient(90% 120% at 50% 100%, var(--murk), var(--abyss) 70%); text-align: center; }
.cast-inner { display: grid; justify-items: center; gap: var(--s-3); }
.cast h2 { margin-inline: auto; }
.cast p { color: var(--mute); max-width: 30em; font-size: var(--fs-lede); }

.site-foot { padding: var(--s-4) 0; border-top: 1px solid var(--line); color: var(--mute); font-size: var(--fs-small); }
.site-foot .wrap { display: grid; gap: var(--s-1); }
.note { font-size: .8rem; }
.foot-links a { color: var(--foam); }

/* phones */
@media (max-width: 719px) {
  .hero .cta { flex-direction: column; align-items: stretch; width: min(100%, 340px); }
  .hero .cta .btn { justify-content: center; }
  /* colour cards: a swipeable row instead of one giant card after another */
  .cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto;
    scroll-snap-type: x mandatory; gap: var(--s-2); padding-bottom: var(--s-2); margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; }
  .colors .swipe-hint { display: block; }
  /* the 3D pop-up fills the phone; colours scroll sideways in one row */
  .viewer { width: 100%; max-width: none; height: 100svh; max-height: none; margin: 0; border-radius: 0; border: 0;
    padding: var(--s-2) var(--gutter) var(--s-3); }
  .viewer[open] { display: flex; flex-direction: column; }
  .viewer .stage { flex: 1; height: auto; min-height: 260px; }
  .viewer .swatch-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .viewer .swatch-row::-webkit-scrollbar { display: none; }
  .viewer .swatch { flex: none; }
  .viewer-buy { justify-content: center; margin-top: var(--s-2); }
  .glide-copy { padding-top: calc(var(--bar-h) + 2vh); }
  /* phones: no pinned scroll scene, just one screen where the lure swims across on its own */
  .glide { height: auto; }
  .glide-pin { position: relative; height: 100svh; min-height: 600px; }
  .machine { width: calc(100% - 44px); margin-left: 0; }
  .window { margin: var(--s-2) var(--s-2) 0; }
  .marquee { padding: 12px var(--s-2); }
  .jackpot { margin: var(--s-2) var(--s-2) 0; }
  .lever-arm { right: -40px; transform: scale(.85); transform-origin: left top; }
}
.swipe-hint { display: none; color: var(--mute); font-size: var(--fs-small); margin-top: var(--s-2); }

@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .nav { display: flex; }
  .top .btn { margin-left: 0; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  .bulbs { animation: none; }
}