/* ============================================================
   CutLab, Schnittraum
   Die Seite als Schnittprogramm: Abspielkopf mit Timecode,
   Abschnitte als Clips, Schnitt statt Blende, Perforation
   statt Symbolen.
   Richtung: siehe DESIGN.md. Dial ENERGY 3 / RHYTHM 3 / MOTION 2.
   ============================================================ */

/* ---------- 1) Timeline-Spur am unteren Rand ----------
   Zweck: zeigt die Position im Material und springt zu jedem
   Abschnitt. Ersetzt keine Navigation, ergaenzt sie um den
   Ueberblick, den eine lange Seite sonst nicht gibt. */

.tl {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  align-items: stretch;
  height: 34px;
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-family: 'DM Sans', system-ui, sans-serif;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.tl.is-on { transform: translateY(0); }

/* Timecode links: die Schrift ist bewusst tabellarisch, damit
   die Ziffern beim Laufen nicht zappeln */
.tl-code {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 10.5px;
  letter-spacing: .09em;
  color: var(--orange, #ff4d00);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
.tl-code::before {
  content: "";
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Die Spur selbst: ein Knopf je Abschnitt, Breite nach Laenge
   des Abschnitts, wie Clips unterschiedlicher Dauer */
.tl-track {
  position: relative;
  flex: 1;
  display: flex;
  min-width: 0;
}
.tl-clip {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .07);
  /* .50 statt .34: bei 11px braucht Text 4.5:1, .34 kam nur auf 3.0:1 */
  color: rgba(255, 255, 255, .5);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: .13em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.tl-clip:hover,
.tl-clip:focus-visible { color: var(--white, #f5f0e8); background: rgba(255, 255, 255, .05); }
.tl-clip:focus-visible { outline: 1px solid var(--orange, #ff4d00); outline-offset: -2px; }
.tl-clip[aria-current="true"] { color: var(--white, #f5f0e8); background: rgba(255, 77, 0, .13); }

/* Abgespielter Teil: fuellt die Spur von links, wie der
   gepufferte Bereich in einem Player */
.tl-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: rgba(255, 77, 0, .14);
  pointer-events: none;
}

/* Abspielkopf: die einzige Stelle mit Glühen auf der Seite,
   damit das Auge ihn in der dunklen Leiste findet */
.tl-head {
  position: absolute;
  top: -1px; bottom: 0;
  left: 0;
  width: 2px;
  background: var(--orange, #ff4d00);
  box-shadow: 0 0 10px rgba(255, 77, 0, .75);
  pointer-events: none;
}
.tl-head::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--orange, #ff4d00);
}

@media (max-width: 860px) {
  /* Auf dem Telefon bleibt der Abspielkopf, die Clipnamen gehen:
     34px Hoehe sind dort zu knapp fuer Text, der lesbar bleibt */
  .tl { height: 26px; }
  .tl-code { font-size: 9.5px; padding: 0 10px; }
  .tl-clip { font-size: 0; padding: 0; flex: 1; }
  .tl-clip[aria-current="true"] { background: rgba(255, 77, 0, .2); }
}

/* ---------- 2) Schnitt-Reveal ----------
   Zweck: eine Ueberschrift wird freigeschnitten statt
   eingeblendet. Ein Schnitt ist hart, also faellt die Kante
   hart, und der Text steht sofort. */

/* Versteckt wird nur, wenn das Skript lief: ohne JS bleibt jede
   Ueberschrift lesbar. Die Klasse setzt ein Einzeiler im <head>. */
.cut-rv { position: relative; }
.js-cut .cut-rv { clip-path: inset(0 100% 0 0); }
.js-cut .cut-rv.is-cut {
  animation: cut-open .62s cubic-bezier(.16, 1, .3, 1) forwards;
}
.js-cut .cut-rv::after {
  content: "";
  position: absolute;
  top: -.08em; bottom: -.08em;
  left: 0;
  width: 2px;
  background: var(--orange, #ff4d00);
  opacity: 0;
}
.js-cut .cut-rv.is-cut::after {
  animation: cut-edge .62s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes cut-open { to { clip-path: inset(0 0 0 0); } }
@keyframes cut-edge {
  0%   { opacity: 1; left: 0; }
  92%  { opacity: 1; left: 100%; }
  100% { opacity: 0; left: 100%; }
}

/* ---------- 3) Perforation ----------
   Zweck: Trenner aus dem Logo, statt eines austauschbaren
   Symbols. Zwei Loecher, wie am Rand eines Filmstreifens. */

.perf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 18px;
  vertical-align: middle;
}
.perf::before,
.perf::after {
  content: "";
  width: 4px;
  height: 7px;
  border-radius: 1px;
  background: var(--orange, #ff4d00);
  opacity: .85;
}

/* ---------- 4) Einzelbild-Sprung ----------
   Zweck: beim Zeigen springt das Bild in Stufen statt weich zu
   skalieren, so sieht Scrubben in einem Schnittprogramm aus. */

[data-frames] { overflow: hidden; }
[data-frames] img,
[data-frames] .pf-img {
  transition: transform .5s steps(5, end), filter .4s ease;
}
[data-frames]:hover img,
[data-frames]:hover .pf-img,
[data-frames]:focus-within img,
[data-frames]:focus-within .pf-img {
  transform: scale(1.055);
  filter: saturate(1.12) contrast(1.04);
}

/* Die Kacheln im Portfolio nutzen ein Hintergrund-Div statt <img>.
   Der weiche Scale wird zum Einzelbild-Sprung: dasselbe Motiv wie
   oben, an der Stelle, wo am meisten gezeigt wird. */
.portfolio-tile-bg { transition: transform .5s steps(5, end), filter .4s ease; }
.portfolio-tile:hover .portfolio-tile-bg { filter: brightness(.68) saturate(1.1); }

/* ---------- 5) Schnitt statt Streifen ----------
   Die Service-Karten hatten einen Balken, der links hochwaechst.
   Derselbe Hinweis, aber im Motiv der Marke: eine Kante faehrt
   quer durch die Karte, wie ein Schnitt durch einen Clip.
   Hoehere Spezifitaet, weil das Seiten-CSS spaeter im Kopf steht. */
.js-cut .service-card::before {
  top: 0; left: 0;
  width: 2px;
  height: 100%;
  opacity: 0;
}
.js-cut .service-card:hover::before,
.js-cut .service-card:focus-visible::before {
  height: 100%;
  opacity: 1;
  animation: cut-through .55s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes cut-through {
  0%   { left: 0;    opacity: 1; }
  88%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Navigation: der Unterstrich faehrt als Kante durch, statt weich
   breiter zu werden. Gleiche Geste wie auf den Ueberschriften. */
.js-cut .nav-links a::after {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.js-cut .nav-links a:hover::after,
.js-cut .nav-links a.active::after {
  width: 100%;
  transform: scaleX(1);
}

/* ---------- Bewegung abschaltbar ---------- */
@media (prefers-reduced-motion: reduce) {
  .tl { transition: none; }
  .js-cut .cut-rv,
  .js-cut .cut-rv.is-cut { clip-path: none; animation: none; }
  .js-cut .cut-rv::after { display: none; }
  [data-frames] img,
  [data-frames] .pf-img,
  .portfolio-tile-bg { transition: none; }
  .js-cut .service-card:hover::before { animation: none; opacity: 1; left: 0; }
  .js-cut .nav-links a::after { transition: none; }
  [data-frames]:hover img,
  [data-frames]:hover .pf-img { transform: none; }
}

/* Wenn gedruckt wird, hat eine Zeitleiste nichts zu suchen */
@media print { .tl { display: none; } }

/* ---------- 6) Weiches Scrollen (Lenis) ----------
   Die Pflichtzeilen der Library, lokal statt als zweite Datei.
   Greifen nur, wenn js/scrollen.js Lenis wirklich gestartet hat. */

html.lenis,
html.lenis body { height: auto; }

/* Das Seiten-CSS setzt scroll-behavior: smooth. Beides zusammen
   ergibt zwei Animationen auf denselben Sprung. */
html.lenis { scroll-behavior: auto !important; }

.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }

.lenis.lenis-smooth iframe { pointer-events: none; }

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}