/* Ocean liner voyage: each chapter is a leg of the route, driven by .world[data-scene]. */
.voyage-stage { overflow: hidden; border-radius: .35rem; box-shadow: inset 0 0 0 1px #72573f33, 0 .6rem 1.6rem #3d2c1c24; background: #2b3d63; }
.liner-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Per-scene layers cross-fade instead of snapping. */
.liner-scene [data-s] { opacity: 0; transition: opacity 1100ms ease; }
.world[data-scene='hanoi'] [data-s='hanoi'],
.world[data-scene='eastsea'] [data-s='eastsea'],
.world[data-scene='indian'] [data-s='indian'],
.world[data-scene='suez'] [data-s='suez'],
.world[data-scene='med'] [data-s='med'],
.world[data-scene='north'] [data-s='north'],
.world[data-scene='stockholm'] [data-s='stockholm'] { opacity: 1; }

/* Scene parameters. */
.world[data-theme='voyage'] {
  --sx: 170px; --sy: 288px; --sun-o: 1; --moon-o: 0; --stars-o: 0;
  --cloud-fill: #fff; --cloud-o: .5; --win: #e9d9bd; --haze-o: 0; --rain-o: 0; --snow-o: 0;
  --ship-x: 0px; --tilt: .5deg; --lift: 1.5px; --bob: 4.6s; --flow: 1;
}
.world[data-scene='eastsea'] { --sx: 470px; --sy: 92px; --cloud-o: .85; --win: #bcd5dc; --ship-x: -80px; }
.world[data-scene='indian'] { --sun-o: 0; --moon-o: 1; --stars-o: 1; --cloud-o: .1; --win: #ffd98a; --ship-x: 0px; --bob: 5.4s; }
.world[data-scene='suez'] { --sx: 120px; --sy: 270px; --cloud-o: .25; --win: #d4e2e0; --haze-o: .2; --ship-x: 0px; --bob: 6s; }
.world[data-scene='med'] { --sx: 330px; --sy: 82px; --cloud-o: .65; --win: #bcd5dc; --ship-x: -10px; }
.world[data-scene='north'] { --sun-o: 0; --cloud-fill: #55606a; --cloud-o: 1; --win: #ffd98a; --rain-o: .6; --tilt: 2.4deg; --lift: 5px; --bob: 2.8s; --ship-x: 40px; --flow: 1.8; }
.world[data-scene='stockholm'] { --sx: 560px; --sy: 292px; --sun-o: .55; --cloud-fill: #f0e4e4; --cloud-o: .55; --win: #ffd98a; --snow-o: .85; --ship-x: -60px; --bob: 6.4s; }

.layer-stars { opacity: var(--stars-o); transition: opacity 1200ms ease; }
.layer-sun .sun { transform: translate(var(--sx), var(--sy)); opacity: var(--sun-o); transition: transform 1400ms var(--stage-ease), opacity 1000ms ease; }
.layer-sun .moon { transform: translate(498px, 104px); opacity: var(--moon-o); transition: opacity 1200ms ease; }
.cloud { fill: var(--cloud-fill); opacity: var(--cloud-o); transition: opacity 1100ms ease, fill 1100ms ease; }
.window { fill: var(--win); transition: fill 1000ms ease; }
.port .window { fill: #ffd98a; }
.haze { opacity: var(--haze-o); mix-blend-mode: multiply; transition: opacity 1200ms ease; }
.rain { opacity: var(--rain-o); transition: opacity 900ms ease; }
.snow { opacity: var(--snow-o); transition: opacity 900ms ease; }
.beam { opacity: .28; }

.vessel-wrap { transform-origin: 330px 340px; transform: translateX(var(--ship-x)) scale(.8); transition: transform 1500ms var(--stage-ease); }
.liner { transform-origin: 330px 332px; }
.waves-back { opacity: .26; }
.waves-front { opacity: .3; }
.puff { opacity: .5; }

/* Everything below only moves while motion is on. */
html[data-motion='on'] .liner { animation: liner-bob var(--bob) ease-in-out infinite; }
html[data-motion='on'] .waves-back { animation: wave-drift calc(7s / var(--flow)) linear infinite; }
html[data-motion='on'] .waves-front { animation: wave-drift-wide calc(4.4s / var(--flow)) linear infinite; }
html[data-motion='on'] .surf { animation: surf-heave 3.6s ease-in-out infinite; }
html[data-motion='on'] .wake { animation: wake-pulse 2.4s ease-in-out infinite; }
html[data-motion='on'] .cloud-a { animation: cloud-drift 38s ease-in-out infinite alternate; }
html[data-motion='on'] .cloud-b { animation: cloud-drift 52s ease-in-out infinite alternate-reverse; }
html[data-motion='on'] .cloud-c { animation: cloud-drift 44s ease-in-out infinite alternate; }
html[data-motion='on'] .puff { animation: puff-rise 4.5s ease-out infinite; }
html[data-motion='on'] .puff-b { animation-delay: 1.5s; }
html[data-motion='on'] .puff-c { animation-delay: .7s; }
html[data-motion='on'] .puff-d { animation-delay: 2.4s; }
html[data-motion='on'] .flag { animation: flag-wave 1.6s ease-in-out infinite; transform-origin: 440px 215px; }
html[data-motion='on'] .rain { animation: rain-fall .55s linear infinite; }
html[data-motion='on'] .snow { animation: snow-fall 5.5s linear infinite; }
html[data-motion='on'] .beam { animation: beam-sweep 5s ease-in-out infinite alternate; transform-origin: 126px 233px; }
html[data-motion='on'] .duo { animation: person-nod 3.8s ease-in-out infinite; transform-origin: 488px 298px; }
@keyframes liner-bob { 0%, 100% { transform: translateY(0) rotate(calc(var(--tilt) * -1)); } 50% { transform: translateY(var(--lift)) rotate(var(--tilt)); } }
@keyframes wave-drift { to { transform: translateX(-96px); } }
@keyframes wave-drift-wide { to { transform: translateX(-160px); } }
@keyframes surf-heave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes wake-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .22; } }
@keyframes cloud-drift { to { transform: translateX(70px); } }
@keyframes puff-rise { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .65; } 100% { transform: translate(-52px, -46px) scale(2.1); opacity: 0; } }
@keyframes flag-wave { 0%, 100% { transform: skewY(-6deg); } 50% { transform: skewY(7deg); } }
@keyframes rain-fall { to { transform: translateY(62px); } }
@keyframes snow-fall { to { transform: translateY(64px); } }
@keyframes beam-sweep { from { transform: rotate(-4deg); opacity: .15; } to { transform: rotate(5deg); opacity: .34; } }
@keyframes person-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
html[data-motion='off'] .liner-scene [data-s], html[data-motion='off'] .vessel-wrap, html[data-motion='off'] .layer-sun .sun { transition: none; }

/* Destination label and route strip sit above the artwork. */
.voyage-destination { position: absolute; z-index: 4; top: .5rem; left: .5rem; padding: .3rem .65rem; border-radius: .3rem; background: #2a1d1ab3; color: #f8ecd8; text-shadow: none; line-height: 1.15; -webkit-backdrop-filter: blur(.3rem); backdrop-filter: blur(.3rem); }
.voyage-destination span { color: #e6c9a0; }
.voyage-destination em { margin-top: .15rem; font-size: 1.15rem; }
.leg-route { position: absolute; z-index: 4; left: .5rem; right: .5rem; bottom: .5rem; display: flex; align-items: center; justify-content: space-between; padding: .35rem .6rem; border-radius: 99px; background: #2a1d1a99; -webkit-backdrop-filter: blur(.3rem); backdrop-filter: blur(.3rem); }
.leg-line { position: absolute; left: .85rem; right: .85rem; top: 50%; height: 2px; transform: translateY(-50%); background: #f8ecd844; }
.leg-fill { display: block; height: 100%; width: calc(var(--leg, 0) / var(--legs-max, 6) * 100%); background: #e6c9a0; transition: width 900ms var(--stage-ease); }
.leg-dot { position: relative; z-index: 1; width: .55rem; height: .55rem; border: 1.5px solid #e6c9a0; border-radius: 50%; background: #2a1d1a; transition: background 500ms ease, transform 500ms var(--stage-ease), box-shadow 500ms ease; }
.leg-dot[data-passed] { background: #e6c9a0; }
.leg-dot[data-current] { transform: scale(1.55); background: #fff2d9; box-shadow: 0 0 0 3px #e6c9a055; }

@media (max-width: 700px) {
  .voyage-destination { top: .35rem; left: .35rem; padding: .22rem .5rem; }
  .voyage-destination em { font-size: .95rem; }
  .leg-route { bottom: .35rem; left: .35rem; right: .35rem; padding: .28rem .5rem; }
}
@media (min-width: 701px) { .voyage-stage { aspect-ratio: 4 / 3.3; } }
@media (prefers-reduced-motion: reduce) { .liner-scene [data-s], .vessel-wrap, .layer-sun .sun, .leg-fill { transition: none; } }

/* The short film after the last leg. */
.voyage-film-section { display: grid; gap: var(--space-5, 1.25rem); width: min(44rem, calc(100% - 2rem)); margin: var(--space-10, 4rem) auto; }
.voyage-film-section h2 { margin: .2rem 0 .4rem; font: italic clamp(2rem, 5vw, 3rem)/1.05 var(--serif); }
.voyage-film-section .film-intro p:last-child { color: var(--muted); }
.voyage-reel { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: .35rem; background: #f3e8d4; box-shadow: inset 0 0 0 1px #72573f33, 0 .6rem 1.6rem #3d2c1c24; }
.film-note { margin: 0; color: var(--muted); font: italic .95rem/1.4 var(--serif); }