/* ═══════════════════════════════════════════════════════════════
   MASSGEBUNG — Hero Glow Effect
   Version: 1.0
   Dependencies: tokens.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══ HERO SECTION BASE ═══ */
.section-hero {
  position: relative;
}

/* ═══ CSS CUSTOM PROPERTIES (Tokens) ═══ */
:root {
  --glow-animation-duration: 2500ms;
  --glow-animation-delay: 300ms;
  --glow-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ═══ CONTAINER ═══ */
.hero-glow-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1; /* Über Grid, unter Content */
}

/* ═══ LAYER BASE ═══ */
.hero-glow-layer {
  position: absolute;
  border-radius: 50%;
  opacity: 0;

  /* GPU Acceleration */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;

  /* Animation */
  animation: glowFadeIn var(--glow-animation-duration) var(--glow-easing) forwards;
  animation-delay: var(--glow-animation-delay);
}

/* ═══ LAYER 1: Outer Glow ═══ */
.hero-glow-layer--outer {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--glow-color-primary) 0%, transparent 70%);
  filter: blur(100px);
  top: -80px;
  right: -80px;
}

/* ═══ LAYER 2: Inner Glow ═══ */
.hero-glow-layer--inner {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--glow-color-secondary) 0%, transparent 70%);
  filter: blur(60px);
  top: -50px;
  right: -50px;
}

/* ═══ ANIMATION ═══ */
@keyframes glowFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ═══ RESPONSIVE: Mobile (deaktiviert) ═══ */
@media (max-width: 768px) {
  .hero-glow-container {
    display: none; /* Glow aus auf Mobile */
  }
}