/* ==========================================================================
   IT-360 – Partikel-Intro (gehört zu js/hero-particles.js)
   --------------------------------------------------------------------------
   1. Bühne: Vollbild, schwarz-blauer Raum, Canvas
   2. Wenig Text: Ort oben, Unterzeile + Buttons unten
   3. Intro-Choreografie: Header und Text erscheinen erst nach der Explosion
   4. Responsive + "Bewegung reduzieren"
   ========================================================================== */

/* 1. Bühne ---------------------------------------------------------------- */

.xhero {
  padding-top: 0;
  background: radial-gradient(120% 80% at 50% 44%, #111c33 0%, #070b16 60%, #04060d 100%);
}

.xhero-stage {
  /* Abstand, den die Safari-Leisten gerade verdecken (0, wenn sie ausgeblendet sind) */
  --bar: calc(100lvh - 100dvh);
  position: relative;
  /* lvh = volle Höhe inkl. Bereich hinter den Safari-Leisten. Seit iOS 26 schwebt die untere
     Leiste durchsichtig über der Seite – mit dvh endete der Hero darüber und darunter schaute
     die Logo-Leiste durch. Inhalte unten werden per --bar über die Leiste gehoben. */
  height: 100vh;
  height: 100lvh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}

.xhero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  touch-action: pan-y; /* vertikal scrollen bleibt auf dem Handy möglich */
}

/* weiches Leuchten hinter dem Logo */
.xhero-glow {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: -2;
  width: min(900px, 120vw);
  aspect-ratio: 2.4;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(207 174 111 / 0.18), transparent);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 2s ease 1s;
}

.xhero-bottom {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(44% + min(18vh, 180px));
  padding-inline: 1rem;
  text-align: center;
  /* beim Scrollen nach oben gleiten und verschwinden */
  transform: translateY(calc(var(--p, 0) * -60px));
  opacity: calc(1 - var(--p, 0) * 2);
}

/* Unterzeile wechselt passend zur Partikel-Form */
.xhero-label {
  min-height: 1.6em;
  color: var(--paper);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    filter 0.5s ease;
}
.xhero-label.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

.xhero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.xhero .btn-gold {
  box-shadow: 0 0 0 0 rgb(207 174 111 / 0.5);
  animation: xhero-ping 2.6s ease-out 4s infinite;
}

/* goldener Button "pingt" leicht, damit er auffällt */
@keyframes xhero-ping {
  0% {
    box-shadow: 0 0 0 0 rgb(207 174 111 / 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 16px rgb(207 174 111 / 0);
  }
}

.btn-glass {
  color: var(--paper);
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover {
  color: var(--night);
  background: var(--paper);
}

/* Maus-Symbol mit laufendem Punkt */

/* am Seitenende ausgeblendet */

.xhero .logo-rail {
  position: relative;
  z-index: 2;
}

/* 3. Intro-Choreografie --------------------------------------------------- */

/* Header, Ort, Buttons & Co. sind am Anfang unsichtbar … */
body:has(.xhero) .site-header,
.xhero-actions {
  opacity: 0;
  transition:
    opacity 1s ease,
    translate 1s ease;
}
.xhero-actions {
  translate: 0 14px;
}

/* … und erscheinen gestaffelt, sobald das Logo steht (.is-ready setzt das Script) */
body:has(.xhero.is-ready) .site-header {
  opacity: 1;
  transition-delay: 0.6s;
}
.xhero.is-ready .xhero-glow {
  opacity: 1;
}

.xhero.is-ready .xhero-actions {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.45s;
}

/* Sicherheitsnetz: falls JavaScript fehlt oder hängt, nach 4 s trotzdem alles zeigen */
@keyframes xhero-show {
  to {
    opacity: 1;
    translate: 0 0;
  }
}
body:has(.xhero) .site-header,
.xhero-actions {
  animation: xhero-show 0.8s ease 4.5s forwards;
}

/* 4. Responsive ----------------------------------------------------------- */

@media (max-width: 720px) {
  .xhero-bottom {
    top: calc(44% + 11vh);
  }
  /* beide Buttons in einer Zeile (sonst überdeckt der "Ping" des goldenen Buttons den zweiten) */
  .xhero-actions {
    flex-wrap: nowrap;
    gap: 0.6rem;
  }
  .xhero-actions .btn {
    padding: 0.78rem 1rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xhero .btn-gold {
    animation: none;
  }
}

/* sehr schmale Handys (z. B. iPhone SE): Buttons untereinander, mit genug Abstand für den "Ping" */
@media (max-width: 370px) {
  .xhero-actions {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
  }
}