/* Saturday — Scan to Reveal (scan.html). Uses the shared tokens in saturday.css. */
.scan-hero{padding:0;position:relative}
.scan-stage{position:relative;height:100svh;min-height:600px;max-height:1000px;overflow:hidden;background:#0B1020;isolation:isolate}
.scan-bg,.scan-cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
.scan-cam{background:#000}
.scan-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(60% 55% at var(--x,50%) var(--y,45%),transparent 0%,rgba(11,16,32,.12) 55%,rgba(11,16,32,.62) 100%),
  linear-gradient(180deg,rgba(11,16,32,.72) 0%,transparent 22%,transparent 62%,rgba(11,16,32,.88) 100%)}
.scan-fx{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.scan-top{position:absolute;z-index:6;left:0;right:0;top:calc(68px + clamp(14px,3vh,34px));text-align:center;padding:0 20px}
.scan-top .eyebrow{justify-content:center}
.scan-top h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.4vw,84px);line-height:.9;margin-top:10px;filter:drop-shadow(3px 3px 0 #000)}
.scan-top p{max-width:46ch;margin:10px auto 0;color:var(--muted);font-size:clamp(14px,1.3vw,16px)}

/* reticle */
.reticle{--s:clamp(150px,27vmin,250px);position:absolute;z-index:5;left:var(--x,50%);top:var(--y,45%);width:var(--s);height:var(--s);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.reticle .br{position:absolute;width:24%;height:24%;border:3px solid var(--teal);filter:drop-shadow(0 0 8px rgba(143,227,224,.7));transition:inset .5s cubic-bezier(.2,.8,.2,1),border-color .3s}
.reticle .br.tl{left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:14px}
.reticle .br.tr{right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:14px}
.reticle .br.bl{left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:14px}
.reticle .br.brr{right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:14px}
.reticle .sweep{position:absolute;left:6%;right:6%;top:8%;height:2px;background:linear-gradient(90deg,transparent,var(--teal-hi),transparent);box-shadow:0 0 14px 2px rgba(143,227,224,.75),0 -22px 30px -6px rgba(143,227,224,.18);animation:sweep 2.4s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes sweep{to{top:92%}}
.reticle .dot{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 6px rgba(243,213,138,.18),0 0 18px rgba(243,213,138,.8);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(243,213,138,0),0 0 18px rgba(243,213,138,.8)}}
.reticle .ring{position:absolute;inset:-14%;width:128%;height:128%;transform:rotate(-90deg);opacity:0;transition:opacity .25s}
.reticle .ring circle{fill:none;stroke-width:3}
.reticle .ring .trk{stroke:rgba(143,227,224,.18)}
.reticle .ring .bar{stroke:url(#scan-ring-g);stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:302;filter:drop-shadow(0 0 6px rgba(143,227,224,.8))}
.reticle .lbl{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);white-space:nowrap;font:600 11px var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--teal-hi);text-shadow:0 1px 6px #000;background:rgba(11,16,32,.55);border:1px solid var(--line);border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scan-stage[data-state="scanning"] .reticle .ring{opacity:1}
.scan-stage[data-state="scanning"] .reticle .br{border-color:var(--gold-hi)}
.scan-stage[data-state="scanning"] .reticle .br.tl,.scan-stage[data-state="scanning"] .reticle .br.tr{top:8%}
.scan-stage[data-state="scanning"] .reticle .br.bl,.scan-stage[data-state="scanning"] .reticle .br.brr{bottom:8%}
.scan-stage[data-state="scanning"] .reticle .br.tl,.scan-stage[data-state="scanning"] .reticle .br.bl{left:8%}
.scan-stage[data-state="scanning"] .reticle .br.tr,.scan-stage[data-state="scanning"] .reticle .br.brr{right:8%}
.scan-stage[data-state="scanning"] .reticle .sweep{animation-duration:.5s}
.scan-stage[data-state="revealing"] .reticle,.scan-stage[data-state="revealed"] .reticle{opacity:0;transform:translate(-50%,-50%) scale(1.25)}

/* Alley */
.alley-wrap{position:absolute;z-index:5;left:var(--x,50%);top:var(--y,45%);width:clamp(160px,32vmin,300px);transform:translate(-50%,-70%);pointer-events:none;visibility:hidden}
.scan-stage[data-state="revealing"] .alley-wrap,.scan-stage[data-state="revealed"] .alley-wrap{visibility:visible}
.alley-float{animation:none}
.scan-stage[data-state="revealed"] .alley-float{animation:float 3.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-4.5%)}}
.alley-pop,.alley-spin,.alley-trick{transform-origin:50% 60%}
.alley-btn{position:absolute;inset:4% 10% 2%;z-index:2;border:0;background:transparent;cursor:pointer;border-radius:40%;pointer-events:auto}
.alley-btn:focus-visible{outline:2px dashed var(--teal);outline-offset:4px}
.alley{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(143,227,224,.18))}
.alley .al-ring,.alley .al-ring-back,.alley .al-blink,.alley .al-board,.alley .al-glint-star,.alley .al-glint{transform-box:fill-box;transform-origin:50% 50%}
.alley .al-ring,.alley .al-ring-back{opacity:0}
.scan-stage[data-ring="on"] .alley .al-ring,.scan-stage[data-ring="on"] .alley .al-ring-back{opacity:1}
.alley .al-board{animation:pad 2.4s ease-in-out infinite}
@keyframes pad{50%{opacity:.6}}

/* controls */
.scan-controls{position:absolute;z-index:7;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 18px;transition:opacity .4s,transform .4s}
.scan-controls .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.scan-controls .btn{min-width:180px}
.scan-controls .btn-ghost{background:rgba(11,16,32,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scan-msg{min-height:1.4em;font-size:13px;color:var(--muted);text-align:center;max-width:44ch;text-shadow:0 1px 6px #000}
.scan-stage[data-state="revealing"] .scan-controls,.scan-stage[data-state="revealed"] .scan-controls{opacity:0;transform:translateY(16px);pointer-events:none}
.scan-stage[data-state="scanning"] .scan-controls .row{opacity:.45;pointer-events:none}
[data-cam-only]{display:none!important}
.scan-stage[data-mode="camera"] [data-cam-only]{display:inline-flex!important}
.scan-stage[data-mode="camera"] [data-video-only]{display:none!important}
.scan-stage[data-mode="camera"] .scan-bg{opacity:0}
.cam-badge{position:absolute;z-index:6;left:18px;top:calc(68px + 12px);display:none;align-items:center;gap:8px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-hi);background:rgba(11,16,32,.6);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.cam-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 8px #ff5a5a}
.scan-stage[data-mode="camera"] .cam-badge{display:inline-flex}

/* found card */
.found{position:absolute;z-index:8;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));width:min(92vw,400px);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity .6s,transform .7s cubic-bezier(.2,.9,.25,1.15);
  border-radius:22px;padding:20px 20px 18px;background:linear-gradient(160deg,rgba(18,26,56,.9),rgba(11,16,32,.94));border:1.5px solid rgba(212,168,75,.55);box-shadow:0 0 0 1px rgba(143,227,224,.18),0 24px 60px rgba(0,0,0,.5),6px 6px 0 #000;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.found.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media (min-width:900px){.found{left:auto;right:clamp(24px,4vw,64px);bottom:clamp(28px,6vh,64px);transform:translate(0,24px)}.found.show{transform:none}}
.found .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.found h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,4vw,44px);line-height:.95;margin:8px 0 4px}
.found .meta{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.found .no{float:right;font-family:var(--flash);font-size:12px;color:var(--gold-hi);border:1px solid rgba(212,168,75,.55);border-radius:999px;padding:4px 10px}
.found p.l{font-size:14px;color:var(--muted);margin:12px 0 14px}
.found .acts{display:flex;flex-wrap:wrap;gap:8px}
.found .acts .btn{padding:10px 16px;font-size:14px;flex:1 1 auto}
.found .links{display:flex;gap:18px;margin-top:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.found .links a{color:var(--gold-hi);text-decoration:none}
.found .links a:hover{color:var(--teal)}
.found .tap{font-size:12px;color:rgba(244,236,216,.5);margin-top:10px}

/* lore strip below the stage */
.scan-lore{padding:clamp(70px,10vw,130px) 0}
.scan-lore .grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:900px){.scan-lore .grid{grid-template-columns:.9fr 1.1fr}}
.scan-lore .shot{border-radius:var(--r);overflow:hidden;border:2px solid #000;box-shadow:0 0 0 1px rgba(143,227,224,.3),8px 8px 0 #000;aspect-ratio:3/4;background:var(--deep)}
.scan-lore .shot img{width:100%;height:100%;object-fit:cover}
.lore-quote{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);line-height:1.05;color:var(--gold-hi);margin:18px 0}
.how{list-style:none;display:grid;gap:12px;margin:26px 0}
.how li{display:flex;gap:14px;align-items:baseline;color:var(--muted)}
.how b{font-family:var(--flash);font-size:12px;color:var(--teal);letter-spacing:.1em;min-width:28px}

@media (max-width:600px){
  .scan-top{top:calc(68px + 10px)}
  .scan-top p{display:none}
  .scan-controls .btn{min-width:0;flex:1 1 0}
  .scan-controls .row{width:100%;max-width:420px;flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .reticle .sweep{animation:none;top:50%}
  .reticle .dot{animation:none}
  .scan-stage[data-state="revealed"] .alley-float{animation:none}
  .alley .al-board{animation:none}
  .found{transition:opacity .3s}
}

/* layout tuning: desktop title on the left, portrait phones get a framed (not cropped-to-death) tee */
.scan-stage{--x0:50%;--y0:45%}
@media (min-width:1000px){
  .scan-top{left:clamp(28px,5vw,88px);right:auto;top:50%;transform:translateY(-50%);text-align:left;max-width:min(30vw,400px);padding:0}
  .scan-top .eyebrow{justify-content:flex-start}
  .scan-top h1{font-size:clamp(52px,5.4vw,84px)}
  .scan-top p{margin-left:0}
  .scan-shade{background:
    radial-gradient(55% 55% at var(--x,50%) var(--y,45%),transparent 0%,rgba(11,16,32,.1) 55%,rgba(11,16,32,.55) 100%),
    linear-gradient(90deg,rgba(11,16,32,.9) 0%,rgba(11,16,32,.55) 22%,transparent 40%,transparent 70%,rgba(11,16,32,.45) 100%),
    linear-gradient(180deg,rgba(11,16,32,.6) 0%,transparent 18%,transparent 70%,rgba(11,16,32,.75) 100%)}
}
@media (max-aspect-ratio:1/1){
  .scan-stage{--y0:40%}
  .scan-bg{width:270%;height:auto;right:auto;bottom:auto;left:50%;top:46%;transform:translate(-50%,-50%);object-fit:fill;
    -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 84%,transparent 98%);mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 84%,transparent 98%)}
  .scan-stage{background:radial-gradient(120% 60% at 50% 46%,#13204a 0%,#0B1020 70%)}
}