/* =====================================================================
   Quiznight 2 · DIE MARKE — der allgemeine Ladeschirm (laden/marke.js). Clean: die Wortmarke, die Farben und Formen der Marke,
   keine Figur. DIE TAFEL: ihr Grund in den Farben der Marke, ein atmendes Licht hinter der Mitte, darüber zwei Scheinwerfer, die
   sich hinter der Wortmarke kreuzen. DARAUF: die Wortmarke mit ihrem Licht und der Strich, der sich mit dem echten Laden füllt.
   VORN UND HINTEN das Band der Marke (der Verlauf der Wortmarke: Pink → Violett → Indigo). Bewegt wird nur transform und opacity.
   Die Decke VOR der ersten Malung steht inline im Kopf von spiel.html (html.lm-zu) — dieselbe Fläche wie .lm-grund.
   Beschreibung, Zeiten, Filme: design/handy/laden/LADEN.md.
   ===================================================================== */
.lm {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 2147482000;
  overflow: hidden; isolation: isolate; container-type: size;
  /* Die Tafel fängt Tipps ab: Unter ihr baut der Abend gerade — dort darf niemand blind drücken. */
  pointer-events: auto; cursor: default; touch-action: none;
  contain: layout paint style;
  /* Ein Hauch unter voll deckend: Sonst gilt die Tafel dem Compositor als undurchsichtig, und er rastert nicht, was darunter liegt —
     den Schirm erst in dem Augenblick, in dem die Tafel geht (gemessen: ein Halt von 0,35 s genau am Anfang des Hinausfahrens). */
  opacity: .996;
}
.lm-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- DIE TAFEL ---- */
.lm-tafel { position: absolute; inset: 0; will-change: transform; color: var(--t0); }
/* Der Grund: die Farben der Marke — oben ein Hauch ihrer ersten Farbe, ihr Licht von oben, ihr zweites Licht unten rechts (dieselben
   Lichter wie .qn-buehne::before in qn.css), zum Rand hin dunkler. */
