/* ==========================================================================
   voyane – Titel, Farbverlauf, Text & Hintergrund (wie im Launch-Film)
   Schrift: Manrope, lokal über style.css eingebunden (kein Google-Fonts-Link).
   ========================================================================== */

:root {
  /* Farben aus studio.voyane.com */
  --vy-navy: #00003d;        /* Titel / Hauptschrift */
  --vy-deep: #092c87;        /* Verlauf Start */
  --vy-blue: #2865cb;        /* Verlauf Mitte */
  --vy-sky:  #7db6ed;        /* Verlauf Ende */
  --vy-mist: #d4e8fb;        /* heller Glow */
  --vy-bg:   #f8f9fc;        /* Seitenhintergrund */
  --vy-muted: #6e6e73;       /* leise Schrift */
  --vy-sub:  #3a3a55;        /* Untertitel */

  /* Titel-Verlauf (dunkelblau → blau → hellblau) */
  --vy-gradient: linear-gradient(100deg, #092c87 0%, #2865cb 45%, #7db6ed 110%);
  /* Variante für dunkle Hintergründe */
  --vy-gradient-light: linear-gradient(100deg, #7db6ed 0%, #d4e8fb 60%, #ffffff 100%);

  /* Animation */
  --vy-ease: cubic-bezier(.22, 1, .36, 1);   /* weiches Ausrollen */
  --vy-dur: 600ms;                            /* Dauer pro Wort */
  --vy-stagger: 80ms;                         /* Versatz zwischen Wörtern */
}

/* ---------- Hintergrund mit Blau-Verlauf ---------- */
.vy-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--vy-bg);
  font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--vy-navy);
  -webkit-font-smoothing: antialiased;
}

.vy-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
}

.vy-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .75;
  will-change: transform;
}

/* grosser hellblauer Glow oben rechts */
.vy-blob--1 {
  width: 47vw; height: 47vw; max-width: 900px; max-height: 900px;
  top: -23%; right: -12%;
  background: radial-gradient(circle, #7db6ed, transparent 70%);
  animation: vy-drift-1 18s ease-in-out infinite alternate;
}
/* sehr heller Glow links */
.vy-blob--2 {
  width: 36vw; height: 36vw; max-width: 700px; max-height: 700px;
  top: 55%; left: -10%;
  background: radial-gradient(circle, #d4e8fb, transparent 70%);
  animation: vy-drift-2 16s ease-in-out infinite alternate;
}
/* satter blauer Glow unten Mitte */
.vy-blob--3 {
  width: 31vw; height: 31vw; max-width: 600px; max-height: 600px;
  bottom: -35%; left: 36%;
  background: radial-gradient(circle, rgba(40, 101, 203, .55), transparent 70%);
  animation: vy-drift-3 22s ease-in-out infinite alternate;
}

@keyframes vy-drift-1 { from { transform: translate(-180px, -60px); } to { transform: translate(180px, 120px); } }
@keyframes vy-drift-2 { from { transform: translate(160px, 100px); }  to { transform: translate(-160px, -100px); } }
@keyframes vy-drift-3 { from { transform: translate(-300px, 30px); }  to { transform: translate(300px, -30px); } }

/* ---------- Titel ---------- */
.vy-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(44px, 5vw, 96px);   /* im Film 96px bei 1920px Breite */
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--vy-navy);
  text-wrap: balance;
}

/* Farbverlauf auf Text */
.vy-grad {
  background: var(--vy-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vy-grad--light { background-image: var(--vy-gradient-light); }

/* ---------- Untertitel / Fliesstext ---------- */
.vy-sub {
  margin: .6em 0 0;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 46px);  /* im Film 46px */
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--vy-sub);
}
.vy-sub strong { font-weight: 800; }

.vy-eyebrow {
  margin: 0 0 1em;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vy-muted);
}

/* ---------- Wort-für-Wort-Animation (von unten aus einer Maske) ---------- */
.vy-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .02em .14em;     /* Platz für Unterlängen (g, y) */
  margin-bottom: -.14em;
}
.vy-word > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform var(--vy-dur) var(--vy-ease);
  transition-delay: calc(var(--i, 0) * var(--vy-stagger));
  will-change: transform;
}
.vy-reveal.is-visible .vy-word > span { transform: translateY(0); }

/* Untertitel weich einblenden, nachdem der Titel steht.
   Nur ausgeblendet, sobald voyane-headline.js läuft – ohne JavaScript bleibt alles sichtbar. */
.vy-ready .vy-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--vy-ease), transform .6s var(--vy-ease);
  transition-delay: var(--vy-delay, .45s);
}
.vy-ready .vy-fade.is-visible { opacity: 1; transform: none; }

/* Barrierefreiheit: keine Bewegung, wenn im System gewünscht */
@media (prefers-reduced-motion: reduce) {
  .vy-blob { animation: none; }
  .vy-word > span, .vy-ready .vy-fade { transition: none; transform: none; opacity: 1; }
}