/* Home: the launch film's stage, scene by scene. */

/* ---------------- hero: title card over the deck and the phone ---------------- */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-top: clamp(96px, 13vh, 124px); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 50% -10%, #19201c 0%, #0b0d0c 42%, var(--void) 75%); }
.holo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-light { position: absolute; left: 50%; top: 18%; width: 1100px; height: 900px; margin-left: -550px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(66, 78, 72, 0.5), rgba(66, 78, 72, 0.14) 55%, transparent); }
.hero-copy { position: relative; text-align: center; }
.hero-copy .display { white-space: nowrap; }
.hero, .stage { --pw: clamp(190px, 17vw, 262px); }
.ways, .scene, .trust, .payin, .sellers { overflow-x: clip; }
.hero-stage { position: relative; flex: 1; min-height: clamp(470px, 60vh, 660px); perspective: 1700px; margin-top: clamp(-8px, 1vh, 20px); }
.floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 64px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.hero-phone { position: absolute; left: 50%; bottom: 64px; z-index: 2; transform: translateX(-50%);
  -webkit-box-reflect: below 4px linear-gradient(transparent 86%, rgba(255, 255, 255, 0.16)); }
.fan { position: absolute; left: 50%; bottom: 64px; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 0.6s var(--ease-out); }
/* a hand of slabs behind the phone, pivoting below the floor */
.fan-slab { --w: calc(var(--pw) * 0.8); --a: calc((var(--i) - 2.5) * 12.5deg); position: absolute; bottom: calc(var(--pw) * 0.92); left: calc(var(--w) / -2);
  transform-origin: 50% 205%; transform: rotate(var(--a)) translateZ(calc(var(--i) * -1px)); }
.js .hero .fan-slab { transform: rotate(0deg) translateY(30px); opacity: 0; transition: transform 1.25s var(--ease-deal), opacity 0.5s; transition-delay: calc(0.25s + var(--i) * 0.07s); }
.js .hero.in .fan-slab { transform: rotate(var(--a)) translateZ(calc(var(--i) * -1px)); opacity: 1; }
/* a glint runs along the fan now and then */
.fan-slab .slab-front::after { content: ''; position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 45%, rgba(94, 224, 143, 0.35) 55%, transparent);
  transform: translateX(0) skewX(-12deg); animation: glint 7s var(--ease-out) infinite; animation-delay: calc(2.4s + var(--i) * 0.11s); opacity: 0; }
@keyframes glint { 0% { transform: translateX(0) skewX(-12deg); opacity: 0; } 2% { opacity: 1; } 14% { transform: translateX(380%) skewX(-12deg); opacity: 0; } 100% { transform: translateX(380%) skewX(-12deg); opacity: 0; } }

.hero-act { position: absolute; inset: auto 0 clamp(84px, 11vh, 120px); z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.hero-act > * { pointer-events: auto; }
.hero-left { width: min(360px, calc(50% - var(--pw) * 1.05)); }
.hero-left .lede { font-size: clamp(1.06rem, 1.25vw, 1.2rem); text-wrap: pretty; }
.act-row { margin-top: 26px; }
.soon { margin: 16px 0 0; font-size: 0.9rem; }
.hero-callout { position: relative; width: min(330px, calc(50% - var(--pw) * 1.05)); height: 160px; }
.hero-callout svg { left: -56px; top: 0; }
.hero-callout .callout-text { left: 4px; top: 76px; width: 100%; }

/* ---------------- three ways to score ---------------- */
.ways { padding: clamp(110px, 15vw, 200px) 0 clamp(80px, 10vw, 140px); text-align: center; position: relative; }
.ways-lede { margin: 22px auto 0; color: var(--grey); max-width: 40ch; }
.ways-deck { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 4vw, 64px); margin-top: clamp(56px, 7vw, 96px); padding: 0 var(--gutter); perspective: 1800px; }
.way { display: flex; flex-direction: column; align-items: center; flex: 0 1 300px; min-width: 0; }
.way-slab { --w: clamp(104px, 23vw, 290px); transform: rotate(var(--r)) rotateY(0deg); transition: transform 1.1s var(--ease-deal); transition-delay: var(--d); }
.way-slab.down { transform: rotate(var(--r)) rotateY(180deg) translateY(-18px); }
.way-cap { position: relative; margin-top: 46px; display: grid; gap: 6px; }
.way-cap::before { content: ''; position: absolute; left: 50%; top: -34px; width: 1px; height: 22px; background: var(--hair); }
.way-cap::after { content: ''; position: absolute; left: 50%; top: -38px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--ink); }
.way-cap .label { color: var(--ink); font-weight: 700; font-size: clamp(0.72rem, 1.4vw, 0.95rem); }
.way-cap .way-red { color: var(--red-mid); }
.way-cap .way-green { color: var(--mint); }
.way-cap span { color: var(--grey); font-size: clamp(0.92rem, 1.5vw, 1.15rem); font-weight: 300; }