.lm-grund {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 50% 46%, transparent 52%, rgba(0, 0, 0, .34) 100%),
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%),
    radial-gradient(90% 70% at 100% 110%, color-mix(in srgb, var(--acc2) 16%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 18%, var(--g3)) 0%, color-mix(in srgb, var(--acc) 7%, var(--g2)) 50%, var(--g1) 100%);
}
/* Das Licht hinter der Mitte atmet — im Halteteil eines der Zeichen, dass es weitergeht (kein Kreisel). */
.lm-licht {
  position: absolute; left: 12%; top: 6%; width: 76%; height: 88%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 34%, transparent), color-mix(in srgb, var(--acc) 10%, transparent) 58%, transparent);
  animation: lm-atmen 3.4s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform, opacity;
}
.lm[data-form="hoch"] .lm-licht { left: -14%; width: 128%; top: 4%; height: 80%; }
@keyframes lm-atmen { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

/* DAS LICHT DER MARKE: zwei Scheinwerfer von oben (rosig-golden wie auf der Bühne der Startseite), die sich hinter der Wortmarke
   kreuzen. Weiche Kanten über eine Maske, kein Filter. Im Halteteil wiegen sie sich langsam — ruhig, nie im Gleichschritt. Beim
   App-Start gehen sie auf (aus der Decke, die vor ihnen stand): als Licht, das angeht, nicht als Ding. */
.lm-kegel {
  position: absolute; top: -8%; width: 30%; height: 122%; transform-origin: 50% 0; pointer-events: none; will-change: transform;
  background: linear-gradient(180deg, rgba(255, 226, 240, .17), rgba(255, 170, 210, .07) 52%, rgba(255, 198, 90, 0) 88%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent); mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
}
.lm-kegel.lm-l { left: 8%; transform: rotate(-21deg); animation: lm-wiegen-l 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.lm-kegel.lm-r { right: 8%; transform: rotate(21deg); animation: lm-wiegen-r 8.2s cubic-bezier(.45, 0, .55, 1) -2.4s infinite; }
@keyframes lm-wiegen-l { 0%, 100% { transform: rotate(-21deg); } 50% { transform: rotate(-17deg); } }
@keyframes lm-wiegen-r { 0%, 100% { transform: rotate(21deg); } 50% { transform: rotate(16.5deg); } }
.lm[data-form="hoch"] .lm-kegel { width: 52%; top: -6%; height: 96%; }
.lm[data-form="hoch"] .lm-kegel.lm-l { left: -6%; }
.lm[data-form="hoch"] .lm-kegel.lm-r { right: -6%; }
.lm[data-art="start"] .lm-kegel.lm-l { animation: lm-wiegen-l 7s cubic-bezier(.45, 0, .55, 1) infinite, lm-licht-an 900ms cubic-bezier(.4, 0, .2, 1) 1 both; }
.lm[data-art="start"] .lm-kegel.lm-r { animation: lm-wiegen-r 8.2s cubic-bezier(.45, 0, .55, 1) -2.4s infinite, lm-licht-an 900ms cubic-bezier(.4, 0, .2, 1) 140ms 1 both; }
@keyframes lm-licht-an { from { opacity: 0; } to { opacity: 1; } }

/* ---- DAS BAND DER MARKE: führt die Tafel herein (vorn) und hinaus (hinten) ---- */
.lm-band {
  position: absolute; top: 0; bottom: 0; width: max(8px, 1.3cqw); will-change: transform;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .6) 46%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, #e879f9 0%, #a855f7 52%, #6366f1 100%);
}
.lm-vorn { left: 100%; transform-origin: 0 50%; box-shadow: 0 0 2.2cqw .3cqw rgba(168, 85, 247, .55), 1.4cqw 0 4cqw 1cqw rgba(0, 0, 0, .42); }
.lm-hinten { right: 100%; transform-origin: 100% 50%; box-shadow: 0 0 2.2cqw .3cqw rgba(168, 85, 247, .55), -1.4cqw 0 4cqw 1cqw rgba(0, 0, 0, .42); }

/* ---- DAS SCHILD: die Wortmarke · (bei „Verbindung" die Zeile) · der Strich ---- */
.lm-schild {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2cqh; text-align: center; padding: 0 6% 1cqh; will-change: transform;
}
.lm-marke { position: relative; display: inline-block; font-size: 11cqh; line-height: 1; }
.lm-marke .qn-wortmarke { display: block; font-size: 1em; letter-spacing: .01em; filter: drop-shadow(0 .3cqh .7cqh rgba(0, 0, 0, .45)); }
/* DAS LICHT IN DER WORTMARKE: ein Fenster (34 % der Breite, weiche Ränder) wandert hindurch, darin dieselbe Schrift in Weiß, die
   gegenläufig fährt und so still steht — zwei Transformationen, kein bewegter Verlauf. */
.lm-glanz {
  position: absolute; top: 0; bottom: 0; left: 0; width: 34%; overflow: hidden; pointer-events: none; will-change: transform;
  transform: translateX(-100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  animation: lm-glanz-f 2.6s cubic-bezier(.45, 0, .35, 1) .45s infinite;
}
.lm-glanz > span {
  position: absolute; left: 0; top: 0; width: calc(100% / .34); will-change: transform;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: 1; white-space: nowrap;
  color: #fff; opacity: .9; text-shadow: 0 0 1.2cqh rgba(255, 255, 255, .7);
  transform: translateX(34%);
  animation: lm-glanz-t 2.6s cubic-bezier(.45, 0, .35, 1) .45s infinite;
}
@keyframes lm-glanz-f { 0% { transform: translateX(-100%); } 38%, 100% { transform: translateX(294.12%); } }
@keyframes lm-glanz-t { 0% { transform: translateX(34%); } 38%, 100% { transform: translateX(-100%); } }
.lm-zeile {
  font-family: var(--f-display); font-weight: 800; font-size: 2.6cqh; line-height: 1;
  letter-spacing: .14em; padding-left: .14em; text-transform: uppercase; color: var(--t1);
}
/* DER STRICH: sein Füllstand ist das echte Laden (marke.js, „stand"). Voll heißt: Es geht los. Solange er wartet, läuft ein
   Schimmer darüber — versetzt zum Licht der Wortmarke. */
.lm-strich {
  position: relative; display: block; width: 24cqw; height: max(5px, 1cqh); margin-top: 2.4cqh; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--t0) 13%, transparent);
}
.lm-fuell {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); will-change: transform;
  background: linear-gradient(90deg, #e879f9, #a855f7 55%, #6366f1);
  transition: transform 420ms cubic-bezier(.3, .7, .25, 1);
}
.lm-strich::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; will-change: transform;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%); animation: lm-schimmer 2.6s cubic-bezier(.45, 0, .35, 1) 1.75s infinite;
}
@keyframes lm-schimmer { 0% { transform: translateX(-100%); } 42%, 100% { transform: translateX(357%); } }
.lm.lm-voll .lm-strich::after { animation: none; opacity: 0; }

/* Hochkant (ein schmales Fenster): dieselbe Ordnung, nach der Breite bemessen. */
.lm[data-form="hoch"] .lm-schild { gap: 3cqw; padding: 0 6% 2cqw; }
.lm[data-form="hoch"] .lm-marke { font-size: 13cqw; }
.lm[data-form="hoch"] .lm-zeile { font-size: 3.2cqw; }
.lm[data-form="hoch"] .lm-strich { width: 54cqw; height: max(4px, 1.3cqw); margin-top: 2cqw; }

/* DIE RUHIGE FASSUNG (prefers-reduced-motion): dieselbe Tafel blendet über, kein Licht läuft, der Strich füllt sich ohne Fahrt. */
.lm[data-still] :is(.lm-licht, .lm-kegel, .lm-glanz, .lm-glanz > span), .lm[data-still] .lm-strich::after { animation: none; }
.lm[data-still] .lm-glanz { display: none; }
.lm[data-still] .lm-fuell { transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .lm :is(.lm-licht, .lm-kegel, .lm-glanz, .lm-glanz > span), .lm .lm-strich::after { animation: none; }
  .lm .lm-glanz { display: none; }
}