/* =========================================================================
 * mangodill.app — Effekte aus dem Effects Lab (~/Projects/effects-lab, Stand f559578)
 * Nur was die Seite braucht: der Easing-Token, das Reduced-Motion-Sicherheitsnetz
 * aus src/core/01-base.css, die gemeinsamen hairline-Regeln aus
 * src/effects/hairline.css und der count-up-Teil aus src/effects/count.css.
 * Die Marken-Palette der beiden Figuren steht in styles.css (Block FIGUREN), weil
 * diese Datei nach styles.css geladen wird und gleich spezifische Regeln hier die
 * Site-Werte sonst stillschweigend ueberschrieben haetten.
 * ========================================================================= */

:root { --fx-ease-out: var(--ease-out); }

/* ------------------------------------------- Reduced Motion, Sicherheitsnetz */
/* Zwei Schalter, beide muessen greifen: die OS-Einstellung und der manuelle
   Schalter FX.setReducedMotion (setzt data-fx-reduced auf <html>). */
@media (prefers-reduced-motion: reduce) {
  [data-fx] *,
  [data-fx] { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  [data-fx][data-fx-ready] { opacity: 1 !important; }
}
:root[data-fx-reduced] [data-fx],
:root[data-fx-reduced] [data-fx] * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
:root[data-fx-reduced] [data-fx][data-fx-ready] { opacity: 1 !important; }

/* ------------------------------------------------------------- hairline */
/* Der Host paint die Platte, bevor eine Zeile JavaScript laeuft; die Figur
   (hairline.js, nachgeladen) blendet sich darauf ein, die Linierung aus. */

/* Plattenbreite: styles.css setzt --fx-hairline-w am Host auf 100 %; faellt sie
   weg, greift der 320-px-Fallback an .fx-hairline-plate. */
[data-fx~="hairline-kitchen"],
[data-fx~="hairline-schublade"] { display: block; }

/* Rahmen- und Linierungsfarbe: mittlerer Strich, fast ganz zur Platte zurueckgezogen. */
.fx-hairline-plate {
  --fx-hairline-rule: color-mix(in srgb, var(--hairline-mid) 46%, var(--hairline-plate));
}

/* Aussenschale: Platte, Haarlinien-Rahmen. */
.fx-hairline-plate {
  position: relative;
  box-sizing: border-box;
  width: var(--fx-hairline-w, 320px);
  max-width: 100%;
  margin-inline: auto;
  padding: 11px 11px 9px;
  border: 1px solid var(--fx-hairline-rule);
  border-radius: 20px;
  background: var(--hairline-plate);
  box-shadow: var(--fx-hairline-elev, none);
}

/* Innenkern: das Element, das hairline bekommt. 5:4 vorab reserviert. */
.fx-hairline-figure {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-hairline-rule) 62%, transparent);
}

/* Ruhebild: isometrische Linierung, zu den Raendern ausgeblendet. */
.fx-hairline-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(30deg, var(--fx-hairline-rule) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-30deg, var(--fx-hairline-rule) 0 1px, transparent 1px 20px);
  -webkit-mask-image: radial-gradient(74% 64% at 50% 58%, #000 0%, transparent 76%);
          mask-image: radial-gradient(74% 64% at 50% 58%, #000 0%, transparent 76%);
  opacity: 0.85;
  transition: opacity 420ms var(--fx-ease-out);
}

/* Das svg von hairline blendet sich mit der Linierung ueber. */
.fx-hairline-figure > svg {
  opacity: 0;
  transition: opacity 420ms var(--fx-ease-out);
}
.fx-hairline-plate[data-state="live"] .fx-hairline-figure > svg { opacity: 1; }
.fx-hairline-plate[data-state="live"] .fx-hairline-figure::before { opacity: 0; }

/* Read-out: hairlines eigene Bildunterschrift. Auf dieser Seite per
   data-fx-caption="false" ausgeblendet; die Live-Region darunter bleibt. */
.fx-hairline-read {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 2px 1px;
  font: 500 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  color: var(--fx-hairline-dim);
  font-variant-numeric: tabular-nums;
}
.fx-hairline-read::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fx-hairline-accent);
}
.fx-hairline-plate[data-state="rest"] .fx-hairline-read { opacity: 0.68; }
.fx-hairline-plate[data-caption="off"] .fx-hairline-read { display: none; }

/* Angesagt, nie gesehen. */
.fx-hairline-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reduced Motion: die Figur wird gebaut und steht fertig in Ruhelage
   (Site-Entscheidung, siehe scripts/fx-src/hairline-effekt.js). Kein
   Ueberblenden, und pointer-events: none kappt das Zeiger-Folgen der Figur,
   denn hairline haengt seine Pointer-Listener am Figur-Element. */
@media (prefers-reduced-motion: reduce) {
  .fx-hairline-figure::before,
  .fx-hairline-figure > svg { transition: none; }
  .fx-hairline-figure > svg { opacity: 1; }
  .fx-hairline-figure { pointer-events: none; }
}
:root[data-fx-reduced] .fx-hairline-figure::before,
:root[data-fx-reduced] .fx-hairline-figure > svg { transition: none; }
:root[data-fx-reduced] .fx-hairline-figure > svg { opacity: 1; }
:root[data-fx-reduced] .fx-hairline-figure { pointer-events: none; }

/* ------------------------------------------------------------- count-up */
/* Eine Zahl darf beim Zaehlen das Layout nie bewegen: tabular-nums fixiert die
   Ziffernbreite, inline-block laesst die von JS reservierte Mindestbreite greifen. */
.fx-count-num {
  display: inline-block;
  text-align: end; /* die Luecke beim Hochzaehlen liegt am Zeilenanfang, nicht vor dem Wort */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}