/* ============================================================================
   video-end-overlay.css
   Libertara-/LifeFlow-Endcard, die nach dem Ende eines Vimeo-Videos die
   Vimeo-eigene Endcard ("Mehr von ...") vollständig überdeckt.

   Gehört zu: assets/js/video-end-overlay.js
   Aktivierung im Markup: ein Container mit [data-vimeo-endcard].

   Farbwelt (Libertara-/LifeFlow):
     Navy  #0B1D33   ·   Gold  #D4AF37   ·   Cream #F7F3ED
   Schriften werden aus dem Design-System übernommen (Fraunces / Inter),
   mit sicheren Fallbacks, damit das Overlay auch eigenständig funktioniert.
   ========================================================================== */

/* Container, der das Overlay trägt, muss Positionskontext bieten.
   (Das JS setzt dies zusätzlich nur dann, wenn er statisch wäre.) */
[data-vimeo-endcard] { position: relative; }

/* Der per Klick nachgeladene Vimeo-Player füllt exakt die Player-Fläche.
   Ersetzt die früheren Inline-Styles des alten Poster-Launchers 1:1. */
.veo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

/* ---------------------------------------------------------------------------
   Lade-Kulisse
   Das Startbild bleibt nach dem Klick sichtbar, bis der Vimeo-Player wirklich
   bereit ist. So sieht der Nutzer nie einen schwarzen Kasten, sondern sofort
   das Poster mit einem Spinner — wichtig auf langsamen Mobil-Verbindungen.
--------------------------------------------------------------------------- */
.veo-poster {
  transition: opacity 480ms ease;
}
/* Sanft ausblenden, sobald der Player bereit ist. */
.veo-poster--done {
  opacity: 0;
}
/* Das Play-Symbol der Seite während des Ladens ausblenden — der Spinner
   übernimmt das Feedback (Klassennamen beider Trailer-Layouts abgedeckt). */
.veo-poster--loading .play,
.veo-poster--loading .player__play {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* Ladespinner in Gold, zentriert über dem Poster. */
.veo-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(34px, 9%, 54px);
  height: clamp(34px, 9%, 54px);
  border-radius: 50%;
  border: 3px solid rgba(247, 243, 237, 0.25);
  border-top-color: #D4AF37;
  animation: veo-spin 900ms linear infinite;
  pointer-events: none;
}
@keyframes veo-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .veo-spinner { animation-duration: 1800ms; }
}

/* ---------------------------------------------------------------------------
   Overlay-Grundfläche
   Liegt über dem Player (höheres z-index als der Vimeo-Iframe) und erbt
   dank overflow/border-radius des Players dessen abgerundete Ecken.
   container-type: size  ermöglicht flüssige Skalierung über cq-Einheiten,
   sodass die Endcard sich an die Playergröße (nicht das Viewport) anpasst.
--------------------------------------------------------------------------- */
.veo {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  container-type: size;
  color: #F7F3ED;
  font-family: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  opacity: 0;
  /* Bewusst kurz (260ms): Der deckende Navy-Hintergrund muss die Vimeo-Endcard
     sofort maskieren. Die hochwertige, gestaffelte Anmutung entsteht über die
     nachgelagerten Inhalts-Animationen (Logo → Headline → CTA), nicht hier. */
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
}

/* Das hidden-Attribut muss das display:grid sicher überstimmen. */
.veo[hidden] { display: none; }

/* Sichtbarer Zustand — wird vom JS nach dem Video-Ende gesetzt. */
.veo--visible { opacity: 1; }

/* Navy-Hintergrund mit weichem Vignette-Verlauf + leichtem Blur für Tiefe. */
.veo__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 30%,
      rgba(18, 42, 70, 0.85) 0%,
      rgba(11, 29, 51, 0.96) 58%,
      #0B1D33 100%);
  -webkit-backdrop-filter: blur(3px) saturate(105%);
  backdrop-filter: blur(3px) saturate(105%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.45);
}

/* Inhaltsspalte — zentriert, ruhig, mit fluidem Spacing. */
.veo__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.5rem, 2.4cqi, 1rem);
  padding: clamp(1rem, 6cqi, 3rem);
  max-width: min(92%, 640px);
}

