/* ==========================================================================
   GHOSTFLOW · PRODUKTVIDEO IM HEADER
   Selbstablaufende Sequenz der vier Workflows — kein Scroll, kein mp4.
   Alles unter .gfv gekapselt, Marken-Tokens wie in landing.css.
   ========================================================================== */

.gfv {
  /* Flächen an die GhostSuite-Familie angeglichen (Basis #0a0a12) —
     Szenen, Clips und Ablauf bleiben unverändert. */
  --gfv-ink:   #09090f;
  --gfv-night: #0c0b14;
  --gfv-bg:    #0a0a12;
  --gfv-bg2:   #0d0d16;
  --gfv-bg3:   #0f0f19;

  --gfv-v-50:  #f0e6ff;
  --gfv-v-100: #ede9fe;
  --gfv-v-300: #c4b5fd;
  --gfv-v-500: #a78bfa;
  --gfv-v-700: #7c5cd6;

  --gfv-line:    rgba(196, 181, 253, .16);
  --gfv-line-on: rgba(196, 181, 253, .42);
  --gfv-glass:   rgba(237, 233, 254, .05);
  --gfv-blur:    blur(22px) saturate(140%);

  --gfv-text:  #f4f1ff;
  --gfv-muted: rgba(244, 241, 255, .62);
  --gfv-dim:   rgba(244, 241, 255, .34);

  --gfv-ease: cubic-bezier(.22, .61, .36, 1);

  /* Szenendauer — muss zu SCENE_MS in header-video.js passen */
  --gfv-dur: 5.04s;   /* = Länge der Kling-Clips */

  position: relative;
  width: 100%;
  /* Vollbreit unter dem Header. Ober- und unterhalb ein breites Band in der
     Farbe des "Demo anfragen"-Buttons, damit der Schnitt zur Seite weich wird. */
  padding-block: clamp(64px, 9vw, 140px);
}

.gfv::before,
.gfv::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(64px, 9vw, 140px);
  pointer-events: none;
  z-index: 1;
}
/* Oben: von der Seitenfarbe ins Violett des Buttons hinein */
.gfv::before {
  top: 0;
  background: linear-gradient(180deg,
    rgba(167, 139, 250, 0)   0%,
    rgba(196, 181, 253, .04) 42%,
    rgba(196, 181, 253, .09) 74%,
    rgba(167, 139, 250, .14) 100%);
}
/* Unten dasselbe, gespiegelt */
.gfv::after {
  bottom: 0;
  background: linear-gradient(0deg,
    rgba(167, 139, 250, 0)   0%,
    rgba(196, 181, 253, .04) 42%,
    rgba(196, 181, 253, .09) 74%,
    rgba(167, 139, 250, .14) 100%);
}

.gfv__frame {
  position: relative;
  width: 100%;
  /* Bildschirmfüllend: zeigt so viel vom Clip wie möglich, ohne dass der
     Text unter die Fensterkante rutscht. */
  height: clamp(560px, 92svh, 1120px);
  overflow: hidden;
  background: var(--gfv-night);
  border-top: 1px solid rgba(196, 181, 253, .5);
  border-bottom: 1px solid rgba(196, 181, 253, .5);
  isolation: isolate;
}

/* --- Szenen ------------------------------------------------------------- */

.gfv__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--gfv-ease), visibility 0s linear .9s;
}
.gfv__scene.is-live {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--gfv-ease), visibility 0s;
}

/* Bild mit langsamer Kamerafahrt (Ken Burns) */
.gfv__shot { position: absolute; inset: 0; overflow: hidden; }
.gfv__shot video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Keine CSS-Kamerafahrt mehr: die Bewegung steckt in den Clips selbst. */

/* Abdunkelung, damit der Text immer sitzt */
.gfv__shot::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(19, 18, 31, .94) 8%, rgba(19, 18, 31, .74) 46%, rgba(19, 18, 31, .12) 82%),
    linear-gradient(to top, rgba(19, 18, 31, .8), transparent 38%);
}

/* --- Text --------------------------------------------------------------- */

.gfv__copy {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 0;
  padding: clamp(28px, 6vw, 108px);
  padding-bottom: clamp(64px, 9vw, 132px);   /* Platz für die Kapitelleiste */
  max-width: min(62ch, 74%);
}

.gfv__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: clamp(11px, .95vw, 13px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gfv-v-300);
}
/* Kurzer Strich hinter dem Kicker — setzt die Grundlinie des Satzspiegels */
.gfv__kicker::after {
  content: '';
  width: clamp(28px, 5vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, var(--gfv-v-300), transparent);
}

