/* ============================================================
   CLASSY — Splash "Needle Drop"
   Liegt als eigene Datei im <head>, blockiert also den ersten
   Paint und blitzt nicht auf. Der Ablauf steht in splash.js.

   Sicherung: Läuft splash.js aus irgendeinem Grund nicht, nimmt
   sich der Splash nach 7 Sekunden per CSS selbst weg.
   ============================================================ */
.splash {
  --disc: min(66vmin, 34rem);
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  place-items: center;
  overflow: hidden;
  background: var(--rust);
  color: var(--paper);
  -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent var(--iris, 0px), #000 calc(var(--iris, 0px) + 1px));
          mask-image: radial-gradient(circle at 50% 44%, transparent var(--iris, 0px), #000 calc(var(--iris, 0px) + 1px));
  animation: splash-failsafe .01s 7s forwards;
}
.splash-on .splash { display: grid; }
.splash-on { overflow: hidden; }
@keyframes splash-failsafe { to { visibility: hidden; } }

.splash__top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: env(safe-area-inset-top) var(--gutter) 0;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.splash__skip {
  min-height: 2.75rem;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.splash__deck {
  position: absolute;
  left: 50%;
  top: 44%;
  width: var(--disc);
  height: var(--disc);
  margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2);
}
.splash__disc { position: absolute; inset: 0; }
.splash__disc > svg { width: 100%; height: 100%; }
.splash__label { position: absolute; inset: 29%; width: 42%; height: 42%; }
/* Deckt beim Flug ins Label die Wortmarke ab, damit Rust stehen bleibt */
.splash__fill { position: absolute; inset: 29%; border-radius: 50%; background: var(--rust); opacity: 0; }

.splash__disc .paper { fill: var(--paper); }
.splash__disc .ink { fill: var(--ink); }
.splash__disc .groove-lines { fill: none; stroke: var(--paper); stroke-width: .08; opacity: .34; }
.splash__disc .shine { fill: none; stroke: var(--paper); stroke-width: .6; stroke-linecap: round; opacity: .32; }

.splash__arm path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.splash__arm .line-out { stroke: var(--ink); stroke-width: 7; }
.splash__arm .line-in { stroke: var(--paper); stroke-width: 3.2; }
.splash__arm .part { fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; }
.splash__arm .pin { fill: var(--gold); stroke: var(--ink); stroke-width: 2; }

.splash__arm {
  position: absolute;
  z-index: 2;
  left: 73%;
  top: -13%;
  width: 36%;
  height: auto;
  transform-origin: 70% 8.33%;
  transform: rotate(-30deg);
}

.splash__claim {
  position: absolute;
  left: 0; right: 0;
  top: calc(44% + var(--disc) / 2 + .6rem);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.1;
}

.splash__fig {
  position: absolute;
  z-index: 2;
  bottom: -1%;
  width: min(30vw, 44vh);
  aspect-ratio: 660 / 730;
  transform: translateY(110%);
}
.splash__fig--miss   { left: max(3vw, calc(50% - var(--disc) * 1.2)); }
.splash__fig--mister { right: max(3vw, calc(50% - var(--disc) * 1.2)); }

@media (max-width: 720px) {
  .splash { --disc: min(78vw, 44vh); }
  .splash__fig { width: 44vw; bottom: -2%; }
  .splash__fig--miss { left: 2vw; }
  .splash__fig--mister { right: 2vw; }
}
@media (max-height: 560px) {
  .splash__fig, .splash__claim { display: none; }
  .splash { --disc: 72vh; }
}
@media (prefers-reduced-motion: reduce) { .splash { display: none !important; } }