/* ============================================================================
   intro.css — Rauch-/Logo-/Konfetti-Intro der Startseite (nur index.html)

   Aufbau (unten nach oben): Basis -> Glut -> Rauch hinten -> Rauch Mitte -> Logo -> Rauch vorn -> Vignette.
   Steuerung: assets/js/intro.js (Zeitablauf, Konfetti-Canvas). Ohne JavaScript oder ohne die Klasse
   .intro-on am <html> bleibt das Intro unsichtbar (display:none) - die Seite hat immer Vorrang.
   ========================================================================== */
.intro { display: none; }
html.intro-on { overflow: hidden; background: #050504; }
html.intro-on.intro-free { overflow: auto; }
/* Cookie-Hinweis erscheint erst, wenn das Intro vorbei ist (sonst schimmert er durch die Rauchebene) */
html.intro-on .cookie-bar { visibility: hidden; }
/* !important, weil das Markup zur Sicherheit inline display:none traegt (bleibt unsichtbar, falls dieses CSS je fehlt) */
html.intro-on .intro { display: block !important; }

.intro {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden; contain: strict;
  background: radial-gradient(ellipse at 50% 46%, #15110e 0%, #0a0908 46%, #030302 100%);
  opacity: 1;
}
.intro.is-passive { pointer-events: none; }

/* warmer, kaum sichtbarer Lichtschein hinter dem Logo (Vereinsfarbe Glutrot) */
.intro__glow {
  position: absolute; left: 50%; top: 46%; width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 50, 31, .26) 0%, rgba(166, 50, 31, .10) 38%, transparent 68%);
  animation: introGlow 4.5s ease-in-out infinite alternate;
}
@keyframes introGlow { from { transform: scale(.94); opacity: .8; } to { transform: scale(1.08); opacity: 1; } }

/* Rauchschichten: grosse, weiche Texturen (per JS erzeugt), die langsam driften.
   transform = Dauerbewegung, translate/scale = Auseinanderziehen in der Aufloesung (getrennte Eigenschaften). */
.intro__smoke {
  position: absolute; inset: -18vmax; background-repeat: repeat; will-change: transform, translate, scale;
  transition: translate 3.6s cubic-bezier(.35, 0, .55, 1), scale 3.6s cubic-bezier(.35, 0, .55, 1);
}
.intro__smoke--back  { background-size: 1500px 1500px; opacity: .70; animation: introDriftA 12s linear forwards; }
.intro__smoke--mid   { background-size: 1100px 1100px; opacity: .55; animation: introDriftB 12s linear forwards; }
.intro__smoke--front { background-size:  820px  820px; opacity: .32; animation: introDriftC 12s linear forwards; }
@keyframes introDriftA { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-5vw, -2vh, 0) rotate(-1.6deg); } }
@keyframes introDriftB { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(6vw, 1.5vh, 0) rotate(1.8deg); } }
@keyframes introDriftC { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-4vw, -5vh, 0) rotate(-1deg); } }
.intro.is-dissolving .intro__smoke--back  { translate: -9vw -3vh;  scale: 1.35; }
.intro.is-dissolving .intro__smoke--mid   { translate: 11vw 2vh;   scale: 1.5; }
.intro.is-dissolving .intro__smoke--front { translate: -2vw -16vh; scale: 1.25; }

/* Logo: Original (assets/img/logo.jpg), mittig, ohne Verzerrung */
.intro__logo-wrap { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro__logo {
  width: clamp(150px, 32vmin, 250px); height: auto; aspect-ratio: 1; border-radius: 50%; display: block;
  opacity: 0; transform: scale(.94); will-change: opacity, transform, filter;
  box-shadow: 0 0 0 1px rgba(236, 228, 212, .14), 0 0 70px 6px rgba(0, 0, 0, .75);
}

.intro__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}

.intro__skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 3;
  min-height: 44px; padding: 0 1.15rem; border-radius: 100px; cursor: pointer;
  font: 700 .82rem/1 var(--font-body, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(236, 228, 212, .82); background: rgba(10, 9, 8, .55); border: 1px solid rgba(236, 228, 212, .28);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.intro__skip:hover, .intro__skip:focus-visible { color: #fff; border-color: rgba(224, 188, 110, .9); background: rgba(10, 9, 8, .8); }
.intro__skip:focus-visible { outline: 2px solid #E0BC6E; outline-offset: 3px; }

/* Konfetti-Ebene liegt ueber dem Intro, faengt aber nie Eingaben ab */
.intro-confetti { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 2001; pointer-events: none; }

@media print { html.intro-on .intro, .intro, .intro-confetti { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html.intro-on .intro, .intro, .intro-confetti { display: none !important; } html.intro-on { overflow: auto; } }