/* Act II · The case — vitrine das sete peças, cerimônia e avatar do pôster. Depende dos tokens de playbill.css e das curvas de motion.css. */
/* ===================== THE CASE · collectible pieces ===================== */
.case{margin-top:20px;border:1px solid #3a302a;border-radius:8px;padding:24px;background:linear-gradient(180deg,#19130f 0,#0f0c0a 100%);box-shadow:inset 0 1px 0 #ffffff0a,0 20px 50px #0008}
.case-hero{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center}
.case-hero .k{font:600 10px "Public Sans",sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.case-hero h3.pname{font:400 56px/.95 "League Gothic",Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--paper);margin:8px 0 6px;text-wrap:balance}
.case-hero .epi{font:italic 400 18px/1.45 "Source Serif 4",serif;color:var(--paper2);margin:0 0 14px}
.case-hero .meta{font:600 10px/1.9 "Public Sans",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.case-hero .meta b{color:var(--brass2);font-weight:600}
.case-hero.locked h3.pname{color:#6f6350}
.case-hero .what{margin:14px 0 0;font-size:15px;color:var(--paper2)}
.next{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.next .nl{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font:600 10px "Public Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.next .nl b{color:var(--paper);font:400 22px/1 "League Gothic",Impact,sans-serif;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.next .nl b em{font:italic 13px "Source Serif 4",serif;color:var(--mute);letter-spacing:0;text-transform:none;margin-left:8px}
.prog{height:3px;background:#2a2420;margin-top:10px;border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--brass2));transform-origin:left;transform:scaleX(var(--p,0));transition:transform 900ms var(--ease-out)}
.next .done{font:italic 15px "Source Serif 4",serif;color:var(--brass2);margin-top:12px}

/* dome: velvet disc under glass */
.dome{position:relative;width:100%;aspect-ratio:1;max-width:100%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#3d1119 0,#1b0a0e 62%,#120709 100%);box-shadow:inset 0 0 0 1px #5a4630,inset 0 18px 36px #0009,inset 0 -10px 24px #0006,0 14px 34px #000c;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.dome svg.pc{width:64%;height:64%;display:block;filter:drop-shadow(0 8px 10px #000c)}
.dome:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(155deg,#ffffff26 0,#ffffff0a 28%,transparent 44%,transparent 70%,#ffffff08 100%);pointer-events:none}
.dome .glint{position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 42%,#fff8e6aa 50%,transparent 58%);transform:translateX(-110%);pointer-events:none;mix-blend-mode:screen}
.dome.lit .glint{animation:glint 1300ms var(--ease-out) 1 both}
@keyframes glint{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.dome.locked svg.pc{filter:brightness(.14) saturate(0) drop-shadow(0 0 0 transparent)}
.dome.locked{background:radial-gradient(circle at 50% 38%,#241014 0,#140709 62%,#0e0507 100%)}
.dome.soon svg.pc{filter:brightness(.38) saturate(.25) drop-shadow(0 8px 10px #000c)}
.dome.soon .glint{animation:glintSlow 9s linear infinite}
@keyframes glintSlow{0%{transform:translateX(-110%)}12%{transform:translateX(110%)}100%{transform:translateX(110%)}}

/* strip of seven */
.cstrip{display:flex;gap:10px;margin-top:24px;padding:6px 2px 2px;overflow-x:auto;scrollbar-width:none;min-width:0}.cstrip::-webkit-scrollbar{display:none}
.slot{flex:0 0 82px;text-align:center;background:none;border:0;padding:0;cursor:pointer;color:inherit;border-radius:8px}
.slot .dome{width:64px;margin:0 auto;transition:transform 220ms var(--ease-out),box-shadow 220ms ease}
.slot small{display:block;font:600 9px/1.3 "Public Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#6f6350;margin-top:10px;white-space:nowrap}
.slot .when{display:block;font:italic 12px "Source Serif 4",serif;color:var(--mute);letter-spacing:0;text-transform:none;margin-top:3px;font-variant-numeric:tabular-nums}
.slot.on small{color:var(--paper2)}.slot.on .when{color:var(--brass2);font-style:normal;font:600 9px "Public Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.slot.next .dome{outline:1px dashed var(--brass);outline-offset:4px}
.slot.next small{color:var(--brass)}
.slot[aria-pressed=true] .dome{box-shadow:0 0 0 2px var(--brass2),inset 0 0 0 1px #5a4630,0 14px 34px #000c}
@media(hover:hover) and (pointer:fine){.slot:hover .dome{transform:translateY(-3px)}}
.slot.land .dome{animation:land 700ms var(--ease-pop) both}
@keyframes land{0%{transform:scale(1.35)}100%{transform:none}}
.slot.land .dome:before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--brass2);animation:ring 900ms var(--ease-out) both;z-index:2}
@keyframes ring{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(2)}}

/* mini pieces in lists and on the poster */
.pcs{display:inline-flex;gap:4px;margin-left:12px;vertical-align:middle}
.pcs i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#3d1119,#1b0a0e 70%);box-shadow:inset 0 0 0 1px #5a4630;display:grid;place-items:center}
.pcs i svg{width:11px;height:11px;display:block}
.poster .seal i{background:radial-gradient(circle at 50% 38%,#3d1119,#1b0a0e 70%);overflow:hidden;position:relative}
.poster .seal i svg.pc{width:26px;height:26px;display:block}
.poster .seal i .glint{position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 42%,#fff8e6aa 50%,transparent 58%);transform:translateX(-110%);mix-blend-mode:screen;animation:glintSlow 11s linear infinite}

/* ===== ceremony ===== */
#cer{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#2b0d13 0,#0c0a09 58%);opacity:0;transition:opacity 320ms ease;overflow:auto;padding:24px 16px}
#cer[hidden]{display:none!important}
#cer.show{opacity:1}
#cer .spot{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#f6e2a428 0,#f6e2a40a 18%,transparent 34%);opacity:0;pointer-events:none}
#cer.play .spot{animation:spotIn 1200ms ease 300ms both}
@keyframes spotIn{to{opacity:1}}
.cer-body{position:relative;text-align:center;max-width:560px;width:100%;display:grid;justify-items:center;gap:10px;color:var(--paper)}
.cer-k{font:600 10px "Public Sans",sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);opacity:0}
.cer-stage{position:relative;width:min(240px,60vw);aspect-ratio:1;margin:10px 0 6px}
.cer-stage .dome{opacity:0;will-change:transform}
.cer-rings{position:absolute;inset:0;pointer-events:none}
.cer-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--brass2);opacity:0}
.cer-name{font:400 clamp(48px,10vw,84px)/.95 "League Gothic",Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin:0;color:var(--paper);opacity:0;text-wrap:balance}
.cer-epi{font:italic 400 19px/1.5 "Source Serif 4",serif;color:var(--paper2);margin:0;opacity:0;max-width:34ch}
.cer-meta{font:600 10px/1.9 "Public Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);opacity:0;font-variant-numeric:tabular-nums}
.cer-meta b{color:var(--brass2);font-weight:600}
.cer-next{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 16px;border:1px solid var(--line);border-radius:6px;background:#15100d;opacity:0;text-align:left}
.cer-next .dome{width:44px;flex:0 0 44px}
.cer-next small{display:block;font:600 9px "Public Sans",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.cer-next b{font:400 22px/1 "League Gothic",Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.cer-next em{display:block;font:italic 13px "Source Serif 4",serif;color:var(--mute)}
.cer-act{opacity:0;margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#cer.play .cer-k{animation:fadeUp 500ms var(--ease-out) 250ms both}
#cer.play .cer-stage .dome{animation:cerIn 1000ms var(--ease-expo) 550ms both}
@keyframes cerIn{from{opacity:0;transform:perspective(900px) rotateY(85deg) scale(.6)}60%{opacity:1}to{opacity:1;transform:perspective(900px) rotateY(0) scale(1)}}
#cer.play .cer-stage .glint{animation:glint 1200ms var(--ease-out) 1400ms both}
#cer.play .cer-rings i:nth-child(1){animation:ring 1300ms var(--ease-out) 1350ms both}
#cer.play .cer-rings i:nth-child(2){animation:ring 1500ms var(--ease-out) 1550ms both}
#cer.play .cer-name{animation:reveal 700ms var(--ease-in-out) 1600ms both,bloom 1400ms ease 1900ms both}
@keyframes reveal{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
#cer.play .cer-epi{animation:fadeUp 520ms var(--ease-out) 2150ms both}
#cer.play .cer-meta{animation:stamp 380ms var(--ease-pop) 2500ms both}
@keyframes stamp{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
#cer.play .cer-next{animation:fadeUp 600ms var(--ease-out) 3000ms both}
#cer.play .cer-act{animation:fadeUp 500ms var(--ease-out) 3400ms both}
#cer.done .cer-name,#cer.done .cer-epi,#cer.done .cer-meta,#cer.done .cer-next,#cer.done .cer-act,#cer.done .cer-k{transition:opacity 200ms ease;opacity:0!important;animation:none}

@media(max-width:860px){.case{padding:18px}.case-hero{grid-template-columns:120px minmax(0,1fr);gap:18px}.case-hero h3.pname{font-size:40px}.case-hero .epi{font-size:16px}}
@media(max-width:480px){.case-hero{grid-template-columns:minmax(0,1fr)}.case-hero .dome{width:150px}}
@media(prefers-reduced-motion:reduce){.dome.soon .glint,.poster .seal i .glint{animation:none}#cer .cer-k,#cer .cer-stage .dome,#cer .cer-name,#cer .cer-epi,#cer .cer-meta,#cer .cer-next,#cer .cer-act{opacity:1}}

/* ===== poster avatar (above the lead's name) ===== */
.poster .pic{position:absolute;top:92px;left:50%;transform:translateX(-50%);width:84px;height:84px;border-radius:50%;border:1px solid var(--brass);box-shadow:0 0 0 4px #0c0a09,0 0 0 5px #5a4630,0 12px 30px #000b;background:radial-gradient(circle at 40% 35%,#3a2a1a,#15110f);display:grid;place-items:center;font:400 38px/1 "League Gothic",Impact,sans-serif;letter-spacing:.06em;color:var(--brass2);z-index:2;overflow:hidden}
.poster .pic img{width:100%;height:100%;object-fit:cover;display:block}
.poster .pic.crown{box-shadow:0 0 0 4px #0c0a09,0 0 0 6px var(--brass),0 0 34px #c9a24f66,0 12px 30px #000b}
.poster .pic:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(160deg,#ffffff1c,transparent 45%);pointer-events:none}
@media(min-width:861px){.poster .name{top:54%;font-size:clamp(110px,18.5vh,200px)}}
@media(max-width:860px){.poster .pic{position:static;transform:none;margin:0 auto;width:72px;height:72px;font-size:32px}.poster .name{margin-top:12px}}
html[data-motion=a].intro .poster .pic{animation:fadeUp 600ms var(--ease-out) 1400ms both}