/*
 * FILE: public/css/hero-animation.css
 * PURPOSE:
 * - Lightweight decorative nighttime maritime animation for the public homepage hero.
 */

.maritime-hero-animation {
  --maritime-moon-core: rgba(255, 242, 143, 0.99);
  --maritime-moon-mid: rgba(247, 196, 58, 0.98);
  --maritime-moon-rim: rgba(219, 147, 32, 0.94);
  --maritime-moon-edge: rgba(113, 70, 24, 0.82);
  --maritime-moon-shadow: rgba(53, 29, 13, 0.42);
  --maritime-moon-highlight: rgba(255, 249, 186, 0.42);
  --maritime-moon-crater: rgba(87, 55, 24, 0.2);
  --maritime-moon-crater-rim: rgba(255, 232, 145, 0.24);
  --maritime-moon-glow: rgba(255, 214, 76, 0.42);
  --maritime-moon-outer-glow: rgba(255, 174, 38, 0.2);
  --maritime-moon-haze: rgba(255, 204, 64, 0.16);
  --maritime-moon-glow-size: 30px;
  --maritime-moon-outer-glow-size: 96px;
  --maritime-moon-haze-size: 150px;
  --maritime-moon-hover-glow-size: 38px;
  --maritime-moon-hover-outer-glow-size: 118px;
  --maritime-moon-hover-haze-size: 178px;
  --maritime-moon-base-brightness: 0.88;
  --maritime-moon-hover-brightness: 1.08;
  --maritime-moon-tooltip-bg: rgba(5, 15, 29, 0.82);
  --maritime-moon-tooltip-border: rgba(202, 230, 255, 0.22);
  --maritime-moon-tooltip-transition: 520ms ease;
  --maritime-moon-current-glow-size: var(--maritime-moon-glow-size);
  --maritime-moon-current-outer-glow-size: var(--maritime-moon-outer-glow-size);
  --maritime-moon-current-haze-size: var(--maritime-moon-haze-size);
  --maritime-moon-current-brightness: var(--maritime-moon-base-brightness);
  --maritime-star-near-opacity: 0.82;
  --maritime-star-near-opacity-hover: 0.92;
  --maritime-star-far-opacity: 0.72;
  --maritime-star-white: rgba(255, 255, 255, 0.95);
  --maritime-star-blue: rgba(174, 219, 255, 0.82);
  --maritime-star-warm: rgba(255, 245, 190, 0.86);
  --maritime-star-glow: rgba(202, 230, 255, 0.32);
  --maritime-star-warm-glow: rgba(255, 244, 190, 0.14);
  --maritime-star-twinkle-near-duration: 5.8s;
  --maritime-star-twinkle-far-duration: 8s;
  --maritime-star-sparkle-primary-duration: 4.6s;
  --maritime-star-sparkle-secondary-duration: 6.2s;
  --maritime-lighthouse-white: #e8edf3;
  --maritime-lighthouse-white-shadow: #b8c3cf;
  --maritime-lighthouse-red: #8f2f2f;
  --maritime-lighthouse-red-shadow: #642222;
  --maritime-lighthouse-dark: #070d15;
  --maritime-lighthouse-metal: #283442;
  --maritime-lighthouse-metal-light: #344153;
  --maritime-lighthouse-window: rgba(4, 9, 15, 0.58);
  --maritime-lighthouse-window-soft: rgba(4, 9, 15, 0.32);
  --maritime-lighthouse-lens-warm: rgba(255, 195, 64, 0.62);
  --maritime-lighthouse-lens-shadow: rgba(35, 24, 12, 0.42);
  --maritime-lighthouse-glass: rgba(255, 238, 178, 0.94);
  --maritime-lighthouse-light: rgba(255, 214, 34, 0.98);
  --maritime-lighthouse-light-faint: rgba(255, 202, 26, 0.26);
  --maritime-lighthouse-light-core: rgba(255, 226, 80, 0.56);
  --maritime-lighthouse-light-soft: rgba(255, 184, 18, 0.68);
  --maritime-lighthouse-sector-red: rgba(213, 43, 30, 0.2);
  --maritime-lighthouse-sector-green: rgba(0, 122, 61, 0.18);
  --maritime-lighthouse-sector-white: rgba(255, 224, 96, 0.28);
  --maritime-lighthouse-sector-opacity-dark: 0.035;
  --maritime-lighthouse-sector-opacity-flash: 0.14;
  --maritime-lighthouse-surface-highlight: rgba(255, 255, 255, 0.22);
  --maritime-lighthouse-surface-shadow: rgba(0, 0, 0, 0.24);
  --maritime-lighthouse-cast-shadow: rgba(0, 0, 0, 0.36);
  --maritime-lighthouse-beam-width: clamp(420px, 64vw, 1040px);
  --maritime-lighthouse-beam-height: clamp(16px, 2.2vw, 34px);
  --maritime-lighthouse-right: clamp(8px, 5vw, 90px);
  --maritime-lighthouse-bottom: 25%;
  --maritime-lighthouse-width: clamp(92px, 12vw, 160px);
  --maritime-lighthouse-height: clamp(170px, 26vw, 280px);
  --maritime-star-field-bottom: calc(var(--maritime-lighthouse-bottom) + var(--maritime-lighthouse-height));
  --maritime-lighthouse-characteristic-period: 10s;
  --maritime-lighthouse-rotation-start: -1.4deg;
  --maritime-lighthouse-rotation-mid: 1deg;
  --maritime-lighthouse-rotation-end: -0.6deg;
  --maritime-signal-offset-x: 0;
  --maritime-signal-rotation-start: 0deg;
  --maritime-signal-rotation-mid: 0deg;
  --maritime-signal-rotation-end: 0deg;
  --maritime-lighthouse-beam-offset-y: -2%;
  --maritime-lighthouse-beam-spread: 3.2;
  --maritime-lighthouse-sector-offset-y: 7px;
  --maritime-lighthouse-range-opacity: 0.18;
  --maritime-lighthouse-beam-opacity-dark: 0;
  --maritime-lighthouse-beam-opacity-flash: 0.86;
  --maritime-lighthouse-beam-opacity-still: 0.38;
  --maritime-lighthouse-lantern-opacity-dark: 0.26;
  --maritime-lighthouse-lantern-opacity-flash: 1;
  --maritime-lighthouse-status-light: #35f08b;
  --maritime-nav-light-white: #ffffff;
  --maritime-nav-light-starboard: #2ee88a;
  --maritime-nav-light-port: #ff4d5b;
  --maritime-nav-light-towing: #ffd84d;
  --maritime-nav-light-fishing-red: #ff4050;
  --maritime-nav-light-fishing-green: #30f48f;
  --maritime-nav-light-size: clamp(5px, 0.5vw, 8px);
  --maritime-nav-light-core-size: 36%;
  --maritime-nav-light-opacity: 0.72;
  --maritime-nav-light-saturation: 1.08;
  --maritime-nav-light-glow: 7px;
  --maritime-nav-light-outer-glow: 15px;
  --maritime-vessel-masthead-forward-left: 58%;
  --maritime-vessel-masthead-forward-bottom: 25px;
  --maritime-vessel-masthead-aft-left: 36%;
  --maritime-vessel-masthead-aft-bottom: 31px;
  --maritime-vessel-hull-top: #243244;
  --maritime-vessel-hull-mid: #101a28;
  --maritime-vessel-hull-bottom: #040910;
  --maritime-vessel-hull-shape: polygon(0 24%, 84% 18%, 100% 48%, 92% 100%, 9% 100%, 0 58%);
  --maritime-vessel-hull-shape-cargo: polygon(0 22%, 82% 18%, 96% 40%, 100% 62%, 94% 100%, 7% 100%, 0 54%);
  --maritime-vessel-hull-shape-tanker: polygon(2% 18%, 86% 18%, 100% 48%, 94% 100%, 8% 100%, 0 58%);
  --maritime-vessel-hull-shape-craft: polygon(0 24%, 84% 18%, 100% 48%, 91% 100%, 10% 100%, 0 58%);
  --maritime-vessel-hull-shape-tug: polygon(0 31%, 65% 18%, 100% 47%, 88% 100%, 12% 100%, 0 64%);
  --maritime-vessel-hull-shape-sailing: polygon(0 32%, 78% 22%, 100% 52%, 86% 100%, 12% 100%, 0 64%);
  --maritime-vessel-hull-shape-fishing: polygon(0 28%, 76% 18%, 100% 46%, 90% 100%, 11% 100%, 0 65%);
  --maritime-vessel-hull-away-shape: polygon(22% 0, 78% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%);
  --maritime-vessel-hull-waterline: rgba(178, 205, 226, 0.26);
  --maritime-vessel-hull-rim: rgba(255, 255, 255, 0.16);
  --maritime-vessel-hull-deck-line: rgba(224, 236, 244, 0.2);
  --maritime-vessel-hull-shadow: rgba(0, 0, 0, 0.34);
  --maritime-vessel-window-light: rgba(224, 240, 246, 0.28);
  --maritime-vessel-window-shadow: rgba(5, 10, 18, 0.46);
  --maritime-vessel-house-top: #344357;
  --maritime-vessel-house-mid: #172334;
  --maritime-vessel-house-shadow: #070d15;
  --maritime-titanic-hull: #05070a;
  --maritime-titanic-hull-rim: rgba(255, 255, 255, 0.18);
  --maritime-titanic-boot-top: #7c1f19;
  --maritime-titanic-superstructure: #e8edf0;
  --maritime-titanic-superstructure-shadow: #aab6bf;
  --maritime-titanic-funnel: #c28b3c;
  --maritime-titanic-funnel-cap: #050608;
  --maritime-titanic-seabed-mud: rgba(62, 48, 33, 0.66);
  --maritime-titanic-seabed-mud-soft: rgba(118, 92, 58, 0.38);
  --maritime-titanic-seabed-silt: rgba(155, 124, 79, 0.2);
  --maritime-semisub-red: #a93229;
  --maritime-semisub-red-shadow: #5a1d1d;
  --maritime-semisub-deck: #d8dadd;
  --maritime-semisub-deck-shadow: #8f98a1;
  --maritime-semisub-column: #cfd3d5;
  --maritime-semisub-column-shadow: #7f878e;
  --maritime-semisub-derrick: rgba(40, 46, 52, 0.9);
  --maritime-semisub-derrick-light: rgba(190, 198, 204, 0.46);
  --maritime-semisub-crane: rgba(190, 141, 36, 0.86);
  --maritime-semisub-helipad: #254139;
  --maritime-semisub-window: rgba(16, 25, 34, 0.52);
  --maritime-semisub-work-light: rgba(255, 218, 134, 0.94);
  --maritime-semisub-work-light-soft: rgba(255, 190, 82, 0.34);
  --maritime-semisub-cold-light: rgba(206, 232, 255, 0.82);
  --maritime-semisub-reflection: rgba(255, 198, 96, 0.22);
  --maritime-semisub-reflection-cold: rgba(126, 185, 230, 0.14);
  --maritime-semisub-width: 224px;
  --maritime-semisub-height: 118px;
  --maritime-semisub-deck-bottom: 56px;
  --maritime-semisub-deck-height: 18px;
  --maritime-semisub-column-bottom: 16px;
  --maritime-semisub-column-height: 45px;
  --maritime-semisub-derrick-left: 34%;
  --maritime-semisub-derrick-bottom: 68px;
  --maritime-semisub-derrick-width: 68px;
  --maritime-semisub-derrick-height: 70px;
  --maritime-semisub-derrick-crown-bottom: 133px;
  --maritime-semisub-derrick-crown-width: 48px;
  --maritime-semisub-derrick-beacon-left: calc(var(--maritime-semisub-derrick-left) + 14.5%);
  --maritime-semisub-derrick-beacon-bottom: calc(var(--maritime-semisub-derrick-crown-bottom) + 12px);
  --maritime-semisub-derrick-beacon-size: 6px;
  --maritime-semisub-derrick-beacon-period: 2.2s;
  --maritime-semisub-derrick-beacon-glow: 5px;
  --maritime-semisub-derrick-beacon-outer-glow: 16px;
  --maritime-semisub-derrick-beacon-red: rgba(255, 36, 52, 0.98);
  --maritime-semisub-derrick-beacon-red-soft: rgba(255, 36, 52, 0.36);
  --maritime-semisub-derrick-beacon-dim-opacity: 0.18;
  --maritime-semisub-derrick-beacon-bright-opacity: 1;
  --maritime-semisub-derrick-beacon-dim-scale: 0.72;
  --maritime-semisub-derrick-beacon-bright-scale: 1;
  --maritime-semisub-entry-y: -1px;
  --maritime-semisub-opacity: 0.78;
  --maritime-semisub-wake-duration: 12.8s;
  --maritime-semisub-light-glow: 11px;
  --maritime-semisub-reflection-width: 176px;
  --maritime-semisub-reflection-height: 38px;
  --maritime-semisub-mobile-scale: 0.5;
  --maritime-semisub-mobile-opacity: 0.46;
  --maritime-vessel-house-left: 54%;
  --maritime-vessel-house-bottom: 11px;
  --maritime-vessel-house-width: 25%;
  --maritime-vessel-house-height: 11px;
  --maritime-vessel-house-radius: 2px 2px 0 0;
  --maritime-vessel-sail-fill: rgba(222, 233, 240, 0.3);
  --maritime-vessel-rigging: rgba(205, 222, 232, 0.28);
  --maritime-vessel-wake: rgba(180, 212, 231, 0.22);
  --maritime-vessel-waterline-occlusion: rgba(6, 18, 32, 0.88);
  --maritime-vessel-waterline-highlight: rgba(177, 211, 231, 0.2);
  --maritime-vessel-reflection: rgba(177, 211, 231, 0.18);
  --maritime-vessel-waterline-offset: 22px;
  --maritime-iceberg-face: rgba(218, 239, 248, 0.92);
  --maritime-iceberg-ridge: rgba(154, 201, 221, 0.78);
  --maritime-iceberg-shadow: rgba(60, 104, 128, 0.58);
  --maritime-iceberg-waterline: rgba(202, 232, 244, 0.22);
  --maritime-iceberg-glow: rgba(157, 207, 255, 0.16);
  --maritime-iceberg-splash: rgba(222, 242, 250, 0.72);
  --maritime-iceberg-splash-soft: rgba(126, 185, 230, 0.2);
  --maritime-iceberg-wavelet-blue: rgba(54, 171, 255, 0.58);
  --maritime-iceberg-wavelet-blue-soft: rgba(24, 120, 222, 0.34);
  --maritime-iceberg-wavelet-foam: rgba(186, 235, 255, 0.44);
  --maritime-iceberg-wavelet-foam-bright: rgba(226, 247, 255, 0.72);
  --maritime-iceberg-wavelet-secondary-duration-factor: 0.62;
  --maritime-scene-horizon-y: 55%;
  --maritime-scene-near-water-y: 80%;
  --maritime-physical-horizon-arc-height: clamp(18px, 3.8vw, 58px);
  --maritime-physical-horizon-depression: clamp(10px, 1.8vw, 26px);
  --maritime-physical-horizon-band: clamp(80px, 13vw, 150px);
  --maritime-physical-horizon-half-band: clamp(40px, 6.5vw, 75px);
  --maritime-physical-horizon-line: rgba(188, 224, 246, 0.32);
  --maritime-physical-horizon-glow: rgba(91, 184, 255, 0.16);
  --maritime-physical-horizon-shadow: rgba(0, 8, 18, 0.66);
  --maritime-vessel-mobile-scale-factor: 0.72;
  --maritime-vessel-reduced-heave-factor: 0;
  --maritime-vessel-pitch: 0.9deg;
  --maritime-vessel-roll: 1.2deg;
  --maritime-vessel-heave: 2px;
  --maritime-vessel-motion-duration: 6.6s;
  --maritime-vessel-motion-delay: -1.4s;
  --maritime-vessel-opacity-near: 1;
  --maritime-vessel-opacity-mid: 0.94;
  --maritime-vessel-opacity-far: 0.82;
  --maritime-vessel-opacity-far-mobile: 0.68;
  --maritime-vessel-opacity-away: 0.84;
  --maritime-vessel-away-start-opacity: 0.76;
  --maritime-vessel-away-end-opacity: 0.48;
  --maritime-vessel-away-x: 32vw;
  --maritime-vessel-away-start-y: 0;
  --maritime-vessel-away-end-y: -26px;
  --maritime-vessel-away-start-scale: 0.78;
  --maritime-vessel-away-end-scale: 0.38;
  --maritime-colreg-popover-bg: rgba(5, 15, 29, 0.9);
  --maritime-colreg-popover-border: rgba(202, 230, 255, 0.24);
  --maritime-colreg-popover-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 23% 18%, rgba(157, 207, 255, 0.14), transparent 22%),
    linear-gradient(180deg, #020814 0%, #061428 52%, #07111f 100%);
}

