/* Ermandooo WOW layer
   WHY: High-End-Splash bleibt als entfernbarer Override getrennt vom Core-Gag. */

.ermandooo-stage::before,
.ermandooo-stage::after {
  content: "";
  position: absolute;
  inset: 8% 5%;
  pointer-events: none;
  z-index: -1;
}

.ermandooo-stage::before {
  border-radius: 50%;
  background: conic-gradient(from 120deg, transparent, rgba(0,230,118,.38), transparent, rgba(64,196,255,.3), transparent);
  filter: blur(18px);
  opacity: .6;
  transform: perspective(700px) rotateX(68deg) scale(.78);
  animation: ermPortalSpin 6s linear infinite;
}

.ermandooo-stage::after {
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.6px) 15% 22%/90px 90px,
    radial-gradient(circle, rgba(0,230,118,.8) 0 1px, transparent 1.5px) 75% 62%/120px 120px;
  opacity: .2;
  animation: ermStarDrift 5s ease-in-out infinite alternate;
}

.ermandooo-word {
  position: relative;
  transform-style: preserve-3d;
  animation: ermWordReveal 1.1s cubic-bezier(.16,1,.25,1) both;
}

.ermandooo-word::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 118%;
  height: .16em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(64,196,255,.8), rgba(0,230,118,.85), transparent);
  transform: translate(-50%, -50%) scaleX(0);
  filter: drop-shadow(0 0 18px rgba(0,230,118,.8));
  animation: ermBladePass 1.2s ease .25s both;
}

.ermandooo-base {
  background: linear-gradient(90deg, #fff, #c5fff0 42%, #6ee7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(0,230,118,.28);
}

.ermandooo-d {
  color: #ffd740;
  text-shadow: 0 0 18px rgba(255,215,64,.65), 0 0 44px rgba(255,215,64,.24);
}

.ermandooo-o {
  color: #35d8ff;
  text-shadow: 0 0 12px rgba(64,196,255,.85), 0 0 34px rgba(64,196,255,.32);
}

.ermandooo-slogan {
  width: min(86vw, 500px);
  min-width: 0;
  justify-items: center;
  border-color: rgba(0,230,118,.3);
  background:
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 0%, rgba(0,230,118,.14), transparent 55%),
    rgba(4, 10, 15, .48);
}

.ermandooo-slogan-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 4vw, 18px);
}

.ermandooo-slogan-part.is-tip,
.ermandooo-slogan-part.is-win {
  justify-self: auto;
  min-width: clamp(118px, 36vw, 178px);
  text-align: center;
}

.ermandooo-slogan-part:nth-child(2) {
  min-width: 2.35em;
  text-align: center;
}

.ermandooo-slogan-part.is-tip { animation-name: ermSloganInCenter; }
.ermandooo-slogan-part.is-win { animation-name: ermSloganInCenter; }

@keyframes ermWordReveal {
  0% { opacity: 0; transform: perspective(700px) rotateX(24deg) translateY(28px) scale(.92); filter: blur(10px); }
  70% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: perspective(700px) rotateX(0) translateY(0) scale(1); filter: blur(0); }
}

@keyframes ermBladePass {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
  35% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.15) translateX(46%); }
}

@keyframes ermPortalSpin {
  to { transform: perspective(700px) rotateX(68deg) scale(.78) rotate(360deg); }
}

@keyframes ermStarDrift {
  to { opacity: .34; transform: translate3d(0, -12px, 0); }
}

@keyframes ermSloganInCenter {
  0% { opacity: 0; filter: blur(8px); transform: translate3d(0, 22px, 0) scale(.9); }
  68% { opacity: 1; filter: blur(0); transform: translate3d(0, -3px, 0) scale(1.04); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ermandooo-stage::before,
  .ermandooo-stage::after,
  .ermandooo-word,
  .ermandooo-word::before {
    animation: none !important;
  }
}