.gfv__title {
  margin: clamp(16px, 1.9vw, 26px) 0 0;
  max-width: 20ch;
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.9vw, 60px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--gfv-text);
  text-wrap: balance;
}

.gfv__text {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  max-width: 48ch;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.68;
  color: var(--gfv-muted);
  text-wrap: pretty;
}

/* Text fährt beim Szenenwechsel von unten ein — gestaffelt */
.gfv__scene.is-live .gfv__kicker,
.gfv__scene.is-live .gfv__title,
.gfv__scene.is-live .gfv__text {
  animation: gfv-rise .85s var(--gfv-ease) both;
}
.gfv__scene.is-live .gfv__title { animation-delay: .1s; }
.gfv__scene.is-live .gfv__text  { animation-delay: .2s; }

@keyframes gfv-rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* --- Auftakt und Abbinder ----------------------------------------------
   Eigene Clips, in denen der Geist die Hauptrolle spielt. Er steht mittig
   im Bild, deshalb rückt der Text hier etwas enger und der Verlauf greift
   weniger weit nach rechts.
   ------------------------------------------------------------------------ */

.gfv__scene--plain .gfv__shot::after {
  background:
    linear-gradient(100deg, rgba(19, 18, 31, .92) 6%, rgba(19, 18, 31, .6) 38%, transparent 66%),
    linear-gradient(to top, rgba(19, 18, 31, .78), transparent 40%);
}
.gfv__scene--plain .gfv__copy { max-width: min(46ch, 56%); }
.gfv__scene--plain .gfv__title { font-size: clamp(30px, 4.6vw, 70px); max-width: 15ch; }

/* --- Kapitelleiste ------------------------------------------------------ */

.gfv__bar {
  position: absolute;
  inset: auto clamp(28px, 6vw, 108px) clamp(22px, 3vw, 40px) auto;
  left: clamp(28px, 6vw, 108px);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.gfv__tick {
  flex: 1;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: rgba(240, 230, 255, .16);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gfv__tick::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gfv-v-300), var(--gfv-v-500));
  transform: scaleX(0);
  transform-origin: left;
}
.gfv__tick.is-done::after { transform: scaleX(1); }
.gfv__tick.is-live::after { animation: gfv-fill var(--gfv-dur) linear both; }
.gfv__tick.is-live.is-paused::after { animation-play-state: paused; }
@keyframes gfv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Bedienung ---------------------------------------------------------- */

.gfv__ui {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  right: clamp(28px, 6vw, 108px);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.gfv__btn {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gfv-line);
  background: rgba(19, 18, 31, .6);
  backdrop-filter: var(--gfv-blur);
  -webkit-backdrop-filter: var(--gfv-blur);
  color: var(--gfv-text);
  cursor: pointer;
  transition: border-color .3s var(--gfv-ease), background .3s var(--gfv-ease), transform .3s var(--gfv-ease);
}
.gfv__btn:hover { border-color: var(--gfv-v-300); background: rgba(16, 16, 28, .8); transform: translateY(-1px); }
.gfv__btn:focus-visible { outline: 2px solid var(--gfv-v-300); outline-offset: 3px; }
.gfv__btn svg { width: 15px; height: 15px; fill: currentColor; }
.gfv__btn .gfv-ico-pause { display: block; }
.gfv__btn .gfv-ico-play  { display: none; }
.gfv.is-paused .gfv__btn .gfv-ico-pause { display: none; }
.gfv.is-paused .gfv__btn .gfv-ico-play  { display: block; }

/* Bildunterschrift unter dem Rahmen */
.gfv__caption {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 2vw, 26px) clamp(28px, 6vw, 108px) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gfv-dim);
}
.gfv__caption b { color: var(--gfv-v-300); font-weight: 400; }

/* --- Klein und barrierearm --------------------------------------------- */

@media (max-width: 720px) {
  .gfv__frame { height: clamp(500px, 82svh, 760px); }
  .gfv__copy { max-width: none; padding-bottom: clamp(58px, 14vw, 90px); }
  .gfv__title { max-width: 16ch; }
  .gfv__scene--plain .gfv__copy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Autoplay, keine Kamerafahrt: die Szenen werden per Kapitelleiste
     durchgeblättert, der Rest steht still. */
  .gfv *, .gfv *::before, .gfv *::after { animation: none !important; transition-duration: .01ms !important; }
  .gfv__tick.is-live::after { transform: scaleX(1); }
}