/**
 * FachTap · Intro-Video-Overlay für die Visitenkarte
 *
 * Layer-Reihenfolge (z-index, von unten nach oben):
 *   0 — #bg               (Original-Hintergrund, hat CSS background-image mit Person)
 *   1 — #intro-video-layer (Video-Element, initial hidden)
 *   2 — #bg-alt           (Alt-Hintergrund mit TRANSPARENTEM Kreis, initial hidden)
 *   3+ — restliche Karten-Elemente (emblemWrapper, card, popup, etc.)
 *
 * Wenn Toggle aktiv:
 *   - Video-Layer wird sichtbar + Video plays
 *   - Alt-Background wird sichtbar (überdeckt Original-BG)
 *   - Video scheint durch den transparenten Kreis im Alt-BG durch
 */

/* Video-Layer (unter dem alt-BG) — kein Fade, snap on/off.
   Das Video-Element ist ohnehin per visibility:hidden komplett versteckt
   bis der erste Frame gerendert ist (siehe unten). */
#intro-video-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  /* KEINE transition — schaltet direkt um */
}

#intro-video-layer.is-active {
  opacity: 1;
}

#intro-video {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
  /* Video ist DEFAULT unsichtbar. Erst wenn Playback tatsächlich läuft
     (JS setzt .video-ready auf den Layer) wird's visible.
     visibility statt opacity → kein Fade-Effekt der das schwarze Rechteck
     langsam sichtbar macht. Es ist entweder komplett weg oder komplett da. */
  visibility: hidden;
}
#intro-video-layer.video-ready #intro-video {
  visibility: visible;
}

/* Alt-Hintergrund (über dem Video). Snap on/off — kein Fade, damit während
   des Übergangs NIE das dunkle Video-Rechteck durch halbtransparentes
   bg-alt hindurchscheinen kann. */
#bg-alt {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
  /* KEINE transition */
}

#bg-alt.is-active {
  opacity: 1;
}

/* Toggle-Pill — fix am unteren Bildschirmrand.
   position: fixed statt absolute → sitzt garantiert im Viewport, egal
   ob main#bg overflow:hidden hat oder was drüber liegt. */
#intro-toggle {
  position: fixed;
  left: 50%;
  /* Über dem EmblemProgress, aber tief im Bild — im unteren Kreis-Bereich */
  bottom: 25vh;
  transform: translateX(-50%) translateY(8px);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 999px;
  background: rgba(10, 10, 8, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 160, 23, 0.55);
  color: #f5e6b8;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.4px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 18px rgba(212, 160, 23, 0.22);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition:
    opacity 0.35s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

#intro-toggle.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#intro-toggle:hover {
  background: rgba(20, 18, 12, 0.92);
  border-color: rgba(212, 160, 23, 0.85);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 26px rgba(212, 160, 23, 0.4);
}

#intro-toggle svg {
  color: #D4A017;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(212, 160, 23, 0.35));
}

/* Icon-Wechsel: Play-Dreieck oder Zurück-Pfeil, je nach Video-State */
#intro-toggle .intro-toggle__icon-back { display: none; }
#intro-toggle.is-active .intro-toggle__icon-play { display: none; }
#intro-toggle.is-active .intro-toggle__icon-back { display: block; }

.intro-toggle__label {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}

/* Mobile: Pill etwas kompakter, gleich positioniert im unteren Portraitbereich */
@media (max-width: 600px) {
  #intro-toggle {
    bottom: 27vh;
    padding: 10px 18px;
    font-size: 14px;
    gap: 8px;
  }
}

/* Wenn Video aktiv: alle sonstigen UI-Elemente ausblenden.
   Nur der Pfeil (#intro-toggle) und das Video/BG-Layer bleiben sichtbar. */
body.intro-video-active #emblemWrapper,
body.intro-video-active #rateBtn,
body.intro-video-active .card,
body.intro-video-active #invisibleButton,
body.intro-video-active #popupS,
body.intro-video-active #authButtonContainer,
body.intro-video-active #userDropdown,
body.intro-video-active #favoriteBtn,
body.intro-video-active #shareBtn,
body.intro-video-active #qrBtn,
body.intro-video-active #cookie-banner {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease;
}

/* Popups die evtl. geöffnet sind schließen wir visuell auch */
body.intro-video-active #popup,
body.intro-video-active #qrPopup,
body.intro-video-active #galleryPopup,
body.intro-video-active .pf-backdrop,
body.intro-video-active .reviews-popup {
  display: none !important;
}

/* Reduced-Motion: keine Pfeil-Dreh-Animation, nur Fade */
@media (prefers-reduced-motion: reduce) {
  #intro-toggle {
    transition: opacity 0.35s ease;
  }
}