/* ═══════════════════════════════════════════════════════════════════════════
   THE CIRCLE OF EXCELLENCE - MEISTERSTÜCK INTRO v4.0
   "Perfektion kennt keine Ecken."
   
   Ein einheitliches Kreis-System für maximale Premium-Wirkung
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND COLORS & CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Primary Brand Color - das echte LEVERAGE Grün */
  --lv-green: #016B4F;
  --lv-green-light: #00C896;
  --lv-green-glow: rgba(1, 107, 79, 0.8);
  --lv-green-soft: rgba(1, 107, 79, 0.4);
  --lv-green-aura: rgba(0, 200, 150, 0.15);
  
  /* Accent Colors für Tiefe */
  --lv-gold: #F7C948;
  --lv-gold-soft: rgba(247, 201, 72, 0.3);
  --lv-white: #ffffff;
  --lv-white-soft: rgba(255, 255, 255, 0.1);
  --lv-black: #000000;
  
  /* Premium Easings */
  --ease-dramatic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE LAYER
   ═══════════════════════════════════════════════════════════════════════════ */
#intro-layer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--lv-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#intro-layer * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC ATMOSPHERE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cinematische Vignette für Fokus auf Zentrum */
.intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 55% at 50% 48%, 
    transparent 0%, 
    rgba(0,0,0,0.3) 40%,
    rgba(0,0,0,0.7) 70%,
    rgba(0,0,0,0.95) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Atmosphärischer Glow im Zentrum */
.intro-atmosphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    var(--lv-green-aura) 0%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  filter: blur(40px);
  transition: opacity 2s var(--ease-smooth);
}

#intro-layer.phase-1 .intro-atmosphere,
#intro-layer.phase-2 .intro-atmosphere,
#intro-layer.phase-3 .intro-atmosphere {
  opacity: 1;
}

/* Subtle Light Rays */
.intro-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: 
    conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      rgba(1, 107, 79, 0.03) 30deg,
      transparent 60deg,
      rgba(1, 107, 79, 0.02) 90deg,
      transparent 120deg,
      rgba(1, 107, 79, 0.03) 150deg,
      transparent 180deg,
      rgba(1, 107, 79, 0.02) 210deg,
      transparent 240deg,
      rgba(1, 107, 79, 0.03) 270deg,
      transparent 300deg,
      rgba(1, 107, 79, 0.02) 330deg,
      transparent 360deg
    );
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

#intro-layer.phase-1 .intro-rays {
  animation: raysAppear 2s var(--ease-smooth) forwards, raysSpin 60s linear infinite;
}

@keyframes raysAppear {
  to { opacity: 1; }
}

@keyframes raysSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 0: PARTICLE CONVERGENCE - Partikel formen den Ring
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container für Partikel */
.circle-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

/* Einzelne Partikel - größer und leuchtender */
.circle-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--lv-green-light);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 
    0 0 10px var(--lv-green-light),
    0 0 20px var(--lv-green-glow),
    0 0 40px var(--lv-green-soft);
}

/* Partikel-Startpositionen (12 Partikel im großen Kreis) */
.circle-particle:nth-child(1)  { top: 0%;    left: 50%;   }
.circle-particle:nth-child(2)  { top: 6.7%;  left: 75%;   }
.circle-particle:nth-child(3)  { top: 25%;   left: 93.3%; }
.circle-particle:nth-child(4)  { top: 50%;   left: 100%;  }
.circle-particle:nth-child(5)  { top: 75%;   left: 93.3%; }
.circle-particle:nth-child(6)  { top: 93.3%; left: 75%;   }
.circle-particle:nth-child(7)  { top: 100%;  left: 50%;   }
.circle-particle:nth-child(8)  { top: 93.3%; left: 25%;   }
.circle-particle:nth-child(9)  { top: 75%;   left: 6.7%;  }
.circle-particle:nth-child(10) { top: 50%;   left: 0%;    }
.circle-particle:nth-child(11) { top: 25%;   left: 6.7%;  }
.circle-particle:nth-child(12) { top: 6.7%;  left: 25%;   }

/* Phase 0: Partikel erscheinen sanft und schweben zum Zentrum */
#intro-layer.phase-0 .circle-particle {
  animation: particleFloat 2.5s var(--ease-smooth) forwards;
}

