/* Ship illustrations (web/ships.mjs, docs/REDISENO_2026-10-28.md §5).
   Every colour of the drawings is a variable here, with a day palette for the
   light theme and a dusk palette for the dark one (lit windows, moon), chosen
   the same way as web/app.css: the OS preference unless the user picks a
   theme. .ships-light / .ships-dark force one palette inside a container.
   Motion: transform and opacity only, only while the drawing is on screen
   (class "in-view", web/ships-observe.mjs), and none at all with reduced
   motion: the still picture tells the same story. */

:root, .ships-light {
  --sa-sky: #d3e7f6;
  --sa-sun: #f2c46d;
  --sa-cloud: #ffffff;
  --sa-sea: #a3cbe8;
  --sa-deep: #86b7de;
  --sa-lake: #9fcbc4;
  --sa-lake-deep: #82b8b0;
  --sa-wave: #ffffff;
  --sa-foam: #ffffff;
  --sa-hill: #7cb487;
  --sa-hill-2: #5d9b6b;
  --sa-land: #b3d9a5;
  --sa-tree: #6fae6f;
  --sa-tree-2: #4f9358;
  --sa-wall: #e6eaee;
  --sa-wall-edge: #9aa7b4;
  --sa-quay: #c5cdd5;
  --sa-quay-edge: #e2b85f;
  --sa-quay-joint: #aab5c0;
  --sa-hull: #1e3551;
  --sa-hull-far: #4d6684;
  --sa-boot: #c0463c;
  --sa-gold: #d4a35f;
  --sa-super: #ffffff;
  --sa-super-2: #dfe7ef;
  --sa-window: #1e3551;
  --sa-rows: #5c7590;
  --sa-line: #1e3551;
  --sa-rig: #6f8297;
  --sa-deck: #c8d1da;
  --sa-pipe: #3f5873;
  --sa-c1: #d9534a;
  --sa-c2: #2f7fc2;
  --sa-c3: #2f9e7a;
  --sa-c4: #ee9b38;
  --sa-c5: #7a64b8;
  --sa-bulk: #b9573c;
  --sa-crane: #d4a35f;
  --sa-hatch: #9fb0c1;
  --sa-gas: #f6f8fa;
  --sa-gas-line: #9aabbd;
  --sa-ice: #2f7fc2;
  --sa-reefer: #f4f8fc;
  --sa-reefer-deck: #e3edf6;
  --sa-tanker-deck: #6f9a7c;
  --sa-cargo: #c8924a;
  --sa-heap: #c99a5b;
  --sa-heap-dot: #a97b43;
  --sa-orange: #ec6f2d;
  --sa-red: #d6453a;
  --sa-flag: #ffffff;
  --sa-fender: #262b31;
  --sa-barge: #9c5a3f;
  --sa-hose: #2a2f36;
  --sa-fuel: #e0a43c;
  --sa-navy-hull: #6d7b88;
  --sa-navy-super: #a3afba;
  --sa-navy-dark: #3e4954;
  --sa-yacht: #ffffff;
  --sa-tint: #22384f;
  --sa-teak: #c79a64;
  --sa-pool: #4fb3e0;
  --sa-anchor: #1e3551;
  --sa-rope: #2c3e50;
  --sa-badge: #ffffff;
  --sa-badge-ink: #1e3551;
  --sa-badge-ring: #d4a35f;
  --sa-frame: #c3d3e1;
  --sa-light: #ffffff;
  --sa-light-red: #d6453a;
  --sa-rock: #6e7f8c;
  --sa-lamp: #f2c46d;
  --sa-beam: #f6d98b;
  --sa-mule: #b9c3cc;
  --sa-gull: #3f5873;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sa-sky: #233f5c;
    --sa-sun: #efe3bd;
    --sa-cloud: #36536f;
    --sa-sea: #2b5b86;
    --sa-deep: #22496f;
    --sa-lake: #2b5d63;
    --sa-lake-deep: #224d52;
    --sa-wave: #8db8de;
    --sa-foam: #d7e8f6;
    --sa-hill: #2f5e46;
    --sa-hill-2: #26503b;
    --sa-land: #355f48;
    --sa-tree: #457f5e;
    --sa-tree-2: #366b50;
    --sa-wall: #8796a6;
    --sa-wall-edge: #5f6f80;
    --sa-quay: #6c7b8a;
    --sa-quay-edge: #d9ab6a;
    --sa-quay-joint: #5b6977;
    --sa-hull: #15283e;
    --sa-hull-far: #34506e;
    --sa-boot: #b8483e;
    --sa-gold: #d9ab6a;
    --sa-super: #e3eaf1;
    --sa-super-2: #b8c6d4;
    --sa-window: #f2c46d;
    --sa-rows: #d6b26e;
    --sa-line: #c9d6e2;
    --sa-rig: #9fb1c3;
    --sa-deck: #6f7f8f;
    --sa-pipe: #c9d6e2;
    --sa-c1: #d0574e;
    --sa-c2: #3f8ccc;
    --sa-c3: #3aa383;
    --sa-c4: #e7a14a;
    --sa-c5: #8a76c6;
    --sa-bulk: #b25d43;
    --sa-crane: #d9ab6a;
    --sa-hatch: #8193a5;
    --sa-gas: #dde5ec;
    --sa-gas-line: #8d9fb1;
    --sa-ice: #5aa6e6;
    --sa-reefer: #dce6ef;
    --sa-reefer-deck: #b7c8d8;
    --sa-tanker-deck: #4f7a5e;
    --sa-cargo: #c6955a;
    --sa-heap: #b88d58;
    --sa-heap-dot: #94703f;
    --sa-orange: #ef7a3d;
    --sa-red: #e05a4f;
    --sa-flag: #eef3f8;
    --sa-fender: #0d1117;
    --sa-barge: #8f563f;
    --sa-hose: #0e1218;
    --sa-fuel: #f0b452;
    --sa-navy-hull: #5f6d7a;
    --sa-navy-super: #8794a1;
    --sa-navy-dark: #2f3943;
    --sa-yacht: #e8eef4;
    --sa-tint: #10202f;
    --sa-teak: #a8804f;
    --sa-pool: #3f9fcf;
    --sa-anchor: #d9e3ec;
    --sa-rope: #d8c6a4;
    --sa-badge: #eef3f8;
    --sa-badge-ink: #1e3551;
    --sa-badge-ring: #d4a35f;
    --sa-frame: #3b5a78;
    --sa-light: #e3eaf1;
    --sa-light-red: #d6574c;
    --sa-rock: #4d5d6b;
    --sa-lamp: #f6d27f;
    --sa-beam: #f2d488;
    --sa-mule: #9aa6b2;
    --sa-gull: #c9d6e2;
  }
}
:root[data-theme="dark"], .ships-dark {
  --sa-sky: #233f5c;
  --sa-sun: #efe3bd;
  --sa-cloud: #36536f;
  --sa-sea: #2b5b86;
  --sa-deep: #22496f;
  --sa-lake: #2b5d63;
  --sa-lake-deep: #224d52;
  --sa-wave: #8db8de;
  --sa-foam: #d7e8f6;
  --sa-hill: #2f5e46;
  --sa-hill-2: #26503b;
  --sa-land: #355f48;
  --sa-tree: #457f5e;
  --sa-tree-2: #366b50;
  --sa-wall: #8796a6;
  --sa-wall-edge: #5f6f80;
  --sa-quay: #6c7b8a;
  --sa-quay-edge: #d9ab6a;
  --sa-quay-joint: #5b6977;
  --sa-hull: #15283e;
  --sa-hull-far: #34506e;
  --sa-boot: #b8483e;
  --sa-gold: #d9ab6a;
  --sa-super: #e3eaf1;
  --sa-super-2: #b8c6d4;
  --sa-window: #f2c46d;
  --sa-rows: #d6b26e;
  --sa-line: #c9d6e2;
  --sa-rig: #9fb1c3;
  --sa-deck: #6f7f8f;
  --sa-pipe: #c9d6e2;
  --sa-c1: #d0574e;
  --sa-c2: #3f8ccc;
  --sa-c3: #3aa383;
  --sa-c4: #e7a14a;
  --sa-c5: #8a76c6;
  --sa-bulk: #b25d43;
  --sa-crane: #d9ab6a;
  --sa-hatch: #8193a5;
  --sa-gas: #dde5ec;
  --sa-gas-line: #8d9fb1;
  --sa-ice: #5aa6e6;
  --sa-reefer: #dce6ef;
  --sa-reefer-deck: #b7c8d8;
  --sa-tanker-deck: #4f7a5e;
  --sa-cargo: #c6955a;
  --sa-heap: #b88d58;
  --sa-heap-dot: #94703f;
  --sa-orange: #ef7a3d;
  --sa-red: #e05a4f;
  --sa-flag: #eef3f8;
  --sa-fender: #0d1117;
  --sa-barge: #8f563f;
  --sa-hose: #0e1218;
  --sa-fuel: #f0b452;
  --sa-navy-hull: #5f6d7a;
  --sa-navy-super: #8794a1;
  --sa-navy-dark: #2f3943;
  --sa-yacht: #e8eef4;
  --sa-tint: #10202f;
  --sa-teak: #a8804f;
  --sa-pool: #3f9fcf;
  --sa-anchor: #d9e3ec;
  --sa-rope: #d8c6a4;
  --sa-badge: #eef3f8;
  --sa-badge-ink: #1e3551;
  --sa-badge-ring: #d4a35f;
  --sa-frame: #3b5a78;
  --sa-light: #e3eaf1;
  --sa-light-red: #d6574c;
  --sa-rock: #4d5d6b;
  --sa-lamp: #f6d27f;
  --sa-beam: #f2d488;
  --sa-mule: #9aa6b2;
  --sa-gull: #c9d6e2;
}

