/* saturday-ar-experience.css — Saturday AR Experience */
@font-face{font-family:"Pirata One";src:url(../assets/fonts/saturday-pirata-one.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Rye";src:url(../assets/fonts/saturday-rye.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(../assets/fonts/saturday-space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{--ink:#07041a;--cyan:#38f4ff;--magenta:#ff2fbf;--gold:#ffc54d;--cream:#f6ecd6}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ink);color:var(--cream);font-family:"Space Grotesk",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* ocean-meets-sky backdrop */
.sky{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 60% at 50% 0%,#3b0f5c 0%,#1a0b3a 35%,transparent 70%),
  radial-gradient(90% 50% at 85% 20%,rgba(255,47,191,.28),transparent 70%),
  radial-gradient(90% 55% at 10% 30%,rgba(56,244,255,.18),transparent 70%),
  linear-gradient(180deg,#0b0624 0%,#07041a 55%,#031d2b 82%,#04394a 100%)}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.75;background-image:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 8%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 72% 14%,#fff,transparent),radial-gradient(1px 1px at 88% 30%,#fff,transparent),
  radial-gradient(1px 1px at 45% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 60% 4%,#fff,transparent),
  radial-gradient(1px 1px at 6% 40%,#fff,transparent),radial-gradient(1px 1px at 95% 8%,#fff,transparent)}
.waves{position:fixed;left:0;right:0;bottom:0;height:120px;z-index:-1;opacity:.55;pointer-events:none}
main{max-width:560px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;min-height:100%}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tag{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);opacity:.9}
.badge{font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(56,244,255,.5);color:var(--cyan);padding:5px 9px;border-radius:999px;background:rgba(56,244,255,.06)}
h1.wordmark{font-family:"Pirata One","UnifrakturMaguntia",serif;font-weight:400;font-size:clamp(64px,22vw,118px);line-height:.9;text-align:center;margin:18px 0 4px;letter-spacing:.01em;
  background:linear-gradient(100deg,var(--cyan) 0%,#b9fffb 20%,var(--magenta) 45%,var(--gold) 65%,var(--cyan) 90%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:holo 6s linear infinite;
  filter:drop-shadow(0 0 18px rgba(56,244,255,.35)) drop-shadow(3px 3px 0 #000)}
@keyframes holo{to{background-position:-250% 0}}
.banner{display:block;margin:0 auto;width:max-content;font-family:"Rye",serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:7px 22px;position:relative;box-shadow:3px 3px 0 #000;transform:rotate(-2deg)}
.banner:before,.banner:after{content:"";position:absolute;top:6px;border:14px solid #c98f1d;z-index:-1}
.banner:before{left:-18px;border-left-color:transparent}.banner:after{right:-18px;border-right-color:transparent}
.stage{position:relative;margin:22px 0 10px;border-radius:26px;overflow:hidden;border:2px solid #000;box-shadow:0 0 0 1px rgba(56,244,255,.35),0 0 40px rgba(255,47,191,.18),6px 6px 0 #000;
  background:radial-gradient(70% 60% at 50% 45%,rgba(56,244,255,.16),transparent 70%),linear-gradient(180deg,#120a33,#071b2b)}
.stage:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
model-viewer{width:100%;height:min(62vh,480px);--poster-color:transparent;--progress-bar-color:var(--cyan);background:transparent}
.corner{position:absolute;z-index:3;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,236,214,.6)}
.corner.tl{top:12px;left:14px}.corner.tr{top:12px;right:14px;color:var(--magenta)}
.ar-btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;white-space:nowrap;
  font:600 16px "Space Grotesk",sans-serif;letter-spacing:.04em;color:#04131a;border:2px solid #000;border-radius:999px;padding:14px 24px;cursor:pointer;
  background:linear-gradient(100deg,var(--cyan),#c7fff9 40%,var(--magenta) 100%);background-size:200% 100%;animation:holo 5s linear infinite;box-shadow:4px 4px 0 #000,0 0 26px rgba(56,244,255,.45)}
.ar-btn:active{transform:translateX(-50%) translateY(2px);box-shadow:2px 2px 0 #000}
.ar-btn svg{width:20px;height:20px}
.copy{text-align:center;font-size:16px;line-height:1.5;color:rgba(246,236,214,.86);margin:8px 6px 18px}
.copy b{color:var(--cyan);font-weight:600}
.row{display:flex;gap:10px}
.btn2{flex:1;text-align:center;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--cream);padding:13px 10px;border-radius:14px;border:1.5px solid rgba(246,236,214,.25);background:rgba(255,255,255,.04)}
.btn2.hot{border-color:var(--magenta);color:#ffd6f2;background:rgba(255,47,191,.08)}
.note{display:none;margin-top:14px;font-size:13px;text-align:center;color:rgba(246,236,214,.6)}
.no-ar .note{display:block}
footer{margin-top:auto;padding-top:26px;text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,236,214,.45)}
footer span{color:var(--gold)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.exp{text-align:center;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px;opacity:.9}