.maritime-hero-animation::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 8, 20, 0.58) 0%, rgba(2, 8, 20, 0.28) 24%, rgba(2, 8, 20, 0.44) 100%),
    radial-gradient(ellipse at 50% 36%, rgba(3, 8, 18, 0.1), rgba(3, 8, 18, 0.62) 72%);
}

.maritime-night-sky,
.maritime-horizon,
.maritime-ocean,
.maritime-vessel-layer,
.maritime-lighthouse {
  position: absolute;
  inset: 0;
}

.maritime-moon-monitor {
  position: absolute;
  top: 13%;
  left: clamp(52px, 16vw, 240px);
  z-index: 10;
  width: clamp(54px, 7vw, 94px);
  aspect-ratio: 1;
  pointer-events: auto;
}

.maritime-moon {
  position: absolute;
  inset: 0;
  isolation: isolate;
  border-radius: 50%;
  background: radial-gradient(circle at 58% 24%, var(--maritime-moon-core), var(--maritime-moon-mid) 46%, var(--maritime-moon-rim) 78%, var(--maritime-moon-edge) 100%);
  box-shadow:
    inset -17px -15px 22px var(--maritime-moon-shadow),
    inset 9px 8px 18px var(--maritime-moon-highlight),
    0 0 var(--maritime-moon-current-glow-size) var(--maritime-moon-glow),
    0 0 var(--maritime-moon-current-outer-glow-size) var(--maritime-moon-outer-glow),
    0 0 var(--maritime-moon-current-haze-size) var(--maritime-moon-haze);
  filter: brightness(var(--maritime-moon-current-brightness));
  opacity: 0.96;
  transition:
    box-shadow var(--maritime-moon-tooltip-transition),
    filter var(--maritime-moon-tooltip-transition),
    opacity var(--maritime-moon-tooltip-transition);
}

.maritime-moon::before,
.maritime-moon::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.maritime-moon::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 32%, var(--maritime-moon-crater-rim) 0 2%, var(--maritime-moon-crater) 3% 7%, transparent 10%),
    radial-gradient(ellipse at 66% 56%, var(--maritime-moon-crater-rim) 0 2%, var(--maritime-moon-crater) 3% 9%, transparent 13%),
    radial-gradient(ellipse at 48% 73%, var(--maritime-moon-crater) 0 5%, transparent 9%);
  mix-blend-mode: multiply;
  opacity: 0.62;
}

.maritime-moon::after {
  inset: -44%;
  background: radial-gradient(circle, var(--maritime-moon-haze) 0 26%, transparent 68%);
  filter: blur(10px);
  z-index: -1;
}

.maritime-moon-monitor::before {
  content: "";
  position: absolute;
  inset: -32% -64% -18% -48%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.82) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 26%, rgba(158, 211, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 72%, rgba(255, 255, 255, 0.66) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 8px rgba(202, 230, 255, 0.34));
  transition: opacity var(--maritime-moon-tooltip-transition);
}

.maritime-moon-tooltip {
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  width: max-content;
  max-width: 230px;
  padding: 10px 12px;
  border: 1px solid var(--maritime-moon-tooltip-border);
  border-radius: 8px;
  background: var(--maritime-moon-tooltip-bg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  color: rgba(239, 247, 255, 0.92);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -44%, 0);
  transition:
    opacity var(--maritime-moon-tooltip-transition),
    transform var(--maritime-moon-tooltip-transition);
}

.maritime-moon-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 9px;
  height: 9px;
  border-left: 1px solid var(--maritime-moon-tooltip-border);
  border-bottom: 1px solid var(--maritime-moon-tooltip-border);
  background: var(--maritime-moon-tooltip-bg);
  transform: translate(50%, -50%) rotate(45deg);
}

.maritime-moon-tooltip strong,
.maritime-moon-tooltip span {
  display: block;
}

.maritime-moon-tooltip strong {
  margin-bottom: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.maritime-moon-tooltip span {
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(219, 234, 248, 0.74);
}

.maritime-stars {
  position: absolute;
  inset: 0 0 var(--maritime-star-field-bottom) 0;
  overflow: hidden;
  background-repeat: repeat;
  transition: opacity var(--maritime-moon-tooltip-transition), filter var(--maritime-moon-tooltip-transition);
  will-change: opacity, filter;
}

.maritime-stars::before,
.maritime-stars::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}

.maritime-stars--near {
  opacity: var(--maritime-star-near-opacity);
  background-image:
    radial-gradient(circle, var(--maritime-star-white) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, var(--maritime-star-blue) 0 1px, transparent 1.9px);
  background-size: 150px 110px, 230px 160px;
  background-position: 18px 20px, 92px 44px;
  filter: drop-shadow(0 0 2px var(--maritime-star-glow));
  animation: maritimeStarTwinkle var(--maritime-star-twinkle-near-duration) ease-in-out infinite alternate;
}

.maritime-stars--near::before {
  top: 7%;
  left: clamp(28px, 9vw, 156px);
  width: clamp(170px, 25vw, 340px);
  height: clamp(92px, 14vw, 180px);
  opacity: 0.76;
  background-image:
    radial-gradient(circle, var(--maritime-star-white) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, var(--maritime-star-blue) 0 1px, transparent 1.8px),
    radial-gradient(circle, var(--maritime-star-warm) 0 0.9px, transparent 1.7px);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: 16% 18%, 68% 34%, 46% 72%;
  filter:
    drop-shadow(0 0 3px var(--maritime-star-glow))
    drop-shadow(0 0 7px var(--maritime-star-warm-glow));
  animation: maritimeStarSparkle var(--maritime-star-sparkle-primary-duration) ease-in-out infinite;
}