/* ---------- the drawing and its sizes ---------- */
.ship-art {
  display: inline-block; flex: none; vertical-align: middle; overflow: hidden;
  border-radius: 9px; box-shadow: 0 0 0 1px var(--sa-frame);
  /* stroke widths in drawing units: ship lines, bold ship lines, scene lines, badge */
  --sa-sw: 1.35; --sa-sw2: 1.8; --sa-lw: 1; --sa-bw: 1.2;
}
.ship-art.ship-tile { width: 64px; height: 64px; border-radius: 10px; --sa-sw: 2; --sa-sw2: 2.4; --sa-lw: 1.1; --sa-bw: 1.3; }
.ship-art.ship-compact { width: 72px; height: 40px; border-radius: 7px; --sa-sw: 1.9; --sa-sw2: 2.3; --sa-lw: 1; --sa-bw: 1.1; }
.ship-art.ship-card { width: 112px; height: 64px; }
.ship-art.ship-hero { width: 100%; max-width: 280px; height: auto; aspect-ratio: 7 / 4; border-radius: 15px; --sa-sw: .95; --sa-sw2: 1.3; --sa-lw: .6; --sa-bw: .75; }
/* Top views are drawn smaller: thicker lines keep them readable. */
.ship-art.st-transit-sb, .ship-art.st-transit-nb { --sa-sw: 2.4; --sa-sw2: 3; }
.ship-art.ship-tile.st-transit-sb, .ship-art.ship-tile.st-transit-nb { --sa-sw: 2.6; --sa-sw2: 3.2; }
.ship-art.ship-compact.st-transit-sb, .ship-art.ship-compact.st-transit-nb { --sa-sw: 3.4; --sa-sw2: 4; }
.ship-art.ship-hero.st-transit-sb, .ship-art.ship-hero.st-transit-nb { --sa-sw: 1.6; --sa-sw2: 2.2; }