/* ---------------------------------------------------------------------------
   Gestaffelte Einblend-Animation
   Grundzustand aller Inhaltselemente: leicht nach unten versetzt + transparent.
   Im Zustand .veo--visible laufen sie nacheinander (transition-delay) sanft ein.
--------------------------------------------------------------------------- */
.veo__logo,
.veo__brand,
.veo__headline,
.veo__text,
.veo__cta,
.veo__more {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Logo erscheint zusätzlich leicht heranskaliert (Apple-/Netflix-Anmutung). */
.veo__logo { transform: translateY(16px) scale(0.92); }

.veo--visible .veo__logo     { opacity: 1; transform: translateY(0) scale(1); transition-delay: 140ms; }
.veo--visible .veo__brand    { opacity: 1; transform: none; transition-delay: 240ms; }
.veo--visible .veo__headline { opacity: 1; transform: none; transition-delay: 340ms; }
.veo--visible .veo__text     { opacity: 1; transform: none; transition-delay: 460ms; }
.veo--visible .veo__cta      { opacity: 1; transform: none; transition-delay: 600ms; }
.veo--visible .veo__more     { opacity: 1; transform: none; transition-delay: 720ms; }

/* Logo-Marke */
.veo__logo {
  width: clamp(52px, 16cqi, 104px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

/* Kleine Wortmarke unter dem Logo */
.veo__brand {
  margin: 0;
  font-size: clamp(0.6rem, 2.2cqi, 0.78rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: #D4AF37;
}

/* Headline — Serifen-Display aus dem Design-System */
.veo__headline {
  margin: 0;
  font-family: var(--font-display, "Fraunces", Georgia, "Times New Roman", serif);
  font-weight: 400;
  line-height: 1.08;
  font-size: clamp(1.35rem, 6.4cqi, 2.5rem);
  color: #F7F3ED;
}

/* Fließtext */
.veo__text {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(0.9rem, 3cqi, 1.075rem);
  line-height: 1.55;
  color: rgba(247, 243, 237, 0.82);
}

/* Goldener CTA-Button */
.veo__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(0.35rem, 1.6cqi, 0.75rem);
  padding: clamp(0.7rem, 2.4cqi, 0.95rem) clamp(1.2rem, 4.4cqi, 2rem);
  border-radius: 999px;
  background: #D4AF37;
  color: #0B1D33;
  font-weight: 700;
  font-size: clamp(0.9rem, 3cqi, 1.05rem);
  text-decoration: none;
  box-shadow:
    0 14px 34px -12px rgba(212, 175, 55, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.veo__cta:hover {
  background: #E0BD4E;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -14px rgba(212, 175, 55, 0.72);
}
.veo__cta:active { transform: translateY(0); }
.veo__cta-arrow { transition: transform 200ms ease; }
.veo__cta:hover .veo__cta-arrow { transform: translateX(3px); }

/* Sekundärer Textlink "Mehr erfahren" */
.veo__more {
  color: rgba(247, 243, 237, 0.72);
  font-size: clamp(0.8rem, 2.6cqi, 0.92rem);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 243, 237, 0.28);
  padding-bottom: 1px;
  transition: color 180ms ease, border-color 180ms ease;
}
.veo__more:hover { color: #F7F3ED; border-color: rgba(247, 243, 237, 0.7); }

/* Schließen-Button (oben rechts, über der gesamten Overlay-Fläche) */
.veo__close {
  position: absolute;
  top: clamp(0.5rem, 2.4cqi, 1rem);
  right: clamp(0.5rem, 2.4cqi, 1rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 9cqi, 44px);
  height: clamp(34px, 9cqi, 44px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 243, 237, 0.10);
  color: #F7F3ED;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.veo__close:hover { background: rgba(247, 243, 237, 0.20); transform: rotate(90deg); }
.veo__close svg { width: 42%; height: 42%; }

/* Sichtbarer Tastaturfokus — Barrierefreiheit */
.veo :focus-visible {
  outline: 3px solid #D4AF37;
  outline-offset: 3px;
  border-radius: 6px;
}
/* Gold auf Gold wäre unsichtbar — CTA erhält einen hellen Fokusring. */
.veo__cta:focus-visible { outline-color: #F7F3ED; }

/* ---------------------------------------------------------------------------
   Reduzierte Bewegung — Animationen abschalten, Inhalte sofort zeigen.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .veo,
  .veo__logo,
  .veo__brand,
  .veo__headline,
  .veo__text,
  .veo__cta,
  .veo__more,
  .veo__cta-arrow {
    transition: none !important;
  }
  .veo__logo,
  .veo__brand,
  .veo__headline,
  .veo__text,
  .veo__cta,
  .veo__more {
    opacity: 1;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Helle Variante (opt-in per data-endcard-theme="light")
   Cremefarbener Hintergrund + Navy-Text, passend zum hellen Website-Design.
   Der goldene CTA bleibt erhalten. Aktiviert das Modul über die Klasse .veo--light.
--------------------------------------------------------------------------- */
.veo--light { color: #0B1D33; }

.veo--light .veo__backdrop {
  background:
    radial-gradient(120% 120% at 50% 28%,
      #FFFFFF 0%,
      #F7F3ED 58%,
      #EFE7D8 100%);
  -webkit-backdrop-filter: blur(3px) saturate(105%);
  backdrop-filter: blur(3px) saturate(105%);
  box-shadow: inset 0 0 120px rgba(11, 29, 51, 0.08);
}

.veo--light .veo__brand { color: #A9832A; }
.veo--light .veo__headline { color: #0B1D33; }
.veo--light .veo__text { color: rgba(16, 34, 55, 0.78); }

.veo--light .veo__logo { filter: drop-shadow(0 8px 22px rgba(11, 29, 51, 0.18)); }

.veo--light .veo__more {
  color: rgba(16, 34, 55, 0.72);
  border-bottom-color: rgba(16, 34, 55, 0.28);
}
.veo--light .veo__more:hover { color: #0B1D33; border-bottom-color: rgba(16, 34, 55, 0.6); }

.veo--light .veo__close {
  background: rgba(11, 29, 51, 0.08);
  color: #0B1D33;
}
.veo--light .veo__close:hover { background: rgba(11, 29, 51, 0.16); }

/* Fokusring auf hellem Grund gut sichtbar halten. */
.veo--light :focus-visible { outline-color: #B8952c; }
.veo--light .veo__cta:focus-visible { outline-color: #0B1D33; }

/* ---------------------------------------------------------------------------
   Fallback für Browser ohne Container-Queries (cq-Einheiten).
   Dann greifen feste, gut lesbare Größen statt der fluiden cqi-Werte.
--------------------------------------------------------------------------- */
@supports not (container-type: size) {
  .veo__logo     { width: 88px; }
  .veo__brand    { font-size: 0.72rem; }
  .veo__headline { font-size: clamp(1.5rem, 4.5vw, 2.4rem); }
  .veo__text     { font-size: 1rem; }
  .veo__cta      { font-size: 1rem; padding: 0.85rem 1.7rem; }
  .veo__more     { font-size: 0.9rem; }
  .veo__close    { width: 42px; height: 42px; }
}