/* ══════════════════════════════════════════════════════════════════════════
   HERO „Drei Welten, eine Arbeitsweise" — 30 s, endlos, geschlossene Schleife
   Konzept: `.nomad/ANIMATIONS-KONZEPT.md` §2 · Raum: `raum.css`

   Drei Glastafeln stehen hintereinander im Raum. Die Kamera fährt an ihnen
   vorbei und schaut in jede hinein. Bei Sekunde 19 legen sie sich übereinander
   — und aus drei getrennten Anlagen wird EINE: die Rohrleitung mündet in den
   Turm, der Turm speist das Aggregat. Das ist die Aussage „Drei Bereiche, eine
   Arbeitsweise", gezeigt statt behauptet.

   Alle Elemente teilen EINE Zeitachse (`--takt:30s`). Wann etwas auftritt,
   steckt allein in den Prozentwerten seiner Keyframes:

      0 – 13 %   Takt 1  Auftakt — die Tafeln fächern auf
     13 – 30 %   Takt 2  Chemie
     30 – 47 %   Takt 3  Kerntechnik
     47 – 63 %   Takt 4  Industrie
     63 – 80 %   Takt 5  ⭐ Überlagerung
     80 – 93 %   Takt 6  Prüfblick
     93 – 100 %  Takt 7  Ausklang → zurück auf Takt 1
   ══════════════════════════════════════════════════════════════════════════ */
.tf{--takt:30s; --tiefe:1500px; --blickpunkt:46%;
  min-height:clamp(460px,56vw,660px); display:grid; place-items:center;
  padding:clamp(.8rem,1.8vw,1.4rem)}
.tf-welt{position:absolute; inset:clamp(1rem,3vw,2.4rem);
  transition:none; animation:tf-kamera var(--takt) linear infinite}

/* ── Die Kamera: schwenkt zu jeder Tafel, zieht bei der Überlagerung heran ── */
@keyframes tf-kamera{
   0%,10%{transform:rotateX(8deg) rotateY(0deg) translate3d(0,0,-40px)}
  22%   {transform:rotateX(6deg) rotateY(9deg) translate3d(26px,0,70px)}    /* Chemie */
  39%   {transform:rotateX(4deg) rotateY(0deg) translate3d(0,-8px,50px)}    /* Turm */
  55%   {transform:rotateX(2deg) rotateY(-9deg) translate3d(-26px,5px,70px)} /* Aggregat */
  72%,88%{transform:rotateX(0deg) rotateY(0deg) translate3d(0,0,100px)}     /* frontal */
 100%   {transform:rotateX(8deg) rotateY(0deg) translate3d(0,0,-40px)}}

/* ── Die drei Tafeln ───────────────────────────────────────────────────── */
.tf-e{position:absolute; left:50%; top:50%; width:min(50%,286px); aspect-ratio:5/6.2;
  margin:0; transform-style:preserve-3d;
  animation:tf-tafel var(--takt) cubic-bezier(.4,0,.3,1) infinite}
/* Gefächert: --n 1/2/3 → links/mitte/rechts. Bei der Überlagerung gehen alle
   auf dieselbe Position — deshalb steckt der Fächer in einer Variablen. */
@keyframes tf-tafel{
   0%,58%{transform:translate(-50%,-50%)
      translateX(calc((var(--n) - 2) * 34%))
      translateZ(calc((var(--n) - 2) * -110px))
      rotateY(calc((var(--n) - 2) * 17deg))}
  72%,90%{transform:translate(-50%,-50%)
      translateX(0) translateZ(calc((var(--n) - 2) * -14px)) rotateY(0deg)}
 100%{transform:translate(-50%,-50%)
      translateX(calc((var(--n) - 2) * 34%))
      translateZ(calc((var(--n) - 2) * -110px))
      rotateY(calc((var(--n) - 2) * 17deg))}}
/* Bei der Überlagerung wird das Glas fast klar — sonst wird es matschig
   (Konzept §10.3: weniger auf dem Bild, nicht mehr). */
.tf-glas{animation:tf-glas var(--takt) linear infinite}
.tf-bau{animation:tf-zuruecktreten var(--takt) linear infinite}
@keyframes tf-zuruecktreten{0%,74%{opacity:1} 82%,92%{opacity:.34} 96%,100%{opacity:1}}
@keyframes tf-glas{0%,58%{opacity:1} 70%,90%{opacity:.5} 100%{opacity:1}}
.tf-e--chemie{z-index:3} .tf-e--nuklear{z-index:2} .tf-e--industrie{z-index:1}
.tf-glanz{animation:tf-glanz var(--takt) ease-in-out infinite;
  animation-delay:calc(var(--n) * var(--takt) * -.055)}
@keyframes tf-glanz{0%,52%{transform:translateX(-62%)} 68%,100%{transform:translateX(62%)}}
.tf-spiegel{background:inherit; animation:tf-glas var(--takt) linear infinite}
.tf-svg{width:100%; height:100%; display:block}
.tf-name{position:absolute; left:1rem; bottom:.9rem; display:flex; flex-direction:column;
  font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--ink);
  line-height:1.2; animation:tf-name var(--takt) linear infinite}