/* ---------- scene ---------- */
.ship-art .sk { fill: var(--sa-sky); }
.ship-art .sun { fill: var(--sa-sun); }
.ship-art .cl { fill: var(--sa-cloud); }
.ship-art .wa { fill: var(--sa-sea); }
.ship-art .wb { fill: var(--sa-deep); }
.ship-art .lk { fill: var(--sa-lake); }
.ship-art .l2 { fill: var(--sa-lake-deep); }
.ship-art .hl { fill: var(--sa-hill); }
.ship-art .h3 { fill: var(--sa-hill-2); }
.ship-art .ld { fill: var(--sa-land); }
.ship-art .tr { fill: var(--sa-tree); }
.ship-art .t2 { fill: var(--sa-tree-2); }
.ship-art .lw { fill: var(--sa-wall); }
.ship-art .gt { fill: none; stroke: var(--sa-wall-edge); stroke-width: calc(var(--sa-lw) * 1.4); stroke-linejoin: round; }
.ship-art .lg { fill: none; stroke: var(--sa-wall-edge); stroke-width: var(--sa-lw); }
.ship-art .wv { fill: none; stroke: var(--sa-wave); stroke-width: var(--sa-lw); stroke-linecap: round; stroke-dasharray: 4 7; opacity: .75; }
.ship-art .fo { fill: var(--sa-foam); opacity: .9; }
.ship-art .wk { fill: none; stroke: var(--sa-foam); stroke-width: var(--sa-sw); stroke-linecap: round; opacity: .85; }
.ship-art .gl { fill: none; stroke: var(--sa-gull); stroke-width: .6; stroke-linecap: round; }
.ship-art .qy { fill: var(--sa-quay); }
.ship-art .qe { fill: none; stroke: var(--sa-quay-edge); stroke-width: calc(var(--sa-lw) * 1.3); }
.ship-art .qj { fill: none; stroke: var(--sa-quay-joint); stroke-width: .5; }
.ship-art .bo { fill: var(--sa-line); }
.ship-art .ml { fill: none; stroke: var(--sa-rope); stroke-width: var(--sa-lw); stroke-linecap: round; }
.ship-art .gw { fill: none; stroke: var(--sa-rig); stroke-width: var(--sa-lw); stroke-dasharray: .8 .5; }
.ship-art .ch { fill: none; stroke: var(--sa-anchor); stroke-width: var(--sa-lw); stroke-dasharray: 1 .7; }
.ship-art .an, .ship-art .ar { fill: none; stroke: var(--sa-anchor); stroke-width: calc(var(--sa-lw) * 1.5); stroke-linecap: round; stroke-linejoin: round; }
.ship-art .rk { fill: var(--sa-rock); }
.ship-art .lh { fill: var(--sa-light); }
.ship-art .lr { fill: var(--sa-light-red); }
.ship-art .lt { fill: var(--sa-lamp); }
.ship-art .lc { fill: var(--sa-hull); }
.ship-art .bm { fill: var(--sa-beam); opacity: .45; }
.ship-art .cs { fill: none; stroke: var(--sa-crane); stroke-width: calc(var(--sa-lw) * 1.4); stroke-linejoin: round; }
.ship-art .cb { fill: none; stroke: var(--sa-crane); stroke-width: calc(var(--sa-lw) * 1.8); }
.ship-art .cf { fill: var(--sa-crane); }
.ship-art .cw { fill: none; stroke: var(--sa-line); stroke-width: calc(var(--sa-lw) * .6); }
.ship-art .bh { fill: var(--sa-barge); }
.ship-art .tn { fill: var(--sa-gold); }
.ship-art .ho { fill: none; stroke: var(--sa-hose); stroke-width: calc(var(--sa-lw) * 1.4); stroke-linecap: round; }
.ship-art .fl { fill: var(--sa-fuel); }
.ship-art .mu { fill: var(--sa-mule); }
.ship-art .mc { fill: none; stroke: var(--sa-line); stroke-width: calc(var(--sa-sw) * .45); }
.ship-art .bd { fill: var(--sa-badge); stroke: var(--sa-badge-ring); stroke-width: calc(var(--sa-bw) * .8); }
.ship-art .bi { fill: none; stroke: var(--sa-badge-ink); stroke-width: var(--sa-bw); stroke-linecap: round; stroke-linejoin: round; }
.ship-art .bf { fill: var(--sa-badge-ink); }
.ship-art .bq { fill: var(--sa-fuel); stroke: var(--sa-badge-ink); stroke-width: calc(var(--sa-bw) * .55); stroke-linejoin: round; }