.maritime-stars--near::after {
  top: 12%;
  left: clamp(94px, 21vw, 286px);
  width: clamp(95px, 15vw, 190px);
  height: clamp(58px, 9vw, 120px);
  opacity: 0.62;
  background-image:
    radial-gradient(circle, var(--maritime-star-white) 0 0.85px, transparent 1.6px),
    radial-gradient(circle, var(--maritime-star-blue) 0 0.85px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%;
  background-position: 18% 60%, 76% 22%;
  filter: drop-shadow(0 0 4px var(--maritime-star-glow));
  animation: maritimeStarSparkle var(--maritime-star-sparkle-secondary-duration) ease-in-out -1.8s infinite;
}

.maritime-stars--far {
  opacity: var(--maritime-star-far-opacity);
  background-image: radial-gradient(circle, var(--maritime-star-white) 0 1px, transparent 1.6px);
  background-size: 92px 82px;
  background-position: 42px 10px;
  animation: maritimeStarTwinkle var(--maritime-star-twinkle-far-duration) ease-in-out infinite alternate-reverse;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .maritime-moon-monitor:hover {
    --maritime-moon-current-glow-size: var(--maritime-moon-hover-glow-size);
    --maritime-moon-current-outer-glow-size: var(--maritime-moon-hover-outer-glow-size);
    --maritime-moon-current-haze-size: var(--maritime-moon-hover-haze-size);
    --maritime-moon-current-brightness: var(--maritime-moon-hover-brightness);
  }

  .maritime-moon-monitor:hover .maritime-moon {
    opacity: 1;
  }

  .maritime-moon-monitor:hover::before {
    opacity: 0.78;
  }

  .maritime-moon-monitor:hover .maritime-moon-tooltip {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }

  .maritime-moon-monitor:hover ~ .maritime-stars--near {
    opacity: var(--maritime-star-near-opacity-hover);
    filter: brightness(1.08);
  }
}

@media (hover: none), (pointer: coarse) {
  .maritime-moon-monitor {
    pointer-events: none;
  }

  .maritime-moon-tooltip {
    display: none;
  }
}

.maritime-horizon {
  top: calc(var(--maritime-scene-horizon-y) - var(--maritime-physical-horizon-half-band));
  bottom: auto;
  height: var(--maritime-physical-horizon-band);
  z-index: 2;
}

.maritime-horizon::before {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  top: calc(50% + var(--maritime-physical-horizon-depression));
  height: var(--maritime-physical-horizon-arc-height);
  border-top: 1px solid var(--maritime-physical-horizon-line);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, var(--maritime-physical-horizon-glow) 0 1px, transparent 2px 48%),
    linear-gradient(180deg, rgba(188, 224, 246, 0.1), transparent 62%);
  box-shadow:
    0 -8px 22px var(--maritime-physical-horizon-glow),
    inset 0 8px 18px rgba(255, 255, 255, 0.035);
  opacity: 0.96;
  pointer-events: none;
}

.maritime-coastline {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: calc(50% - var(--maritime-physical-horizon-depression));
  height: 42%;
  background:
    linear-gradient(160deg, transparent 0 18%, rgba(1, 7, 15, 0.58) 18% 27%, transparent 27% 100%),
    linear-gradient(12deg, transparent 0 30%, rgba(1, 7, 15, 0.72) 30% 43%, transparent 43% 100%),
    linear-gradient(180deg, transparent 0 48%, rgba(1, 7, 15, 0.66) 48% 100%);
  filter: blur(0.2px);
  opacity: 0.68;
}

.maritime-ocean {
  top: calc(var(--maritime-scene-horizon-y) + var(--maritime-physical-horizon-depression));
  bottom: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, var(--maritime-physical-horizon-shadow) 0 1px, rgba(5, 21, 38, 0.9) 5%, rgba(3, 12, 24, 0.98) 100%),
    repeating-linear-gradient(176deg, rgba(116, 185, 255, 0.12) 0 1px, transparent 1px 18px);
}

.maritime-ocean::before,
.maritime-ocean::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(174deg, transparent 0 18px, rgba(118, 184, 255, 0.08) 19px 20px, transparent 21px 46px),
    repeating-linear-gradient(2deg, transparent 0 26px, rgba(255, 255, 255, 0.035) 27px 28px, transparent 29px 58px);
  opacity: 0.55;
  transform: translate3d(0, 0, 0);
  animation: maritimeWaveDrift 14s linear infinite;
  will-change: transform;
}

.maritime-ocean::after {
  opacity: 0.32;
  animation-duration: 22s;
  animation-direction: reverse;
}

.maritime-ocean__reflection {
  position: absolute;
  top: 0;
  width: 28%;
  height: 100%;
  transform: skewX(-10deg);
  opacity: 0.28;
  filter: blur(2px);
}

.maritime-ocean__reflection--moon {
  left: 8%;
  background: linear-gradient(180deg, rgba(202, 230, 255, 0.2), transparent 72%);
}

.maritime-ocean__reflection--lighthouse {
  right: 4%;
  background: linear-gradient(180deg, rgba(255, 244, 216, 0.16), transparent 76%);
}

.maritime-horizon::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: calc(50% + var(--maritime-physical-horizon-depression) - 16px);
  height: 46%;
  background:
    linear-gradient(180deg, rgba(206, 232, 255, 0.1), rgba(126, 185, 230, 0.08) 34%, transparent 100%);
  filter: blur(8px);
  opacity: 0.64;
  pointer-events: none;
}

.maritime-lighthouse {
  left: auto;
  right: var(--maritime-lighthouse-right);
  top: auto;
  bottom: var(--maritime-lighthouse-bottom);
  width: var(--maritime-lighthouse-width);
  height: var(--maritime-lighthouse-height);
  z-index: 11;
}

.maritime-lighthouse__tower {
  position: absolute;
  right: 24%;
  bottom: 18%;
  width: 30%;
  height: 64%;
  clip-path: polygon(31% 0, 69% 0, 84% 100%, 16% 100%);
  background:
    linear-gradient(90deg, var(--maritime-lighthouse-surface-highlight), transparent 24%, var(--maritime-lighthouse-surface-shadow) 86%),
    linear-gradient(
      180deg,
      var(--maritime-lighthouse-white) 0 12%,
      var(--maritime-lighthouse-red) 12% 21%,
      var(--maritime-lighthouse-white) 21% 44%,
      var(--maritime-lighthouse-red-shadow) 44% 53%,
      var(--maritime-lighthouse-white-shadow) 53% 100%
    );
  box-shadow: 0 14px 26px var(--maritime-lighthouse-cast-shadow);
}

.maritime-lighthouse__tower::before,
.maritime-lighthouse__tower::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.maritime-lighthouse__tower::before {
  top: -15%;
  width: 168%;
  height: 9%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--maritime-lighthouse-metal), var(--maritime-lighthouse-dark));
}

.maritime-lighthouse__tower::after {
  bottom: 12%;
  width: 42%;
  height: 18%;
  border-radius: 3px 3px 0 0;
  background: var(--maritime-lighthouse-window);
  box-shadow: 0 -42px 0 -7px var(--maritime-lighthouse-window-soft), 0 -83px 0 -8px var(--maritime-lighthouse-window-soft);
}

.maritime-lighthouse__lantern {
  position: absolute;
  left: 50%;
  top: -17%;
  width: 142%;
  height: 19%;
  transform: translateX(var(--maritime-signal-offset-x));
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(90deg, var(--maritime-lighthouse-dark) 0 12%, transparent 12% 28%, var(--maritime-lighthouse-dark) 28% 37%, transparent 37% 63%, var(--maritime-lighthouse-dark) 63% 72%, transparent 72% 88%, var(--maritime-lighthouse-dark) 88% 100%),
    radial-gradient(circle at 50% 50%, var(--maritime-lighthouse-glass), var(--maritime-lighthouse-lens-warm) 42%, var(--maritime-lighthouse-lens-shadow) 78%);
  box-shadow:
    0 0 14px var(--maritime-lighthouse-light),
    0 0 44px var(--maritime-lighthouse-light-soft);
  opacity: var(--maritime-lighthouse-lantern-opacity-dark);
  --maritime-signal-offset-x: -50%;
  --maritime-signal-opacity-dark: var(--maritime-lighthouse-lantern-opacity-dark);
  --maritime-signal-opacity-flash: var(--maritime-lighthouse-lantern-opacity-flash);
  animation: maritimeIalaSingleFlash var(--maritime-lighthouse-characteristic-period) linear infinite;
  will-change: opacity, transform;
}

.maritime-lighthouse__lantern::before,
.maritime-lighthouse__lantern::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.maritime-lighthouse__lantern::before {
  top: -42%;
  width: 76%;
  height: 42%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--maritime-lighthouse-metal-light), var(--maritime-lighthouse-dark));
}

.maritime-lighthouse__lantern::after {
  bottom: -26%;
  width: 152%;
  height: 26%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--maritime-lighthouse-metal), var(--maritime-lighthouse-dark));
}

.maritime-lighthouse__standby-lantern {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  color: var(--maritime-lighthouse-status-light);
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  opacity: 0.78;
}

.maritime-lighthouse__sector,
.maritime-lighthouse__range {
  position: absolute;
  right: 45%;
  bottom: calc(76% + var(--maritime-lighthouse-beam-offset-y));
  width: calc(var(--maritime-lighthouse-beam-width) * 0.78);
  height: calc(var(--maritime-lighthouse-beam-height) * var(--maritime-lighthouse-beam-spread));
  transform-origin: 100% 50%;
  clip-path: polygon(0 42%, 100% 35%, 100% 65%, 0 58%);
  mix-blend-mode: screen;
  opacity: var(--maritime-lighthouse-sector-opacity-dark);
  animation: maritimeIalaSectorFlash var(--maritime-lighthouse-characteristic-period) linear infinite;
  will-change: opacity;
}

.maritime-lighthouse__sector--red {
  background: linear-gradient(90deg, transparent, var(--maritime-lighthouse-sector-red));
  transform: translateY(calc(var(--maritime-lighthouse-sector-offset-y) * -1));
}

.maritime-lighthouse__sector--white {
  background: linear-gradient(90deg, transparent, var(--maritime-lighthouse-sector-white));
}

.maritime-lighthouse__sector--green {
  background: linear-gradient(90deg, transparent, var(--maritime-lighthouse-sector-green));
  transform: translateY(var(--maritime-lighthouse-sector-offset-y));
}

.maritime-lighthouse__range {
  width: calc(var(--maritime-lighthouse-beam-width) * 0.95);
  height: calc(var(--maritime-lighthouse-beam-height) * var(--maritime-lighthouse-beam-spread));
  border: 1px solid rgba(255, 245, 206, 0.16);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: none;
  clip-path: none;
  --maritime-lighthouse-sector-opacity-dark: 0.025;
  --maritime-lighthouse-sector-opacity-flash: var(--maritime-lighthouse-range-opacity);
}

.maritime-lighthouse__beam {
  position: absolute;
  right: 45%;
  bottom: calc(76% + var(--maritime-lighthouse-beam-offset-y));
  width: var(--maritime-lighthouse-beam-width);
  height: var(--maritime-lighthouse-beam-height);
  transform-origin: 100% 50%;
  background:
    linear-gradient(90deg, transparent 0%, var(--maritime-lighthouse-light-faint) 36%, var(--maritime-lighthouse-light-soft) 72%, var(--maritime-lighthouse-light) 100%),
    linear-gradient(180deg, transparent 0%, var(--maritime-lighthouse-light-core) 44%, var(--maritime-lighthouse-light-core) 56%, transparent 100%);
  clip-path: polygon(0 44%, 100% 34%, 100% 66%, 0 56%);
  mix-blend-mode: screen;
  opacity: var(--maritime-lighthouse-beam-opacity-dark);
  --maritime-signal-opacity-dark: var(--maritime-lighthouse-beam-opacity-dark);
  --maritime-signal-opacity-flash: var(--maritime-lighthouse-beam-opacity-flash);
  --maritime-signal-rotation-start: var(--maritime-lighthouse-rotation-start);
  --maritime-signal-rotation-mid: var(--maritime-lighthouse-rotation-mid);
  --maritime-signal-rotation-end: var(--maritime-lighthouse-rotation-end);
  animation: maritimeIalaSingleFlash var(--maritime-lighthouse-characteristic-period) linear infinite;
  will-change: opacity, transform;
}

