/* ==========================================================================
   KLINGE — 02-fx.css · Bühnenbild-Ebene (V2 „Der Laden bei Nacht")
   Primitive für Überformat-Typografie, Enthüllungen, Barbierstange, Zeiger.
   Sektionsdateien benutzen diese Klassen, überschreiben sie nicht.
   ========================================================================== */

:root {
  --fs-colossal: clamp(4rem, 21vw, 21rem);
  --fs-giant:    clamp(3.4rem, 12vw, 13rem);
  --c-neon:      #FF4A2E;                     /* Leuchtreklame — nur für Glühen */
  --glow-signal: 0 0 0 1px rgba(196, 64, 44, 0.35), 0 0 32px -4px rgba(255, 74, 46, 0.45);
  --e-blade:     cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---- Überformat-Typografie ---------------------------------------------- */
.type-mega {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-colossal);
  line-height: 0.78;
  letter-spacing: -0.008em;
  color: var(--t-strong);
}
.type-giant {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-giant);
  line-height: 0.82;
  letter-spacing: -0.004em;
}
/* Konturschrift — trägt Tiefe, ohne Fläche zu kosten */
.type-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}
.type-outline--signal { -webkit-text-stroke-color: var(--c-signal); }

/* Schrift über Bild: invertiert sich selbst, sobald sich der Untergrund ändert */
.blend-diff { mix-blend-mode: difference; color: var(--c-chalk); }
.blend-exc  { mix-blend-mode: exclusion;  color: var(--c-chalk); }
@supports not (mix-blend-mode: difference) {
  .blend-diff, .blend-exc { mix-blend-mode: normal; }
}

/* ---- Barbierstange ------------------------------------------------------- */
/* Reine CSS-Streifen in einem Zylinder: transform statt background-position,
   damit die GPU die Arbeit macht. */
.pole {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--c-steel);
  box-shadow: inset 0 0 0 1px var(--line), inset -6px 0 14px -8px rgba(0,0,0,.9),
              inset 6px 0 14px -8px rgba(255,255,255,.10);
}
.pole::before {
  content: '';
  position: absolute;
  inset: -60% -10%;
  background: repeating-linear-gradient(
    -50deg,
    var(--c-signal) 0 10px,
    #E8E4DC 10px 20px,
    var(--c-steel-lift) 20px 30px,
    #E8E4DC 30px 40px
  );
  animation: pole-turn 3.4s linear infinite;
  will-change: transform;
}
.pole::after {                                  /* Glaszylinder-Lichtkante */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 28%,
    rgba(255,255,255,.22) 46%, rgba(0,0,0,0) 64%, rgba(0,0,0,.55) 100%);
  border-radius: inherit;
}
@keyframes pole-turn { to { transform: translate3d(0, 40px, 0); } }

/* ---- Enthüllungen -------------------------------------------------------- */
/* .wipe an ein Element mit data-reveal: statt Weichzeichnen fährt eine Kante durch.
   WICHTIG: clip-path verkleinert auch das, was der IntersectionObserver als
   Überschneidung meldet. Deshalb arbeitet js/main.js mit Schwelle 0 — mit der
   früheren Schwelle von 8 % wurden diese Elemente nie enthüllt (selbst geprüft). */
[data-reveal].wipe {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-epic) var(--e-blade) var(--reveal-delay, 0ms);
}
[data-reveal].wipe.is-in { clip-path: inset(0 0 0 0); }

[data-reveal].wipe--diag {
  clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%);
  transition: clip-path 1150ms var(--e-blade) var(--reveal-delay, 0ms);
}
[data-reveal].wipe--diag.is-in { clip-path: polygon(0 0, 130% 0, 110% 100%, 0 100%); }

[data-reveal].wipe--up {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--d-epic) var(--e-blade) var(--reveal-delay, 0ms);
}
[data-reveal].wipe--up.is-in { clip-path: inset(0 0 0 0); }

/* ---- Massive Farbblöcke -------------------------------------------------- */
.slab {
  position: relative;
  background: var(--c-steel);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line), var(--edge);
}
.slab--signal {
  background: var(--c-signal);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22);
}
.slab--chalk { background: var(--c-chalk); color: var(--c-coal); }

/* ---- Struktur: feines Raster im Hintergrund ------------------------------ */
.grid-lines { position: relative; }
.grid-lines::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    var(--line-soft) 0 1px, transparent 1px var(--grid-step, 12.5%));
  opacity: 0.9;
}

/* ---- Senkrechte Randbeschriftung ---------------------------------------- */
.rail {
  position: absolute;
  left: max(0.75rem, calc(var(--gutter) * 0.28));
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-soft);
  display: none;
  pointer-events: none;
}
.rail__num {
  position: absolute;
  top: var(--rail-top, 8rem);
  left: 50%;
  transform: translate3d(-50%, 0, 0) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--t-faint);
  background: var(--c-coal);
  padding: 0.35rem 0.6rem;
}
.on-light .rail__num { background: var(--c-chalk); }
@media (min-width: 1200px) { .rail { display: block; } }

/* ---- Zeiger -------------------------------------------------------------- */
/* Wird nur von js/fx.js eingehängt (feiner Zeiger, keine Reduktion gewünscht). */
.fx-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0;
  transition: opacity var(--d-fast) var(--e-sleek);
  mix-blend-mode: difference;
}
.fx-cursor__ring {
  position: absolute; inset: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: scale(0.42);
  transition: transform var(--d-base) var(--e-expo), border-color var(--d-base) var(--e-sleek);
}
.fx-cursor__dot {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--d-base) var(--e-expo);
}
html.fx-on .fx-cursor { opacity: 1; }
html.fx-hot .fx-cursor__ring { transform: scale(1); }
html.fx-hot .fx-cursor__dot  { transform: scale(0); }
html.fx-press .fx-cursor__ring { transform: scale(0.72); }
/* Systemzeiger bleibt sichtbar — der eigene Zeiger ist Zugabe, kein Ersatz. */

/* ---- Magnetische Schaltflächen ------------------------------------------ */
.mag { will-change: transform; }

/* ---- Geschwindigkeitsband ------------------------------------------------ */
[data-vel-marquee] { overflow: hidden; display: flex; }
[data-vel-marquee] > * { flex: none; will-change: transform; }

/* ---- Kantenlicht --------------------------------------------------------- */
.edge-light { position: relative; }
.edge-light::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(242,239,233,.10), inset 0 0 0 1px var(--line);
}
.glow-signal { box-shadow: var(--glow-signal); }

/* ---- Diagonale Sektionskante -------------------------------------------- */
.cut-top    { clip-path: polygon(0 2.4vw, 100% 0, 100% 100%, 0 100%); }
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.4vw), 0 100%); }
@media (max-width: 767px) { .cut-top, .cut-bottom { clip-path: none; } }

/* ---- Rücksicht ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pole::before { animation: none; }
  [data-reveal].wipe, [data-reveal].wipe--diag, [data-reveal].wipe--up { clip-path: none; }
  .fx-cursor { display: none; }
}
@media (hover: none) {
  .fx-cursor { display: none; }
}