/* ---------- ship ---------- */
.ship-art .hu { fill: var(--sa-hull); }
.ship-art .h2 { fill: var(--sa-hull-far); }
.ship-art .bt { fill: var(--sa-boot); }
.ship-art .gs { fill: none; stroke: var(--sa-gold); stroke-width: var(--sa-sw); }
.ship-art .su { fill: var(--sa-super); }
.ship-art .s2 { fill: var(--sa-super-2); }
.ship-art .wi { fill: var(--sa-window); }
.ship-art .wr { fill: none; stroke: var(--sa-rows); stroke-width: 1; stroke-dasharray: 1.3 1; }
.ship-art .ph { fill: none; stroke: var(--sa-window); stroke-width: .9; stroke-dasharray: .9 1.6; }
.ship-art .ms { fill: none; stroke: var(--sa-line); stroke-width: var(--sa-sw); stroke-linecap: round; }
.ship-art .mh { fill: var(--sa-lamp); }
.ship-art .rg { fill: none; stroke: var(--sa-rig); stroke-width: calc(var(--sa-sw) * .5); }
.ship-art .fu { fill: var(--sa-gold); }
.ship-art .fb { fill: var(--sa-hull); }
.ship-art .pd { fill: var(--sa-deck); }
.ship-art .td { fill: var(--sa-tanker-deck); }
.ship-art .rd { fill: var(--sa-reefer-deck); }
.ship-art .dk { fill: none; stroke: var(--sa-pipe); stroke-width: var(--sa-sw); stroke-linecap: round; }
.ship-art .c1 { fill: var(--sa-c1); }
.ship-art .c2 { fill: var(--sa-c2); }
.ship-art .c3 { fill: var(--sa-c3); }
.ship-art .c4 { fill: var(--sa-c4); }
.ship-art .c5 { fill: var(--sa-c5); }
.ship-art .bk { fill: var(--sa-bulk); }
.ship-art .ht { fill: var(--sa-hatch); }
.ship-art .hr { fill: none; stroke: var(--sa-super-2); stroke-width: .7; }
.ship-art .cr { fill: var(--sa-crane); }
.ship-art .cj { fill: none; stroke: var(--sa-crane); stroke-width: var(--sa-sw2); stroke-linecap: round; }
.ship-art .dm { fill: var(--sa-gas); }
.ship-art .dl { fill: none; stroke: var(--sa-gas-line); stroke-width: var(--sa-sw); }
.ship-art .em { fill: var(--sa-gold); }
.ship-art .sf { fill: none; stroke: var(--sa-ice); stroke-width: var(--sa-sw); stroke-linecap: round; }
.ship-art .cg { fill: var(--sa-cargo); }
.ship-art .lb { fill: var(--sa-orange); }
.ship-art .lf { fill: none; stroke: var(--sa-orange); stroke-width: .9; }
.ship-art .fd { fill: none; stroke: var(--sa-fender); stroke-width: var(--sa-sw2); stroke-linejoin: round; }
.ship-art .fx { fill: none; stroke: var(--sa-fender); stroke-width: 3.2; stroke-linecap: round; }
.ship-art .hp { fill: var(--sa-heap); }
.ship-art .hx { fill: none; stroke: var(--sa-heap-dot); stroke-width: .9; stroke-linecap: round; }
.ship-art .os { fill: none; stroke: var(--sa-orange); stroke-width: var(--sa-sw); }
.ship-art .or { fill: var(--sa-orange); }
.ship-art .fw { fill: var(--sa-flag); }
.ship-art .fg { fill: var(--sa-red); }
.ship-art .sl { fill: none; stroke: var(--sa-super); stroke-width: calc(var(--sa-sw2) * 1.2); stroke-linecap: round; }
.ship-art .gn { fill: var(--sa-navy-dark); }
.ship-art .gb { fill: none; stroke: var(--sa-navy-dark); stroke-width: var(--sa-sw); stroke-linecap: round; }
.ship-art .hn { fill: none; stroke: var(--sa-flag); stroke-width: .9; }
.ship-art .hd { fill: none; stroke: var(--sa-flag); stroke-width: var(--sa-sw); }
.ship-art .tk { fill: var(--sa-teak); }
.ship-art .pl { fill: var(--sa-pool); }
.ship-art .gp { fill: none; stroke: var(--sa-gold); stroke-width: var(--sa-sw); }
.ship-art .rp { fill: var(--sa-navy-dark); }