.maritime-lighthouse__rocks {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 94%;
  height: 30%;
  border-radius: 48% 52% 0 0;
  background: linear-gradient(180deg, #101826, #060a10);
  box-shadow: -30px 10px 0 -10px #080d15, 24px 12px 0 -8px #0b1018;
}

.maritime-vessel-layer {
  z-index: 10;
  pointer-events: auto;
}

.maritime-vessel {
  position: absolute;
  top: calc(var(--vessel-waterline-y, 70%) - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)));
  left: 0;
  width: 112px;
  height: 28px;
  opacity: var(--vessel-opacity, var(--maritime-vessel-opacity-near));
  z-index: var(--vessel-z-index, 12);
  scale: var(--vessel-scale, 1);
  filter: blur(var(--vessel-blur, 0));
  transform-origin: 50% 100%;
  transform: translate3d(-22vw, 0, 0);
  animation: maritimeVesselLtr var(--vessel-duration) linear infinite;
  animation-delay: var(--vessel-delay);
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  will-change: transform;
}

.maritime-vessel:focus-visible .maritime-vessel__motion {
  filter: drop-shadow(0 0 10px rgba(202, 230, 255, 0.42));
}

.maritime-lighthouse[role="button"] {
  cursor: pointer;
  pointer-events: auto;
  outline: none;
}

.maritime-lighthouse[role="button"]:focus-visible .maritime-lighthouse__tower {
  filter: drop-shadow(0 0 12px rgba(255, 226, 64, 0.34));
}

.maritime-vessel__motion {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 88%;
  animation: maritimeVesselSeaMotion var(--maritime-vessel-motion-duration) ease-in-out infinite;
  animation-delay: var(--maritime-vessel-motion-delay);
  will-change: transform;
}

.maritime-vessel--right-to-left {
  animation-name: maritimeVesselRtl;
}

.maritime-vessel--right-to-left .maritime-vessel__motion {
  scale: -1 1;
}

.maritime-vessel--away {
  width: 48px;
  --vessel-opacity: var(--maritime-vessel-opacity-away);
  --vessel-waterline-offset: 21px;
  animation-name: maritimeVesselAway;
}

.maritime-vessel--near {
  --vessel-opacity: var(--maritime-vessel-opacity-near);
  --maritime-vessel-pitch: 1.15deg;
  --maritime-vessel-roll: 1.55deg;
  --maritime-vessel-heave: 2.5px;
  --maritime-vessel-motion-duration: 5.7s;
}

.maritime-vessel--far {
  --vessel-opacity: var(--maritime-vessel-opacity-far);
  --maritime-vessel-pitch: 0.55deg;
  --maritime-vessel-roll: 0.75deg;
  --maritime-vessel-heave: 1.1px;
  --maritime-vessel-motion-duration: 7.8s;
}

.maritime-vessel--mid {
  --vessel-opacity: var(--maritime-vessel-opacity-mid);
  --maritime-vessel-pitch: 0.85deg;
  --maritime-vessel-roll: 1.1deg;
  --maritime-vessel-heave: 1.8px;
  --maritime-vessel-motion-duration: 6.6s;
}

.maritime-vessel--cargo,
.maritime-vessel--tanker,
.maritime-vessel--semisub,
.maritime-vessel--titanic {
  width: 132px;
  height: 34px;
  --vessel-waterline-offset: 29px;
  --maritime-vessel-pitch: 0.45deg;
  --maritime-vessel-roll: 0.7deg;
  --maritime-vessel-heave: 1.1px;
  --maritime-vessel-motion-duration: 8.4s;
}

.maritime-vessel--titanic {
  width: 210px;
  height: 58px;
  --vessel-waterline-offset: 50px;
  --maritime-vessel-hull-shape: polygon(0 34%, 8% 22%, 83% 17%, 100% 45%, 93% 100%, 9% 100%, 0 62%);
  --maritime-vessel-house-left: 15%;
  --maritime-vessel-house-bottom: 18px;
  --maritime-vessel-house-width: 66%;
  --maritime-vessel-house-height: 16px;
  --maritime-vessel-house-radius: 1px 1px 0 0;
  --maritime-vessel-pitch: 0.32deg;
  --maritime-vessel-roll: 0.5deg;
  --maritime-vessel-heave: 0.8px;
  --maritime-vessel-motion-duration: 9.8s;
  --maritime-vessel-masthead-forward-left: 84%;
  --maritime-vessel-masthead-forward-bottom: 58px;
  --maritime-vessel-masthead-aft-left: 9%;
  --maritime-vessel-masthead-aft-bottom: 62px;
  filter: blur(var(--vessel-blur, 0)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
}

.maritime-vessel--semisub {
  width: var(--maritime-semisub-width);
  height: var(--maritime-semisub-height);
  --vessel-waterline-offset: 105px;
  --vessel-opacity: var(--maritime-semisub-opacity);
  --maritime-vessel-house-left: 67%;
  --maritime-vessel-house-bottom: 58px;
  --maritime-vessel-house-width: 20%;
  --maritime-vessel-house-height: 23px;
  --maritime-vessel-house-radius: 2px 2px 0 0;
  --maritime-vessel-pitch: 0.2deg;
  --maritime-vessel-roll: 0.36deg;
  --maritime-vessel-heave: 0.62px;
  --maritime-vessel-motion-duration: 10.8s;
  --maritime-vessel-masthead-forward-left: 48%;
  --maritime-vessel-masthead-forward-bottom: 111px;
  --maritime-vessel-masthead-aft-left: 74%;
  --maritime-vessel-masthead-aft-bottom: 82px;
  filter: blur(var(--vessel-blur, 0)) drop-shadow(0 14px 21px rgba(0, 0, 0, 0.34));
}

.maritime-vessel[data-vessel-drift="slow-entry"] {
  transform: translate3d(var(--vessel-entry-start-x, 112vw), 0, 0);
  animation-name: maritimeSemisubSlowEntry;
  animation-timing-function: var(--vessel-entry-easing, linear);
}

.maritime-vessel[data-vessel-drift="slow-entry"] .maritime-vessel__motion::after {
  animation-duration: var(--maritime-semisub-wake-duration);
}

.maritime-iceberg {
  position: absolute;
  left: var(--iceberg-collision-x);
  top: calc(var(--iceberg-waterline-y) - var(--iceberg-waterline-offset));
  z-index: var(--iceberg-z-index);
  width: var(--iceberg-width);
  height: var(--iceberg-height);
  scale: var(--iceberg-scale);
  opacity: var(--iceberg-opacity);
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 12px var(--maritime-iceberg-glow));
}

.maritime-iceberg:focus-visible {
  filter:
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.26))
    drop-shadow(0 0 14px rgba(202, 230, 255, 0.45));
}

.maritime-iceberg::before,
.maritime-iceberg::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.maritime-iceberg::before {
  left: 5%;
  right: 4%;
  bottom: 10%;
  height: 86%;
  clip-path: polygon(5% 100%, 16% 50%, 30% 30%, 43% 4%, 56% 34%, 70% 18%, 88% 54%, 96% 100%);
  background:
    linear-gradient(122deg, transparent 0 34%, rgba(255, 255, 255, 0.58) 35% 37%, transparent 38% 100%),
    linear-gradient(78deg, transparent 0 43%, var(--maritime-iceberg-ridge) 44% 46%, transparent 47% 100%),
    linear-gradient(180deg, var(--maritime-iceberg-face), var(--maritime-iceberg-ridge) 66%, var(--maritime-iceberg-shadow));
}

.maritime-iceberg::after {
  left: -12%;
  right: -16%;
  bottom: 6%;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, var(--maritime-iceberg-waterline), transparent 54%),
    repeating-linear-gradient(176deg, transparent 0 8px, rgba(206, 232, 244, 0.18) 9px 10px, transparent 11px 18px);
  filter: blur(0.8px);
}

.maritime-iceberg--titanic-collision::after {
  box-shadow:
    var(--iceberg-impact-outer-offset) 0 0 -4px rgba(210, 232, 244, 0.12),
    var(--iceberg-impact-inner-offset) 0 0 -5px rgba(255, 255, 255, 0.1);
}

.maritime-iceberg__wavelets {
  position: absolute;
  left: var(--iceberg-wavelet-left);
  bottom: var(--iceberg-wavelet-bottom);
  width: var(--iceberg-wavelet-width);
  height: var(--iceberg-wavelet-height);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 18% 56%, transparent 0 43%, var(--maritime-iceberg-wavelet-blue) 44% 49%, transparent 50%),
    radial-gradient(ellipse at 48% 48%, transparent 0 47%, var(--maritime-iceberg-wavelet-foam) 48% 52%, transparent 53%),
    radial-gradient(ellipse at 77% 58%, transparent 0 42%, var(--maritime-iceberg-wavelet-blue) 43% 48%, transparent 49%),
    linear-gradient(90deg, transparent, var(--maritime-iceberg-wavelet-blue-soft), transparent);
  filter: blur(var(--iceberg-wavelet-blur));
  opacity: var(--iceberg-wavelet-opacity-low);
  pointer-events: none;
  transform: translate3d(var(--iceberg-wavelet-drift-start-x), var(--iceberg-wavelet-drift-start-y), 0);
  transform-origin: 50% 50%;
  animation: maritimeIcebergWavelets var(--iceberg-wavelet-duration) ease-in-out infinite;
  will-change: opacity, transform, filter;
}

.maritime-iceberg__wavelets::before,
.maritime-iceberg__wavelets::after {
  content: "";
  position: absolute;
  inset: 18% -8% 12%;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 25% 50%, transparent 0 42%, var(--maritime-iceberg-wavelet-foam-bright) 43% 47%, transparent 48%),
    radial-gradient(ellipse at 62% 54%, transparent 0 44%, var(--maritime-iceberg-wavelet-blue) 45% 49%, transparent 50%),
    linear-gradient(90deg, transparent, var(--maritime-iceberg-wavelet-blue-soft), transparent);
  filter: blur(calc(var(--iceberg-wavelet-blur) + 0.35px));
  opacity: 0.58;
  transform: translate3d(-8px, 0, 0) scaleX(0.82);
  animation: maritimeIcebergFoamPulse calc(var(--iceberg-wavelet-duration) * var(--maritime-iceberg-wavelet-secondary-duration-factor)) ease-in-out infinite;
  will-change: opacity, transform;
}

.maritime-iceberg__wavelets::after {
  inset: 30% 3% 3% -14%;
  opacity: 0.38;
  transform: translate3d(9px, 1px, 0) scaleX(0.72);
  animation-delay: calc(var(--iceberg-wavelet-duration) * -0.35);
}

.maritime-iceberg__splash {
  position: absolute;
  left: var(--iceberg-splash-left);
  bottom: var(--iceberg-splash-bottom);
  width: var(--iceberg-splash-width);
  height: var(--iceberg-splash-height);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 56%, var(--maritime-iceberg-splash) 0 8%, transparent 9%),
    radial-gradient(ellipse at 48% 34%, rgba(255, 255, 255, 0.72) 0 6%, transparent 7%),
    radial-gradient(ellipse at 62% 62%, var(--maritime-iceberg-splash) 0 7%, transparent 8%),
    linear-gradient(90deg, transparent, var(--maritime-iceberg-splash-soft), transparent);
  filter: blur(0.6px);
  opacity: 0;
  pointer-events: none;
  transform-origin: 58% 78%;
  will-change: opacity, transform;
}

