/* ==========================================================================
   Laserkatze — Hero (nur index.html)

   BILDIDEE: Der Laser schneidet in die Seite

   Es gibt keine Werkstoffplatte. Die Landingpage selbst ist die Fläche, in die
   geschnitten wird: Der Strahl fährt die Buchstabenkonturen ab, die
   ausgeschnittenen Stücke kippen an und fallen nach hinten durch, und zurück
   bleiben Öffnungen, durch die man auf die Werkstoffe darunter blickt —
   Eichenfurnier, Glimmerschiefer, Acryl, Kork, Schiefer, Birke, MDF, Karton.

   Warum ohne Platte: Eine eigene Werkstofffläche zu zeichnen — und sei sie
   noch so fein texturiert — ergibt immer ein Rechteck mitten auf der Seite,
   und das sieht man als Kasten. Deshalb hier kein Rahmen, kein Radius, kein
   Schlagschatten. Die Stücke tragen die Seitenfarbe, damit die Fläche vor dem
   Schnitt unberührt wirkt.

   Warum sich nichts abhebt: Freigeschnittene Buchstaben, die lose herumliegen,
   lesen sich als Bastelbuchstaben. Was Präzisionsfertigung erzählt, ist das
   Gegenteil — haarfeine Schnittfuge, exakte Registrierung, und die sichtbare
   Tatsache, dass etwas aus etwas herausgeschnitten wurde. Die Materialvielfalt
   wird dadurch zu Tiefe statt zu Konfetti.

   ENTSCHEIDEND ist der Innenschatten an den Öffnungsrändern (Filter #lkpocket
   im Markup). Ohne ihn wirken die Werkstoffe wie aufgeklebte Farbflächen; erst
   mit ihm wird die Aussparung zu einer Tasche mit Materialstärke.

   Die Texturen sind Ausschnitte aus einer einzigen Aufnahme (siehe
   tools/build-hero-textures.py) — deshalb teilen alle dieselbe Lichtsituation.

   SICHERHEITSNETZ: Der Grundzustand dieser Datei ist das FERTIGE Bild. Ohne
   JavaScript, bei reduzierter Bewegung oder wenn der Beobachter nicht greift,
   stehen sofort die geschnittenen Öffnungen — nie eine leere Fläche.
   ========================================================================== */

.hero {
  min-height: calc(100svh - 65px);
  display: grid;
  align-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding-block: clamp(2rem, 6vh, 5rem);
}

.hero__intro { display: grid; gap: 1.1rem; justify-items: center; text-align: center; }
.hero__intro .lead { max-width: 30em; }

/* ---------- Die Schnittfläche ---------- */
.lasercut {
  /* Hero-lokal: Pink ist bewusst als Laserfarbe gesetzt und soll nicht in die
     übrige Seite auslaufen — der Designbrief hält Mint als einzigen Akzent. */
  --laser: #ff2d9a;

  position: relative;
  width: min(100%, 1080px);
  margin-inline: auto;
}

.lasercut__svg {
  display: block;
  width: 100%;
  height: auto;      /* viewBox hält das Seitenverhältnis — kein Layoutsprung */
  overflow: visible; /* der Schein des Schnittpunkts darf über die Kante */
  /* Bewusst ohne Rahmen, Radius und Schlagschatten: Jede dieser drei
     Eigenschaften zeichnet eine Begrenzung, und damit wäre wieder ein Kasten
     auf der Seite statt eines Schnitts in die Seite. */
}

/* ---------- Werkstoffe in der Tiefe ---------- */
.lk-face {
  /* Volle Deckkraft. Die Abdunklung, die den Werkstoff in die Tiefe setzt,
     macht der Innenschatten im Filter — sie über die Deckkraft zu erzeugen
     hieße, das Foto mit Seitenweiß aufzuhellen, und genau das nimmt den
     Materialien ihre Tiefe. */
  opacity: 1;
}

/* ---------- Brennkante ---------- */
/* Die Schnittfuge: eine haarfeine dunkle Linie, kein Kokeln. Bei Holz, Kork,
   Filz und Schiefer bleibt eine schmale karamellisierte Kante zurück — mehr
   nicht. Breiter gezeichnet würde daraus sofort ein Bastelbogen-Rand. */
/* Maßstab: Die viewBox ist 7581 Einheiten breit und wird auf rund 1080 px
   dargestellt — eine Einheit ist also etwa 1/7 Pixel. Alle Strichstärken hier
   sind entsprechend groß notiert; 5 Einheiten wären weniger als ein Pixel. */
.lk-kerf {
  fill: none;
  stroke: rgba(46, 34, 24, 0.55);
  stroke-width: 11;
  stroke-linejoin: round;
}

/* ---------- Die Ausschnittstücke ---------- */
.lk-plug {
  /* Farbe der Seite: Vor dem Schnitt ist die Fläche unberührt, das Stück darf
     sich nicht abzeichnen. Nur eine sehr feine Linie deutet an, wo geschnitten
     wird — wie eine angerissene Kontur, nicht wie ein aufgelegtes Teil. */
  fill: var(--paper);
  stroke: rgba(20, 20, 20, 0.09);
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
  /* Grundzustand = fertig geschnitten: Die Stücke sind längst durchgefallen. */
  display: none;
}