/* ---------------- a scene per way to buy ---------------- */
.scene { position: relative; padding: clamp(70px, 10vw, 150px) 0; }
.scene::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at var(--lx, 28%) 55%, rgba(66, 78, 72, 0.28), transparent 70%); }
.scene.flip { --lx: 72%; }
.scene[data-scene='drop']::before { background: radial-gradient(55% 60% at var(--lx) 55%, rgba(120, 50, 44, 0.24), transparent 70%); }
.scene-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 6vw, 100px); align-items: center; }
.scene.flip .scene-stage { order: 2; }
.scene-stage { position: relative; display: grid; place-items: end center; min-height: calc(var(--pw) * 2.28 + 104px); padding-bottom: 64px; }
.deal-slot { position: relative; }
.scene-phone { -webkit-box-reflect: below 4px linear-gradient(transparent 86%, rgba(255, 255, 255, 0.14)); }
.js .scene-phone video { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.js .scene.live .scene-phone video { opacity: 1; }
.deal-slab { --w: calc(var(--pw) * 0.86); position: absolute; left: 50%; top: 50%; margin: calc(var(--w) * -0.6625) 0 0 calc(var(--w) / -2); z-index: 6; opacity: 0; pointer-events: none; }
.no-js .deal-slab { display: none; }
.scene.dealt .deal-slab { animation: deal 2.1s linear forwards; }
@keyframes deal {
  0% { opacity: 1; transform: translate(calc(var(--throw, -1) * 55vw), -45vh) rotate(calc(var(--throw, -1) * 38deg)) rotateY(180deg) scale(0.92); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.08); }
  34% { opacity: 1; transform: translate(0, 0) rotate(calc(var(--throw, -1) * -3deg)) rotateY(180deg) scale(1); animation-timing-function: var(--ease-out); }
  40% { transform: translate(0, 0) rotate(0deg) rotateY(180deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }
  60% { opacity: 1; transform: rotateY(0deg) scale(1.02); }
  78% { opacity: 1; transform: rotateY(0deg) scale(1); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: rotateY(0deg) scale(1.12); filter: blur(4px); }
}
.scene.flip .deal-slab { --throw: 1; }
.scene-sticker { position: absolute; right: calc(var(--pw) * -0.2); top: 30%; z-index: 7; font-size: clamp(0.9rem, 1.3vw, 1.15rem); }
.scene.flip .scene-sticker { right: auto; left: calc(var(--pw) * -0.22); }
.scene-copy .body { margin: 0; }

.demo { margin: clamp(22px, 3vw, 36px) 0 clamp(22px, 3vw, 32px); max-width: 540px; }
.demo-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.demo-row .label { color: var(--grey); }
.demo-row.big { margin-top: 10px; }
.demo-row.big .num { font-size: clamp(2.7rem, 5.6vw, 5rem); line-height: 0.95; }
.demo-note { margin: 14px 0 0; min-height: 1.4em; font: 400 0.8125rem/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); }
.clock { background: linear-gradient(100deg, var(--mint-pale), var(--mint) 45%, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(23, 163, 74, 0.45)); transition: filter 0.4s; }
.clock.reset { animation: kick 0.6s var(--ease-deal); filter: drop-shadow(0 0 36px rgba(94, 224, 143, 0.9)); }
.clock.low { background-image: linear-gradient(100deg, var(--red-pale), var(--red-mid) 45%, var(--red)); filter: drop-shadow(0 0 18px rgba(255, 70, 60, 0.5)); }
[data-bid].kick, .drop-price.kick { animation: kick 0.5s var(--ease-deal); }
@keyframes kick { 0% { transform: translateY(-8px) scale(1.06); } 100% { transform: none; } }
.drop-price { display: inline-flex; align-items: center; gap: 0.12em; }
.drop-price [data-price] { background: linear-gradient(100deg, var(--red-pale), var(--red-mid) 45%, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(255, 70, 60, 0.5)); }
.drop-arrow { color: var(--red-mid); display: inline-flex; }
.drop-arrow svg { width: 0.62em; height: 0.62em; }
.drop-price.grabbed [data-price] { filter: drop-shadow(0 0 40px rgba(255, 70, 60, 0.95)); }
.tiles { display: flex; gap: clamp(3px, 0.5vw, 7px); }
.tile { display: grid; place-items: center; width: clamp(26px, 3.1vw, 46px); aspect-ratio: 1; border-radius: 18%; background: #161616; box-shadow: inset 0 0 0 1.5px #2e2e2e; color: #8c8c91; font: 800 clamp(0.95rem, 1.9vw, 1.6rem)/1 var(--display); }
.tile.lit { background: var(--green-deep); color: #fff; box-shadow: 0 6px 16px -4px rgba(23, 163, 74, 0.7); }
.tile.pop { animation: pop 0.5s var(--ease-deal); }
@keyframes pop { 0% { transform: scale(1.3); box-shadow: 0 10px 30px -4px rgba(94, 224, 143, 0.95); } 100% { transform: none; } }
.tiles.won .tile { animation: shine 0.9s var(--ease-out) calc(var(--t) * 45ms) both; }
@keyframes shine { 0%, 100% { filter: none; } 40% { filter: brightness(1.5); } }
.roll { color: var(--ink); min-width: 2ch; text-align: right; }
.roll.mine { background: linear-gradient(100deg, var(--mint-pale), var(--mint) 45%, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(23, 163, 74, 0.6)); }
.roll.spin { animation: spin 0.32s var(--ease-out); }
@keyframes spin { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------------- trust: stickers slapped onto a slab, captions hung from it ---------------- */
.trust { padding: clamp(100px, 14vw, 190px) 0 clamp(80px, 10vw, 140px); text-align: center; position: relative; }
.trust::before { content: ''; position: absolute; left: 50%; top: 40%; width: 900px; height: 700px; margin-left: -450px; z-index: -1; background: radial-gradient(closest-side, rgba(66, 78, 72, 0.32), transparent); pointer-events: none; }
.trust .h1 { max-width: 15ch; margin-inline: auto; }
.trust-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: 't1 slab t3' 't2 slab t4'; gap: clamp(40px, 6vw, 96px) clamp(48px, 7vw, 120px); align-items: center; margin-top: clamp(64px, 8vw, 110px); }
.trust-notes { display: contents; }
.trust-slab { grid-area: slab; position: relative; }
.big-slab { --w: clamp(230px, 24vw, 320px); transform: rotate(-3deg); }
.trust-slab .sticker { position: absolute; z-index: 2; font-size: clamp(0.85rem, 1.25vw, 1.1rem); }
.s1 { left: -18%; top: 40%; } .s2 { left: -12%; top: 70%; } .s3 { right: -20%; top: 28%; } .s4 { right: -12%; top: 80%; }
.t1 { grid-area: t1; } .t2 { grid-area: t2; } .t3 { grid-area: t3; } .t4 { grid-area: t4; }
.trust-item { position: relative; display: grid; gap: 8px; }
.trust-item dt { font: 700 0.8125rem/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.trust-item dd { margin: 0; color: var(--grey); font-weight: 400; font-size: 1.0625rem; line-height: 1.5; }
.t1, .t2 { justify-items: end; text-align: right; padding-right: 26px; }
.t3, .t4 { justify-items: start; text-align: left; padding-left: 26px; }
.t1 dd, .t2 dd, .t3 dd, .t4 dd { max-width: 30ch; }
/* the hairline from each caption toward its sticker */
.trust-item::before { content: ''; position: absolute; top: 0.55em; width: clamp(30px, 5vw, 80px); height: 1px; background: var(--hair); }
.trust-item::after { content: ''; position: absolute; top: calc(0.55em - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.t1::before, .t2::before { right: calc(clamp(30px, 5vw, 80px) * -1); } .t1::after, .t2::after { right: calc(clamp(30px, 5vw, 80px) * -1 - 3px); }
.t3::before, .t4::before { left: calc(clamp(30px, 5vw, 80px) * -1); } .t3::after, .t4::after { left: calc(clamp(30px, 5vw, 80px) * -1 - 3px); }

/* ---------------- payments ---------------- */
.payin { padding: clamp(70px, 9vw, 130px) 0; }
.payin-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.payin .body { margin-top: 22px; }
.pay-rows { display: grid; gap: 34px; }
.pay-head { display: flex; align-items: center; gap: 14px; color: var(--grey); font-size: 1.15rem; font-weight: 300; }
.pay-head b { color: var(--ink); font-weight: 700; }
.flag { display: inline-block; width: 46px; height: 30px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 8px 14px -4px rgba(0, 0, 0, 0.6); transform: rotate(var(--r)); }
.flag svg { width: 100%; height: 100%; }
.pay-logos { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 16px; }
.paychip { display: grid; place-items: center; width: 92px; height: 54px; padding: 9px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 3px #fff, 0 10px 16px -6px rgba(0, 0, 0, 0.6); transform: rotate(var(--r)); }
.paychip img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pay-note { margin: 0; color: var(--grey); font: 400 0.95rem/1.5 var(--display); }

/* ---------------- sellers ---------------- */
.sellers { padding: clamp(70px, 9vw, 130px) 0 clamp(110px, 14vw, 190px); }
.sellers-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sellers .body { margin: 22px 0 28px; }
.sellers .sheet { transform: rotate(1.5deg); }

/* ---------------- the end: a light sweep to the white stage ---------------- */
.end { position: relative; overflow: hidden; background: var(--void); color: var(--paper-ink); text-align: center; padding: clamp(120px, 16vw, 200px) var(--gutter) 0; --s: 0; }
.end.done { background: linear-gradient(var(--void) 0 60px, var(--paper) 60px); }
.sweep { position: absolute; inset: 0 0 -2px; background: var(--paper); clip-path: polygon(0 0, calc(var(--s) * 170% - 30%) 0, calc(var(--s) * 170% - 70%) 100%, 0 100%); }
.sweep::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34%; left: calc(var(--s) * 170% - 62%); pointer-events: none; opacity: calc(1 - var(--s));
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.0) 30%, rgba(255, 255, 255, 0.95) 62%, rgba(255, 255, 255, 0) 64%); filter: blur(10px); }
.no-js .end, .end.done { --s: 1; }
.end-inner { position: relative; }
.js .end-inner > :not(.end-stage) { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); }
.js .end.lit .end-inner > :not(.end-stage) { opacity: 1; transform: none; }
.js .end.lit .end-sub { transition-delay: 0.35s; }
.js .end.lit .pill { transition-delay: 0.5s; }
.end-title { margin: 0; font-weight: 300; letter-spacing: -0.04em; }
.end-q { display: block; font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.05; color: var(--paper-ink); }
.end-a { display: inline-block; margin-top: 6px; font-weight: 800; font-size: clamp(4rem, 11vw, 6rem); line-height: 1; letter-spacing: -0.03em;
  background-image: linear-gradient(100deg, #0f7a35, var(--green) 50%, #22c55e); filter: drop-shadow(0 8px 22px rgba(23, 163, 74, 0.3)); }
.end-sub { margin: 18px auto 30px; color: var(--paper-grey); font-weight: 400; font-size: 1.1rem; max-width: 40ch; }
.end .pill { box-shadow: 0 12px 28px -10px rgba(23, 163, 74, 0.7); }
.end-stage { position: relative; height: calc(var(--pw) * 2.42 + 64px); margin-top: clamp(40px, 5vw, 64px); --pw: clamp(160px, 14vw, 210px); }
.end-light { position: absolute; left: 50%; bottom: 0; width: 900px; height: 640px; margin-left: -450px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 97%); mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
  background: radial-gradient(38% 14% at 50% 92%, rgba(23, 163, 74, 0.26), rgba(23, 163, 74, 0) 100%), radial-gradient(closest-side, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 80%); }
.end.done .sweep, .no-js .sweep { background: linear-gradient(to bottom, rgba(245, 245, 247, 0) 78%, #f5f5f7 100%), radial-gradient(70% 55% at 50% 62%, #ffffff 0%, #f5f5f7 55%, #e8ebe9 100%); }
.end-fan .fan-slab { --w: calc(var(--pw) * 0.8); --a: calc((var(--i) - 2) * 15deg); }
.end-fan .slab-front { box-shadow: inset 0 0 0 1cqw rgba(0, 0, 0, 0.10), 0 3cqw 9cqw -2cqw rgba(0, 0, 0, 0.28); background: rgba(255, 255, 255, 0.72); }
.end-phone { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 2; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45);
  -webkit-box-reflect: below 4px linear-gradient(transparent 88%, rgba(255, 255, 255, 0.35)); }
.end-floor { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.045), rgba(0, 0, 0, 0) 85%); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08); }
/* the settled sweep keeps a lit falloff from the dark stage above */
.sweep::before { content: ''; position: absolute; inset: 0 0 auto; height: clamp(120px, 14vw, 200px); background: linear-gradient(to bottom, var(--void) 0%, #0b1d12 22%, #2f9c5c 40%, #bff0d2 52%, #fbfffc 60%, rgba(245, 245, 247, 0) 100%); opacity: var(--s); pointer-events: none; }
.end-title { position: relative; }
.end + .foot { position: relative; }

/* ---------------- smaller screens ---------------- */
@media (max-width: 900px) {
  .hero-copy .display { white-space: normal; }
  .hero { padding-top: 96px; }
  .hero-act { position: relative; inset: auto; order: 1; flex-direction: column; align-items: center; text-align: center; margin-top: 22px; }
  .hero-left { width: auto; max-width: 420px; }
  .hero-left .lede { margin-inline: auto; }
  .hero-stage { order: 2; flex: none; min-height: 0; height: calc(var(--pw) * 2.6 + 64px); margin-top: 26px; }
  .stage { --pw: clamp(170px, 46vw, 230px); }
  .hero-callout { display: none; }
  .scene-grid, .payin-grid, .sellers-grid { grid-template-columns: 1fr; }
  .scene.flip .scene-stage { order: 0; }
  .scene-stage { min-height: 0; }
  .scene-sticker, .scene.flip .scene-sticker { right: calc(var(--pw) * -0.12); left: auto; }
  .trust-board { grid-template-columns: 1fr; grid-template-areas: 'slab' 't1' 't2' 't3' 't4'; justify-items: center; gap: 22px; }
  .trust-slab { margin: 0 0 30px; }
  .big-slab { --w: min(62vw, 260px); }
  .s1 { left: -14%; } .s3 { right: -14%; } .s2, .s4 { display: inline-flex; }
  .trust-item, .t1, .t2, .t3, .t4 { justify-items: center; text-align: center; padding: 0; }
  .trust-item::before, .trust-item::after { display: none; }
  .pay-logos { gap: 12px; }
  .paychip { width: 72px; height: 46px; padding: 8px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .fan-slab .slab-front::after { display: none; }
  .js .hero .fan-slab { opacity: 1; transform: rotate(var(--a)); }
  .way-slab.down { transform: rotate(var(--r)); }
  .deal-slab { display: none; }
  .js .scene-phone video { opacity: 1; }
  .end { --s: 1; }
  .js .end-inner > :not(.end-stage) { opacity: 1; transform: none; }
}