/* eas7 Showreel — 15s Endlos-Loop, reines CSS/JS, keine Abhaengigkeiten.
   Timeline (von showreel.js getrieben): intro 0-2s, scene1 2-6s,
   scene2 6-10s, scene3 10-13.5s, outro 13.5-15s, dann Loop. */

.eas7-showreel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius, 18px);
  background: linear-gradient(160deg, #f2f8f6, #eafbf6 55%, #f2f8f6);
  box-shadow: 0 24px 60px rgba(14, 28, 26, .18);
  isolation: isolate;
}

.showreel-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.showreel-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.5rem, 1.6vw, 1rem);
  padding: 7%;
  text-align: center;
  opacity: 0;
  transform: scale(.96) translateY(10px);
  transition: opacity .5s ease, transform .6s ease;
  pointer-events: none;
}
.showreel-scene.is-active { opacity: 1; transform: scale(1) translateY(0); z-index: 1; }

.showreel-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: clamp(.64rem, 1.6vw, .86rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0b7d73;
  margin: 0;
}

.showreel-headline {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.15rem, 4.3vw, 2.3rem);
  color: #0e1c1a;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0;
}

.showreel-mark {
  width: clamp(44px, 9vw, 72px);
  height: clamp(44px, 9vw, 72px);
  border-radius: 22%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #0d9488, #34d3bd);
  color: #fff;
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  letter-spacing: -.03em;
  box-shadow: 0 14px 30px rgba(13, 148, 136, .32);
  animation: eas7MarkPulse 2.4s ease-in-out infinite;
}
@keyframes eas7MarkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---------- Szene 1: Projektentwicklung (Roadmap) ---------- */
.showreel-roadmap {
  position: relative;
  width: min(92%, 480px);
  margin-top: .6rem;
}
.roadmap-svg { width: 100%; display: block; overflow: visible; }
.roadmap-track { stroke: #dceae6; stroke-width: 3; }
.roadmap-progress {
  stroke: #0d9488; stroke-width: 3;
  stroke-dasharray: 480; stroke-dashoffset: 480;
}
.is-active .roadmap-progress { animation: roadmapDraw 3.1s ease forwards .3s; }
@keyframes roadmapDraw { to { stroke-dashoffset: 0; } }

.roadmap-steps { display: flex; justify-content: space-between; margin-top: -29px; }
.roadmap-step {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 2px solid #dceae6; color: #486460;
  font-family: var(--font-mono, monospace); font-size: .64rem; font-weight: 500;
}
.is-active .roadmap-step {
  animation: roadmapLight .01s linear forwards;
  animation-delay: calc(.5s + var(--i) * .7s);
}
@keyframes roadmapLight {
  to { background: #0d9488; border-color: #0d9488; color: #fff; }
}

/* ---------- Szene 2: KI-Beratung (Neuronales Netz) ---------- */
.neural-svg { width: min(94%, 420px); margin-top: .2rem; overflow: visible; }
.neural-edges line {
  stroke: #bfe6df; stroke-width: 1.4; stroke-dasharray: 6 5;
}
.is-active .neural-edges line { animation: neuralFlow 2.2s linear infinite; }
@keyframes neuralFlow { to { stroke-dashoffset: -44; } }

.neural-nodes circle {
  fill: #0d9488; opacity: .35;
  transform-box: fill-box; transform-origin: center;
}
.is-active .neural-nodes circle {
  animation: neuralPulse 1.1s ease both;
  animation-delay: calc(var(--i) * .22s);
}
@keyframes neuralPulse {
  0% { opacity: .35; transform: scale(.8); }
  45% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 6px rgba(13, 148, 136, .55)); }
  100% { opacity: .85; transform: scale(1); }
}

/* ---------- Szene 3: Softwareentwicklung (Terminal) ---------- */
.showreel-code {
  width: min(92%, 420px);
  margin-top: .5rem;
  text-align: left;
  background: #0e1c1a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(14, 28, 26, .25);
}
.code-head {
  display: flex; align-items: center; gap: .32rem;
  padding: .5rem .8rem;
  background: rgba(255, 255, 255, .06);
}
.code-head .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.code-title { margin-left: .5rem; font-family: var(--font-mono, monospace); font-size: .66rem; color: rgba(255, 255, 255, .5); }
.code-body {
  position: relative;
  margin: 0; padding: .95rem 1.1rem;
  font-family: var(--font-mono, monospace);
  font-size: clamp(.68rem, 2vw, .9rem);
  color: #a7f3d0; white-space: pre;
  clip-path: inset(0 100% 0 0);
}
.is-active .code-body { animation: codeReveal 1.5s steps(28, end) forwards .3s; }
@keyframes codeReveal { to { clip-path: inset(0 0 0 0); } }
.code-type { color: #5eead4; }
.code-fn { color: #e9d5a1; }
.code-cursor { color: #5eead4; animation: codeBlink 1s steps(1) infinite; }
@keyframes codeBlink { 50% { opacity: 0; } }

/* ---------- Fortschrittsbalken ---------- */
.showreel-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(13, 148, 136, .12); z-index: 2;
}
.showreel-progress-bar {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #0d9488, #34d3bd);
}

@media (prefers-reduced-motion: reduce) {
  .eas7-showreel * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}