@keyframes maritimeIcebergWavelets {
  0%, 100% {
    opacity: var(--iceberg-wavelet-opacity-low);
    transform: translate3d(var(--iceberg-wavelet-drift-start-x), var(--iceberg-wavelet-drift-start-y), 0);
    filter: blur(var(--iceberg-wavelet-blur)) brightness(0.94);
  }

  42% {
    opacity: var(--iceberg-wavelet-opacity-high);
    transform:
      translate3d(calc(var(--iceberg-wavelet-drift-end-x) * 0.55), calc(var(--iceberg-wavelet-drift-end-y) - 1px), 0)
      scaleX(1.08);
    filter: blur(calc(var(--iceberg-wavelet-blur) + 0.2px)) brightness(1.16);
  }

  68% {
    opacity: var(--iceberg-wavelet-opacity-high);
    transform: translate3d(var(--iceberg-wavelet-drift-end-x), var(--iceberg-wavelet-drift-end-y), 0) scaleX(0.96);
    filter: blur(var(--iceberg-wavelet-blur)) brightness(1.04);
  }
}

@keyframes maritimeIcebergFoamPulse {
  0%, 100% {
    opacity: 0.26;
    transform: translate3d(-9px, 1px, 0) scaleX(0.72);
  }

  45% {
    opacity: 0.72;
    transform: translate3d(4px, -1px, 0) scaleX(1.08);
  }

  72% {
    opacity: 0.46;
    transform: translate3d(11px, 1px, 0) scaleX(0.92);
  }
}

.maritime-vessel--cargo {
  --maritime-vessel-hull-shape: var(--maritime-vessel-hull-shape-cargo);
  --maritime-vessel-house-left: 66%;
  --maritime-vessel-house-bottom: 13px;
  --maritime-vessel-house-width: 18%;
  --maritime-vessel-house-height: 13px;
}

.maritime-vessel--tanker {
  --maritime-vessel-hull-shape: var(--maritime-vessel-hull-shape-tanker);
  --maritime-vessel-house-left: 17%;
  --maritime-vessel-house-bottom: 14px;
  --maritime-vessel-house-width: 18%;
  --maritime-vessel-house-height: 11px;
  --maritime-vessel-house-radius: 2px 3px 0 0;
}

.maritime-vessel--coaster,
.maritime-vessel--service,
.maritime-vessel--workboat,
.maritime-vessel--pilot {
  width: 82px;
  height: 25px;
  --vessel-waterline-offset: 21px;
  --maritime-vessel-hull-shape: var(--maritime-vessel-hull-shape-craft);
  --maritime-vessel-house-left: 48%;
  --maritime-vessel-house-bottom: 10px;
  --maritime-vessel-house-width: 25%;
  --maritime-vessel-house-height: 12px;
}

.maritime-vessel--tug {
  width: 74px;
  height: 28px;
  --vessel-waterline-offset: 24px;
  --maritime-vessel-hull-shape: var(--maritime-vessel-hull-shape-tug);
  --maritime-vessel-house-left: 43%;
  --maritime-vessel-house-bottom: 12px;
  --maritime-vessel-house-width: 25%;
  --maritime-vessel-house-height: 15px;
  --maritime-vessel-pitch: 1.3deg;
  --maritime-vessel-roll: 1.9deg;
  --maritime-vessel-heave: 2.7px;
  --maritime-vessel-motion-duration: 4.9s;
}

.maritime-vessel--tow {
  width: 62px;
  --vessel-waterline-offset: 20px;
  --maritime-vessel-hull-shape: var(--maritime-vessel-hull-shape-craft);
  --maritime-vessel-pitch: 1deg;
  --maritime-vessel-roll: 1.45deg;
  --maritime-vessel-heave: 2.1px;
  --maritime-vessel-motion-duration: 5.8s;
}

.maritime-vessel--sailing {
  width: 78px;
  height: 44px;
  --vessel-waterline-offset: 38px;
  --maritime-vessel-hull-shape: var(--maritime-vessel-hull-shape-sailing);
  --maritime-vessel-house-left: 46%;
  --maritime-vessel-house-bottom: 8px;
  --maritime-vessel-house-width: 2px;
  --maritime-vessel-house-height: 34px;
  --maritime-vessel-pitch: 1.45deg;
  --maritime-vessel-roll: 2.2deg;
  --maritime-vessel-heave: 2.8px;
  --maritime-vessel-motion-duration: 5.2s;
}

.maritime-vessel--fishing,
.maritime-vessel--trawler {
  width: 94px;
  height: 32px;
  --vessel-waterline-offset: 27px;
  --maritime-vessel-hull-shape: var(--maritime-vessel-hull-shape-fishing);
  --maritime-vessel-house-left: 42%;
  --maritime-vessel-house-bottom: 11px;
  --maritime-vessel-house-width: 22%;
  --maritime-vessel-house-height: 12px;
  --maritime-vessel-pitch: 1.2deg;
  --maritime-vessel-roll: 1.75deg;
  --maritime-vessel-heave: 2.4px;
  --maritime-vessel-motion-duration: 5.5s;
}

.maritime-vessel__body,
.maritime-vessel__house,
.maritime-vessel__reflection,
.maritime-vessel__waterline {
  position: absolute;
  display: block;
}

.maritime-vessel__reflection,
.maritime-vessel__waterline {
  pointer-events: none;
}

.maritime-vessel__reflection {
  left: 5%;
  right: 8%;
  bottom: calc(100% - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)) - var(--vessel-reflection-length, 16px));
  height: var(--vessel-reflection-length, 16px);
  border-radius: 50%;
  background:
    linear-gradient(180deg, var(--maritime-vessel-reflection), transparent 82%),
    repeating-linear-gradient(176deg, transparent 0 6px, rgba(177, 211, 231, 0.13) 7px 8px, transparent 9px 15px);
  filter: blur(1.6px);
  opacity: var(--vessel-reflection-opacity, 0.08);
  transform: skewX(-8deg);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}

.maritime-vessel__waterline {
  left: -6%;
  right: -8%;
  bottom: calc(100% - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)) - 1px);
  z-index: 8;
  height: 9px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, var(--maritime-vessel-waterline-highlight), transparent 42%),
    repeating-linear-gradient(174deg, transparent 0 8px, var(--maritime-vessel-waterline-occlusion) 9px 11px, transparent 12px 18px);
  filter: blur(0.45px);
  opacity: 0.78;
}

.maritime-vessel__body {
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  border-radius: 2px 2px 12px 18px;
  background:
    linear-gradient(180deg, var(--maritime-vessel-hull-rim) 0 1px, transparent 1px),
    linear-gradient(180deg, var(--maritime-vessel-hull-top), var(--maritime-vessel-hull-mid) 50%, var(--maritime-vessel-hull-bottom) 100%);
  box-shadow:
    inset 0 1px 0 var(--maritime-vessel-hull-rim),
    inset 0 -2px 0 var(--maritime-vessel-hull-shadow),
    0 5px 12px rgba(0, 0, 0, 0.28);
  clip-path: var(--maritime-vessel-hull-shape);
  overflow: hidden;
}

.maritime-vessel__body::before,
.maritime-vessel__body::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.maritime-vessel__body::before {
  left: 5%;
  right: 6%;
  top: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--maritime-vessel-hull-deck-line) 18%, var(--maritime-vessel-hull-deck-line) 82%, transparent);
  opacity: 0.92;
}

.maritime-vessel__body::after {
  left: 8%;
  right: 12%;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--maritime-vessel-hull-waterline) 24%, var(--maritime-vessel-hull-waterline) 72%, transparent);
  opacity: 0.86;
}

.maritime-vessel__motion::after {
  content: "";
  position: absolute;
  left: -7%;
  right: auto;
  bottom: calc(100% - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)) + 2px);
  width: var(--vessel-wake-length, 64px);
  height: 4px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent, var(--maritime-vessel-wake) 20%, rgba(180, 212, 231, 0.08) 54%, transparent 88%);
  filter: blur(1px);
  opacity: var(--vessel-wake-opacity, 0.12);
  transform-origin: 50% 50%;
  animation: maritimeVesselWake var(--maritime-vessel-motion-duration) ease-in-out infinite;
}

.maritime-vessel--right-to-left .maritime-vessel__motion::after {
  left: auto;
  right: -7%;
}

.maritime-vessel[data-vessel-drift="slow-entry"] .maritime-vessel__motion::after {
  left: 7%;
  right: 7%;
  width: auto;
}

.maritime-vessel[data-vessel-event="titanic-casualty"] .maritime-vessel__motion::after {
  display: none;
}

.maritime-vessel--tanker .maritime-vessel__body {
  height: 14px;
  border-radius: 18px 18px 12px 20px;
}

.maritime-vessel--semisub .maritime-vessel__body {
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 20px;
  border-radius: 18px 18px 12px 12px;
  clip-path: none;
  background:
    linear-gradient(90deg, var(--maritime-semisub-red) 0 45%, transparent 45% 55%, var(--maritime-semisub-red) 55% 100%),
    linear-gradient(180deg, var(--maritime-semisub-red), var(--maritime-semisub-red-shadow));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.08),
    inset 0 -5px 0 rgba(0, 0, 0, 0.24),
    0 5px 12px rgba(0, 0, 0, 0.32);
}

.maritime-vessel--semisub .maritime-vessel__body::before,
.maritime-vessel--semisub .maritime-vessel__body::after {
  display: none;
}

.maritime-vessel--titanic .maritime-vessel__body {
  height: 18px;
  border-radius: 2px 3px 14px 20px;
  background:
    linear-gradient(180deg, var(--maritime-titanic-hull-rim) 0 1px, transparent 1px),
    linear-gradient(180deg, transparent 0 64%, var(--maritime-titanic-boot-top) 64% 80%, #030508 80% 100%),
    var(--maritime-titanic-hull);
}

.maritime-vessel--titanic .maritime-vessel__body::before {
  left: 4%;
  right: 8%;
  top: 4px;
  height: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(224, 234, 239, 0.34) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
}

.maritime-vessel--titanic .maritime-vessel__body::after {
  left: 7%;
  right: 10%;
  bottom: 4px;
  height: 2px;
  background: var(--maritime-titanic-boot-top);
  opacity: 0.92;
}

.maritime-vessel--coaster .maritime-vessel__body,
.maritime-vessel--service .maritime-vessel__body,
.maritime-vessel--pilot .maritime-vessel__body {
  height: 10px;
  border-radius: 6px 4px 11px 16px;
}

.maritime-vessel--tug .maritime-vessel__body {
  height: 13px;
  border-radius: 10px 3px 12px 14px;
}

.maritime-vessel--tow .maritime-vessel__body {
  left: 8px;
  right: 8px;
  height: 10px;
  border-radius: 10px;
}

.maritime-vessel--sailing .maritime-vessel__body {
  height: 8px;
}

.maritime-vessel--fishing .maritime-vessel__body,
.maritime-vessel--trawler .maritime-vessel__body {
  height: 11px;
  border-radius: 4px 8px 12px 18px;
}

.maritime-vessel__house {
  left: var(--maritime-vessel-house-left);
  bottom: var(--maritime-vessel-house-bottom);
  width: var(--maritime-vessel-house-width);
  height: var(--maritime-vessel-house-height);
  border-radius: var(--maritime-vessel-house-radius);
  background:
    linear-gradient(180deg, var(--maritime-vessel-hull-rim) 0 1px, transparent 1px),
    linear-gradient(180deg, var(--maritime-vessel-house-top), var(--maritime-vessel-house-mid) 68%, var(--maritime-vessel-house-shadow));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.22);
}

