/* Intro: Grail-style orbiting card helix, in Nostalgic's gold/parchment world.
   Sticky stage inside a tall section; scroll pulls the helix together into one card. */
.intro{position:relative;height:250vh;margin:0;background:var(--void)}
.intro .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(201,164,92,.13), transparent 70%),
    var(--void);}
.intro .title{position:absolute;left:0;right:0;top:max(5vh,calc(env(safe-area-inset-top,0px) + 18px));z-index:3;text-align:center;pointer-events:none;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));will-change:transform,opacity}
.intro h1{margin:0;font-family:var(--f-logo);font-weight:700;letter-spacing:.04em;line-height:.9;
  font-size:clamp(58px,14.5vw,250px);color:#f3e6c4;
  text-shadow:0 2px 0 #000,0 0 40px rgba(0,0,0,.9);}
.intro .sub{margin-top:clamp(8px,1.4vw,18px);display:flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--f-head);font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  font-size:clamp(11px,1.5vw,17px)}
.intro .sub .arrow{flex:0 1 90px;color:var(--gold)}

.scene{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 42%;z-index:2}
.ring{position:absolute;left:50%;top:60%;width:0;height:0;transform-style:preserve-3d}
.card3d{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.card3d .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.card3d .back{transform:rotateY(180deg)}
.card3d .face::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none;border-radius:inherit}

/* photo card — parchment frame */
.pcard{background:linear-gradient(180deg,#f2e5c3,#dcc89a);color:#24180b;display:flex;flex-direction:column;padding:11px 11px 12px;gap:7px}
.pcard .hd{display:flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6a5234}
.pcard .hd i{width:12px;height:12px;flex:none;background:conic-gradient(#c9a45c 0 25%,#5a2414 0 50%,#c9a45c 0 75%,#5a2414 0);border-radius:2px}
.pcard img{width:100%;flex:1;min-height:0;object-fit:cover;border:2px solid #2a1d0f;display:block}
.pcard b{font-family:var(--f-head);font-weight:700;font-size:18px;line-height:1.15;letter-spacing:.01em}
.pcard small{font-family:var(--f-body);font-size:14px;color:#6a5234;line-height:1.2}

/* pattern cards — big checkers (4 × 5 squares, scale with the card) */
.chk{--a:#c9a45c;--b:#3b2a16;background:repeating-conic-gradient(var(--a) 0 25%,var(--b) 0 50%) 0 0/50% 40%;
  box-shadow:inset 0 0 0 5px #e9dcb8,inset 0 0 0 7px var(--b),0 18px 40px rgba(0,0,0,.55)}
.chk-gold{--a:#c9a45c;--b:#3b2a16}
.chk-red{--a:#b23a22;--b:#4a140c}
.chk-green{--a:#6a9a30;--b:#243a10}
.chk-blue{--a:#4a7fb8;--b:#16304f}
.chk-stone{--a:#9a948a;--b:#46423c}
.pat-sigil{background:radial-gradient(circle at 50% 50%,#3b2a16 0 30%,transparent 31%),#c9a45c;display:grid;place-items:center;
  box-shadow:inset 0 0 0 5px #e9dcb8,inset 0 0 0 7px #3b2a16}
.pat-sigil span{font-family:var(--f-logo);font-weight:900;font-size:64px;color:#f1d892;line-height:1;text-shadow:0 2px 0 #000}

/* loader */
.loader{position:absolute;left:50%;top:60%;z-index:4;width:92px;height:124px;margin:-62px 0 0 -46px;
  background:linear-gradient(180deg,#f2e5c3,#d6c08d);border:3px solid #3b2a16;border-radius:5px;box-shadow:0 0 0 1px #c9a45c,0 20px 40px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#3b2a16;transition:opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1)}
.loader b{font-family:var(--f-logo);font-size:38px;line-height:1}
.loader span{font-family:var(--f-head);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.loader em{font-style:normal;font-family:var(--f-head);font-size:12px;font-variant-numeric:tabular-nums}
.loader.done{opacity:0;transform:scale(.6) rotateY(90deg);pointer-events:none}

.intro .hint{position:absolute;bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 14px));left:0;right:0;z-index:3;display:flex;justify-content:center;gap:24px;align-items:center}
.intro .hint .scroll{font-family:var(--f-head);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--parch-2);display:flex;flex-direction:column;align-items:center;gap:8px}
.intro .hint .scroll::after{content:"";width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.intro .skip{position:absolute;right:max(20px,calc(env(safe-area-inset-right,0px) + 16px));bottom:max(22px,calc(env(safe-area-inset-bottom,0px) + 14px));z-index:3}
.intro .side{position:absolute;top:50%;z-index:3;font-family:var(--f-head);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8a7a5c}
.intro .side.l{left:max(20px,calc(env(safe-area-inset-left,0px) + 16px))}
.intro .side.r{right:max(20px,calc(env(safe-area-inset-right,0px) + 16px))}

@media (max-width:700px){
  .intro{height:210vh}
  .intro .side{display:none}
  .intro .skip{display:none}
  .intro .sub{letter-spacing:.18em;gap:10px}
  .intro .sub .arrow{flex-basis:28px}
}
@media (prefers-reduced-motion:reduce){
  .intro{height:auto}
  .intro .stage{position:relative;height:100vh}
  .intro .hint .scroll::after{animation:none}
}
.intro .intro-logo{color:inherit;text-decoration:none;pointer-events:auto;cursor:pointer;transition:color .2s}
.intro .intro-logo:hover{color:#fff4d6}
.intro .intro-logo:focus-visible{outline:2px solid var(--gold-hi);outline-offset:8px}