/* Video-Hintergrund + Fallback — tiefschwarz / Purple-Obsidian */

.produkt-page {
  font-family: "Montserrat", system-ui, sans-serif;
  background-color: #0a0512;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(163, 102, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(90, 40, 140, 0.12), transparent 50%),
    linear-gradient(180deg, #0f071b 0%, #0a0512 45%, #050208 100%);
}

.video-background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

.video-background.is-hidden {
  opacity: 0;
}

.overlay-shading {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% 42%, rgba(6, 3, 12, 0.62), transparent 70%),
    linear-gradient(
      180deg,
      rgba(12, 6, 22, 0.5) 0%,
      rgba(9, 4, 16, 0.78) 55%,
      rgba(5, 2, 8, 0.94) 100%
    );
  z-index: -99;
  pointer-events: none;
}

.overlay-vignette {
  position: fixed;
  inset: 0;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55);
  z-index: -98;
  pointer-events: none;
}

/* Aggressive, bedrohliche Headline */
.headline-aggressive {
  font-family: "Anton", "Oswald", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.015em;
  color: #f4eeff;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.7),
    0 3px 6px rgba(0, 0, 0, 0.85),
    0 6px 26px rgba(138, 74, 226, 0.5);
}

/* Drohender Subtext — klar lesbar, kräftiger Schatten fürs Video */
.threat-text {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.75;
  color: #f6f2fd;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.98),
    0 2px 10px rgba(0, 0, 0, 0.92),
    0 0 26px rgba(0, 0, 0, 0.7);
}

/* Zeilenumbrüche im getippten Subtext erhalten */
.tw-subtext {
  white-space: pre-wrap;
}

.threat-products {
  font-family: "Oswald", system-ui, sans-serif;
  font-weight: 600;
}

/* Terminal-Cursor hinter der Headline */
.tw-caret {
  display: inline-block;
  width: 0.5ch;
  height: 0.9em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: currentColor;
  box-shadow: 0 0 12px rgba(196, 168, 255, 0.7);
  animation: caretBlink 1s steps(1) infinite;
}

.tw-caret.is-done {
  display: none;
}

@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}

/* WHORP-Banner — weiche Ränder blenden in den dunklen Hintergrund */
.whorp-banner {
  display: block;
  margin-inline: auto;
  filter: drop-shadow(0 0 34px rgba(139, 92, 246, 0.32));
  pointer-events: none;
  user-select: none;
  /* Ohne JS: sofort sichtbar + atmend */
  animation: nexusBreath 8s ease-in-out infinite;
  will-change: opacity, filter;
}

/* Mit JS: Kaskade steuert Einblendung */
.js .whorp-banner {
  opacity: 0;
  animation: none;
  filter: brightness(1) drop-shadow(0 0 24px rgba(139, 92, 246, 0.3));
  transition:
    opacity 12000ms cubic-bezier(0.3, 0, 0.5, 1),
    filter 12000ms cubic-bezier(0.3, 0, 0.5, 1);
}

/* Ende des Fades: absolutes Glühen — als würde es aus dem Bild brennen */
.js .whorp-banner.is-revealed {
  opacity: 1;
  filter:
    brightness(1.08)
    drop-shadow(0 0 55px rgba(200, 160, 255, 0.85))
    drop-shadow(0 0 120px rgba(139, 92, 246, 0.5));
}

/* Nahtloser Übergang: Atmen startet mit -4s (bei 50% = Glüh-Peak) */
.js .whorp-banner.is-breathing {
  animation: nexusBreath 8s ease-in-out infinite;
  animation-delay: -4s;
}

/* Produktzeile blendet nach dem Monster ein */
.js .tw-reveal {
  opacity: 0;
  transition: opacity 900ms ease-out;
}

.js .tw-reveal.is-revealed {
  opacity: 1;
}

@keyframes nexusBreath {
  0%,
  100% {
    opacity: 0.55;
    filter: brightness(1) drop-shadow(0 0 18px rgba(139, 92, 246, 0.25));
  }
  50% {
    opacity: 1;
    filter:
      brightness(1.08)
      drop-shadow(0 0 55px rgba(200, 160, 255, 0.85))
      drop-shadow(0 0 120px rgba(139, 92, 246, 0.5));
  }
}

@media (prefers-reduced-motion: reduce) {
  .whorp-banner,
  .js .whorp-banner {
    animation: none;
    opacity: 1;
    transition: none;
  }

  .js .tw-reveal {
    opacity: 1;
    transition: none;
  }

  .tw-caret {
    animation: none;
  }

  .video-background {
    display: none;
  }
}