.maritime-vessel:not(.maritime-vessel--sailing) .maritime-vessel__house::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 3px;
  height: 3px;
  background:
    repeating-linear-gradient(90deg, var(--maritime-vessel-window-light) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, var(--maritime-vessel-window-shadow), transparent);
  opacity: 0.78;
}

.maritime-vessel--titanic .maritime-vessel__house {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0 1px, transparent 1px),
    linear-gradient(180deg, var(--maritime-titanic-superstructure), var(--maritime-titanic-superstructure-shadow));
  box-shadow:
    0 -8px 0 -3px rgba(232, 237, 240, 0.82),
    inset 0 -2px 0 rgba(6, 13, 22, 0.28),
    0 2px 5px rgba(0, 0, 0, 0.24);
}

.maritime-vessel--titanic .maritime-vessel__house::before {
  content: "";
  position: absolute;
  left: 15%;
  bottom: 102%;
  width: 90px;
  height: 24px;
  border-radius: 1px 1px 0 0;
  background:
    linear-gradient(180deg, var(--maritime-titanic-funnel-cap) 0 24%, var(--maritime-titanic-funnel) 24% 100%) 0 0 / 10px 24px no-repeat,
    linear-gradient(180deg, var(--maritime-titanic-funnel-cap) 0 24%, var(--maritime-titanic-funnel) 24% 100%) 26px 0 / 10px 24px no-repeat,
    linear-gradient(180deg, var(--maritime-titanic-funnel-cap) 0 24%, var(--maritime-titanic-funnel) 24% 100%) 52px 0 / 10px 24px no-repeat,
    linear-gradient(180deg, var(--maritime-titanic-funnel-cap) 0 24%, var(--maritime-titanic-funnel) 24% 100%) 78px 0 / 10px 24px no-repeat;
  transform: skewX(-7deg);
  transform-origin: 0 100%;
}

.maritime-vessel--titanic .maritime-vessel__house::after {
  left: 6%;
  right: 5%;
  top: 5px;
  height: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(10, 25, 38, 0.5) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
}

.maritime-vessel--titanic .maritime-vessel__motion::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 12%;
  bottom: 33px;
  height: 27px;
  background:
    linear-gradient(90deg, rgba(205, 222, 232, 0.42) 0 1px, transparent 1px 95%, rgba(205, 222, 232, 0.42) 95% 96%, transparent 96%),
    linear-gradient(64deg, transparent 0 48%, rgba(205, 222, 232, 0.28) 49% 50%, transparent 51% 100%),
    linear-gradient(116deg, transparent 0 48%, rgba(205, 222, 232, 0.2) 49% 50%, transparent 51% 100%);
  pointer-events: none;
}

.maritime-titanic-seabed {
  position: absolute;
  left: var(--titanic-seabed-left);
  bottom: var(--titanic-seabed-bottom);
  width: var(--titanic-seabed-width);
  height: var(--titanic-seabed-height);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 44%, var(--maritime-titanic-seabed-silt) 0 24%, transparent 25%),
    radial-gradient(ellipse at 63% 58%, var(--maritime-titanic-seabed-mud-soft) 0 36%, transparent 37%),
    radial-gradient(ellipse at 48% 76%, rgba(31, 23, 16, var(--titanic-seabed-mud-opacity)) 0 34%, transparent 35%),
    linear-gradient(90deg, transparent, var(--maritime-titanic-seabed-mud), transparent);
  filter: blur(var(--titanic-seabed-blur));
  opacity: 0;
  transform: skewX(-8deg) scaleX(var(--titanic-seabed-scale-start));
  transform-origin: 50% 60%;
  transition:
    opacity 260ms ease-out,
    transform 260ms ease-out;
  will-change: opacity, transform;
}

.maritime-titanic-seabed.is-visible {
  opacity: var(--titanic-seabed-opacity, 0.88);
  transform: skewX(-8deg) scaleX(var(--titanic-seabed-scale-end));
}

.maritime-titanic-seabed::before {
  content: "";
  position: absolute;
  inset: 18% 8% 12%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(168deg, transparent 0 7px, rgba(31, 23, 16, var(--titanic-seabed-mud-opacity)) 8px 12px, transparent 13px 20px),
    repeating-linear-gradient(8deg, transparent 0 13px, rgba(118, 92, 58, var(--titanic-seabed-ridge-opacity)) 14px 16px, transparent 17px 28px),
    radial-gradient(ellipse at 50% 60%, var(--maritime-titanic-seabed-mud-soft), transparent 68%);
  opacity: var(--titanic-seabed-mud-opacity);
}

.maritime-titanic-seabed__silt {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 22%;
  height: 78%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 58%, rgba(155, 124, 79, 0.3) 0 22%, transparent 23%),
    radial-gradient(ellipse at 55% 42%, rgba(118, 92, 58, 0.24) 0 30%, transparent 31%),
    radial-gradient(ellipse at 72% 62%, rgba(155, 124, 79, 0.2) 0 20%, transparent 21%),
    linear-gradient(90deg, transparent, rgba(118, 92, 58, 0.22), transparent);
  filter: blur(4px);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(var(--titanic-seabed-silt-scale-start));
  transform-origin: 50% 100%;
  will-change: opacity, transform;
}

.maritime-titanic-seabed__silt.is-visible {
  animation: maritimeTitanicSeabedSilt var(--titanic-seabed-silt-duration, 900ms) ease-out both;
}

@keyframes maritimeTitanicSeabedSilt {
  0% {
    opacity: var(--titanic-seabed-silt-opacity);
    transform: translate3d(0, var(--titanic-seabed-silt-y), 0) scale(var(--titanic-seabed-silt-scale-peak));
  }

  100% {
    opacity: 0;
    transform: translate3d(0, var(--titanic-seabed-silt-y-end), 0) scale(var(--titanic-seabed-silt-scale-end));
  }
}

.maritime-vessel--semisub .maritime-vessel__house {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0 1px, transparent 1px),
    repeating-linear-gradient(90deg, var(--maritime-semisub-window) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #edf0f1 0 52%, #b8c0c8 52% 100%);
  box-shadow:
    0 -8px 0 -5px rgba(237, 240, 241, 0.92),
    inset 0 -3px 0 rgba(46, 55, 64, 0.22),
    0 2px 5px rgba(0, 0, 0, 0.24),
    -8px 5px var(--maritime-semisub-light-glow) rgba(255, 218, 134, 0.18);
}

.maritime-vessel--semisub .maritime-vessel__house::after {
  left: 10%;
  right: 10%;
  top: 7px;
  height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--maritime-semisub-window) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
}

.maritime-vessel__detail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.maritime-vessel--semisub .maritime-vessel__detail--pontoons {
  left: 7%;
  right: 7%;
  bottom: 2px;
  height: 17px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(255, 255, 255, 0.1) 0 28%, transparent 29%),
    radial-gradient(ellipse at 85% 50%, rgba(255, 255, 255, 0.1) 0 28%, transparent 29%),
    linear-gradient(90deg, var(--maritime-semisub-red) 0 42%, transparent 42% 58%, var(--maritime-semisub-red) 58% 100%);
}

.maritime-vessel--semisub .maritime-vessel__detail--columns {
  left: 13%;
  bottom: var(--maritime-semisub-column-bottom);
  width: 164px;
  height: var(--maritime-semisub-column-height);
  background:
    linear-gradient(180deg, var(--maritime-semisub-column), var(--maritime-semisub-column-shadow)) 0 0 / 24px var(--maritime-semisub-column-height) no-repeat,
    linear-gradient(180deg, var(--maritime-semisub-column), var(--maritime-semisub-column-shadow)) 48px 0 / 24px var(--maritime-semisub-column-height) no-repeat,
    linear-gradient(180deg, var(--maritime-semisub-column), var(--maritime-semisub-column-shadow)) 96px 0 / 24px var(--maritime-semisub-column-height) no-repeat,
    linear-gradient(180deg, var(--maritime-semisub-column), var(--maritime-semisub-column-shadow)) 140px 0 / 24px var(--maritime-semisub-column-height) no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

.maritime-vessel--semisub .maritime-vessel__detail--crossBracing {
  left: 18%;
  right: 16%;
  bottom: 21px;
  height: 36px;
  background:
    linear-gradient(33deg, transparent 0 48%, rgba(60, 70, 80, 0.55) 49% 51%, transparent 52% 100%),
    linear-gradient(147deg, transparent 0 48%, rgba(60, 70, 80, 0.5) 49% 51%, transparent 52% 100%),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(60, 70, 80, 0.4) 32px 34px, transparent 34px 48px);
  opacity: 0.82;
}

.maritime-vessel--semisub .maritime-vessel__detail--mainDeck {
  left: 5%;
  right: 5%;
  bottom: var(--maritime-semisub-deck-bottom);
  height: var(--maritime-semisub-deck-height);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(65, 75, 84, 0.22) 0 14px, rgba(255, 255, 255, 0.12) 14px 17px, transparent 17px 30px),
    linear-gradient(180deg, var(--maritime-semisub-deck), var(--maritime-semisub-deck-shadow));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(29, 37, 45, 0.24),
    0 0 16px rgba(255, 198, 96, 0.14),
    0 3px 4px rgba(0, 0, 0, 0.22);
}

.maritime-vessel--semisub .maritime-vessel__detail--derrick {
  left: var(--maritime-semisub-derrick-left);
  bottom: var(--maritime-semisub-derrick-bottom);
  width: var(--maritime-semisub-derrick-width);
  height: var(--maritime-semisub-derrick-height);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 83% 100%, 56% 12%, 45% 12%, 18% 100%, 0 100%);
  background:
    linear-gradient(63deg, transparent 0 47%, var(--maritime-semisub-derrick) 48% 52%, transparent 53% 100%),
    linear-gradient(117deg, transparent 0 47%, var(--maritime-semisub-derrick) 48% 52%, transparent 53% 100%),
    linear-gradient(79deg, transparent 0 48%, rgba(84, 94, 102, 0.72) 49% 50%, transparent 51% 100%),
    linear-gradient(101deg, transparent 0 48%, rgba(84, 94, 102, 0.68) 49% 50%, transparent 51% 100%),
    repeating-linear-gradient(0deg, transparent 0 8px, var(--maritime-semisub-derrick-light) 8px 10px, transparent 10px 16px),
    linear-gradient(90deg, transparent 0 10%, rgba(22, 28, 34, 0.92) 10% 14%, transparent 14% 47%, rgba(22, 28, 34, 0.88) 47% 52%, transparent 52% 86%, rgba(22, 28, 34, 0.92) 86% 90%, transparent 90% 100%);
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 8px rgba(255, 210, 128, 0.18));
}

.maritime-vessel--semisub .maritime-vessel__detail--derrick::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 12%;
  bottom: 7px;
  height: 54px;
  background:
    linear-gradient(58deg, transparent 0 46%, rgba(196, 203, 207, 0.48) 47% 49%, transparent 50%),
    linear-gradient(122deg, transparent 0 46%, rgba(196, 203, 207, 0.44) 47% 49%, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(214, 196, 142, 0.3) 8px 10px, transparent 10px 16px);
}

.maritime-vessel--semisub .maritime-vessel__detail--derrick::after {
  content: "";
  position: absolute;
  left: 45%;
  bottom: 1px;
  width: 7px;
  height: 58px;
  background: linear-gradient(90deg, rgba(18, 24, 30, 0.48) 0 1px, rgba(210, 160, 60, 0.78) 1px 3px, transparent 3px 5px, rgba(210, 160, 60, 0.58) 5px 7px);
}