/* Sanftes Staggering - alle fast gleichzeitig, aber leicht versetzt */
.circle-particle:nth-child(1)  { animation-delay: 0.1s; }
.circle-particle:nth-child(2)  { animation-delay: 0.15s; }
.circle-particle:nth-child(3)  { animation-delay: 0.2s; }
.circle-particle:nth-child(4)  { animation-delay: 0.25s; }
.circle-particle:nth-child(5)  { animation-delay: 0.3s; }
.circle-particle:nth-child(6)  { animation-delay: 0.35s; }
.circle-particle:nth-child(7)  { animation-delay: 0.4s; }
.circle-particle:nth-child(8)  { animation-delay: 0.45s; }
.circle-particle:nth-child(9)  { animation-delay: 0.5s; }
.circle-particle:nth-child(10) { animation-delay: 0.55s; }
.circle-particle:nth-child(11) { animation-delay: 0.6s; }
.circle-particle:nth-child(12) { animation-delay: 0.65s; }

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  /* Sanftes Erscheinen */
  20% {
    opacity: 1;
    transform: scale(1);
  }
  /* Kurze Pause - Partikel "atmen" */
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
  /* Langsames Schweben zum Zentrum */
  100% {
    opacity: 0.8;
    top: 50%;
    left: 50%;
    transform: scale(0.6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE GENESIS CIRCLE - Premium 3-Schicht Ring-System
   ═══════════════════════════════════════════════════════════════════════════ */
.genesis-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  z-index: 15;
  pointer-events: none;
}

/* Schicht 1: Core Ring - präzise, elegant */
.circle-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: 
    linear-gradient(var(--lv-black), var(--lv-black)) padding-box,
    linear-gradient(135deg, var(--lv-green) 0%, var(--lv-green-light) 50%, var(--lv-gold) 100%) border-box;
  opacity: 0;
  transform: scale(0.5);
}

#intro-layer.phase-0 .circle-core {
  animation: coreAppear 1.2s var(--ease-smooth) 1.8s forwards;
}

@keyframes coreAppear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Schicht 2: Glow Ring - weicher Blur */
.circle-glow {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 3px solid var(--lv-green);
  opacity: 0;
  filter: blur(8px);
}

#intro-layer.phase-0 .circle-glow {
  animation: glowAppear 1.5s var(--ease-smooth) 2s forwards, glowPulse 3s ease-in-out 3.5s infinite;
}

@keyframes glowAppear {
  to { opacity: 0.5; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.03); }
}

/* Schicht 3: Aura Ring - große Ausstrahlung */
.circle-aura {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    var(--lv-green-soft) 0%,
    var(--lv-green-aura) 40%,
    transparent 70%
  );
  opacity: 0;
  filter: blur(25px);
}

#intro-layer.phase-0 .circle-aura {
  animation: auraAppear 2s var(--ease-smooth) 2.2s forwards;
}

@keyframes auraAppear {
  to { opacity: 0.8; }
}

/* Orbiting Particles - kreisen um den Ring (sanfter) */
.circle-orbit {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  opacity: 0;
}

.orbit-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--lv-green-light);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--lv-green-light), 0 0 12px var(--lv-green-glow);
}

.orbit-particle:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.orbit-particle:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); }
.orbit-particle:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
.orbit-particle:nth-child(4) { top: 50%; left: 0; transform: translateY(-50%); }

#intro-layer.phase-0 .circle-orbit {
  animation: orbitAppear 1s var(--ease-smooth) 2.5s forwards, orbitSpin 8s linear 3.5s infinite;
}

@keyframes orbitAppear {
  to { opacity: 1; }
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 0→1: THE BIRTH - Ring kontrahiert, Knight steigt empor
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ring-Kontraktion und Burst */
#intro-layer.phase-1 .genesis-circle {
  animation: circleBirth 1.2s var(--ease-cinematic) forwards;
}

@keyframes circleBirth {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -70%) scale(1.5);
    opacity: 0;
  }
}

/* Birth Burst - Lichtexplosion nach oben */
.birth-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--lv-green-light) 0%,
    var(--lv-green) 30%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 12;
}

#intro-layer.phase-1 .birth-burst {
  animation: burstExpand 1s var(--ease-smooth) forwards;
}

