.prologue{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#042644;color:#101923;touch-action:manipulation;overscroll-behavior:none;font-family:Arial,Helvetica,sans-serif}
.prologue::backdrop{background:#042644}
.prologue-fade{position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none}
.prologue[data-phase=riding],.prologue[data-phase=riding]::backdrop{background:transparent}
.prologue[data-phase=riding]>:not(.prologue-fade){display:none!important}
.prologue-scene,.prologue-water{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.prologue-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.prologue-water{background:#052747;will-change:transform}
.prologue-water::after{content:"";position:absolute;top:0;left:0;right:0;height:24px;opacity:0;pointer-events:none;background:linear-gradient(to bottom,#dcffff99 0,#8ce7ed66 3px,#2798b455 9px,transparent 24px);border-top:2px solid #e0ffffbb;border-radius:48% 35% 0 0 / 5px 4px 0 0;box-shadow:0 -2px 6px #c4ffff66;}
.prologue[data-phase=surfacing] .prologue-water::after{opacity:1}
@media(prefers-reduced-motion:reduce){.prologue-water::after{display:none}}

.prologue-water img{position:absolute;bottom:0;left:0;display:block;width:100%;height:auto;min-height:125%;object-fit:cover;object-position:center bottom;will-change:transform}
.prologue-credit{position:absolute;top:45%;left:16px;right:16px;margin:0;text-align:center;color:#002b49;font-size:clamp(23px,6.5vw,42px);font-weight:850;letter-spacing:-.8px;line-height:1.15;text-shadow:0 1px 12px #b4fffb55;opacity:0;pointer-events:none}
.prologue-credit span{display:block;margin-top:12px;font-size:.5em;font-weight:600;letter-spacing:5px;text-transform:uppercase}
.prologue-tap{position:absolute;top:0;bottom:0;width:50%;margin:0;padding:0;border:0;background:transparent!important;border-radius:0;box-shadow:none;z-index:4;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.prologue-left{left:0}.prologue-right{right:0}
.prologue-tap:focus{outline:none}.prologue-tap:focus-visible{outline:2px dashed #ffe48a;outline-offset:-5px}
.prologue-dialogue{position:absolute;inset:0;padding-bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:none;z-index:3}
.prologue-side,.prologue-bottom{position:absolute;display:flex;flex-direction:column;gap:6px}
.prologue-bubble{position:relative;margin:0;padding:6px 9px;border:2px solid #101923;border-radius:16px 17px 16px 4px;background:#fffdf0;box-shadow:3px 3px 0 #101923;font-size:var(--bubble-font,14px);font-weight:400;line-height:1.22;visibility:hidden}
.prologue-bubble strong{font-weight:900;font-size:1.08em}.prologue-bubble[data-speaker=You]{background:#dceef8;border-radius:16px 16px 4px 16px}
.prologue-bubble.is-visible{visibility:visible;animation:prologue-ink .45s ease-out}
.prologue-status{position:absolute;top:44%;left:20px;right:20px;margin:0;padding:18px;border-radius:12px;background:#062644e8;color:#fff;text-align:center;pointer-events:none;z-index:5;font-size:16px;line-height:1.4}
.prologue:not([data-phase=loading]):not([data-phase=error]) .prologue-status{width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.prologue [hidden]{display:none!important}
@keyframes prologue-ink{from{opacity:0}to{opacity:1}}
@media(max-height:650px){.prologue-bubble{padding:4px 7px}.prologue-side,.prologue-bottom{gap:5px}}
@media(orientation:landscape){.prologue-photo{width:auto;max-width:100%;height:100%;object-fit:contain}.prologue-scene{background:radial-gradient(ellipse at bottom right,#065677,#042644 70%)}}
@media(prefers-reduced-motion:reduce){.prologue-bubble.is-visible{animation-duration:.2s}.prologue-water,.prologue-water img{will-change:auto}}

/* Let the first line appear after the aerial panel begins fading in. */
.prologue[data-line="0"] .prologue-bubble.is-visible{animation:prologue-ink .65s ease-out .45s both}
@media(prefers-reduced-motion:reduce){.prologue[data-line="0"] .prologue-bubble.is-visible{animation-duration:.2s;animation-delay:.1s}}