/* Keep the character area stable; reveal only the rendered 3D model. */
.start-card .portrait .portrait-loading{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;box-sizing:border-box;text-align:center}
.start-card .portrait .portrait-loading-label{font:600 14px/1.5 sans-serif;color:#e6edf4;text-shadow:0 2px 5px #061426;letter-spacing:.2px}
.portrait-loading-track{display:block;width:72px;height:3px;border-radius:3px;background:#cedfeb33;overflow:hidden}
.portrait-loading-track::after{content:'';display:block;width:50%;height:100%;background:#ffe175;animation:run-loading 1.2s ease-in-out infinite alternate}
.portrait-loading-settled .portrait-loading-track{display:none}
.start-card .portrait-pending{cursor:default}
.start-card .portrait-webgl canvas{animation:portrait-arrive .22s ease-out both}
.hero-arrival-running .portrait-webgl canvas{animation:none}
@keyframes portrait-arrive{from{opacity:.65}to{opacity:1}}
#run-loading{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:28px;background:radial-gradient(ellipse at center,#16344d,#061426 72%);text-align:center;touch-action:none}
#run-loading .loading-mark{color:#ffe175;font:900 52px 'Barlow Condensed',sans-serif;letter-spacing:3px}
#run-loading p{font-size:18px;line-height:1.5;color:#d9ecf6;margin:0}
#run-loading .loading-track{width:150px;height:4px;border-radius:4px;background:#355367;overflow:hidden}
#run-loading .loading-track::after{content:'';display:block;width:50%;height:100%;background:#ffe175;animation:run-loading 1.2s ease-in-out infinite alternate}
@keyframes run-loading{from{transform:translateX(-60%)}to{transform:translateX(160%)}}
@media(prefers-reduced-motion:reduce){#run-loading .loading-track::after,.portrait-loading-track::after,.start-card .portrait-webgl canvas{animation:none}}

/* Arrival effects stay inside the harbor and never intercept menu gestures. */
.home-hero{isolation:isolate;overflow:hidden}
.home-hero .portrait{position:relative;isolation:isolate}
.hero-arrival-waiting .portrait::after,.hero-arrival-running .portrait::after{content:'';position:absolute;left:29%;bottom:5%;width:42%;height:6%;border-radius:50%;background:radial-gradient(ellipse,#000e 0%,#0009 42%,#0000 72%);pointer-events:none;transform:scale(var(--arrival-shadow,.35));z-index:-1}
.hero-arrival-waiting .portrait::after{animation:arrival-anticipation 1.4s ease-out both}
.hero-arrival-waiting .portrait-loading:not(.portrait-loading-settled) .portrait-loading-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.home-hero .hero-arrival-fx{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;mask-image:none!important;filter:none!important}
@keyframes arrival-anticipation{from{transform:scale(.12);opacity:.45}to{transform:scale(.65);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-arrival-waiting .portrait::after,.hero-arrival-running .portrait::after{animation:none;display:none}}

.arrival-lights{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 19% 9% at 73% 91%,#ffe9a13d,transparent 85%)}
.arrival-spot{position:absolute;inset:0;background:linear-gradient(180deg,#d2f4ff05,#cff2ff38 80%,#edfcff55);pointer-events:none}
.arrival-spot-left{clip-path:polygon(14% 0,18% 0,87% 96%,65% 96%)}
.arrival-spot-right{clip-path:polygon(97% 0,100% 0,85% 96%,63% 96%);background:linear-gradient(180deg,#ffe5a605,#ffe9af30 80%,#fff1c34f)}
@media(prefers-reduced-motion:reduce){.arrival-lights{display:none}}

.arrival-warning{position:absolute;left:73%;top:60%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;filter:drop-shadow(0 3px 4px #0009)}
.arrival-warning[hidden]{display:none}
.arrival-warning span{font:700 57px/1 system-ui;color:#ffcc39}
.arrival-warning b{font:800 11px/1.2 system-ui;letter-spacing:.6px;background:#ffcc39;color:#17202b;padding:5px 8px;border-radius:3px;text-align:center;white-space:nowrap}
