/* The loader's picture: the yacht at night, Limassol behind her (round 8, F; live since 20 Oct), on the desk,
   /visit and the old 3D page (splash.js lights her decks one by one). Its own file: style.css is past its ceiling. */
.splash-art.y8 { width: 300px; height: 141px; margin-bottom: 8px; overflow: visible; }
/* The old splash's glow is a faint flat disc (style.css .sp-glow, opacity 0.05): hers is a gradient, at full strength. */
.y8 .sp-glow { fill: url(#y8-glow); opacity: 1; }
.y8 .sp-moon { fill: #f2ecd8; } .y8 .sp-star { fill: #fff; opacity: 0.8; }
.y8 .sp-ridge { fill: #18212e; } .y8 .sp-ridge2 { fill: #1c2735; }
.y8 .sp-town { fill: #141b25; } .y8 .sp-tower { fill: #161e29; }
.y8 .sp-city { fill: #ffcf7a; opacity: 0.85; } .y8 .sp-front { fill: #ffd98f; opacity: 0.9; }
.y8 .sp-sea { fill: url(#y8-sea); }
.y8 .sp-shimmer { fill: none; stroke: #ffd47a; stroke-opacity: 0.32; stroke-width: 0.8; stroke-linecap: round; }
.y8 .sp-glint { fill: none; stroke: #ffcf7a; stroke-opacity: 0.22; stroke-width: 0.7; stroke-linecap: round; }
.y8 .sp-hull { fill: #1c2b46; } .y8 .sp-stripe { fill: none; stroke: #c9a227; stroke-width: 0.9; }
.y8 .sp-house { fill: #8f897d; } .y8 .sp-plate { fill: #a69f92; }
.y8 .sp-rail { fill: none; stroke: #b9c7d4; stroke-opacity: 0.35; stroke-width: 0.6; }
.y8 .sp-arch { fill: none; stroke: #a69f92; stroke-width: 1.6; stroke-linecap: round; }
.y8 .sp-mast { fill: none; stroke: #a69f92; stroke-width: 0.6; }
.y8 .sp-dome { fill: #b7b0a3; } .y8 .sp-pennant { fill: #c9a227; }
.y8 .sp-win { fill: #1a1d22; }
.y8 .sp-masthead { fill: #ffffff; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .y8 .sp-win { animation: sp-light 2.4s ease-in-out infinite; }
  .y8 .sp-win.f1 { animation-delay: 0s; } .y8 .sp-win.f2 { animation-delay: 0.25s; } .y8 .sp-win.f3 { animation-delay: 0.5s; }
  .y8 .sp-win.f4 { animation-delay: 0.75s; } .y8 .sp-win.f5 { animation-delay: 1s; }
  .y8 .sp-city:nth-child(3n) { animation: lamp 3.4s ease-in-out infinite; } .y8 .sp-city:nth-child(5n) { animation: lamp 2.6s ease-in-out 1.2s infinite; }
  .y8 .sp-star { animation: lamp 3.2s ease-in-out infinite; } .y8 .sp-star:nth-child(2n) { animation-delay: 1.4s; }
  .y8 .sp-shimmer, .y8 .sp-glint { animation: lamp 2.8s ease-in-out infinite; }
  .y8 .sp-masthead { animation: lamp 1.6s ease-in-out infinite; }
}
.splash.lit .y8 .sp-win { animation: none; fill: #ffd47a; }
/* With motion reduced her windows are lit from the start, as the old picture's were (style.css): her own dark fill
   above outranks that rule, so it is said again here. */
@media (prefers-reduced-motion: reduce) { .y8 .sp-win { fill: #ffd47a; } }

/* By day (Chris, 24 Oct: the light loader read as a dark smudge on white): on a light screen the same picture is her at noon.
   A soft sky and a pale sea that melt into the page at their edges, the sun, hazy hills, white decks with dark glass. Night
   keeps everything above, so these are shown only here. */
.y8 .sp-sky, .y8 .sp-sun, .y8 .sp-clouds { display: none; }
@media (prefers-color-scheme: light) {
  .y8 .sp-sky, .y8 .sp-sun, .y8 .sp-clouds { display: inline; }
  .y8 .sp-sun { fill: #ffd98f; filter: drop-shadow(0 0 4px rgba(255, 207, 122, 0.9)); }
  .y8 .sp-clouds ellipse { fill: #fff; opacity: 0.85; }
  .y8 .sp-glow, .y8 .sp-moon, .y8 .sp-star, .y8 .sp-haze, .y8 .sp-front, .y8 .sp-city, .y8 .sp-glint { display: none; }
  .y8 .sp-ridge { fill: #a9bfb3; } .y8 .sp-ridge2 { fill: #bccfc2; }
  .y8 .sp-town { fill: #dcd5c8; } .y8 .sp-tower { fill: #cfc7b8; }
  .y8 .sp-sea { fill: url(#y8-sea-day); }
  .y8 .sp-shimmer { stroke: #fff; stroke-opacity: 0.55; animation: none; }
  .y8 .sp-house { fill: #f6f3ec; } .y8 .sp-plate { fill: #dcd5c8; } .y8 .sp-dome { fill: #fff; }
  .y8 .sp-rail { stroke: #7f8d9b; stroke-opacity: 0.6; } .y8 .sp-arch, .y8 .sp-mast { stroke: #b9b1a1; }
  .y8 .sp-masthead { fill: #fff; animation: none; }
  /* Her glass is dark by day; no lamps to light deck by deck. */
  .y8 .sp-win, .splash.lit .y8 .sp-win { fill: #35506b; animation: none; }
}

/* Held still while it is up, on the desk and /visit (Chris, 5 Nov, iPad: "I can even scroll the loading screen"): the page under it neither
   scrolls nor bounces, and a finger on it pans nothing (splash.js also refuses the drag itself). It reaches the screen's foot in the iPad's
   Home Screen app whatever its viewport says at that moment (keyboard.js --app-h). */
html.splash-up, html.splash-up body { overflow: hidden; overscroll-behavior: none; }
.splash, .splash * { touch-action: none; }
.splash { bottom: auto; height: var(--app-h, 100%); overscroll-behavior: none; }