/* ---------- lock page while intro plays ---------- */
html.intro-lock,html.intro-lock body{overflow:hidden}
html.intro-lock .coin-scene{opacity:0}          /* hero coin hidden until intro coin lands */

/* ---------- root ---------- */
#intro{
  --gold:#e9c46a; --cream:#f3ece0; --ink:#0d0b09; --soft:#b9ab93;
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  color:var(--cream);font-family:'Jost',sans-serif;
  display:grid;place-items:center;cursor:pointer;
  transition:opacity .7s ease,visibility .7s;
}
#intro.out{opacity:0;visibility:hidden;pointer-events:none}
:where(#intro,#intro *){margin:0;padding:0;box-sizing:border-box}

/* ---------- background layers ---------- */
.i-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(1100px 700px at 50% 35%,#1b1510 0%,#110d0a 55%,var(--ink) 100%);
  transition:opacity 1s ease}
#intro.i-fly .i-bg{opacity:0}
#i-silk{position:absolute;inset:0;display:block}
.i-weave{position:absolute;inset:0;pointer-events:none;opacity:.30;mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 3px)}
.i-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 38%,rgba(0,0,0,.86) 100%)}

/* ---------- curtain ---------- */
.i-curtain{position:absolute;top:0;bottom:0;width:52%;z-index:14;pointer-events:none;opacity:0}
.i-curtain.l{left:0;transform:translateX(-101%)}
.i-curtain.r{right:0;transform:translateX(101%)}
.i-curtain i{position:absolute;inset:0;display:block;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 12px,rgba(255,255,255,.07) 12px 26px,rgba(0,0,0,.4) 26px 40px),
    linear-gradient(90deg,#1c150f,#2a2017 50%,#14100b)}

/* ---------- stage ---------- */
.i-stage{position:relative;z-index:10;width:min(94vw,1080px);height:min(74vh,660px);display:grid;place-items:center}
.i-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none}
.i-scene.on{opacity:1}

