/* First-person camera: scenery comes from the horizon and passes the ship. */
.voyage-stage{perspective:900px;transform-origin:50% 52%;animation:camera-roll 7s ease-in-out infinite}
@keyframes camera-roll{0%,100%{transform:rotate(.35deg) translateY(0)}25%{transform:rotate(-.55deg) translateY(5px)}55%{transform:rotate(.7deg) translateY(-4px)}78%{transform:rotate(-.25deg) translateY(3px)}}
.story-sea{perspective:1000px;transform-style:preserve-3d}
.story-vessel{left:50%;top:47%;width:min(390px,70vw);opacity:0;transform-origin:50% 100%;animation:approach-content var(--duration) linear var(--delay) forwards!important}
.story-vessel:not(.flag-island) .vessel-art,.story-vessel:not(.flag-island) .story-board{animation:vessel-heave 3.8s ease-in-out infinite}
.story-vessel:nth-child(even):not(.flag-island) .vessel-art,.story-vessel:nth-child(even):not(.flag-island) .story-board{animation-delay:-1.7s}
@keyframes approach-content{
  0%{opacity:0;transform:translate3d(var(--far-x),-12vh,-700px) scale(.12)}
  8%{opacity:.45}
  35%{opacity:.9;transform:translate3d(var(--far-x),-7vh,-380px) scale(.38)}
  68%{opacity:1;transform:translate3d(var(--near-x),5vh,-80px) scale(.76)}
  88%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--near-x),30vh,260px) scale(1.35)}
}
@keyframes vessel-heave{0%,100%{translate:0 0;rotate:-.8deg}25%{translate:0 -7px;rotate:.5deg}55%{translate:0 4px;rotate:1deg}80%{translate:0 -3px;rotate:-.4deg}}
.flag-island{animation-name:approach-island!important}.flag-island .story-board{animation:island-parallax 10s ease-in-out infinite}
@keyframes approach-island{
  0%{opacity:0;transform:translate3d(var(--far-x),-10vh,-850px) scale(.1)}
  12%{opacity:.65}
  48%{opacity:1;transform:translate3d(var(--far-x),-3vh,-350px) scale(.48)}
  85%{opacity:1;transform:translate3d(var(--near-x),7vh,-40px) scale(.84)}
  100%{opacity:0;transform:translate3d(var(--near-x),18vh,180px) scale(1.1)}
}
@keyframes island-parallax{0%,100%{translate:0 0}50%{translate:0 2px}}
.distant-islands{top:46%;animation:horizon-drift 28s linear infinite}@keyframes horizon-drift{to{translate:-12% 0}}
.sea-waves-back{top:49%;transform-origin:center;animation:waves 5s linear infinite,wave-rise 4s ease-in-out infinite}.sea-waves-front{z-index:9;animation:waves 8s linear infinite,wave-rise 5.5s ease-in-out infinite reverse}
@keyframes wave-rise{0%,100%{translate:0 0;scale:1 1}50%{translate:0 -8px;scale:1 1.08}}
.ship-view{position:absolute;z-index:12;inset:0;pointer-events:none;transform-origin:50% 100%;animation:ship-heave 4.6s ease-in-out infinite}
@keyframes ship-heave{0%,100%{transform:translateY(5px) rotate(-.35deg)}28%{transform:translateY(-7px) rotate(.45deg)}57%{transform:translateY(3px) rotate(.7deg)}82%{transform:translateY(-3px) rotate(-.55deg)}}
.wake{position:absolute;left:50%;top:49%;width:58vw;height:46vh;translate:-50% 0;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:repeating-radial-gradient(ellipse at 50% 0,transparent 0 18px,rgba(53,232,255,.22) 20px 21px,transparent 23px 44px);opacity:.55;animation:wake-run 1.8s linear infinite}
@keyframes wake-run{to{background-position:0 88px}}
.wake:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(140,255,0,.09) 49%,rgba(53,232,255,.18) 50%,rgba(140,255,0,.09) 51%,transparent 65%)}
.deck{position:absolute;left:50%;bottom:-4vh;width:min(620px,74vw);height:30vh;translate:-50% 0;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);background:linear-gradient(90deg,#06110f,#142c26 48%,#18342c 50%,#142c26 52%,#06110f);border-top:2px solid #35e8ff;box-shadow:0 -15px 40px rgba(53,232,255,.13)}
.deck-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(140,255,0,.12) 49px 50px),repeating-linear-gradient(0deg,transparent 0 45px,rgba(140,255,0,.09) 46px 47px);transform:perspective(250px) rotateX(30deg)}
.deck>b{position:absolute;left:50%;bottom:8%;translate:-50% 0;color:rgba(140,255,0,.24);font:900 60px Arial}
.bowsprit{position:absolute;left:50%;bottom:22vh;width:5px;height:28vh;translate:-50% 0;background:#35e8ff;box-shadow:0 0 15px rgba(53,232,255,.55);transform-origin:bottom;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.bowsprit span{position:absolute;top:25%;left:50%;width:78px;height:34px;border:1px solid var(--green);clip-path:polygon(0 0,100% 30%,0 100%);background:rgba(140,255,0,.1)}
.rail{position:absolute;bottom:5vh;width:34vw;height:20vh;border-top:2px solid #35e8ff}.rail-left{left:0;transform:skewY(17deg)}.rail-right{right:0;transform:skewY(-17deg)}.rail i{position:absolute;bottom:0;width:2px;height:100%;background:#35e8ff}.rail i:nth-child(1){left:12%}.rail i:nth-child(2){left:50%}.rail i:nth-child(3){left:88%}
.console{position:absolute;right:4vw;bottom:5vh;width:150px;padding:12px;border:1px solid var(--green);background:rgba(2,9,8,.9);box-shadow:7px 7px 0 rgba(140,255,0,.08);display:grid;gap:5px}.console small{font-size:7px;color:#35e8ff;letter-spacing:.15em}.console strong{font:900 20px Arial;color:var(--green)}.console em{position:absolute;right:12px;bottom:12px;color:#35e8ff;font-style:normal;animation:pulse 1s infinite}
.radio-toast{top:90px}
@media(max-width:700px){.deck{width:86vw;height:23vh}.bowsprit{bottom:16vh;height:23vh}.rail{width:32vw;height:14vh}.console{right:10px;bottom:25px;width:110px}.console strong{font-size:15px}.story-vessel{width:72vw}.ship-status{display:none}}
@media(prefers-reduced-motion:reduce){.voyage-stage,.ship-view,.story-vessel,.story-vessel .vessel-art,.story-vessel .story-board{animation-play-state:paused!important}}