/* the pinned sky stage */
.stage-sec{position:relative;height:200vh}
.stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#3F8CCB}
.scene-wrap{position:absolute;left:0;top:0;width:100%;height:max(137.5vw,220vh);will-change:transform}
.scene-wrap svg{width:100%;height:100%;display:block}
.cloud-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cloud-layer svg{position:absolute;left:0;overflow:visible;will-change:transform}
@keyframes drift{from{transform:translate3d(var(--from),0,0)}to{transform:translate3d(var(--to),0,0)}}

.mega{position:absolute;left:0;right:0;top:clamp(96px,14vh,150px);z-index:4;text-align:center;font-weight:800;font-size:clamp(3.2rem,12.4vw,10.5rem);line-height:.92;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 3px rgba(18,49,90,.35),0 6px 36px rgba(18,49,90,.6);padding:0 var(--gut)}
.mega .ln{display:block}
@media (min-width:761px){
  .mega{font-size:clamp(2.8rem,8.4vw,9.5rem)}
  .mega .ln{display:inline}
  .mega .ln+.ln{margin-left:.26em}
}
.mega .wd{display:inline-block;white-space:nowrap}
.mega .ch{display:inline-block}

.arena{--cs:min(53.24vh,77.44vw,36.3rem);position:absolute;left:50%;top:52%;z-index:3;width:min(94vw,64rem);height:min(60vh,36rem);transform:translate(-50%,-50%) translateY(9vh)}
.coin-wrap{position:absolute;left:50%;top:50%;width:var(--cs);aspect-ratio:1;translate:-50% -50%;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{translate:-50% calc(-50% - 12px)}}
/* the flip is drawn with plain 2D transforms: each slice and face is squashed by cos(angle) and shifted by depth*sin(angle) */
.coin{position:absolute;inset:0}
.slices i{position:absolute;inset:7%;border-radius:50%;transform-origin:50% 50%}
.face{position:absolute;inset:0;transform-origin:50% 50%;z-index:100}
.face svg{display:block;width:100%;height:100%;overflow:visible;animation:spinface 90s linear infinite}
.face.back{display:none}
.face .shade{position:absolute;inset:7%;border-radius:50%;background:#2a1406;opacity:0;pointer-events:none}
@keyframes spinface{to{rotate:360deg}}

.chips{list-style:none;padding:0;margin:0}
.chips li{position:absolute;display:flex;align-items:center;gap:10px;pointer-events:none}
/* the callouts are not scroll-linked: once the flip lands, the icons pop in one by one and their labels follow */
.chips .cicon{opacity:0;scale:.85;transition:opacity .28s var(--ease) var(--di,0ms),scale .28s var(--ease) var(--di,0ms)}
.chips .clabel{opacity:0;translate:var(--lx,-8px) 0;transition:opacity .35s var(--ease) var(--dl,0ms),translate .35s var(--ease) var(--dl,0ms)}
.c2,.c4{--lx:8px}
.c1{--di:0ms;--dl:240ms}.c2{--di:90ms;--dl:330ms}.c3{--di:180ms;--dl:420ms}.c4{--di:270ms;--dl:510ms}
.chips.on .cicon{opacity:1;scale:1}
.chips.on .clabel{opacity:1;translate:0 0}
.chips:not(.on) .cicon,.chips:not(.on) .clabel{transition-duration:.15s;transition-delay:0ms}
.chips .clabel{background:rgba(14,26,46,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-weight:600;font-size:.92rem;line-height:1.25;padding:9px 16px;border-radius:99px;max-width:12.5rem}
.chips .cicon{width:46px;height:46px;border-radius:15px;background:#111;display:grid;place-items:center;flex:none}
.chips svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.c2,.c4{flex-direction:row-reverse}
/* tablets and up: every label stays on one line */
@media (min-width:761px){.chips .clabel{white-space:nowrap;max-width:none}}
/* .diag (set by stage.js when the one-line labels fit beside the cookie): two diagonal pairs hugging it, as in the reference.
   Icons sit 1.36 radii out and 0.86 radii above and below centre (disc radius = 43% of the box) */
.arena.diag .c1,.arena.diag .c3{right:calc(50% + var(--cs)*.43*1.36 - 23px)}
.arena.diag .c2,.arena.diag .c4{left:calc(50% + var(--cs)*.43*1.36 - 23px)}
.arena.diag .c1,.arena.diag .c2{top:calc(50% - var(--cs)*.43*.86 - 23px)}
.arena.diag .c3,.arena.diag .c4{top:calc(50% + var(--cs)*.43*.86 - 23px)}
/* otherwise: two callouts above the cookie and two below it */
.arena:not(.diag){--cs:min(53.24vh,77.44vw,36.3rem,calc(100svh - 430px - 4vw));height:calc(var(--cs) + 176px)}
.arena:not(.diag) .c1{left:2%;top:0}.arena:not(.diag) .c2{right:2%;top:7%}.arena:not(.diag) .c3{left:2%;bottom:7%}.arena:not(.diag) .c4{right:2%;bottom:0}

.veil{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:3;background:linear-gradient(to bottom,rgba(20,50,35,0),rgba(20,50,35,.5));opacity:0;pointer-events:none}
.stage-h2{position:absolute;left:0;right:0;bottom:clamp(14px,4vh,44px);z-index:4;text-align:center;font-weight:800;font-size:clamp(2rem,6.4vw,5.6rem);line-height:.95;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 3px rgba(18,49,90,.25),0 8px 44px rgba(18,49,90,.5);padding:0 var(--gut);text-wrap:balance;max-width:none}
.stage-h2 .wd{display:inline-block;white-space:nowrap}
.js .stage-h2 .ch{display:inline-block;opacity:0}

.hero-info{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,40px);z-index:5;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:center;padding:0 var(--gut)}
.hero-info p{padding:14px 22px;border-radius:20px;font-size:.98rem;max-width:30rem;text-align:left;background:rgba(255,247,238,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink)}
.hero-info .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-info .btn{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.hero-info .btn.glassbtn{background:rgba(255,247,238,.9);border-color:rgba(255,247,238,.9)}
@media (hover:hover) and (pointer:fine){.hero-info .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .coin-wrap,.face svg{animation:none}
  .chips .cicon,.chips .clabel{scale:1;translate:0 0;transition-property:opacity;transition-delay:0ms}
}
@media (max-width:760px){
  .arena,.arena:not(.diag){--cs:min(70.2vw,43.6vh,calc(100svh - 430px));width:100vw;top:50%;height:calc(var(--cs) + 230px)}
  /* phones: the two callouts in each row sit one under the other, so they never overlap */
  .arena:not(.diag) .c2{top:62px}.arena:not(.diag) .c3{bottom:62px}
  .chips .clabel{font-size:.78rem;padding:7px 12px;max-width:8.8rem;border-radius:16px}
  .chips .cicon{width:38px;height:38px;border-radius:12px}
  .hero-info p{text-align:center}
  .hero-info .btn{flex:1 1 100%}
}