/* =========================================================================
   ink.css — Die Bildsprache: "Radierung statt Leuchten"
   -------------------------------------------------------------------------
   Die alte Optik bestand aus Glow (box-shadow 0 0 30px, filter: blur()).
   Das ist Fantasy-Standard. Tattoo ist Linie, nicht Leuchten.

   Ein einziges Motiv, mehrfach variiert: eine Linie, die gezogen wird.
   Nadel im Hero, Rahmen um jede Karte, Motive in der Galerie, Zeitstrahl
   im Ablauf. Deshalb liegt hier auch die Zeichen-Mechanik.
   ========================================================================= */

@layer components {

  /* =======================================================================
     1. Die gezogene Linie
     -----------------------------------------------------------------------
     Jeder <path data-draw> zeichnet sich, sobald er ins Bild kommt.
     Trick: pathLength="1" im SVG normiert JEDE Pfadlaenge auf 1 — dadurch
     braucht kein einziger Pfad eine ausgemessene stroke-dasharray.

     Gesteuert wird das von js/zeichnen.js, NICHT von animation-timeline.
     Der Grund steht dort ausfuehrlich: die reine CSS-Loesung fiel je nach
     Browser, Fensterhoehe und content-visibility unsichtbar aus.

     Sicherheitsnetz: Der ungezeichnete Zustand gilt NUR unter .zeichnen-js,
     und diese Klasse setzt allein das Skript. Ohne JavaScript sind alle
     Linien fertig gezeichnet — eine Dekoration darf nie Inhalt verstecken.
     ======================================================================= */
  .zeichnen-js [data-draw] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  /* Die Transition steht bewusst NUR hier, nicht am Grundzustand: sonst
     animiert bereits das Verstecken mit, und beim Zuruecksetzen ueber den
     Bewegungsschalter liefe alles rueckwaerts. */
  .zeichnen-js [data-draw].ist-gezeichnet {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--dur-draw) var(--ease-in-out) var(--verzug, 0ms);
  }

  /* =======================================================================
     2. Der Doppelrahmen — das Flash-Blatt
     ======================================================================= */
  .frame {
    position: relative;
    border: var(--border-hair) solid var(--hairline);
    background: var(--surface-raised);
  }
  /* Der zweite, eingerueckte Rahmen. Ersetzt saemtliche Glow-Schatten. */
  .frame::after {
    content: '';
    position: absolute;
    inset: var(--frame-offset);
    border: var(--border-hair) solid var(--hairline-faint);
    pointer-events: none;
    transition: inset var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
  }
  .frame:hover::after,
  .frame:focus-within::after {
    inset: calc(var(--frame-offset) / 2);
    border-color: var(--hairline-strong);
  }

  /* =======================================================================
     3. Dotwork — Schattierung aus Punkten statt aus Weichzeichner
     ======================================================================= */
  .dotwork {
    background-image: radial-gradient(rgb(var(--gold-rgb) / .17) .9px, transparent .9px);
    background-size: 7px 7px;
  }
  .dotwork--dense {
    background-image: radial-gradient(rgb(var(--gold-rgb) / .22) .8px, transparent .8px);
    background-size: 4px 4px;
  }
  /* Verlaufende Schattierung: dicht unten, offen oben — wie echtes Dotwork. */
  .dotwork--fade {
    background-image: radial-gradient(rgb(var(--gold-rgb) / .3) 1px, transparent 1px);
    background-size: 5px 5px;
    mask-image: linear-gradient(to top, #000, transparent 75%);
  }

  /* =======================================================================
     4. Typografie im Stichkatalog-Look
     ======================================================================= */
  .eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--space-4);
  }
  /* Beschriftung mit gezogener Linie davor. */
  .eyebrow--ruled { display: flex; align-items: center; gap: var(--space-4); }
  .eyebrow--ruled::before {
    content: ''; flex: 0 0 2.5rem; height: 1px; background: var(--hairline-strong);
  }

  .display {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
  }

  /* Der Stencil-Effekt: ein versetztes Duplikat in Kupfer dahinter, wie
     eine Vorzeichnung, die unter der fertigen Linie noch durchscheint. */
  .stencil { position: relative; display: inline-block; }
  .stencil::before {
    content: attr(data-text);
    position: absolute;
    inset-block-start: .035em;
    inset-inline-start: .04em;
    color: transparent;
    -webkit-text-stroke: 1px rgb(var(--copper-rgb) / .35);
    z-index: -1;
    pointer-events: none;
  }

  /* Trenner zwischen Abschnitten: eine Linie mit einer Raute in der Mitte. */
  .rule {
    display: flex; align-items: center; gap: var(--space-4);
    color: var(--hairline-strong);
    margin-block: var(--space-10);
  }
  .rule::before, .rule::after {
    content: ''; flex: 1; height: 1px; background: currentColor;
  }
  .rule svg { color: var(--gold-700); }

  /* =======================================================================
     5. Schaltflaechen — Kupfer heisst "hier kannst du etwas tun"
     ======================================================================= */
  .btn {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    min-height: 2.75rem;
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    text-decoration: none;
    border: var(--border-hair) solid currentColor;
    color: var(--copper-400);
    background: transparent;
    transition: color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
  }
  .btn:hover { color: var(--gold-100); background: rgb(var(--copper-rgb) / .16); }

  .btn--primary {
    color: var(--ink-900);
    background: var(--copper-500);
    border-color: var(--copper-500);
  }
  .btn--primary:hover { background: var(--copper-400); border-color: var(--copper-400); color: var(--ink-900); }

  .btn--quiet { color: var(--text-muted); border-color: var(--hairline); }
  .btn--quiet:hover { color: var(--gold-400); border-color: var(--hairline-strong); background: transparent; }

  /* =======================================================================
     6. Abschnittsraster — asymmetrisch, mit bewusst gebrochener Achse
     ======================================================================= */
  .section { padding-block: var(--space-12); }

  /* Zwei Spalten, aber nicht 50/50: das Auge bekommt eine Kante zum Anlegen. */
  .split {
    display: grid;
    gap: var(--space-8) var(--space-10);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  @media (max-width: 52rem) {
    .split, .split--reverse { grid-template-columns: 1fr; }
  }

  /* Die Beschriftungsspalte bleibt stehen, waehrend der Inhalt scrollt. */
  .sticky-col { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  @media (max-width: 52rem) { .sticky-col { position: static; } }

  /* =======================================================================
     7. Nummerierung — jedes Flash-Blatt nummeriert seine Motive
     ======================================================================= */
  .numbered { counter-reset: motiv; }
  .numbered > * { counter-increment: motiv; }
  .num::before {
    content: counter(motiv, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: .1em;
    color: var(--gold-700);
  }
}

@layer components {
  /* =======================================================================
     8. Hinweis zum Hero
     -----------------------------------------------------------------------
     Frueher stand hier eine eigene "zeichnen beim Laden"-Variante, weil
     animation-timeline: view() fuer bereits sichtbare Elemente keinen
     Eintritts-Fortschritt kennt. Mit js/zeichnen.js entfaellt der Sonderfall:
     Das Skript zeichnet gestaffelt sofort, was beim Laden im Bild ist, und
     beim Hereinscrollen alles andere. Eine Regel fuer beide Faelle.
     ======================================================================= */
}