/* Families with their own colours. */
.ship-art.fam-reefer .hu { fill: var(--sa-reefer); }
.ship-art.fam-reefer .gs { stroke: var(--sa-ice); }
.ship-art.fam-reefer .cr { fill: var(--sa-ice); }
.ship-art.fam-reefer .cj { stroke: var(--sa-ice); }
.ship-art.fam-reefer .ht { fill: var(--sa-reefer-deck); }
.ship-art.fam-barge .hu { fill: var(--sa-barge); }
.ship-art.fam-yacht .hu { fill: var(--sa-yacht); }
.ship-art.fam-yacht .bt { fill: var(--sa-hull); }
.ship-art.fam-yacht .wi { fill: var(--sa-tint); }
.ship-art.fam-navy .hu { fill: var(--sa-navy-hull); }
.ship-art.fam-navy .su { fill: var(--sa-navy-super); }
.ship-art.fam-navy .bt, .ship-art.fam-navy .fu { fill: var(--sa-navy-dark); }
.ship-art.fam-navy .wi { fill: var(--sa-tint); }

/* Cancelled: the same picture, still, without colour. */
.ship-art.st-cancelled { filter: grayscale(1); }
.ship-art.st-cancelled .cx { opacity: .55; }

/* ---------- motion (only on screen) ---------- */
.ship-art .a-bob, .ship-art .a-bob2, .ship-art .a-sail, .ship-art .a-moor, .ship-art .a-away { transform-box: fill-box; transform-origin: 50% 100%; }
.ship-art .a-cable { transform-box: fill-box; transform-origin: 50% 0; }
.ship-art.in-view .a-bob { animation: sa-bob 4.6s ease-in-out infinite; }
.ship-art.in-view .a-bob2 { animation: sa-bob 3.8s ease-in-out -1.4s infinite; }
.ship-art.in-view .a-moor { animation: sa-moor 6s ease-in-out infinite; }
.ship-art.in-view .a-sail { animation: sa-sail 5s ease-in-out infinite; }
.ship-art.in-view .a-wave { animation: sa-wave 2.6s linear infinite; }
.ship-art.in-view .a-away { animation: sa-away 9s linear infinite; }
.ship-art.in-view .a-fwd { animation: sa-fwd 10s linear infinite; }
.ship-art.in-view .a-flow { animation: sa-flow 1.5s ease-in-out infinite; }
.ship-art.in-view .a-flow.d1 { animation-delay: .5s; }
.ship-art.in-view .a-flow.d2 { animation-delay: 1s; }
.ship-art.in-view .a-lift { animation: sa-lift 6s ease-in-out infinite; }
.ship-art.in-view .a-cable { animation: sa-cable 6s ease-in-out infinite; }
.ship-art.in-view .a-blink { animation: sa-blink 3s ease-in-out infinite; }
.ship-art.in-view .a-pulse { animation: sa-pulse 2.8s ease-in-out infinite; }

