/* The prologue is a playable sequence of cinematic frames, paced by the reader. */
.intro-dialog{position:fixed;inset:0;margin:auto;padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#211b17;color:#f3e6d0;overflow:auto;font-family:'Be Vietnam Pro',sans-serif}
.intro-dialog::backdrop{background:#211b17}
.intro-shell{position:relative;min-height:100%;max-width:1440px;margin:auto;display:grid;grid-template-rows:66px minmax(0,1fr) auto 64px;height:100dvh;padding:0 52px;isolation:isolate}
.intro-header{display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:2;font-size:9px;letter-spacing:2px;color:#d3b893}
.intro-header>span span{padding:0 12px;color:#77604b}
.intro-dialog button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.intro-header button{font-size:11px;letter-spacing:0;border:0;background:none;padding:12px 0 12px 18px;color:#d6c2a6;min-height:44px;white-space:nowrap}
.intro-scene{position:relative;min-height:180px;overflow:hidden;background:#38231d;border:1px solid #d9ae7226;isolation:isolate;touch-action:pan-y;user-select:none}
.intro-image-wrap{position:absolute;inset:0;overflow:hidden}
.intro-image{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--intro-focus,50% 45%);image-rendering:pixelated;animation:intro-pan 9s ease-out both}
.intro-vignette{position:absolute;inset:0;background:linear-gradient(0deg,#211b1766,transparent 35%),linear-gradient(90deg,#211b1733,transparent 30%,transparent 70%,#211b1733);pointer-events:none}
.intro-scene-note{position:absolute;left:25px;top:22px;font:18px 'Pixelify Sans',sans-serif;color:#ffe7be;letter-spacing:2px;text-shadow:0 2px #37271e}
.intro-copy{position:relative;padding:25px 0 6px;max-width:880px;animation:intro-copy-in .4s ease-out both}
.intro-eyebrow{display:block;color:#bfa180;font-size:9px;letter-spacing:2.5px;margin-bottom:12px;text-transform:uppercase}
.intro-copy h1{font:normal clamp(24px,3.2vw,40px)/1.4 'Lora',serif;letter-spacing:-.6px;margin:0;color:#f5e8d4;text-wrap:balance}
.intro-copy p{font-size:13px;line-height:1.8;color:#bfae98;margin:12px 0 0;min-height:24px}
.intro-footer{display:flex;align-items:center;gap:20px;padding:12px 0 max(12px,env(safe-area-inset-bottom));z-index:2}
#intro-back{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:0;background:none;font-size:22px}
#intro-back:disabled{opacity:.2;cursor:default}
.intro-progress{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex:1}
.intro-steps{display:flex;gap:7px}
.intro-steps span{height:3px;width:25px;background:#655343}
.intro-steps span.is-read{background:#d7b37e}
.intro-steps span.is-current{background:#f1d8ac;box-shadow:0 0 9px #f1d8ac50}
#intro-count{font:10px 'Be Vietnam Pro',sans-serif;letter-spacing:2px;color:#b29a7a;white-space:nowrap}


.intro-dialog button:focus-visible{outline:2px solid #f9dc8f;outline-offset:5px}
.intro-shell.is-leaving{animation:intro-leave .35s ease-in both;pointer-events:none}
@keyframes intro-pan{from{transform:scale(1.06) translateX(-.7%)}to{transform:scale(1.01) translateX(.5%)}}
@keyframes intro-copy-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes intro-leave{to{opacity:0;transform:scale(1.025)}}
@media(min-width:1600px){.intro-shell{padding:0 72px;grid-template-rows:80px minmax(0,1fr) auto 76px}}
@media(max-width:700px){.intro-shell{padding:0 20px;grid-template-rows:64px minmax(180px,1fr) auto 64px}.intro-header{font-size:7px;letter-spacing:1px;gap:6px}.intro-header>span{max-width:200px;line-height:1.8}.intro-header>span span{padding:0 5px}.intro-header button{font-size:10px}.intro-scene{margin:0 -20px;border-left:0;border-right:0}.intro-copy{padding:23px 0 5px}.intro-eyebrow{font-size:8px;margin-bottom:12px;letter-spacing:2px}.intro-copy h1{font-size:27px;line-height:1.45;letter-spacing:-.4px}.intro-copy p{font-size:12px;margin-top:12px;line-height:1.85;min-height:44px}.intro-footer{gap:12px}.intro-progress{gap:10px;flex-direction:column;align-items:flex-end}.intro-steps{gap:5px}.intro-steps span{width:14px}#intro-count{font-size:8px}.intro-scene-note{top:20px;left:20px;font-size:15px}}
@media(max-height:580px) and (min-aspect-ratio:1/1){.intro-shell{display:grid;grid-template-columns:56% 1fr;grid-template-rows:48px minmax(160px,1fr) 58px;gap:0 26px;padding:0 26px}.intro-header{grid-column:1/-1}.intro-scene{grid-row:2/4;grid-column:1;margin-bottom:18px}.intro-copy{align-self:center;grid-row:2;grid-column:2;padding:12px 0}.intro-copy h1{font-size:23px}.intro-copy p{font-size:11px;min-height:0}.intro-eyebrow{font-size:7px;letter-spacing:1px}.intro-footer{grid-column:2;grid-row:3;gap:10px;padding-bottom:18px}.intro-progress{gap:6px;flex-direction:column;align-items:flex-end}.intro-steps span{width:12px}.intro-steps{gap:4px}.intro-scene-note{font-size:14px}}
@media(prefers-reduced-motion:reduce){.intro-dialog *{animation:none!important;transition:none!important}}

/* The speaker is named below the art; the acting remains inside the illustration. */
.intro-dialog[data-speaker="trhuy"] .intro-eyebrow{color:#bdcda6}
.intro-dialog[data-speaker="Hayden"] .intro-eyebrow{color:#e3b495}
.intro-dialog[data-speaker="Fuoc"] .intro-eyebrow{color:#e6d4ad}
.intro-scene[data-mood="snapping"] .intro-image{animation:intro-reaction 7s ease-out both}
.intro-scene[data-mood="pause"] .intro-image{animation:intro-pause 9s ease-out both}
.intro-scene-note{max-width:calc(100% - 40px);padding:7px 10px;background:#2b201bbd;border-left:2px solid #d1ac78;font-size:14px;line-height:1.5;letter-spacing:1.5px}
@keyframes intro-reaction{from{transform:scale(1.01)}to{transform:scale(1.065)}}
@keyframes intro-pause{from{transform:scale(1.045)}to{transform:scale(1)}}
@media(max-width:700px){.intro-image{object-fit:contain;object-position:center!important}.intro-scene[data-mood="nagging"] .intro-image,.intro-scene[data-mood="snapping"] .intro-image,.intro-scene[data-mood="putting-off"] .intro-image{object-fit:cover;object-position:var(--intro-focus)!important}.intro-image-wrap{background:#2a201b}.intro-scene-note{font-size:11px;top:12px;left:14px}.intro-copy h1{font-size:25px}.intro-copy p{font-size:12px}.intro-eyebrow{letter-spacing:2px}}
@media(max-width:380px) and (max-height:700px){.intro-shell{grid-template-rows:52px minmax(160px,1fr) auto 60px}.intro-copy{padding-top:17px}.intro-copy h1{font-size:22px}.intro-copy p{font-size:11px;line-height:1.7;margin-top:10px}.intro-eyebrow{margin-bottom:9px}.intro-footer{gap:10px}}

/* The whole illustration is the advance target; only a small chevron is visible. */
#intro-next{position:absolute;inset:0;z-index:3;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:none;color:#fff0d4;box-shadow:none;transform:none;translate:none;text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent}
#intro-next:hover,#intro-next:active{background:none;box-shadow:none;transform:none;translate:none}
.intro-next-arrow{position:absolute;right:20px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;font:normal 42px/1 Georgia,serif;text-shadow:0 2px 8px #21170d,0 0 14px #21170dbb;opacity:.85;transition:opacity .18s,transform .18s;pointer-events:none}
#intro-next:hover .intro-next-arrow{opacity:1;transform:translateX(3px)}
#intro-next:focus-visible{outline:2px solid #f9dc8f;outline-offset:-6px}
#intro-next:active .intro-next-arrow{transform:translateX(5px)}
@media(max-width:700px){.intro-next-arrow{right:12px;bottom:8px;font-size:38px}}