/* Part X: quote, biography, gallery, then the final film. */
:root { --tarot-ivory:#d5cbb8; --card-w:min(24vw,32svh,340px); }
body { background:#060607; color:var(--tarot-ivory); }
html { scrollbar-color:#777064 #080809; }
html.tarot-cinematic { overflow:hidden; }
.tarot-section { position:relative; min-height:100svh; background:#060607; }
.tarot-stage { position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; }
.tarot-atmosphere,.tarot-vignette { position:absolute; inset:0; pointer-events:none; }
.tarot-atmosphere { z-index:0; background:#060607 url('assets/parte-x/background-2k.png') center/cover; }
.tarot-atmosphere video { width:100%; height:100%; object-fit:cover; background:transparent; opacity:1; }
.tarot-vignette { z-index:1; background:linear-gradient(#0005,transparent 24%,transparent 70%,#0006),radial-gradient(ellipse at center,transparent 45%,#0003); }
.tarot-heading { position:absolute; left:50%; top:50%; width:min(88vw,1100px); z-index:2; text-align:center; pointer-events:none; transform:translate(-50%,-50%); will-change:opacity,transform; visibility:hidden; }
.tarot-stage.narrative-entered .tarot-heading { visibility:visible; }
.tarot-heading h1 { opacity:0; margin:0; font:400 clamp(2.4rem,5.8vw,6rem)/1.08 Georgia,serif; letter-spacing:-.04em; text-wrap:balance; }
.tarot-heading em,.tarot-biography h2 em { font-weight:400; color:#eee5d7; }
.tarot-stage.narrative-entered .tarot-heading h1 { animation:quote-arrival 1400ms cubic-bezier(.2,.7,.2,1) 450ms both; }
.tarot-stage.narrative-restored .tarot-heading h1 { animation:none; opacity:1; }
@keyframes quote-arrival { from { opacity:0; transform:translateY(58vh); filter:blur(5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
.tarot-biography { position:absolute; top:100%; left:50%; width:min(1400px,86vw); z-index:2; padding:0 0 24px; transform:translateX(-50%); will-change:transform; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); gap:clamp(40px,6vw,100px); align-items:start; }
.biography-journey { margin:calc(clamp(2.6rem,5vw,4.7rem) * 2.16 + 93px) 0 0; width:100%; display:flex; flex-direction:column; align-items:center; gap:24px; }
.bio-media-item { position:relative; transform-origin:top left; flex:none; }
.bio-map { width:65%; max-width:310px; }
.bio-film { width:100%; }
.biography-journey img { display:block; width:100%; height:auto; aspect-ratio:1086/1448; object-fit:contain; filter:grayscale(1); pointer-events:none; }
.biography-journey video { pointer-events:none; filter:grayscale(1); }
.biography-journey video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#080808; border:1px solid #ffffff20; border-radius:3px; box-shadow:0 14px 40px #0008; }
.tarot-question { position:absolute; top:100%; left:50%; width:min(88vw,1050px); z-index:2; text-align:center; pointer-events:none; transform:translateX(-50%); opacity:0; will-change:transform; }
.tarot-question h2 { margin:0; font:400 clamp(2.6rem,5vw,4.7rem)/1.08 Georgia,serif; letter-spacing:-.035em; }
.tarot-question em { font-weight:400; color:#eee5d7; }
.tarot-biography h2 { font:400 clamp(2.6rem,5vw,4.7rem)/1.08 Georgia,serif; letter-spacing:-.035em; margin:40px 0 52px; }
.tarot-biography p { color:#d1c8ba; font:400 clamp(1.08rem,1.75vw,1.6rem)/1.65 Georgia,serif; margin:0 0 1.45em; text-wrap:pretty; }
.biography-rule { width:65px; height:1px; background:#b9aa8c80; }
.biography-rule-end { margin-top:55px; }
.tarot-carousel { position:absolute; z-index:3; inset:0; perspective:1600px; touch-action:pan-y; user-select:none; -webkit-user-select:none; pointer-events:none; }
.tarot-stage.cards-ready .tarot-carousel { pointer-events:auto; }
.tarot-stage.has-focused-card .tarot-carousel { pointer-events:none; }
.tarot-original-note { position:absolute; z-index:4; top:8%; left:50%; transform:translateX(-50%); width:min(780px,78vw); margin:0; color:#fff; font:400 clamp(12px,1.15vw,17px)/1.6 Georgia,serif; text-align:center; text-wrap:balance; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
.tarot-stage.cards-ready:not(.has-focused-card) .tarot-original-note { opacity:1; visibility:visible; }
.tarot-card { position:absolute; width:var(--card-w); aspect-ratio:948/1659; left:50%; top:50%; padding:0; border:0; background:transparent; color:var(--tarot-ivory); transform-origin:center; will-change:transform,opacity; transition:opacity .3s,filter .3s; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tarot-card[aria-hidden='true'],.tarot-card.is-picked { visibility:hidden; pointer-events:none; }
.tarot-card-inner { position:absolute; inset:0; transition:scale .3s,filter .35s; }
.tarot-card:focus-visible { outline:none; }
.tarot-card:focus-visible .tarot-card-inner { outline:1px solid #eee1bc; outline-offset:6px; border-radius:5%; }
.tarot-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; filter:drop-shadow(0 15px 18px #000b); }
.tarot-art { position:absolute; left:13.6%; top:14%; width:72.8%; height:70.5%; overflow:hidden; pointer-events:none; filter:drop-shadow(0 0 1.5px #ffffff70) drop-shadow(0 0 6px #dce4ff25); }
.tarot-title { position:absolute; left:18%; right:18%; bottom:8.15%; height:3.9%; display:flex; align-items:center; justify-content:center; font:400 clamp(9px,1vw,15px)/1 Georgia,serif; letter-spacing:.07em; text-align:center; overflow:hidden; white-space:nowrap; pointer-events:none; }
@media(hover:hover) { .tarot-stage:not(.has-focused-card) .tarot-card:hover .tarot-card-inner { scale:1.035; filter:drop-shadow(0 0 9px #e7dcc326); animation:card-shiver .48s ease .2s 1; } }
@keyframes card-shiver { 0%,100% { rotate:0deg; } 24% { rotate:-.65deg; } 46% { rotate:.5deg; } 68% { rotate:-.28deg; } 85% { rotate:.15deg; } }
.tarot-progress { position:absolute; z-index:6; bottom:0; height:1px; left:0; right:0; background:#fff1; pointer-events:none; }
.tarot-progress i { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:#d9ccb1; }
.section-nav { z-index:60; }
.section-nav button::before { background:#d5cbb8; }
.section-nav button:focus-visible { outline-color:#d5cbb8; }
.tarot-focus { position:fixed; z-index:25; inset:0; overflow:hidden; pointer-events:none; color:var(--tarot-ivory); }
.tarot-focus[hidden] { display:none; }
.tarot-focus .tarot-art.can-open-original { pointer-events:auto; transition:filter .2s; }
.tarot-art.can-open-original:hover,.tarot-art.can-open-original:focus-visible { filter:drop-shadow(0 0 4px #fff8); outline:1px solid #ffffff55; outline-offset:4px; }
.original-hint { position:absolute; right:16%; bottom:16%; padding:4px 6px; border-radius:3px; background:#080808b0; color:#e5e2dc; font:10px/1.2 Arial,sans-serif; letter-spacing:.04em; pointer-events:none; opacity:.75; }
.original-hint[hidden] { display:none; }
.original-viewer { position:fixed; inset:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; padding:clamp(24px,5vh,60px) clamp(18px,5vw,80px); box-sizing:border-box; border:0; background:transparent; overflow:hidden; color:white; }
.original-viewer[open] { display:flex; align-items:center; justify-content:center; animation:original-arrival .22s ease-out; }
.original-viewer::backdrop { background:#000c; backdrop-filter:blur(4px); }
.original-image { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 15px 70px #0008; }
.original-image[hidden],.original-status[hidden] { display:none; }
.original-close { position:absolute; top:16px; right:20px; width:44px; height:44px; border:1px solid #fff8; border-radius:50%; color:white; background:#161616e6; font:28px/1 Arial,sans-serif; z-index:2; }
.original-close:focus-visible { outline:2px solid white; outline-offset:4px; }
.original-status { font:14px/1.5 Arial,sans-serif; }
@keyframes original-arrival { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .original-viewer[open] { animation:none; } }
.tarot-presentation { position:absolute; left:50%; top:46%; width:min(45svh,450px,74vw); aspect-ratio:948/1659; transform:translate(-50%,-50%); isolation:isolate; pointer-events:auto; }
.tarot-detail { margin:0; position:absolute; inset:0; z-index:1; transform-origin:80% 85%; }
.tarot-detail .tarot-title { font-size:clamp(10px,1.5vh,16px); }
.skeleton-hand { position:absolute; width:78%; height:auto; left:43%; top:48%; pointer-events:none; transform:rotate(-3deg); transform-origin:70% 70%; opacity:0; }
.hand-back { z-index:0; }
.hand-front { z-index:2; aspect-ratio:1024/1536; }
.hand-front img { display:block; width:100%; height:100%; transform-origin:76% 66%; clip-path:polygon(28% 27%,56% 27%,86% 61%,89% 73%,67% 76%,46% 53%,29% 41%); }
.tarot-close { position:absolute; right:82px; top:23px; z-index:10; width:46px; height:46px; border:1px solid #e3d4b860; background:#080808b0; color:var(--tarot-ivory); border-radius:50%; font:28px Arial,sans-serif; cursor:pointer; pointer-events:auto; }
.tarot-close:focus-visible { outline:2px solid #ddd0b9; outline-offset:5px; }
@media(max-width:650px) {
 :root { --card-w:min(54vw,34svh); }
 .tarot-heading h1 { font-size:clamp(2.2rem,8.6vw,3.4rem); line-height:1.14; }
 .tarot-biography { width:80vw; }
 .tarot-biography h2 { font-size:clamp(2.3rem,9vw,3rem); margin:30px 0; }
 .tarot-biography p { font-size:1.08rem; line-height:1.65; }
 .tarot-title { font-size:10px; }
 .tarot-close { right:80px; top:18px; width:40px; height:40px; }
}
@media(max-width:850px) {
 .tarot-biography { grid-template-columns:1fr; width:80vw; gap:48px; }
 .biography-journey { width:min(65vw,360px); margin:0 auto 30px; }
}
html.portfolio-transitioning { overflow:hidden; overscroll-behavior:none; }
html.portfolio-transitioning main,html.portfolio-transitioning .brand-button { pointer-events:none; }
@media(prefers-reduced-motion:reduce) {
 .tarot-card-inner { transition:none; animation:none!important; }
 .tarot-stage.narrative-entered .tarot-heading h1 { animation:none; opacity:1; }
 .tarot-atmosphere video { display:none; }
 .skeleton-hand { display:none; }
 html { scroll-behavior:auto; }
}