.maritime-vessel--semisub .maritime-vessel__detail--derrickCrown {
  left: calc(var(--maritime-semisub-derrick-left) + 5%);
  bottom: var(--maritime-semisub-derrick-crown-bottom);
  width: var(--maritime-semisub-derrick-crown-width);
  height: 12px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(17, 23, 29, 0.58) 8% 12%, transparent 12% 88%, rgba(17, 23, 29, 0.54) 88% 92%, transparent 92%),
    linear-gradient(180deg, #596168 0 25%, #2d353d 25% 78%, #171f27 78% 100%);
  box-shadow:
    0 -8px 0 -7px rgba(190, 150, 58, 0.75),
    0 2px 0 rgba(32, 39, 50, 0.34);
}

.maritime-vessel--semisub .maritime-vessel__detail--derrickBeacon {
  left: var(--maritime-semisub-derrick-beacon-left);
  bottom: var(--maritime-semisub-derrick-beacon-bottom);
  width: var(--maritime-semisub-derrick-beacon-size);
  height: var(--maritime-semisub-derrick-beacon-size);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 18%, var(--maritime-semisub-derrick-beacon-red) 38% 100%);
  box-shadow:
    0 0 var(--maritime-semisub-derrick-beacon-glow) var(--maritime-semisub-derrick-beacon-red),
    0 0 var(--maritime-semisub-derrick-beacon-outer-glow) var(--maritime-semisub-derrick-beacon-red-soft);
  opacity: var(--maritime-semisub-derrick-beacon-dim-opacity);
  animation: maritimeSemisubDerrickBeacon var(--maritime-semisub-derrick-beacon-period) steps(1, end) infinite;
}

.maritime-vessel--semisub .maritime-vessel__detail--cranes {
  left: 10%;
  bottom: 70px;
  width: 176px;
  height: 34px;
  background:
    linear-gradient(150deg, transparent 0 48%, var(--maritime-semisub-crane) 49% 52%, transparent 53% 100%) 0 10px / 72px 22px no-repeat,
    linear-gradient(30deg, transparent 0 48%, var(--maritime-semisub-crane) 49% 52%, transparent 53% 100%) 118px 5px / 55px 22px no-repeat,
    linear-gradient(90deg, var(--maritime-semisub-crane) 0 5px, transparent 5px 100%) 40px 17px / 28px 17px no-repeat,
    linear-gradient(90deg, var(--maritime-semisub-crane) 0 5px, transparent 5px 100%) 146px 15px / 24px 18px no-repeat;
}

.maritime-vessel--semisub .maritime-vessel__detail--helideck {
  right: 3%;
  bottom: 78px;
  width: 47px;
  height: 24px;
  clip-path: polygon(18% 0, 82% 0, 100% 35%, 100% 72%, 78% 100%, 20% 100%, 0 72%, 0 35%);
  background:
    linear-gradient(35deg, transparent 44%, rgba(218, 225, 221, 0.72) 45% 49%, transparent 50%),
    linear-gradient(145deg, transparent 44%, rgba(218, 225, 221, 0.72) 45% 49%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, transparent 0 47%, rgba(192, 164, 89, 0.72) 48% 52%, transparent 53%),
    linear-gradient(180deg, var(--maritime-semisub-helipad), #152a25);
}

.maritime-vessel--semisub .maritime-vessel__detail--accommodation {
  right: 20%;
  bottom: 72px;
  width: 36px;
  height: 24px;
  background:
    repeating-linear-gradient(90deg, var(--maritime-semisub-window) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #edf0f1, #aeb7bf);
  box-shadow: 0 -7px 0 -4px rgba(237, 240, 241, 0.9);
}

.maritime-vessel--semisub .maritime-vessel__detail--moonpool {
  left: 48%;
  bottom: var(--maritime-semisub-deck-bottom);
  width: 22px;
  height: 9px;
  border-radius: 0 0 8px 8px;
  background: rgba(10, 16, 28, 0.58);
}

.maritime-vessel--semisub .maritime-vessel__detail--lifeboats {
  left: 62%;
  bottom: 76px;
  width: 54px;
  height: 8px;
  background:
    linear-gradient(180deg, #e0523d, #88332b) 0 2px / 20px 5px no-repeat,
    linear-gradient(180deg, #e0523d, #88332b) 30px 2px / 20px 5px no-repeat;
}

.maritime-vessel--semisub .maritime-vessel__detail--deckLights {
  left: 9%;
  right: 11%;
  bottom: 77px;
  height: 8px;
  background:
    radial-gradient(circle, var(--maritime-semisub-work-light) 0 1.4px, transparent 2.4px) 0 3px / 26px 5px repeat-x,
    radial-gradient(circle, var(--maritime-semisub-cold-light) 0 1px, transparent 2px) 13px 0 / 34px 5px repeat-x;
  filter:
    drop-shadow(0 0 var(--maritime-semisub-light-glow) var(--maritime-semisub-work-light-soft))
    drop-shadow(0 0 6px rgba(126, 185, 230, 0.18));
  opacity: 0.86;
}

.maritime-vessel--semisub .maritime-vessel__detail--derrickLights {
  left: calc(var(--maritime-semisub-derrick-left) + 7%);
  bottom: calc(var(--maritime-semisub-derrick-bottom) + 11px);
  width: 38px;
  height: 58px;
  background:
    radial-gradient(circle, var(--maritime-semisub-work-light) 0 1.2px, transparent 2.2px) 5px 6px / 12px 13px repeat-y,
    radial-gradient(circle, var(--maritime-semisub-cold-light) 0 1px, transparent 2px) 25px 3px / 10px 15px repeat-y;
  filter: drop-shadow(0 0 9px var(--maritime-semisub-work-light-soft));
  opacity: 0.82;
}

.maritime-vessel--semisub .maritime-vessel__detail--waterGlow {
  left: 13%;
  bottom: -24px;
  width: var(--maritime-semisub-reflection-width);
  height: var(--maritime-semisub-reflection-height);
  border-radius: 50%;
  background:
    repeating-linear-gradient(176deg, transparent 0 7px, var(--maritime-semisub-reflection) 8px 9px, transparent 10px 17px),
    radial-gradient(ellipse at 52% 0, var(--maritime-semisub-reflection-cold), transparent 68%);
  filter: blur(1.6px);
  opacity: 0.52;
  transform: skewX(-10deg);
}

.maritime-vessel--fishing .maritime-vessel__house::before,
.maritime-vessel--trawler .maritime-vessel__house::before {
  content: "";
  position: absolute;
  left: 70%;
  bottom: 72%;
  width: 27px;
  height: 1px;
  background: var(--maritime-vessel-rigging);
  box-shadow: -7px -9px 0 -0.3px var(--maritime-vessel-rigging);
  transform: rotate(-18deg);
  transform-origin: left center;
}

.maritime-vessel--tug .maritime-vessel__house::before,
.maritime-vessel--pilot .maritime-vessel__house::before {
  content: "";
  position: absolute;
  left: 64%;
  bottom: 80%;
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, var(--maritime-vessel-rigging), rgba(205, 222, 232, 0.08));
  box-shadow: 5px 5px 0 -1px rgba(205, 222, 232, 0.18);
}

.maritime-vessel--sailing .maritime-vessel__house {
  transform-origin: 50% 100%;
}

.maritime-vessel--sailing .maritime-vessel__house::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 1px;
  width: 28px;
  height: 30px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, var(--maritime-vessel-sail-fill), rgba(232, 237, 243, 0.08));
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
}

.maritime-vessel--away .maritime-vessel__body {
  left: 15px;
  right: 15px;
  height: 14px;
  border-radius: 12px 12px 5px 5px;
  clip-path: var(--maritime-vessel-hull-away-shape);
}

.maritime-vessel--away .maritime-vessel__house {
  left: 18px;
  width: 12px;
}

.maritime-vessel__light {
  position: absolute;
  z-index: 4;
  width: var(--maritime-nav-light-size);
  height: var(--maritime-nav-light-size);
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0 var(--maritime-nav-light-core-size), currentColor calc(var(--maritime-nav-light-core-size) + 1px) 100%);
  box-shadow:
    0 0 var(--maritime-nav-light-glow) currentColor,
    0 0 var(--maritime-nav-light-outer-glow) currentColor;
  filter: saturate(var(--maritime-nav-light-saturation));
  opacity: var(--maritime-nav-light-opacity);
}

.maritime-vessel__light--masthead-forward,
.maritime-vessel__light--masthead-tow-lower {
  left: var(--maritime-vessel-masthead-forward-left);
  bottom: var(--maritime-vessel-masthead-forward-bottom);
  color: var(--maritime-nav-light-white);
}

.maritime-vessel__light--masthead-aft {
  left: var(--maritime-vessel-masthead-aft-left);
  bottom: var(--maritime-vessel-masthead-aft-bottom);
  color: var(--maritime-nav-light-white);
}

.maritime-vessel__light--masthead-tow-upper {
  left: 58%;
  bottom: 34px;
  color: var(--maritime-nav-light-white);
}

.maritime-vessel__light--starboard {
  left: 78%;
  bottom: 10px;
  color: var(--maritime-nav-light-starboard);
}

.maritime-vessel__light--port {
  left: 17%;
  bottom: 10px;
  color: var(--maritime-nav-light-port);
}

.maritime-vessel__light--stern {
  left: 50%;
  bottom: 14px;
  color: var(--maritime-nav-light-white);
}

.maritime-vessel__light--towing {
  left: 50%;
  bottom: 7px;
  color: var(--maritime-nav-light-towing);
}

.maritime-vessel__light--trawling-green,
.maritime-vessel__light--fishing-red,
.maritime-vessel__light--pilot-white {
  left: 48%;
  bottom: 35px;
}

.maritime-vessel__light--trawling-white,
.maritime-vessel__light--fishing-white,
.maritime-vessel__light--pilot-red {
  left: 48%;
  bottom: 27px;
}

.maritime-vessel__light--trawling-green {
  color: var(--maritime-nav-light-fishing-green);
}

.maritime-vessel__light--fishing-red,
.maritime-vessel__light--pilot-red {
  color: var(--maritime-nav-light-fishing-red);
}

.maritime-vessel__light--trawling-white,
.maritime-vessel__light--fishing-white,
.maritime-vessel__light--pilot-white {
  color: var(--maritime-nav-light-white);
}

.maritime-colreg-popover {
  position: absolute;
  z-index: 18;
  width: min(260px, calc(100vw - 28px));
  padding: 11px 12px;
  border: 1px solid var(--maritime-colreg-popover-border);
  border-radius: 8px;
  background: var(--maritime-colreg-popover-bg);
  box-shadow: var(--maritime-colreg-popover-shadow);
  color: rgba(239, 247, 255, 0.92);
  pointer-events: auto;
}

.maritime-colreg-popover[hidden] {
  display: none;
}

.maritime-colreg-popover strong,
.maritime-colreg-popover span {
  display: block;
}

.maritime-colreg-popover strong {
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}