.tf-name i{position:absolute; left:-.85rem; top:.42rem; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--akzent)}
.tf-name small{font-family:var(--font-body); font-weight:500; font-size:.7rem;
  color:var(--ink-2); margin-top:.12rem}
@keyframes tf-name{0%,60%{opacity:1} 70%,90%{opacity:0} 100%{opacity:1}}

/* ── Die Bauteile in den Tafeln ────────────────────────────────────────── */
/* Nachfahren-Selektor, nicht `>`: die gezeichneten Rohrschüsse liegen in einer
   eigenen <g>-Gruppe und wären als Enkel ohne animation-duration geblieben —
   dann bleibt stroke-dashoffset stehen und der Strang ist unsichtbar. */
.tf-bau .tb,.tf-bau .tz{animation-duration:var(--takt); animation-iteration-count:infinite;
  animation-fill-mode:both; animation-timing-function:cubic-bezier(.34,1.2,.64,1)}
/* Jede Tafel hat ihr eigenes Fenster auf der Zeitachse. */
.tf-bau--ch .tb{animation-name:tf-ein-ch; animation-delay:calc(var(--s) * var(--takt) * .008)}
.tf-bau--ch .tz{animation-name:tf-zeichnen; animation-delay:calc(var(--s) * var(--takt) * .008);
  stroke-dasharray:110; stroke-dashoffset:110}
@keyframes tf-ein-ch{0%,13%{opacity:0; transform:translateY(10px)}
  20%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes tf-zeichnen{0%,14%{stroke-dashoffset:110; opacity:0}
  16%{opacity:1} 24%,92%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:110; opacity:0}}
.tf-medium{stroke-dasharray:46 300; stroke-dashoffset:346; opacity:0;
  animation:tf-medium var(--takt) cubic-bezier(.4,0,.6,1) infinite}
@keyframes tf-medium{0%,26%{stroke-dashoffset:346; opacity:0}
  28%{opacity:.9} 90%{stroke-dashoffset:-40; opacity:.9} 100%{opacity:0}}
.tf-rad{transform-box:fill-box; transform-origin:50% 50%;
  animation:tf-rad-auf var(--takt) cubic-bezier(.34,1.4,.64,1) infinite}
@keyframes tf-rad-auf{0%,22%{opacity:0; transform:scale(.3) rotate(-40deg)}
  28%{opacity:1; transform:scale(1) rotate(0)} 92%{opacity:1} 100%{opacity:0}}

.tf-bau--nu .tb{animation-name:tf-ein-nu; animation-delay:calc(var(--s) * var(--takt) * .008)}
.tf-turm{transform-box:fill-box; transform-origin:50% 100%;
  animation:tf-turm var(--takt) cubic-bezier(.34,1.15,.64,1) infinite;
  animation-fill-mode:both}
@keyframes tf-ein-nu{0%,30%{opacity:0; transform:translateY(10px)}
  36%,92%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes tf-turm{0%,32%{opacity:0; transform:scaleY(.06)}
  43%,92%{opacity:1; transform:scaleY(1)} 100%{opacity:0}}
.tf-dampf{opacity:0; animation:tf-dampf var(--takt) ease-out infinite;
  animation-delay:calc(var(--n) * var(--takt) * .022)}
@keyframes tf-dampf{0%,42%{opacity:0; transform:translateY(6px) scale(.4)}
  47%{opacity:.85} 66%{opacity:0; transform:translateY(-48px) scale(1.7)}
  100%{opacity:0; transform:translateY(-48px) scale(1.7)}}

.tf-bau--in .tb{animation-name:tf-ein-in; animation-delay:calc(var(--s) * var(--takt) * .008)}
@keyframes tf-ein-in{0%,47%{opacity:0; transform:translate(-16px,8px)}
  54%,92%{opacity:1; transform:none} 100%{opacity:0}}
.tf-rad1,.tf-rad2{transform-box:fill-box; transform-origin:50% 50%;
  animation-duration:var(--takt); animation-iteration-count:infinite; animation-fill-mode:both}
.tf-rad1{animation-name:tf-r1} .tf-rad2{animation-name:tf-r2}
@keyframes tf-r1{0%,49%{opacity:0; transform:rotate(-70deg) scale(.6)}
  56%{opacity:1; transform:rotate(0) scale(1)} 92%{opacity:1; transform:rotate(300deg)}
  100%{opacity:0; transform:rotate(320deg)}}
@keyframes tf-r2{0%,51%{opacity:0; transform:rotate(60deg) scale(.6)}
  58%{opacity:1; transform:rotate(0) scale(1)} 92%{opacity:1; transform:rotate(-370deg)}
  100%{opacity:0; transform:rotate(-400deg)}}

/* ── Takt 6: der Prüfblick ─────────────────────────────────────────────── */
.tf-schnitt{opacity:0; animation:tf-schnitt var(--takt) ease-out infinite;
  animation-fill-mode:both}
@keyframes tf-schnitt{0%,80%{opacity:0; transform:scale(.92)}
  84%,91%{opacity:1; transform:none} 95%,100%{opacity:0}}
.tf-pruef{position:absolute; inset:0; pointer-events:none; transform:translateZ(140px)}
.tf-scan{position:absolute; top:-6%; bottom:-6%; width:3px; left:0;
  background:linear-gradient(180deg,transparent,var(--signal) 22%,var(--signal) 78%,transparent);
  box-shadow:0 0 22px 5px rgba(0,148,92,.32); opacity:0;
  animation:tf-scan var(--takt) cubic-bezier(.5,0,.5,1) infinite}
@keyframes tf-scan{0%,78%{opacity:0; left:-4%}
  80%{opacity:1} 90%{opacity:1; left:104%} 93%,100%{opacity:0; left:104%}}
.tf-mass{font-size:10.5px; font-weight:600; fill:var(--ink-2); font-family:var(--font-body)}

/* ── Die Nachweis-Chips rasten am Ende ein ─────────────────────────────── */
.tf-chips{position:absolute; z-index:6; left:clamp(.9rem,2vw,1.6rem);
  bottom:clamp(2.4rem,4vw,3.2rem); display:flex; flex-direction:column; gap:.4rem}
.tf-chip{display:flex; align-items:center; gap:.5rem; padding:.42rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.95); box-shadow:0 10px 24px -16px rgba(14,33,25,.55);
  opacity:0; animation:tf-chip var(--takt) cubic-bezier(.34,1.3,.64,1) infinite;
  animation-delay:calc(var(--c) * var(--takt) * .012)}
