.voyage-art { margin: 0; position: relative; min-width: 0; }
.voyage-picture { overflow: hidden; border-radius: 24px; }
.voyage-picture > svg { display: block; width: 100%; height: auto; overflow: hidden; }
.voyage-country-name { font-family: inherit; font-size: 20px; font-weight: 650; letter-spacing: .5px; fill: #375868; }
.voyage-toggle { display: block; margin: 12px auto 0; border: 1px solid #173e5040; border-radius: 999px; padding: 7px 15px; background: #fffdf7b3; color: #375868; font: inherit; font-size: 14px; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, box-shadow .25s; }
.voyage-toggle:hover:enabled { border-color: #173e50; background: #fffdf7; transform: scale(1.05); box-shadow: 0 4px 10px rgba(23,62,80,0.12); }
.voyage-toggle:active:enabled { transform: scale(0.95); }
.voyage-toggle:disabled { display: none; }


.voyage-landmark-art > path:first-of-type { fill: #f7f5ed; }
.voyage-scroll-belt { animation: voyage-panorama 32s linear infinite; }
.voyage-water-follow { animation: voyage-water-follow 3.2s linear infinite; }
.voyage-boat { transform-origin: 236px 402px; animation: voyage-sailing 3.6s ease-in-out infinite; }
.voyage-forward-sea { animation: voyage-sea 3.2s linear infinite; }
.voyage-forward-wake { animation: voyage-wake 1.2s linear infinite; }


.voyage-map-stop { visibility: hidden; animation: voyage-map-slot 16s steps(1,end) infinite; animation-delay: var(--state-delay,0s); }
.voyage-map-boat, .voyage-map-ring, .voyage-pop-shadow { transform-box: fill-box; transform-origin: 50% 100%; animation-duration: 16s; animation-iteration-count: infinite; animation-delay: var(--state-delay,0s); }
.voyage-map-boat { animation-name: voyage-spring; animation-timing-function: cubic-bezier(.2,.75,.3,1); }
.voyage-map-ring { transform-origin: center; animation-name: voyage-anchor-burst; animation-timing-function: ease-out; }
.voyage-pop-shadow { transform-origin: center; animation-name: voyage-anchor-shadow; animation-timing-function: ease-out; }


.voyage-calm-water, .harbor-water-motion { animation: voyage-calm-swell 4s ease-in-out infinite; }
.voyage-bottled-boat { transform-origin: 303px 334px; animation: voyage-sheltered 4s ease-in-out infinite; }
.voyage-outside-water { transform-origin: center; animation: voyage-rough-water 2s ease-in-out infinite; }
.voyage-bottle-glow { animation: voyage-glass-glow 4s ease-in-out infinite; }
.voyage-glass-sheen { animation: voyage-glass-sheen 6s ease-in-out infinite; }
.voyage-threat { animation: voyage-rebound-left 4s cubic-bezier(.4,0,.6,1) infinite; }
.threat-right { animation-name: voyage-rebound-top; animation-delay: -2s; }
.threat-rain { animation-name: voyage-rain; animation-delay: -.8s; }
.voyage-impact { transform-box: fill-box; transform-origin: right center; animation: voyage-impact 4s ease-out infinite; }
.impact-top { transform-origin: center bottom; animation-delay: -2s; }

.voyage-paused *, .voyage-reduced * { animation-play-state: paused !important; }
.voyage-reduced * { animation: none !important; }
.voyage-reduced .voyage-scroll-belt, .voyage-reduced .voyage-map-boat,
.voyage-reduced .voyage-map-ring, .voyage-reduced .voyage-pop-shadow { transform: none; }
.voyage-reduced .voyage-map-stop { visibility: hidden; }
.voyage-reduced .voyage-map-stop[data-country="usa"] { visibility: visible; }
.voyage-reduced .voyage-impact { opacity: .6; }

@keyframes voyage-panorama { to { transform: translateX(-1280px); } }
@keyframes voyage-sailing {
  0%,100% { transform: translate(0,0) rotate(-1.4deg); }
  25% { transform: rotate(.4deg); }
  50% { transform: rotate(1.4deg); }
  75% { transform: rotate(0deg); }
}
@keyframes voyage-sea { to { transform: translateX(-160px); } }
@keyframes voyage-wake { to { stroke-dashoffset: -25; } }
@keyframes voyage-map-slot {
  0%,24.99%,100% { visibility: visible; }
  25%,99.99% { visibility: hidden; }
}
@keyframes voyage-spring {
  0% { transform: translateY(30px) scale(.05,0); }
  2% { transform: translateY(-15px) scale(1.16,1.2); }
  3.5% { transform: translateY(4px) scale(1.06,.88); }
  5% { transform: translateY(-4px) scale(.96,1.06); }
  7%,18% { transform: translateY(0) scale(1); }
  20% { transform: translateY(6px) scale(1.12,.8); }
  23%,100% { transform: translateY(26px) scale(0); }
}
@keyframes voyage-anchor-burst {
  0% { transform: scale(.2); opacity: .8; }
  2% { transform: scale(.8); opacity: .8; }
  8%,100% { transform: scale(2.4); opacity: 0; }
}
@keyframes voyage-anchor-shadow {
  0%,23%,100% { transform: scale(.1); }
  2% { transform: scale(.7); }
  7%,18% { transform: scale(1); }
  20% { transform: scale(1.15,.75); }
}
@keyframes voyage-sheltered {
  0%,100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: rotate(.6deg); }
}
@keyframes voyage-calm-swell { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

@keyframes voyage-water-follow {
  0%,100% { transform: translateY(-1.615px); }
  5% { transform: translateY(1.615px); }
  10% { transform: translateY(4.335px); }
  15% { transform: translateY(6.375px); }
  20% { transform: translateY(7.735px); }
  25% { transform: translateY(8.415px); }
  30% { transform: translateY(8.415px); }
  35% { transform: translateY(7.735px); }
  40% { transform: translateY(6.375px); }
  45% { transform: translateY(4.335px); }
  50% { transform: translateY(1.615px); }
  55% { transform: translateY(-1.615px); }
  60% { transform: translateY(-4.335px); }
  65% { transform: translateY(-6.375px); }
  70% { transform: translateY(-7.735px); }
  75% { transform: translateY(-8.415px); }
  80% { transform: translateY(-8.415px); }
  85% { transform: translateY(-7.735px); }
  90% { transform: translateY(-6.375px); }
  95% { transform: translateY(-4.335px); }
}
.auth-sea .harbor-vessel-scene { display: block; width: auto; height: 100%; max-width: 100%; margin: 0 auto; }
.auth-sea:after { display: none; }
.user-art-boat.harbor-vessel-scene { filter: none; }
.harbor-boat { transform-origin: 120px 238px; animation: voyage-sheltered 4s ease-in-out infinite; }
.harbor-vessel-scene.motion-rest *, .motion-rest .harbor-vessel-scene *, .motion-paused .harbor-vessel-scene * { animation-play-state: paused !important; }
@media(prefers-reduced-motion: reduce) { .harbor-vessel-scene * { animation: none !important; } }
@keyframes voyage-rough-water {
  0%,100% { transform: translateY(3px) scaleY(.9); }
  50% { transform: translateY(-5px) scaleY(1.1); }
}
@keyframes voyage-glass-glow {
  0%,32%,64%,82%,100% { opacity: .12; }
  44%,94% { opacity: .7; }
}
@keyframes voyage-glass-sheen {
  0%,15% { transform: translateX(-120px); opacity: 0; }
  25%,65% { opacity: .65; }
  80%,100% { transform: translateX(430px); opacity: 0; }
}
@keyframes voyage-rebound-left {
  0% { transform: translate(-30px,-18px) rotate(-12deg); opacity: 0; }
  15% { opacity: 1; }
  44% { transform: translate(54px,0) rotate(0); opacity: 1; }
  62% { transform: translate(17px,-32px) rotate(-30deg); opacity: 1; }
  90%,100% { transform: translate(-35px,-66px) rotate(-55deg); opacity: 0; }
}
@keyframes voyage-rebound-top {
  0% { transform: translate(-15px,-35px); opacity: 0; }
  15% { opacity: 1; }
  44% { transform: translate(0,40px); opacity: 1; }
  62% { transform: translate(25px,4px); opacity: 1; }
  90%,100% { transform: translate(45px,-30px); opacity: 0; }
}
@keyframes voyage-rain {
  0% { transform: translate(-20px,-28px); opacity: 0; }
  15% { opacity: .7; }
  44% { transform: translate(34px,38px); opacity: .7; }
  62% { transform: translate(12px,10px); opacity: .7; }
  90%,100% { transform: translate(-20px,-14px); opacity: 0; }
}
@keyframes voyage-impact {
  0%,39%,61%,100% { transform: scale(.4); opacity: 0; }
  44% { transform: scale(1.15); opacity: 1; }
  53% { transform: scale(1); opacity: .6; }
}

@media(max-width:640px) {
  .voyage-toggle { font-size: 14px; margin-top: 8px; }
}

@media(prefers-reduced-motion:reduce) {
  .voyage-art * { animation: none !important; }
  .voyage-map-stop { visibility: hidden; }
  .voyage-map-stop[data-country="usa"] { visibility: visible; }
  .voyage-impact { opacity: .6; }
}