/* ════════════════════════════════════════════════════════════════
   FISCHER WORKS — intro.css · „Laser-Gravur"
   Einmal je Sitzung: ein Messing-Lichtpunkt faehrt ueber die Zeile
   und graviert FISCHER Buchstabe fuer Buchstabe (gluehen, abkuehlen),
   WORKS steigt gesperrt nach, das FW-Quadrat stanzt sich mit einem
   Praegering ein, der Slogan blendet ein, dann reisst der Vorhang in
   zwei Haelften auf und gibt den Hero frei. Gesamt 2,05 s.
   Reine CSS-Animationen (laufen ohne Main-Thread), intro.js raeumt
   auf und setzt das Sitzungsflag. Sichtbar nur mit html.intro-an
   (setzt ein Inline-Skript im Head, wenn kein Sitzungsflag und keine
   reduzierte Bewegung). Storyboard: Figma „FISCHER WORKS Intro v2".
   ════════════════════════════════════════════════════════════════ */
.intro{position:fixed;inset:0;z-index:400;display:none;color:var(--tinte);
  --eo:var(--ease-out,cubic-bezier(.23,1,.32,1));
  --eio:var(--ease-in-out,cubic-bezier(.77,0,.175,1));
  --hot:#FFEDBF;--glut:#D99E33;
}
html.intro-an .intro{display:block}

/* Vorhang in zwei Haelften */
.intro-vorhang{position:absolute;left:0;right:0;height:50.5%;background:var(--papier)}
.intro-vorhang.oben{top:0}
.intro-vorhang.unten{bottom:0}
html.intro-an .intro-vorhang.oben{animation:intro-auf-oben .43s var(--eio) 1.62s both}
html.intro-an .intro-vorhang.unten{animation:intro-auf-unten .43s var(--eio) 1.62s both}
@keyframes intro-auf-oben{to{transform:translateY(-100%)}}
@keyframes intro-auf-unten{to{transform:translateY(100%)}}

/* Buehne: faedt am Ende aus und zoomt minimal */
.intro-buehne{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 var(--rand);
}
html.intro-an .intro-buehne{animation:intro-weg .3s var(--eo) 1.55s both}
@keyframes intro-weg{to{opacity:0;transform:scale(1.05)}}

/* FW-Quadrat stanzt sich ein, Praegering laeuft aus */
.intro-marke{position:relative;width:56px;height:56px;margin-bottom:30px}
.intro-fw,.intro-ring{position:absolute;inset:0}
.intro-fw{
  display:flex;align-items:center;justify-content:center;
  background:var(--tinte);color:var(--papier);border-radius:14%;
  font-family:var(--fd);font-stretch:75%;font-weight:700;font-size:26px;line-height:1;
  opacity:0;
}
html.intro-an .intro-fw{animation:intro-stanzen .3s var(--eo) .86s both}
@keyframes intro-stanzen{from{opacity:0;transform:scale(1.4)}12%{opacity:1}to{opacity:1;transform:none}}
.intro-ring{border:1px solid var(--messing,#B8892E);border-radius:14%;opacity:0}
html.intro-an .intro-ring{animation:intro-ring .4s var(--eo) .9s both}
@keyframes intro-ring{0%{opacity:0;transform:scale(1)}8%{opacity:1}100%{opacity:0;transform:scale(2.1)}}

/* Wortmarke: Buchstaben einzeln */
.intro-wort{
  position:relative;text-align:center;
  font-family:var(--fd);font-stretch:75%;font-weight:700;text-transform:uppercase;line-height:.95;
}
.intro-zeile{display:block;white-space:nowrap}
.intro-zeile i{
  display:inline-block;font-style:normal;
  font-size:clamp(58px,10vw,150px);letter-spacing:.12em;
  opacity:0;transform:translateY(.15em);color:var(--hot);
}
html.intro-an .intro-zeile i{animation:intro-gravur .55s var(--eo) var(--d,0s) both}
/* Gluehen: heiss → Messing → Tinte, dazu Aufstieg */
@keyframes intro-gravur{
  0%{opacity:0;transform:translateY(.15em);color:var(--hot)}
  18%{opacity:1;color:var(--hot)}
  30%{color:var(--glut)}
  60%{transform:none}
  100%{opacity:1;transform:none;color:var(--tinte)}
}
.intro-zeile i:nth-child(1){--d:.12s}
.intro-zeile i:nth-child(2){--d:.205s}
.intro-zeile i:nth-child(3){--d:.29s}
.intro-zeile i:nth-child(4){--d:.375s}
.intro-zeile i:nth-child(5){--d:.46s}
.intro-zeile i:nth-child(6){--d:.545s}
.intro-zeile i:nth-child(7){--d:.63s}

.intro-zeile.duenn{margin-top:.12em;padding-left:.336em} /* Sperrung optisch zentrieren */
.intro-zeile.duenn i{
  font-weight:300;letter-spacing:.336em;font-size:clamp(58px,10vw,150px);
  color:var(--tinte);transform:translateY(.6em);
}
html.intro-an .intro-zeile.duenn i{animation:intro-steigen .38s var(--eo) var(--d,0s) both}
@keyframes intro-steigen{from{opacity:0;transform:translateY(.6em)}45%{opacity:1}to{opacity:1;transform:none}}
.intro-zeile.duenn i:nth-child(1){--d:.62s}
.intro-zeile.duenn i:nth-child(2){--d:.67s}
.intro-zeile.duenn i:nth-child(3){--d:.72s}
.intro-zeile.duenn i:nth-child(4){--d:.77s}
.intro-zeile.duenn i:nth-child(5){--d:.82s}

/* Laserpunkt: faehrt ueber die erste Zeile, Glut pulsiert */
.intro-laser{
  position:absolute;left:-6%;top:.42em;width:10px;height:10px;border-radius:50%;
  background:var(--hot);opacity:0;pointer-events:none;
  font-size:clamp(58px,10vw,150px); /* top in em der Zeile */
  box-shadow:0 0 18px 6px rgba(217,158,51,.85),0 0 42px 14px rgba(217,158,51,.35);
}
html.intro-an .intro-laser{
  animation:intro-laser-weg .81s linear .04s both,intro-laser-glut .8s linear .04s both;
}
@keyframes intro-laser-weg{
  0%{opacity:0;transform:translateX(0)}
  10%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(calc(112% * var(--zeile,1)))}
}
@keyframes intro-laser-glut{
  0%{box-shadow:0 0 10px 3px rgba(217,158,51,.8),0 0 24px 8px rgba(217,158,51,.3)}
  35%{box-shadow:0 0 22px 8px rgba(217,158,51,.9),0 0 56px 18px rgba(217,158,51,.4)}
  65%{box-shadow:0 0 14px 4px rgba(217,158,51,.8),0 0 34px 10px rgba(217,158,51,.3)}
  100%{box-shadow:0 0 22px 8px rgba(217,158,51,.9),0 0 56px 18px rgba(217,158,51,.4)}
}

/* Slogan */
.intro-slogan{
  margin-top:34px;
  font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--messing,#B8892E);opacity:0;transform:translateY(10px);
}
html.intro-an .intro-slogan{animation:intro-blenden .25s var(--eo) 1.05s both}
@keyframes intro-blenden{to{opacity:1;transform:none}}

/* Der Hero erscheint erst, wenn der Vorhang aufgeht */
html.intro-an .held-inhalt .rv.in{transition-delay:1.7s}

@media (prefers-reduced-motion:reduce){
  .intro,html.intro-an .intro{display:none!important}
  html.intro-an .held-inhalt .rv.in{transition-delay:0s}
}