.maritime-colreg-popover__rule {
  margin-bottom: 4px;
  color: rgba(255, 216, 77, 0.95);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

.maritime-colreg-popover__characteristic {
  margin-bottom: 5px;
  color: rgba(239, 247, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.32;
}

.maritime-colreg-popover__characteristic[hidden] {
  display: none;
}

.maritime-colreg-popover__summary {
  color: rgba(219, 234, 248, 0.78);
  font-size: 0.72rem;
  line-height: 1.35;
}

@keyframes maritimeStarTwinkle {
  from { filter: brightness(0.86); }
  to { filter: brightness(1.12); }
}

@keyframes maritimeStarSparkle {
  0%, 100% {
    opacity: 0.56;
    filter:
      drop-shadow(0 0 2px var(--maritime-star-glow))
      brightness(0.92);
  }

  38% {
    opacity: 0.84;
    filter:
      drop-shadow(0 0 5px var(--maritime-star-glow))
      drop-shadow(0 0 8px var(--maritime-star-warm-glow))
      brightness(1.18);
  }

  62% {
    opacity: 0.68;
    filter:
      drop-shadow(0 0 3px var(--maritime-star-glow))
      brightness(1.03);
  }
}

@keyframes maritimeWaveDrift {
  from { transform: translate3d(-3%, 0, 0); }
  to { transform: translate3d(3%, 0, 0); }
}

@keyframes maritimeIalaSingleFlash {
  0% { transform: translateX(var(--maritime-signal-offset-x)) rotate(var(--maritime-signal-rotation-start)); opacity: var(--maritime-signal-opacity-dark); }
  1% { opacity: var(--maritime-signal-opacity-flash); }
  4% { transform: translateX(var(--maritime-signal-offset-x)) rotate(var(--maritime-signal-rotation-mid)); opacity: var(--maritime-signal-opacity-flash); }
  7% { opacity: var(--maritime-signal-opacity-dark); }
  100% { transform: translateX(var(--maritime-signal-offset-x)) rotate(var(--maritime-signal-rotation-end)); opacity: var(--maritime-signal-opacity-dark); }
}

@keyframes maritimeIalaSectorFlash {
  0% { opacity: var(--maritime-lighthouse-sector-opacity-dark); }
  1% { opacity: var(--maritime-lighthouse-sector-opacity-flash); }
  4% { opacity: var(--maritime-lighthouse-sector-opacity-flash); }
  7% { opacity: var(--maritime-lighthouse-sector-opacity-dark); }
  100% { opacity: var(--maritime-lighthouse-sector-opacity-dark); }
}

@keyframes maritimeVesselLtr {
  from { transform: translate3d(-22vw, 0, 0); }
  to { transform: translate3d(122vw, 0, 0); }
}

@keyframes maritimeVesselRtl {
  from { transform: translate3d(122vw, 0, 0); }
  to { transform: translate3d(-22vw, 0, 0); }
}

@keyframes maritimeVesselAway {
  from { transform: translate3d(var(--maritime-vessel-away-x), var(--maritime-vessel-away-start-y), 0) scale(var(--maritime-vessel-away-start-scale)); opacity: var(--maritime-vessel-away-start-opacity); }
  to { transform: translate3d(var(--maritime-vessel-away-x), var(--maritime-vessel-away-end-y), 0) scale(var(--maritime-vessel-away-end-scale)); opacity: var(--maritime-vessel-away-end-opacity); }
}

@keyframes maritimeSemisubSlowEntry {
  from { transform: translate3d(var(--vessel-entry-start-x, 112vw), 0, 0); }
  to { transform: translate3d(var(--vessel-entry-end-x, -34vw), var(--maritime-semisub-entry-y), 0); }
}

@keyframes maritimeSemisubDerrickBeacon {
  0%, 45%, 100% {
    opacity: var(--maritime-semisub-derrick-beacon-dim-opacity);
    transform: scale(var(--maritime-semisub-derrick-beacon-dim-scale));
  }
  8%, 18% {
    opacity: var(--maritime-semisub-derrick-beacon-bright-opacity);
    transform: scale(var(--maritime-semisub-derrick-beacon-bright-scale));
  }
}

@keyframes maritimeVesselSeaMotion {
  0% { transform: translate3d(0, 0, 0) rotate(calc(var(--maritime-vessel-roll) * -0.55)) skewX(calc(var(--maritime-vessel-pitch) * -0.2)); }
  28% { transform: translate3d(0, calc(var(--maritime-vessel-heave) * -1), 0) rotate(var(--maritime-vessel-roll)) skewX(var(--maritime-vessel-pitch)); }
  56% { transform: translate3d(0, calc(var(--maritime-vessel-heave) * 0.55), 0) rotate(calc(var(--maritime-vessel-roll) * -0.85)) skewX(calc(var(--maritime-vessel-pitch) * -0.75)); }
  78% { transform: translate3d(0, calc(var(--maritime-vessel-heave) * -0.35), 0) rotate(calc(var(--maritime-vessel-roll) * 0.45)) skewX(calc(var(--maritime-vessel-pitch) * 0.35)); }
  100% { transform: translate3d(0, 0, 0) rotate(calc(var(--maritime-vessel-roll) * -0.55)) skewX(calc(var(--maritime-vessel-pitch) * -0.2)); }
}

@keyframes maritimeVesselWake {
  0%, 100% { opacity: 0.48; transform: scaleX(0.88) translateY(0); }
  45% { opacity: 0.78; transform: scaleX(1.08) translateY(1px); }
  70% { opacity: 0.6; transform: scaleX(0.96) translateY(0); }
}

@media (max-width: 900px) {
  .maritime-lighthouse {
    right: -18px;
    opacity: 0.82;
  }

  .maritime-vessel--far {
    --vessel-opacity: var(--maritime-vessel-opacity-far-mobile);
  }
}

@media (max-width: 768px) {
  .maritime-hero-animation {
    --maritime-mobile-scene-top: clamp(250px, 35vh, 330px);
    --maritime-physical-horizon-arc-height: clamp(58px, 18vw, 104px);
    --maritime-physical-horizon-depression: clamp(24px, 6vw, 42px);
    --maritime-physical-horizon-band: clamp(156px, 34vw, 224px);
    --maritime-physical-horizon-half-band: clamp(78px, 17vw, 112px);
    --maritime-physical-horizon-line: rgba(188, 224, 246, 0.42);
    --maritime-physical-horizon-glow: rgba(91, 184, 255, 0.22);
    --maritime-mobile-waterline-far: 158px;
    --maritime-mobile-waterline-mid: 176px;
    --maritime-mobile-waterline-default: 204px;
    --maritime-mobile-waterline-near: 254px;
    --maritime-lighthouse-beam-opacity-flash: 0.58;
    --maritime-lighthouse-beam-opacity-still: 0.34;
    --maritime-lighthouse-right: -34px;
    --maritime-lighthouse-bottom: auto;
    --maritime-lighthouse-width: clamp(78px, 22vw, 108px);
    --maritime-lighthouse-height: clamp(148px, 42vw, 198px);
    background:
      radial-gradient(circle at 28% 16%, rgba(157, 207, 255, 0.12), transparent 24%),
      linear-gradient(180deg, #020814 0%, #061428 58%, #07111f 100%);
  }

  .maritime-moon-monitor {
    left: 26px;
    top: calc(var(--maritime-mobile-scene-top) - 116px);
    pointer-events: none;
  }

  .maritime-moon-tooltip {
    display: none;
  }

  .maritime-stars {
    opacity: 0.42;
  }

  .maritime-horizon {
    top: calc(var(--maritime-mobile-scene-top) - clamp(4px, 1vh, 12px));
    bottom: auto;
    height: clamp(168px, 30vh, 238px);
  }

  .maritime-coastline {
    height: 54%;
    opacity: 0.58;
  }

  .maritime-horizon::after {
    height: 68%;
    opacity: 0.78;
  }

  .maritime-ocean {
    top: calc(var(--maritime-mobile-scene-top) + clamp(102px, 16vh, 146px) + var(--maritime-physical-horizon-depression));
    bottom: auto;
    height: clamp(430px, 58vh, 560px);
  }

  .maritime-lighthouse {
    top: calc(var(--maritime-mobile-scene-top) + 56px);
    bottom: auto;
    z-index: 12;
    opacity: 0.78;
  }

  .maritime-vessel {
    top: calc(var(--maritime-mobile-scene-top) + var(--maritime-mobile-waterline-default) - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)));
    scale: var(--vessel-mobile-scale, var(--vessel-scale));
    --vessel-wake-opacity: var(--vessel-mobile-wake-opacity);
    --vessel-reflection-opacity: var(--vessel-mobile-reflection-opacity);
    --maritime-vessel-pitch: var(--vessel-mobile-pitch);
    --maritime-vessel-roll: var(--vessel-mobile-roll);
    --maritime-vessel-heave: var(--vessel-mobile-heave);
  }

  .maritime-vessel--far {
    top: calc(var(--maritime-mobile-scene-top) + var(--maritime-mobile-waterline-far) - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)));
  }

  .maritime-vessel--mid {
    top: calc(var(--maritime-mobile-scene-top) + var(--maritime-mobile-waterline-mid) - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)));
  }

  .maritime-vessel--near {
    top: calc(var(--maritime-mobile-scene-top) + var(--maritime-mobile-waterline-near) - var(--vessel-waterline-offset, var(--maritime-vessel-waterline-offset)));
  }

  .maritime-vessel[data-mobile-showcase-vessel] {
    opacity: var(--mobile-showcase-opacity, var(--vessel-opacity));
  }

  .maritime-vessel[data-mobile-showcase-vessel="semisubmersible-rig-starboard"] {
    animation: none;
    transform: translate3d(var(--mobile-showcase-x), var(--mobile-showcase-y, 0), 0);
  }

  .maritime-iceberg {
    left: auto;
    right: clamp(14px, 7vw, 36px);
    top: calc(var(--maritime-mobile-scene-top) + var(--maritime-mobile-waterline-near) - var(--iceberg-waterline-offset));
  }

  .maritime-vessel--semisub {
    scale: var(--mobile-showcase-scale, var(--vessel-mobile-scale, var(--maritime-semisub-mobile-scale)));
    opacity: var(--mobile-showcase-opacity, 0.64);
    --maritime-vessel-pitch: 0.08deg;
    --maritime-vessel-roll: 0.16deg;
    --maritime-vessel-heave: 0.32px;
  }

  .maritime-vessel--semisub .maritime-vessel__detail--waterGlow {
    display: none;
  }

  .maritime-vessel {
    pointer-events: auto;
  }
}

@media (max-width: 480px), (max-height: 740px) {
  .maritime-hero-animation {
    --maritime-mobile-scene-top: clamp(330px, 46vh, 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maritime-stars,
  .maritime-ocean::before,
  .maritime-ocean::after,
  .maritime-lighthouse__beam,
  .maritime-lighthouse__lantern,
  .maritime-lighthouse__sector,
  .maritime-lighthouse__range,
  .maritime-vessel__detail--derrickBeacon,
  .maritime-iceberg__wavelets,
  .maritime-iceberg__wavelets::before,
  .maritime-iceberg__wavelets::after,
  .maritime-vessel__motion,
  .maritime-vessel__motion::after,
  .maritime-vessel {
    animation: none !important;
  }

  .maritime-vessel {
    transform: translate3d(var(--maritime-vessel-away-x), var(--maritime-vessel-away-start-y), 0);
  }

  .maritime-vessel[data-vessel-drift="slow-entry"] {
    transform: translate3d(var(--vessel-station-x, 58vw), 0, 0);
  }

  .maritime-lighthouse__beam {
    opacity: var(--maritime-lighthouse-beam-opacity-still);
  }

  .maritime-lighthouse__sector,
  .maritime-lighthouse__range {
    opacity: var(--maritime-lighthouse-sector-opacity-dark);
  }

  .maritime-moon,
  .maritime-moon-monitor::before,
  .maritime-moon-tooltip,
  .maritime-stars {
    transition: none !important;
  }
}