@font-face{font-family:MaruBuri;src:url('./assets/fonts/MaruBuri-Regular.otf');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#17151e}body{color:#fff8f2}
.opening{width:100%;max-width:540px;height:100vh;height:100dvh;margin:auto;position:relative;overflow:hidden;isolation:isolate;background:#17151e}
.film{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.film-one{z-index:0;opacity:1}.film-two{z-index:1;opacity:0;transition:opacity 350ms ease-in-out}
.opening[data-scene=second] .film-two,.opening[data-scene=holding] .film-two{opacity:1}
/* Keep the first decoded frame underneath until the incoming film is opaque. */
.opening[data-scene=second] .film-one,.opening[data-scene=holding] .film-one{opacity:0;transition:opacity 0s 350ms}
.lower-shade{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(10,8,12,0) 50%,rgba(18,10,14,.25) 70%,rgba(15,8,12,.55) 100%)}
.dialogue{position:absolute;z-index:3;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + clamp(100px,18dvh,175px));text-align:center;pointer-events:none}
.dialogue p{margin:0;color:#fff8f2;font:600 clamp(20px,5.65vw,26px)/1.55 MaruBuri,serif;letter-spacing:-.02em;text-shadow:0 2px 10px #0007}
.dialogue span{display:block;opacity:0;transition:opacity 400ms ease;white-space:nowrap}.dialogue span.is-visible{opacity:1}
.dialogue-one{transition:opacity 250ms ease}.opening[data-scene=second] .dialogue-one,.opening[data-scene=holding] .dialogue-one{opacity:0}
.dialogue-two{opacity:0}.opening[data-scene=second] .dialogue-two,.opening[data-scene=holding] .dialogue-two{opacity:1}
.skip{position:absolute;z-index:5;right:15px;top:calc(env(safe-area-inset-top) + 18px);min-height:44px;padding:10px 12px;border:0;background:none;color:#fff8f2c4;text-shadow:0 1px 5px #0008;font:12px Arial,sans-serif;cursor:pointer}
button:focus-visible{outline:2px solid #efdbb8;outline-offset:4px}
.playback-help{position:absolute;z-index:6;left:20px;right:20px;bottom:calc(env(safe-area-inset-bottom) + 24px);text-align:center;font:12px/1.6 Arial,sans-serif}
.playback-help p{margin:0 0 10px;text-shadow:0 1px 5px #000}.playback-help button{border:1px solid #e7d4b688;background:#251b25b8;color:#fff4e1;border-radius:6px;padding:11px 22px;cursor:pointer}
[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.film-two{transition-duration:100ms}.dialogue span,.dialogue-one{transition:none}}

/* Opening narration is centered; the greeting changes to an invitation on the held frame. */
.dialogue-one{top:50%;bottom:auto;transform:translateY(-50%)}
.dialogue-two p{position:relative}




.opening-continue{position:absolute;z-index:5;left:22px;right:22px;bottom:calc(env(safe-area-inset-bottom) + 24px);min-height:56px;padding:16px;border:1px solid #efd6a3;border-radius:6px;background:linear-gradient(110deg,#f0d4a3,#fff0cd);color:#57292c;font:600 17px/1.4 MaruBuri,serif;cursor:pointer;animation:opening-cta-in 400ms ease both}
.opening-continue:hover{filter:brightness(1.04)}
@keyframes opening-cta-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.opening-continue{animation:none}}

/* Folktale prologue: two successive captions, never four stacked lines. */
.dialogue-one p,.dialogue-two p{position:relative;min-height:3.1em}
.dialogue-one span{position:absolute;inset:0}


.dialogue-one p{font-size:clamp(18px,5.1vw,25px)}

/* Center each caption vertically even when the second caption is one line. */
.dialogue-one span{top:50%;bottom:auto;transform:translateY(-50%)}

.dialogue-one #line-two{white-space:normal;word-break:keep-all;text-wrap:balance}


/* Continue the greeting on the held frame, before the CTA appears. */
#line-four{position:absolute;inset:0;opacity:0;white-space:normal;word-break:keep-all;text-wrap:balance}
.opening[data-followup=true] #line-three,.opening[data-scene=holding] #line-three{opacity:0;transition:opacity 350ms ease}
.opening[data-followup=true] #line-four,.opening[data-scene=holding] #line-four{opacity:1;transition:opacity 350ms ease}
@media(prefers-reduced-motion:reduce){.opening[data-scene=holding] #line-three,.opening[data-scene=holding] #line-four{transition-duration:0s}}