@keyframes burstExpand {
  0% {
    opacity: 0;
    width: 60px;
    height: 60px;
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    width: 150px;
    height: 200px;
    top: 40%;
    filter: blur(15px);
  }
  100% {
    opacity: 0;
    width: 250px;
    height: 350px;
    top: 25%;
    filter: blur(40px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KNIGHT LOGO - Steigt aus dem Kreis empor
   ═══════════════════════════════════════════════════════════════════════════ */
.intro-knight-wrap {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

.intro-knight {
  width: 90px;
  height: auto;
  opacity: 0;
  filter: blur(30px) brightness(2);
  transform: scale(0.3) translateY(120px);
  transition: all 1.4s var(--ease-dramatic);
}

#intro-layer.phase-1 .intro-knight,
#intro-layer.phase-2 .intro-knight,
#intro-layer.phase-3 .intro-knight {
  opacity: 1;
  filter: blur(0) brightness(1) drop-shadow(0 0 30px var(--lv-green-soft));
  transform: scale(1) translateY(0);
}

/* Knight Halo - Premium Ring-Effekt */
.intro-knight-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: 
    linear-gradient(var(--lv-black), var(--lv-black)) padding-box,
    linear-gradient(135deg, var(--lv-green-soft) 0%, var(--lv-green-light) 50%, var(--lv-green-soft) 100%) border-box;
  opacity: 0;
  box-shadow: 
    0 0 40px var(--lv-green-aura),
    0 0 80px var(--lv-green-aura),
    inset 0 0 40px var(--lv-green-aura);
}

#intro-layer.phase-1 .intro-knight-halo,
#intro-layer.phase-2 .intro-knight-halo {
  animation: haloAppear 1.2s var(--ease-smooth) 0.6s forwards, haloPulse 4s ease-in-out 1.8s infinite;
}

@keyframes haloAppear {
  to { opacity: 0.9; }
}

@keyframes haloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.6; }
}

/* Shockwaves - Dramatischer Reveal */
.intro-shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--lv-green);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 20px var(--lv-green-glow);
}

#intro-layer.phase-3 .intro-shockwave {
  animation: shockwaveRipple 2s var(--ease-cinematic) forwards;
}

.intro-shockwave:nth-child(2) { 
  animation-delay: 0.15s; 
  border-color: var(--lv-green-light);
  box-shadow: 0 0 25px var(--lv-green-light);
}
.intro-shockwave:nth-child(3) { 
  animation-delay: 0.3s; 
  border-color: var(--lv-green-soft);
  box-shadow: 0 0 30px var(--lv-green-soft);
}

@keyframes shockwaveRipple {
  0% { 
    transform: translate(-50%, -50%) scale(0.5); 
    opacity: 0.9;
    border-width: 3px;
  }
  50% {
    opacity: 0.5;
  }
  100% { 
    transform: translate(-50%, -50%) scale(12); 
    opacity: 0;
    border-width: 0.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */
.intro-content {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;
  padding: 0 30px;
  text-align: center;
  min-height: 200px;
  z-index: 30;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCENE TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.intro-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition: 
    opacity 0.8s var(--ease-exit),
    transform 0.8s var(--ease-exit);
}

.intro-scene.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1: THE AWAKENING - Headlines
   ═══════════════════════════════════════════════════════════════════════════ */
.intro-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--lv-green-light);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.8s var(--ease-smooth) 0.4s;
}

#intro-layer.phase-1 .intro-scene.active .intro-label {
  opacity: 0.7;
  transform: translateY(0);
}

.intro-headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 7vw, 68px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--lv-white);
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.intro-headline .line {
  display: block;
  opacity: 0;
  transform: translateY(50px) rotateX(20deg) scale(0.9);
  transition: 
    opacity 0.6s var(--ease-smooth),
    transform 0.8s var(--ease-dramatic),
    filter 0.6s ease;
  transform-origin: center bottom;
  filter: blur(8px);
}

#intro-layer.phase-1 .intro-scene.active .line {
  opacity: 1;
  transform: translateY(0) rotateX(0) scale(1);
  filter: blur(0);
}

.intro-headline .line:nth-child(1) { transition-delay: 0.3s; }
.intro-headline .line:nth-child(2) { transition-delay: 0.5s; }
.intro-headline .line:nth-child(3) { transition-delay: 0.7s; }

/* "Außergewöhnliches" - Premium Shimmer Effect */
.intro-headline em {
  font-style: italic;
  background: linear-gradient(
    90deg, 
    var(--lv-green) 0%, 
    var(--lv-green-light) 20%, 
    var(--lv-gold) 40%,
    var(--lv-white) 50%,
    var(--lv-gold) 60%, 
    var(--lv-green-light) 80%, 
    var(--lv-green) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerGold 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px var(--lv-green-soft));
}

@keyframes shimmerGold {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1→2: EMANATION - Halo expandiert, Cards erscheinen
   ═══════════════════════════════════════════════════════════════════════════ */

/* Emanation Circle - expandiert sanft */
.emanation-circle {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid var(--lv-green-soft);
  opacity: 0;
  z-index: 15;
}

#intro-layer.phase-2 .emanation-circle {
  animation: emanationExpand 2.5s var(--ease-smooth) forwards;
}