/* Every loop starts and ends on the still picture, so nothing jumps when a
   drawing scrolls in. Distances are in hull units: the ship moves forward
   (its own +x side on, -y from above) whatever way it faces on screen. */
@keyframes sa-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(.8px) rotate(.9deg); } }
@keyframes sa-moor { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.5px); } }
@keyframes sa-sail { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(1.6px, .4px) rotate(-.4deg); } 75% { transform: translate(-1.6px, .4px) rotate(.4deg); } }
@keyframes sa-wave { from { transform: translateX(0); } to { transform: translateX(-11px); } }
@keyframes sa-away { 0% { transform: translateX(0); opacity: 1; } 62% { transform: translateX(14px) scale(.92); opacity: .9; } 80% { transform: translateX(18px) scale(.86); opacity: 0; } 81% { transform: translateX(-7px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes sa-fwd { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-13px); opacity: 1; } 50% { transform: translateY(-16px); opacity: 0; } 51% { transform: translateY(16px); opacity: 0; } 62% { transform: translateY(12px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes sa-flow { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes sa-lift { 0%, 15%, 100% { transform: translateY(0); } 55%, 70% { transform: translateY(-5px); } }
@keyframes sa-cable { 0%, 15%, 100% { transform: scaleY(1); } 55%, 70% { transform: scaleY(.64); } }
@keyframes sa-blink { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes sa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Reduced motion: nothing moves, not even slowly (the global 1 ms rule of
   app.css would make infinite animations flicker). */
@media (prefers-reduced-motion: reduce) {
  .ship-art, .ship-art * { animation: none !important; }
}