@keyframes tf-chip{0%,82%{opacity:0; transform:translateX(-14px)}
  86%,92%{opacity:1; transform:none} 96%,100%{opacity:0}}
.tf-chip svg{width:1.05rem; height:1.05rem; flex:none; fill:none; stroke:var(--signal);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tf-chip b{font-family:var(--font-head); font-size:.78rem; color:var(--ink)}
.tf-chip small{font-size:.68rem; color:var(--ink-2)}

/* ── Der Sprung zum Prüfblick ──────────────────────────────────────────── */
.tf-sprung{position:absolute; z-index:7; right:clamp(.9rem,2vw,1.6rem);
  top:clamp(.9rem,2vw,1.4rem); appearance:none; cursor:pointer; font:inherit;
  font-size:.78rem; font-weight:600; color:var(--ink-2); padding:.42rem .9rem;
  border-radius:999px; border:1px solid var(--linie);
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:color .2s, border-color .2s, transform .2s}
.tf-sprung:hover{color:var(--ink); border-color:var(--signal); transform:translateY(-1px)}
.tf-sprung--ab{color:var(--signal-text); border-color:var(--signal)}

/* ── Der Takt läuft unten mit ──────────────────────────────────────────── */
.tf-takt{position:absolute; z-index:6; left:clamp(.9rem,2vw,1.6rem);
  right:clamp(.9rem,2vw,1.6rem); bottom:clamp(.8rem,1.6vw,1.2rem); height:3px;
  border-radius:2px; background:rgba(14,33,25,.08); margin:0; overflow:hidden}
.tf-takt span{display:block; height:100%; border-radius:2px; transform-origin:0 50%;
  background:linear-gradient(90deg,var(--chemie),var(--nuklear) 52%,var(--industrie));
  animation:tf-takt var(--takt) linear infinite}
@keyframes tf-takt{0%{transform:scaleX(0)} 93%,100%{transform:scaleX(1)}}

html.dark .tf-name{color:var(--ink)}
html.dark .tf-chip{background:rgba(34,52,44,.9); border-color:rgba(255,255,255,.14)}
html.dark .tf-chip b{color:var(--ink)}
html.dark .tf-sprung{background:rgba(34,52,44,.86); border-color:var(--linie); color:var(--ink-2)}
html.dark .tf-glas{background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.5)}
html.dark .tf-name{color:#17231E} html.dark .tf-name small{color:#4E5F57}

@media(max-width:900px){
  .tf{min-height:360px; --tiefe:1100px}
  .tf-e{width:min(76%,300px)}
  .tf-chips{display:none}
}
@media (prefers-reduced-motion: reduce){
  /* Dämpfen, nicht töten: `animation:none` hatte hier sechsmal gestanden und
     die Tafeln komplett angehalten. Die Kamera steht weiterhin still, aber
     Aufbau, Medium und Räder laufen weiter — nur sehr langsam. Marcus fährt
     dauerhaft mit „Bewegung reduzieren"; eine stehende Seite wirkt kaputt. */
  .tf{--takt:96s}
  .tf-welt{animation-duration:240s}
  .tf-e{animation-duration:180s}
  .tf-glas{animation-duration:150s}
  .tf-name,.tf-glanz{animation-duration:120s}
  .tf-spiegel{animation-duration:200s}
  .tf-bau *,.tf-medium,.tf-rad,.tf-turm,.tf-rad1,.tf-rad2{animation-duration:120s}
}