@keyframes emanationExpand {
  0% {
    opacity: 0;
    width: 80px;
    height: 80px;
  }
  30% {
    opacity: 0.6;
    width: 200px;
    height: 200px;
  }
  100% {
    opacity: 0;
    width: 500px;
    height: 500px;
  }
}

/* Ambient Glow für Card-Emergence */
.ambient-emanation {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--lv-green-soft) 0%,
    var(--lv-green-aura) 40%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  filter: blur(30px);
  z-index: 14;
}

#intro-layer.phase-2 .ambient-emanation {
  animation: ambientGlow 2s var(--ease-smooth) forwards;
}

@keyframes ambientGlow {
  0% {
    opacity: 0;
    width: 80px;
    height: 80px;
  }
  40% {
    opacity: 1;
    width: 400px;
    height: 450px;
  }
  100% {
    opacity: 0;
    width: 600px;
    height: 650px;
    filter: blur(60px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2: THE PROOF - Premium Glass Cards
   ═══════════════════════════════════════════════════════════════════════════ */
.intro-proof {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  margin-bottom: 45px;
  padding-top: 10px;
}

.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 30px 26px;
  background: linear-gradient(
    135deg,
    rgba(1, 107, 79, 0.12) 0%,
    rgba(1, 107, 79, 0.06) 100%
  );
  border: 1px solid rgba(0, 200, 150, 0.15);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  min-width: 175px;
  position: relative;
  overflow: hidden;
  
  /* Eleganter Start */
  opacity: 0;
  transform: scale(0.85) translateY(25px);
  filter: blur(10px);
  transition: 
    opacity 1s var(--ease-smooth),
    transform 1.2s var(--ease-dramatic),
    filter 0.8s ease-out,
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Subtle inner glow */
.intro-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(0, 200, 150, 0.1) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.intro-card:hover::before {
  opacity: 1;
}

.intro-card:hover {
  background: linear-gradient(
    135deg,
    rgba(1, 107, 79, 0.18) 0%,
    rgba(1, 107, 79, 0.08) 100%
  );
  border-color: rgba(0, 200, 150, 0.35);
  transform: translateY(-10px) scale(1.03);
  box-shadow: 
    0 25px 70px rgba(1, 107, 79, 0.3),
    0 0 50px rgba(0, 200, 150, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#intro-layer.phase-2 .intro-scene.active .intro-card {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* Elegantes Staggering */
.intro-card:nth-child(1) { transition-delay: 0.5s; }
.intro-card:nth-child(2) { transition-delay: 0.7s; }
.intro-card:nth-child(3) { transition-delay: 0.9s; }

.intro-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(1, 107, 79, 0.15);
  border: 1px solid rgba(0, 200, 150, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.intro-card:hover .intro-card-icon {
  background: rgba(1, 107, 79, 0.25);
  box-shadow: 0 0 30px var(--lv-green-aura);
  transform: scale(1.1);
}

.intro-card-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--lv-green-light);
  stroke-width: 2;
  fill: none;
}

.intro-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
  text-align: center;
}

/* Divider */
.intro-divider {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lv-green-soft), transparent);
  margin: 0 auto 30px;
  transition: width 1s var(--ease-smooth) 1.1s;
}

#intro-layer.phase-2 .intro-scene.active .intro-divider {
  width: 200px;
}

/* Quote - Elegante Unterschrift */
.intro-quote {
  font-family: 'Fraunces', serif;
  font-size: clamp(15px, 2vw, 19px);
  font-style: italic;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: translateY(15px);
  transition: all 1s var(--ease-smooth) 1.3s;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

#intro-layer.phase-2 .intro-scene.active .intro-quote {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 3: THE REVELATION - Brand Finale
   ═══════════════════════════════════════════════════════════════════════════ */

/* Revelation Circle - finaler Ring-Burst */
.revelation-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--lv-green);
  opacity: 0;
  pointer-events: none;
  z-index: 15;
}

#intro-layer.phase-3 .revelation-circle {
  animation: revelationBurst 1.2s var(--ease-smooth) forwards;
}

