:root {
  --wash: #d7eefc;
  --fg: #1d2a3a;
  --orange: #ff7b22;
  --green: #2f9a4c;
  --navy: #1d2a3a;
  --font: 'Rubik', system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 80px);
  --head: 76px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--wash); color: var(--fg); transition: background-color .8s ease, color .8s ease; -webkit-font-smoothing: antialiased; overflow-x: clip; scroll-padding-top: var(--head); }
body { font-family: var(--font); font-size: 18px; line-height: 1.5; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; }
h1, h2, h3 { font-weight: 900; letter-spacing: -0.045em; line-height: .92; overflow-wrap: break-word; }
em { font-style: italic; color: var(--orange); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }

/* Header */
header.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--head); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--pad); transition: background-color .8s ease, box-shadow .3s ease; }
header.bar.solid { background: color-mix(in srgb, var(--wash) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.play { white-space: nowrap; padding: 12px 22px; border-radius: 16px; background: var(--fg); color: var(--wash); font-weight: 700; font-size: 15px; transition: background-color .8s ease, color .8s ease, transform .2s ease; }
.play:hover { transform: translateY(-2px); }

/* Logo mark: fruit, ring, slice Z */
.mk { overflow: visible; cursor: pointer; flex: none; }
.mk > *, .mk g { transform-box: fill-box; transform-origin: center; }
.mk-hole { fill: var(--wash); transform: scale(0); transition: transform .55s cubic-bezier(.4, 1.4, .5, 1), fill .8s ease; }
.mk-shine { transition: opacity .4s ease; }
.mk-slice { transform: scale(0) rotate(-90deg); opacity: 0; transition: transform .55s cubic-bezier(.4, 1.3, .5, 1), opacity .3s ease; }
.mk-z { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s .25s ease; }
.mk[data-m="ring"] .mk-hole { transform: scale(1); }
.mk[data-m="ring"] .mk-shine, .mk[data-m="slice"] .mk-shine { opacity: 0; }
.mk[data-m="slice"] .mk-slice { transform: none; opacity: 1; }
.mk[data-m="slice"] .mk-z { stroke-dashoffset: 0; }

/* Buttons */
.bigbtn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 26px; border-radius: 20px; font-weight: 800; font-size: 18px; white-space: nowrap; transition: transform .2s ease; }
.bigbtn:hover { transform: translateY(-3px); }
.bigbtn.o { background: var(--orange); color: #fff; box-shadow: 0 6px 0 rgba(150, 50, 0, .25); }
.bigbtn.w { background: #fff; color: #e2560a; box-shadow: 0 6px 0 rgba(0, 0, 0, .14); }
.bigbtn.k { background: var(--navy); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.bigbtn.ghost { box-shadow: inset 0 0 0 2px currentColor; }

/* Pinned scenes */
.pin { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }

/* Ticket */
.ticket { position: relative; width: 300px; height: 150px; flex: none; border-radius: 18px; background: linear-gradient(135deg, #ffd27a, #ffab3d); color: #3a2105; padding: 20px 22px; -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .2)); }
.ticket b { display: block; font-weight: 900; font-size: 32px; letter-spacing: -0.03em; line-height: 1; margin-top: 2px; }
.ticket small { font-weight: 700; font-size: 13px; opacity: .75; }
.ticket i { position: absolute; left: 22px; right: 22px; bottom: 18px; border-top: 2px dashed rgba(58, 33, 5, .35); font-style: normal; font-size: 13px; font-weight: 700; padding-top: 8px; opacity: .8; }
.ok { width: 26px; height: 26px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; margin-left: auto; }
.ok svg { width: 14px; height: 14px; }

/* Opening */
#open { height: 210vh; }
.open-stage { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 3vw; padding: calc(var(--head) + 2vh) var(--pad) 6vh; }
.open-text { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: clamp(20px, 5vh, 60px); min-width: 0; }
.words { font-size: clamp(44px, min(7vw, 11svh), 132px); }
.words span { opacity: clamp(0.18, var(--p) * 12 - var(--i) + 3, 1); }
.words .br { display: block; height: 0; }
.after { max-width: 40ch; font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; }
.after .row { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.tl { font-weight: 700; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.open-media { position: relative; height: min(76svh, 640px); }
.phone-float { position: absolute; right: 4%; top: 6%; width: clamp(150px, min(15vw, 34svh), 230px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 30px 60px -30px rgba(20, 40, 70, .45); background: #8fd16a; transform: translateY(calc(var(--p, 0) * -18svh)) rotate(6deg); }
.phone-float video { width: 100%; height: 100%; object-fit: cover; }
.clip-soon { position: absolute; left: 0; top: 0; width: clamp(160px, 14vw, 230px); aspect-ratio: 16 / 10; border-radius: 20px; border: 5px solid #fff; box-shadow: 0 30px 60px -30px rgba(20, 40, 70, .45); display: grid; place-content: center; text-align: center; color: #fff; background: radial-gradient(80% 90% at 60% 20%, #8f7bff, #4a3290 70%); transform: translateY(calc(var(--p, 0) * -10svh)) rotate(-5deg); }
.clip-soon .pl { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; margin: 0 auto 8px; }
.clip-soon b { font-weight: 900; font-size: 18px; letter-spacing: -0.02em; }
.clip-soon small { font-weight: 600; font-size: 13px; opacity: .8; }
.t-float { position: absolute; left: 6%; bottom: 4%; transform: translateY(calc(var(--p, 0) * -26svh)) rotate(-8deg) scale(.66); transform-origin: left bottom; }

/* How it works */
#how { height: 520vh; }
.how-stage { color: #fff; background: #7b5cff; transition: background-color .6s ease; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: calc(var(--head) + 3vh) var(--pad) 6vh; }
.how-stage[data-step="1"] { background: #3aa7e6; }
.how-stage[data-step="2"] { background: #ff7b22; }
.how-stage[data-step="3"] { background: #1d2a3a; }
.how-stage[data-step="4"] { background: #2f9a4c; }
.how-text { display: flex; flex-direction: column; gap: 4vh; min-width: 0; }
.how-tag { font-weight: 800; font-size: clamp(17px, 1.5vw, 22px); letter-spacing: 0; line-height: 1.2; opacity: .85; }
.hw { opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.hw b { display: block; font-weight: 900; font-style: italic; font-size: clamp(64px, min(11vw, 17svh), 200px); letter-spacing: -0.06em; line-height: .9; padding-right: .1em; }
.hw p { font-size: clamp(17px, 1.6vw, 23px); font-weight: 500; margin-top: 14px; max-width: 32ch; }
.how-art { place-items: center; height: min(70svh, 600px); min-width: 0; }
.a { opacity: 0; transform: translateY(36px) rotate(3deg); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); max-height: 100%; display: grid; place-items: center; }
.how-stage[data-step="0"] .s0, .how-stage[data-step="1"] .s1, .how-stage[data-step="2"] .s2, .how-stage[data-step="3"] .s3, .how-stage[data-step="4"] .s4 { opacity: 1; transform: none; }
.ph { aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5); background: #8fd16a; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.how-art .ph { height: min(64svh, 560px); transform: rotate(3deg); }
.tix { position: relative; width: 320px; height: 290px; }
.tix .ticket { position: absolute; left: 10px; }
.tix .ticket:nth-child(1) { top: 0; transform: rotate(-8deg); }
.tix .ticket:nth-child(2) { top: 64px; transform: rotate(3deg); }
.tix .ticket:nth-child(3) { top: 128px; transform: rotate(-2deg); }
.wallet { width: 330px; background: #fff; color: var(--navy); border-radius: 28px; padding: 24px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.wallet b { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; }
.wallet ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.wallet li { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #f1f5f9; font-weight: 700; }
.minted { position: relative; }
.minted .stamp { position: absolute; right: -18px; top: -24px; padding: 8px 16px; border-radius: 14px; background: #fff; color: var(--green); font-weight: 900; font-size: 22px; text-transform: uppercase; transform: rotate(10deg); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4); }
.giver { display: grid; justify-items: center; gap: 16px; }
.brandchip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 800; }
.brandchip i { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(#7b5cff, #3fc1ff, #7b5cff); }
.dots { display: flex; gap: 10px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .3s, transform .3s; }
.how-stage[data-step="0"] .dots i:nth-child(1), .how-stage[data-step="1"] .dots i:nth-child(2), .how-stage[data-step="2"] .dots i:nth-child(3), .how-stage[data-step="3"] .dots i:nth-child(4), .how-stage[data-step="4"] .dots i:nth-child(5) { background: #fff; transform: scale(1.3); }

/* Two ways in */
.ways { padding: 16vh var(--pad); }
.sec-title { font-size: clamp(48px, 7vw, 120px); }
.ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 5vh, 56px); }
.way { border-radius: 32px; padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.way-play { background: #fff; color: var(--navy); }
.way-hunt { background: var(--navy); color: #fff; }
.way-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #eaf5fd; }
.way-hunt .way-ic { background: rgba(255, 255, 255, .1); }
.way-ic svg { width: 36px; height: 36px; }
.way h3 { font-size: clamp(32px, 3.2vw, 52px); margin-top: 26px; }
.way p { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; margin-top: 14px; opacity: .8; max-width: 34ch; }
.way dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; margin: 28px 0 32px; padding-top: 22px; border-top: 2px solid currentColor; border-color: rgba(29, 42, 58, .12); font-size: 17px; font-weight: 600; width: 100%; }
.way-hunt dl { border-color: rgba(255, 255, 255, .16); }
.way dt { font-weight: 800; opacity: .5; }
.way .bigbtn { margin-top: auto; }

/* TOLZ */
.tolzband { background: var(--orange); color: #fff; padding: 14vh 0 12vh; overflow: hidden; text-align: center; }
.tolzband h2 { font-size: clamp(46px, 6.4vw, 108px); padding: 0 var(--pad); }
.tolzband p { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; max-width: 40ch; margin: 18px auto 0; padding: 0 var(--pad); }
.tolzband .bigbtn { margin-top: 28px; }
.strip { margin-top: 52px; display: flex; gap: 18px; width: max-content; animation: drift 60s linear infinite; }
.strip img { width: clamp(140px, 14vw, 200px); height: auto; aspect-ratio: 1; border-radius: 28px; border: 5px solid #fff; object-fit: cover; }
.strip img:nth-child(odd) { transform: rotate(-3deg); }
.strip img:nth-child(even) { transform: rotate(3deg) translateY(10px); }
@keyframes drift { to { transform: translateX(calc(-50% - 9px)); } }

/* OrangeCrush strip */
#games { height: 360vh; }
.games-stage { display: flex; align-items: center; padding-top: var(--head); }
.track { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: 0 var(--pad); width: max-content; transform: translateX(calc((100vw - 100%) * var(--p, 0))); will-change: transform; }
.lead { width: min(540px, 82vw); flex: none; color: #fff; }
.lead small { font-weight: 800; font-size: clamp(16px, 1.4vw, 20px); opacity: .85; }
.lead h2 { font-style: italic; font-size: clamp(60px, min(8.6vw, 15svh), 150px); line-height: .86; margin-top: 10px; text-shadow: 0 6px 0 rgba(150, 50, 0, .25); }
.lead p { font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; margin-top: 20px; max-width: 26ch; }
.shot { flex: none; width: clamp(170px, min(20vw, 32svh), 300px); color: #fff; }
.shot .ph { width: 100%; transform: rotate(-2deg); }
.shot:nth-of-type(even) .ph { transform: rotate(2deg) translateY(4svh); }
.shot figcaption { margin-top: 22px; }
.shot:nth-of-type(even) figcaption { margin-top: calc(22px + 4svh); }
.shot figcaption b { display: block; font-weight: 800; font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -0.02em; line-height: 1.15; }
.shot figcaption span { display: block; font-size: 15px; opacity: .9; margin-top: 4px; }
.end { flex: none; width: min(400px, 78vw); color: #fff; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.end h3 { font-size: clamp(40px, 4.4vw, 70px); margin-bottom: 14px; }

/* Game two */
.two { position: relative; background: #21173f; color: #f3eeff; min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18vh var(--pad); }
.two .sky { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.6px 1.6px at 18% 22%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 72% 16%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 86% 58%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 32% 78%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 58% 42%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 10% 88%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 64% 86%, #fff 50%, transparent); opacity: .65; }
.two .sprout { width: 110px; margin-bottom: 26px; }
.two h2 { font-size: clamp(60px, 10vw, 170px); }
.two p { font-size: clamp(18px, 1.6vw, 22px); margin-top: 20px; opacity: .85; max-width: 34ch; }
.two .tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.two .tags span { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(243, 238, 255, .3); font-weight: 700; font-size: 15px; }

/* For projects */
#projects { height: 300vh; }
.proj-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 5vw; padding: calc(var(--head) + 2vh) var(--pad) 6vh; }
.pcopy h2 { font-size: clamp(46px, min(6vw, 10svh), 104px); }
.pcopy p { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; margin-top: 22px; max-width: 34ch; opacity: .8; }
.pcopy .bigbtn { margin-top: 28px; }
.winners { display: grid; gap: 14px; }
.winner { padding: 16px 18px; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -24px rgba(80, 50, 20, .55), 0 0 0 1px rgba(0, 0, 0, .04); display: flex; align-items: center; gap: 14px; opacity: var(--t, 1); transform: translateX(calc((1 - var(--t, 1)) * 40vw)) rotate(calc((1 - var(--t, 1)) * 14deg)); }
.winner .face { width: 52px; height: 52px; border-radius: 16px; overflow: hidden; flex: none; background: #ffe2c6; }
.winner .face img { width: 100%; height: 100%; object-fit: cover; }
.winner b { display: block; font-weight: 800; font-size: 18px; }
.winner small { opacity: .6; font-size: 14px; }
.wn1 { --t: clamp(0, (var(--p, 1) - 0.06) * 5, 1); }
.wn2 { --t: clamp(0, (var(--p, 1) - 0.26) * 5, 1); }
.wn3 { --t: clamp(0, (var(--p, 1) - 0.46) * 5, 1); }
.wn4 { --t: clamp(0, (var(--p, 1) - 0.66) * 5, 1); }

/* Find us + footer */
.find { padding: 16vh var(--pad) 8vh; }
.find a { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; font-weight: 900; font-size: clamp(52px, 9vw, 150px); letter-spacing: -0.05em; line-height: 1.02; padding: 8px 0; border-bottom: 3px solid currentColor; transition: color .3s ease, padding .3s ease; }
.find a small { font-size: clamp(14px, 1.2vw, 18px); font-weight: 600; letter-spacing: 0; opacity: .7; }
.find a:hover { color: var(--orange); padding-left: 16px; }
.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 26px var(--pad) 40px; font-size: 15px; }
.foot > span { opacity: .75; }
.foot .fm { display: flex; align-items: center; gap: 10px; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].in { opacity: 1; transform: none; }

/* Tablet and phone */
@media (max-width: 900px) {
  :root { --head: 66px; }
  body { font-size: 16px; }
  .play .wide { display: none; }
  .brand { font-size: 17px; }

  .open-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 2svh; padding-bottom: 5svh; }
  .open-media { order: -1; height: min(24svh, 300px); }
  .phone-float { right: 6%; top: 0; width: auto; height: 100%; transform: translateY(calc(var(--p, 0) * -6svh)) rotate(6deg); border-width: 4px; border-radius: 20px; }
  .clip-soon { display: none; }
  .t-float { left: 0; bottom: 6%; transform: translateY(calc(var(--p, 0) * -8svh)) rotate(-8deg) scale(.5); }
  .open-text { justify-content: center; gap: 3svh; }
  .words { font-size: clamp(36px, min(11vw, 6.6svh), 76px); }
  .after .row { gap: 12px 20px; }

  #how { height: 480vh; }
  .how-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 2svh; align-items: stretch; padding-bottom: 5svh; }
  .how-text { display: contents; }
  .how-tag { grid-row: 1; }
  .how-art { grid-row: 2; height: auto; min-height: 0; }
  .how-text .stack { grid-row: 3; }
  .dots { grid-row: 3; align-self: end; justify-self: end; }
  .hw b { font-size: clamp(52px, min(16vw, 9svh), 96px); }
  .hw p { font-size: 16px; margin-top: 8px; padding-right: 64px; }
  .how-art .ph { height: min(34svh, 340px); }
  .a > * { transform: scale(.74); }
  .a > .ph { transform: rotate(3deg); }

  .ways { padding: 12vh var(--pad); }
  .ways-grid { grid-template-columns: minmax(0, 1fr); }
  .way h3 { margin-top: 20px; }

  .lead h2 { font-size: clamp(56px, min(16vw, 12svh), 96px); }
  .shot { width: clamp(150px, min(56vw, 36svh), 260px); }

  #projects { height: auto; }
  .proj-stage { position: static; height: auto; grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 12vh var(--pad); }
  .winner { --t: 1 !important; opacity: 1; transform: none; }
  .winner .face { width: 42px; height: 42px; }
}

@media (max-height: 560px) and (min-width: 901px) {
  .words { font-size: clamp(36px, 10svh, 80px); }
}

@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
  .strip { animation: none; }
  .mk *, [data-reveal], .hw, .a, .how-stage { transition: none !important; }
}