/* ---------- Schmelzzone hinter dem Strahl ---------- */
/* Drei gestapelte Konturen statt eines Weichzeichners: feGaussianBlur auf einem
   Element, das jeden Frame neu gezeichnet wird, ist in Safari der sicherste Weg
   in eine ruckelnde Animation.

   Farbtrennung mit Absicht: PINK ist das Laserlicht, das an der Schnittstelle
   streut. AMBER bis WEISS ist das glühende Material selbst. Beides in Pink zu
   zeichnen sähe aus wie eine Leuchtreklame; erst die Trennung liest sich als
   Schnitt. Sichtbar ist immer nur ein kurzes Stück hinter dem Schnittpunkt —
   die Länge steuert hero-cut.js über stroke-dasharray. */
/* Nur der Buchstabe, der gerade geschnitten wird, ist sichtbar. Nötig wegen
   stroke-linecap: round — bei einer Strichlänge von 0 zeichnet das einen
   vollen Kreis, und ohne diese Regel läge auf jedem noch ungeschnittenen
   Buchstaben ein pinker Punkt. hero-cut.js hebt die Deckkraft für den
   aktiven Buchstaben an. */
.lk-trace { opacity: 0; }
.lk-trace path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lk-glow { stroke: var(--laser); stroke-width: 150; opacity: 0.13; }
.lk-mid  { stroke: #ff8a2b;      stroke-width: 44;  opacity: 0.72; }
.lk-hot  { stroke: #fff4e2;      stroke-width: 16; }

.lk-traces { display: none; }

/* ---------- Der Schnittpunkt ---------- */
.lk-head { display: none; }

/* Das Funken-Canvas liegt deckungsgleich über dem SVG. hero-cut.js legt es
   beim Start an und räumt es danach wieder weg. */
.lasercut__sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Scharfgestellt: JavaScript hat übernommen und meldet, dass es die Animation
   wirklich fahren kann. Erst jetzt wird die Fläche wieder geschlossen.
   ========================================================================== */
.lasercut.is-armed .lk-plugs .lk-plug { display: block; }
.lasercut.is-armed .lk-traces,
.lasercut.is-armed .lk-head { display: block; }

/* Vor dem Schnitt ist die Fuge unsichtbar — sie wächst mit dem Strahl mit.
   Den Fortschritt setzt hero-cut.js über stroke-dashoffset. */
.lasercut.is-armed .lk-kerf { opacity: 0; }
.lasercut.is-armed .lk-kerf.is-cutting,
.lasercut.is-armed .lk-kerf.is-done { opacity: 1; }

/* Solange das Stück noch drin sitzt, ist von der Tiefe nichts zu sehen. */
.lasercut.is-armed .lk-face { opacity: 0; }

.lk-plug.is-cut {
  /* Das Stück kippt an und fällt nach hinten durch — dorthin, wo bei einer
     echten Maschine der Schneidtisch ist. Beschleunigt, weil es fällt. */
  animation: lk-drop 460ms cubic-bezier(0.45, 0, 1, 1) forwards;
}

@keyframes lk-drop {
  0%   { transform: rotate(0) scale(1);                             opacity: 1; }
  22%  { transform: rotate(calc(var(--tilt) * 0.3)) scale(0.997);   opacity: 1; }
  100% { transform: rotate(var(--tilt)) scale(0.86);                opacity: 0; }
}

/* Der Werkstoff kommt zum Vorschein, sobald das Stück weg ist. Bewusst nur
   über die Deckkraft und nicht über einen CSS-Filter: Die Fläche trägt bereits
   den SVG-Filter für die Tiefe, und ein CSS-Filter würde ihn verdrängen —
   dann wäre die Tasche wieder ein flacher Farbfleck. */
.lasercut.is-armed .lk-face.is-open {
  animation: lk-reveal 420ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes lk-reveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Nachfedern: Alle Stücke sind gleichzeitig durchgefallen, die Platte setzt
   sich. Ein einziger, sehr kleiner Impuls — mehr wäre Effekt um des Effekts
   willen und würde die Präzision zunichtemachen, die das Bild erzählt. */
.lasercut.is-settled .lasercut__svg {
  animation: lk-settle 780ms cubic-bezier(0.18, 0.9, 0.28, 1) forwards;
}

@keyframes lk-settle {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.009); }
  100% { transform: scale(1); }
}

/* Die frisch geschnittene Kante ist noch warm und kühlt aus. Bewusst ein
   gedämpftes Braunrot und kein Pink: Das ist verkohltes Material, kein Licht.
   Die eigentliche Glut liefert die Schmelzzone oben. */
.lk-kerf.is-cutting { stroke: rgba(150, 62, 24, 0.85); }
.lk-kerf.is-done    { transition: stroke 1100ms ease-out; }

/* Ist der Buchstabe durch, verlischt die Laserspur. Was bleibt, ist die Fuge. */
.lk-trace.is-cooling { animation: lk-cool 700ms ease-out forwards; }

@keyframes lk-cool {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ==========================================================================
   Reduzierte Bewegung: sofort das fertige Bild. Die Aussage bleibt komplett —
   Material in der Tiefe, Schnittfuge, Plattenstärke.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lasercut .lk-plugs,
  .lasercut .lk-traces,
  .lasercut .lk-head { display: none !important; }
  .lasercut .lk-face { opacity: 1 !important; animation: none !important; }
  .lasercut .lk-kerf { opacity: 1 !important; }
  .lasercut__svg { animation: none !important; }
}

/* Schmale Geräte: Fuge und Plattenkante dünner, sonst fressen sie bei der
   kleinen Darstellung die Buchstabenform zu. */
@media (max-width: 640px) {
  .lk-kerf { stroke-width: 18; }
  .lk-plug { stroke-width: 8; }
  .lk-glow { stroke-width: 190; }
  .lk-mid  { stroke-width: 66; }
  .lk-hot  { stroke-width: 24; }
}