@keyframes revelationBurst {
  0% {
    opacity: 1;
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
  50% {
    opacity: 0.6;
    width: 300px;
    height: 300px;
    border-width: 2px;
  }
  100% {
    opacity: 0;
    width: 600px;
    height: 600px;
    border-width: 1px;
  }
}

.intro-brand {
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  filter: blur(15px);
  transition: all 1.2s var(--ease-dramatic);
}

#intro-layer.phase-3 .intro-scene.active .intro-brand {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

.intro-brand-name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(30px, 6.5vw, 60px);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--lv-white);
  margin: 0 0 25px 0;
  text-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(255, 255, 255, 0.25),
    0 0 100px var(--lv-green-soft);
  animation: brandGlow 3s ease-in-out infinite;
}

@keyframes brandGlow {
  0%, 100% { 
    text-shadow: 
      0 2px 10px rgba(0, 0, 0, 0.5),
      0 0 50px rgba(255, 255, 255, 0.25),
      0 0 100px var(--lv-green-soft);
  }
  50% { 
    text-shadow: 
      0 2px 10px rgba(0, 0, 0, 0.5),
      0 0 60px rgba(255, 255, 255, 0.35),
      0 0 120px var(--lv-green-glow);
  }
}

.intro-brand-name span {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.25em;
}

.intro-tagline {
  font-family: 'Fraunces', serif;
  font-size: clamp(17px, 2.5vw, 26px);
  font-style: italic;
  color: var(--lv-green-light);
  margin: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s var(--ease-smooth) 0.5s;
  text-shadow: 
    0 0 30px var(--lv-green-glow),
    0 0 60px var(--lv-green-soft);
  letter-spacing: 0.05em;
}

#intro-layer.phase-3 .intro-scene.active .intro-tagline {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */
.intro-progress {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 100;
}

.intro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.5s var(--ease-dramatic);
  cursor: pointer;
}

.intro-dot.active {
  background: var(--lv-green-light);
  transform: scale(1.3);
  box-shadow: 0 0 15px var(--lv-green-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKIP BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
.intro-skip {
  position: absolute;
  bottom: 25px;
  right: 30px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.25);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
}

.intro-skip::after {
  content: '→';
  font-size: 13px;
  transition: transform 0.3s ease;
}

.intro-skip:hover {
  color: rgba(255, 255, 255, 0.6);
}

.intro-skip:hover::after {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXIT ANIMATION - Spectacular Fade
   ═══════════════════════════════════════════════════════════════════════════ */
#intro-layer.exit {
  animation: introExit 1s var(--ease-cinematic) forwards;
}

@keyframes introExit {
  0% { 
    opacity: 1; 
    filter: blur(0) brightness(1);
    transform: scale(1);
  }
  40% {
    opacity: 1;
    filter: blur(0) brightness(1.15);
    transform: scale(1.02);
  }
  100% { 
    opacity: 0; 
    filter: blur(20px) brightness(1.3);
    transform: scale(1.05);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .circle-particles {
    width: 280px;
    height: 280px;
  }
  
  .genesis-circle {
    width: 100px;
    height: 100px;
  }
  
  .intro-knight {
    width: 70px;
  }
  
  .intro-knight-wrap {
    top: 12%;
  }
  
  .intro-knight-halo {
    width: 120px;
    height: 120px;
  }
  
  .intro-content {
    top: 50%;
    padding: 0 20px;
  }
  
  .intro-label {
    font-size: 10px;
    letter-spacing: 0.3em;
    margin-bottom: 20px;
  }
  
  .intro-proof {
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }
  
  .intro-card {
    flex-direction: row;
    min-width: auto;
    width: 100%;
    max-width: 300px;
    padding: 18px 22px;
    gap: 16px;
  }
  
  .intro-card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  
  .intro-card-icon svg {
    width: 22px;
    height: 22px;
  }
  
  .intro-card-text {
    font-size: 14px;
    text-align: left;
  }
  
  .intro-skip {
    right: 50%;
    transform: translateX(50%);
    bottom: 18px;
  }
  
  .intro-progress {
    bottom: 55px;
  }
  
  .intro-quote {
    font-size: 14px;
    padding: 0 10px;
  }
  
  .intro-brand-name {
    letter-spacing: 0.15em;
  }
  
  /* Subtile Effekte auf Mobile reduzieren */
  .intro-rays,
  .circle-orbit,
  .emanation-circle {
    display: none;
  }
  
  .intro-atmosphere {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 480px) {
  .intro-headline {
    font-size: clamp(24px, 7vw, 36px);
  }
  
  .intro-brand-name {
    font-size: clamp(20px, 5vw, 28px);
    letter-spacing: 0.1em;
  }
  
  .intro-tagline {
    font-size: 15px;
  }
  
  .intro-card {
    max-width: 280px;
    padding: 14px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}