/* Übergangszeiten = ursprünglicher Wert / 8,75 (SPEED in loader.js) */
/* Preloader 00 → 100 (Developer Brief, Abschnitt 1). Fünf Varianten, gewählt über body[data-loader]:
   curves (Referenz aus dem Brief) · donprod · spasoje · baratta · yzavoku (Referenzen von Amos). */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--ink); overflow: hidden; }
html.no-loader .loader { display: none; }
.loader.is-done { pointer-events: none; }
/* Notbremse: falls JS nicht läuft, verschwindet der Vorhang nach 8 s */
@keyframes ld-fallback { to { opacity: 0; visibility: hidden; } }
.loader { animation: ld-fallback 400ms ease 8s forwards; }
html.is-ready .loader, .loader.is-done { animation: none; }

.ld-mono { font-family: var(--font-2); font-variant-numeric: tabular-nums; }
.ld-corner { position: absolute; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; }

/* ---- curves: Zahl in der Mitte, dann weicher Fade ---- */
.loader[data-v="curves"] { display: grid; place-items: center; transition: opacity 80ms ease; }
.loader[data-v="curves"] .ld-num { font-size: 0.9375rem; letter-spacing: 0.04em; }
.loader[data-v="curves"].is-done { opacity: 0; }

/* ---- donprod: schwarz, kleines weisses Zählfeld, dann Bildgewitter ---- */
.loader[data-v="donprod"] { background: #000; color: #fff; transition: opacity 57ms ease; }
.loader[data-v="donprod"] .ld-flash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); }
.loader[data-v="donprod"] .ld-flash.is-on { opacity: 1; }
.loader[data-v="donprod"] .ld-flash.is-last { transform: none; transition: transform 57ms ease; }
.loader[data-v="donprod"] .ld-box { position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; background: #fff; color: #000; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; will-change: transform; }
.loader[data-v="donprod"] .ld-corner { color: rgba(255, 255, 255, 0.85); mix-blend-mode: difference; }
.loader[data-v="donprod"] .ld-tl { left: var(--gutter); top: var(--s5); }
.loader[data-v="donprod"] .ld-tc { left: 50%; top: var(--s5); transform: translateX(-50%); }
.loader[data-v="donprod"] .ld-tr { right: var(--gutter); top: var(--s5); }
.loader[data-v="donprod"] .ld-bl { left: var(--gutter); bottom: var(--s5); }
.loader[data-v="donprod"] .ld-br { right: var(--gutter); bottom: var(--s5); }
.loader[data-v="donprod"].is-done { opacity: 0; }

/* ---- spasoje: helles Grau, Punktmatrix-Zähler oben rechts, Vorhang fährt nach oben weg ---- */
.loader[data-v="spasoje"] { background: #f3f3f3; color: #1a1a1a; transition: transform 91ms cubic-bezier(0.7, 0, 0.2, 1); }
.loader[data-v="spasoje"] .ld-tag { left: var(--gutter); top: var(--s6); color: #ff4a1c; }
.loader[data-v="spasoje"] .ld-matrix { position: absolute; right: var(--gutter); top: var(--s6); display: flex; gap: clamp(0.4rem, 1.2vw, 1rem); }
.loader[data-v="spasoje"] .ld-glyph { display: grid; grid-template-columns: repeat(5, var(--d)); grid-auto-rows: var(--d); gap: calc(var(--d) * 0.45); --d: clamp(0.5rem, 1.5vw, 1.1rem); }
.loader[data-v="spasoje"] .ld-glyph i { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: rgba(26, 26, 26, 0.08); transition: background-color 9ms linear; }
.loader[data-v="spasoje"] .ld-glyph i.on { background: #1a1a1a; }
.loader[data-v="spasoje"] .ld-arrow { position: absolute; left: var(--gutter); bottom: var(--s6); }
.loader[data-v="spasoje"] .ld-arrow .ld-glyph { --d: 0.4rem; }
.loader[data-v="spasoje"] .ld-sub { right: var(--gutter); top: calc(var(--s6) + 9 * clamp(0.5rem, 1.5vw, 1.1rem)); color: #6b6b6b; }
.loader[data-v="spasoje"].is-done { transform: translateY(-100%); }

/* ---- baratta: weiss, kleine Prozentzahl unten, grosse Wortmarke steigt von unten auf ---- */
.loader[data-v="baratta"] { background: #fff; color: #111; transition: opacity 69ms ease 23ms; }
.loader[data-v="baratta"] .ld-pct { position: absolute; left: 50%; bottom: var(--s6); transform: translateX(-50%); font-size: 0.75rem; letter-spacing: 0.08em; }
.loader[data-v="baratta"] .ld-clip { position: absolute; left: 0; right: 0; bottom: 0; height: 60vh; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.loader[data-v="baratta"] .ld-word { font-family: var(--font-1); font-size: clamp(5rem, 24vw, 22rem); line-height: 0.85; letter-spacing: -0.03em; font-weight: 600; transform: translateY(102%); will-change: transform; padding-bottom: 0.02em; }
.loader[data-v="baratta"].is-done .ld-word { transform: translateY(-140%) !important; transition: transform 103ms cubic-bezier(0.7, 0, 0.2, 1); }
.loader[data-v="baratta"].is-done .ld-pct { opacity: 0; transition: opacity 23ms ease; }
.loader[data-v="baratta"].is-done { opacity: 0; }

/* ---- yzavoku: schwarz, Bildkreis wächst um die Marke ---- */
.loader[data-v="yzavoku"] { background: #000; color: #fff; display: grid; place-items: center; transition: opacity 400ms ease 171ms; }
.loader[data-v="yzavoku"] .ld-center { position: relative; z-index: 2; text-align: center; display: grid; gap: var(--s2); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; }
.loader[data-v="yzavoku"] .ld-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --r: 0px; animation: ld-spin 40s linear infinite; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
.loader[data-v="yzavoku"] .ld-thumb { position: absolute; left: -1.375rem; top: -1.375rem; width: 2.75rem; height: 2.75rem; max-width: none; object-fit: cover; opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) scale(0.4); transition: transform 286ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 171ms ease; }
.loader[data-v="yzavoku"] .ld-thumb.on { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)) scale(1); }
.loader[data-v="yzavoku"].is-done .ld-ring { transition: transform 103ms cubic-bezier(0.7, 0, 0.2, 1), opacity 69ms ease; transform: scale(2.6); opacity: 0; animation: none; }
.loader[data-v="yzavoku"].is-done .ld-center { opacity: 0; transition: opacity 171ms ease; }
.loader[data-v="yzavoku"].is-done { opacity: 0; }
.loader[data-v="yzavoku"] .ld-corner { color: rgba(255, 255, 255, 0.6); }
.loader[data-v="yzavoku"] .ld-bl { left: var(--gutter); bottom: var(--s5); }
.loader[data-v="yzavoku"] .ld-br { right: var(--gutter); bottom: var(--s5); text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .loader, .loader * { transition-duration: 1ms !important; animation: none !important; }
}