/* ---------- type ---------- */
.i-ch{display:inline-block;will-change:transform,opacity}
.i-line{display:flex;justify-content:center;flex-wrap:nowrap;overflow:hidden;padding:.12em 0}
.i-serif{font-family:'Cormorant Garamond',serif;font-weight:300}
.i-poem{font-size:clamp(28px,8.6vmin,86px);letter-spacing:.14em;margin-left:.14em}
.i-brand{font-size:clamp(40px,12vmin,124px);font-weight:500;letter-spacing:.2em;margin-left:.2em;
  background:linear-gradient(180deg,#fff8e7 0%,var(--gold) 52%,#9c7430 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.i-caps{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(10px,2.1vmin,17px);
  letter-spacing:.62em;margin-left:.62em;color:var(--soft)}
.i-tiny{font-size:clamp(8.5px,1.5vmin,12px);letter-spacing:.42em;color:#7d705f}

/* ---------- text animations ---------- */
.i-anim .i-ch{opacity:0;animation-fill-mode:both;animation-duration:1s;
  animation-timing-function:cubic-bezier(.19,1,.22,1);
  animation-delay:calc(var(--i) * var(--stag,.05s))}
.i-a-rise .i-ch{animation-name:i-rise}
.i-a-drape .i-ch{animation-name:i-drape}
.i-a-thread .i-ch{animation-name:i-thread}
@keyframes i-rise{0%{transform:translateY(115%) rotate(2deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes i-drape{0%{transform:translateY(-60%) scaleY(1.5);opacity:0;filter:blur(6px)}
                   60%{opacity:1}100%{transform:none;opacity:1;filter:none}}
@keyframes i-thread{0%{transform:translateX(-34px) scaleX(.2);opacity:0;filter:blur(5px)}
                    100%{transform:none;opacity:1;filter:none}}
.i-leave .i-ch{animation:i-fade .5s ease-in both;animation-delay:calc(var(--i)*.02s)}
@keyframes i-fade{to{transform:translateY(-34%);opacity:0;filter:blur(5px)}}
.i-wide{animation:i-wide 1.5s cubic-bezier(.19,1,.22,1) both}
@keyframes i-wide{0%{letter-spacing:.06em;opacity:0;filter:blur(4px)}100%{letter-spacing:.62em;opacity:1}}

/* ---------- badge: stitched ring + 3D coin ---------- */
.i-badge{position:relative;width:clamp(150px,27vmin,250px);height:clamp(150px,27vmin,250px);
  display:grid;place-items:center}
.i-badge svg{position:absolute;inset:-14%;width:128%;height:128%;overflow:visible;transition:opacity .5s}
#intro.i-fly .i-badge svg{opacity:0}
#i-maskRing{stroke-dashoffset:100;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1)}
.i-badge.sewn #i-maskRing{stroke-dashoffset:0}

.i-coinwrap{position:relative;width:86%;height:86%;perspective:900px;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.65))}
.i-coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;opacity:0}
.i-badge.open .i-coin{animation:i-coinIn 2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes i-coinIn{
  0%{opacity:0;transform:rotateY(-540deg) scale(.45)}
  20%{opacity:1}
  100%{opacity:1;transform:rotateY(0) scale(1)}
}
.i-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;background:#15161a}
.i-face img{width:100%;height:100%;object-fit:contain;display:block}
.i-front{transform:translateZ(6px)}
.i-back{transform:rotateY(180deg) translateZ(6px)}
.i-edge{position:absolute;inset:1%;border-radius:50%;
  background:linear-gradient(135deg,#f6dc94,#a87c2e 60%,#6d4f1a)}

/* ---------- lockup ---------- */
.i-lock{display:flex;flex-direction:column;align-items:center;gap:18px;position:relative}
.i-lock>:not(.i-badge){transition:opacity .6s ease}
#intro.i-fly .i-lock>:not(.i-badge){opacity:0!important}
.i-sline{width:0;overflow:hidden;transition:width 1.1s cubic-bezier(.19,1,.22,1);height:10px}
.i-sline.go{width:min(66vw,560px)}

/* hang tag */
.i-tag{position:absolute;right:-6%;top:4%;width:92px;transform-origin:50% -26px;opacity:0}
.i-tag .str{position:absolute;left:50%;top:-26px;width:1px;height:26px;background:var(--soft);opacity:.7}
.i-tag .card{background:linear-gradient(145deg,#efe6d4,#cdbfa5);color:#2b2419;border-radius:4px;
  padding:11px 8px;text-align:center;font-size:8.5px;letter-spacing:.2em;line-height:1.7;
  box-shadow:0 10px 22px rgba(0,0,0,.55)}
.i-tag .hole{width:7px;height:7px;border-radius:50%;background:#2b2419;margin:0 auto 6px}
.i-tag.in{animation:i-tagIn 1.5s cubic-bezier(.2,1.2,.3,1) both}
@keyframes i-tagIn{
  0%{opacity:0;transform:translateY(-130%) rotate(-28deg)}
  35%{opacity:1}
  55%{transform:translateY(0) rotate(13deg)}
  72%{transform:rotate(-8deg)} 86%{transform:rotate(4deg)} 100%{opacity:1;transform:rotate(0)}
}
.i-tag.sway{animation:i-sway 5s ease-in-out infinite 1.6s;opacity:1}
@keyframes i-sway{50%{transform:rotate(3.5deg)}}

/* shimmer */
.i-shine{position:absolute;inset:-10% -25%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 42%,rgba(255,243,214,.6) 50%,transparent 58%);
  background-size:260% 100%}
.i-shine.go{animation:i-shineGo 1.6s ease-out}
@keyframes i-shineGo{0%{opacity:1;background-position:180% 0}100%{opacity:0;background-position:-60% 0}}