/* ============================================================
   Play Your Way — global styles
   (Section-specific styles live nearer their markup / in main.js
   render helpers. This file holds the base + reusable bits.)
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#1C1C1E;color:#E8E2D8;font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip;}
::selection{background:#FF9B54;color:#1C1C1E;}
a{color:inherit;text-decoration:none;}

/* ---- keyframes ---- */
@keyframes pyw-grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}50%{transform:translate(-2%,4%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,3%)}}
@keyframes pyw-pulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
@keyframes pyw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pyw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pyw-blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes pyw-scrolldown{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes pyw-reel{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;}}

/* ---- floating "Get Early Access" CTA: solid pill, light behind it ---- */
#pyw-float-cta{position:fixed;z-index:9100;right:clamp(20px,2.5vw,34px);bottom:clamp(20px,2.5vw,34px);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:.5px;color:#F4EFE6;background:#50643E;padding:15px 34px;border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:0 0 10px rgba(125,155,92,.32),0 8px 22px rgba(0,0,0,.45);cursor:pointer;isolation:isolate;transition:transform .2s,box-shadow .2s,background .2s;}
#pyw-float-cta::before{content:"";position:absolute;inset:-26% -16%;border-radius:inherit;background:radial-gradient(ellipse,rgba(135,165,98,.5),rgba(80,100,62,.14) 56%,transparent 78%);filter:blur(15px);z-index:-1;pointer-events:none;}
#pyw-float-cta:hover{background:#62794C;transform:translateY(-2px);box-shadow:0 0 16px rgba(135,165,98,.45),0 12px 28px rgba(0,0,0,.5);}
#pyw-float-cta:active{transform:translateY(1px);}

/* ---- community section: collapse on narrow screens ---- */
@media (max-width:900px){#comm-notifs{display:none !important;}#comm-top{grid-template-columns:1fr !important;}}

/* ============================================================
   HOW IT WORKS — map backdrop + deck carousel
   ============================================================ */
/* DESKTOP: map lays full-bleed behind the whole section (title + deck) */
#how-map{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);}
.how-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(44px,6vh,82px) clamp(20px,5vw,60px) clamp(44px,6vh,82px);}
.how-head{position:relative;z-index:2;margin-bottom:clamp(26px,4vh,48px);}
.how-head h2{text-shadow:0 3px 22px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.55);}
.how-head p{text-shadow:0 2px 16px rgba(0,0,0,.7);}

/* deck sized so title -> bottom of card fits one screen */
.deck-stage{position:relative;z-index:2;height:clamp(300px,40vh,430px);perspective:1500px;touch-action:pan-y;opacity:0;transform:translateY(34px);transition:opacity 1s ease .15s, transform 1s cubic-bezier(.2,.7,.2,1) .15s;}
.deck-stage.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.deck-stage{opacity:1 !important;transform:none !important;}}
.deck-card{position:absolute;top:0;left:50%;width:clamp(258px,30vw,360px);height:100%;margin-left:calc(clamp(258px,30vw,360px) / -2);cursor:pointer;touch-action:pan-y;transition:transform .55s cubic-bezier(.4,.1,.2,1),opacity .55s,filter .55s;transform-style:preserve-3d;will-change:transform,opacity;}
.deck-flip{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;}
.deck-card.flipped .deck-flip{transform:rotateY(180deg);}
.deck-face{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.deck-back{transform:rotateY(180deg);}

.deck-ui{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(18px,3vh,36px);}
#deck-btn{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:.5px;color:#F4EFE6;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:13px 42px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .35s;}
#deck-btn:hover{transform:translateY(-2px);}
#deck-btn:active{transform:translateY(1px);}
.deck-dots{display:flex;gap:10px;}
.deck-dots>span{width:8px;height:8px;border-radius:50%;background:rgba(232,226,216,.28);transition:background .25s,transform .25s;}
.deck-dots>span.on{transform:scale(1.4);}
/* lock wrappers are transparent on desktop (deck flows normally, no scroll-lock) */
.deck-lock,.deck-pin{display:contents;}
.deck-hint{display:flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(232,226,216,.5);transition:opacity .5s;}
.deck-hint.gone{opacity:0;pointer-events:none;}
.dh-swipe{display:inline-block;color:#FF9B54;font-size:14px;animation:pyw-swipehint 1.5s ease-in-out infinite;}
.dh-tap{display:inline-block;color:#FF9B54;animation:pyw-taphint 1.5s ease-in-out infinite;}
@keyframes pyw-swipehint{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes pyw-taphint{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.4);opacity:1}}

/* ===== CHOOSE YOUR MODE — pinned phone zoom-in ===== */
/* modes beats live inside the intro container and reveal in place */
#intro-modes #mode-glow{opacity:0;will-change:opacity;}
.bz-ui{opacity:0;will-change:opacity;}
.bz-phone-scale{transform:scale(.3);opacity:0;will-change:transform,opacity;}
@media (prefers-reduced-motion:reduce){.bz-ui{opacity:1 !important;}.bz-phone-scale{transform:none !important;opacity:1 !important;}#intro-modes #mode-glow{opacity:1 !important;}}

/* ---- phone: smaller bottom-right CTA + tighter deck ---- */
@media (max-width:768px){
  #pyw-float-cta{left:auto;right:clamp(14px,4vw,20px);transform:none;bottom:calc(16px + env(safe-area-inset-bottom));top:auto;font-size:.6rem;padding:8px 18px;box-shadow:0 0 8px rgba(125,155,92,.3),0 6px 16px rgba(0,0,0,.45);}
  #pyw-float-cta:active{transform:translateY(1px);}
  /* PHONE: map sits behind the title only and fades into the dark before the deck */
  #how-map{inset:0 0 auto 0;height:clamp(360px,52svh,460px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 92%);mask-image:linear-gradient(to bottom,#000 0%,#000 58%,transparent 92%);}
  .how-inner{padding-top:clamp(120px,21svh,200px);}
  .how-head h2{text-shadow:0 3px 22px rgba(0,0,0,.78),0 1px 4px rgba(0,0,0,.7);}
  .how-head p{opacity:.9;text-shadow:0 2px 16px rgba(0,0,0,.88);}
  .deck-stage{height:clamp(360px,72vw,440px);}
  .deck-card{width:78vw;margin-left:calc(78vw / -2);}
}