/* ============================================================
   3D SNORRE — effects.css
   Alle Animationen & "Bugs". Inszeniert, nicht echt.
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-2px, 1px) rotate(-1deg); }
  50% { transform: translate(2px, -1px) rotate(1deg); }
  75% { transform: translate(-1px, 2px) rotate(0); }
}

@keyframes crawl {
  0%   { width: 2%; }
  80%  { width: 7%; }   /* lädt "fast" nie weiter */
  100% { width: 9%; }
}

/* Blinkender Text */
@keyframes blink-kf {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .25; }
}
.blink { animation: blink-kf 1.1s steps(1) infinite; }

/* WordArt-Optik (Deco-Überschriften) */
.wordart {
  font-family: var(--font-deco);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff 0%, var(--c-gold) 45%, var(--c-orange) 55%, var(--c-hot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.5);
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.6));
}
.wordart--fire {
  background: linear-gradient(180deg, #fff, var(--c-gold), var(--c-orange), #c00);
  -webkit-background-clip: text; background-clip: text;
  animation: hue 6s linear infinite;
}
.wordart--gold {
  background: linear-gradient(180deg, #fff7c0, var(--c-gold), #b8860b);
  -webkit-background-clip: text; background-clip: text;
}
@keyframes hue {
  to { filter: drop-shadow(3px 3px 0 rgba(0,0,0,.6)) hue-rotate(40deg); }
}

/* ---------- Drehendes 3D-Logo (CSS-3D-Transform) ---------- */
.logo3d {
  width: 110px; height: 110px; margin: 0 auto 6px;
  perspective: 600px;
}
.logo3d__cube {
  position: relative; width: 110px; height: 110px;
  transform-style: preserve-3d;
  animation: logospin 9s linear infinite;
}
.logo3d__face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-deco); font-size: 34px; color: #fff;
  border: 3px solid var(--c-gold);
  background: linear-gradient(135deg, rgba(255,0,170,.85), rgba(0,240,255,.85));
  text-shadow: 2px 2px 0 rgba(0,0,0,.6);
  backface-visibility: visible;
}
.logo3d__face--front  { transform: translateZ(55px); }
.logo3d__face--back   { transform: rotateY(180deg) translateZ(55px); }
.logo3d__face--right  { transform: rotateY(90deg) translateZ(55px); }
.logo3d__face--left   { transform: rotateY(-90deg) translateZ(55px); }
.logo3d__face--top    { transform: rotateX(90deg) translateZ(55px); }
.logo3d__face--bottom { transform: rotateX(-90deg) translateZ(55px); }
@keyframes logospin {
  from { transform: rotateX(-20deg) rotateY(0); }
  to   { transform: rotateX(-20deg) rotateY(-360deg); }
}

/* ---------- Hero Lens-Flares (reines CSS) ---------- */
.hero__flares {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.7) 0, transparent 6px),
    radial-gradient(circle at 22% 32%, rgba(0,240,255,.5) 0, transparent 22px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.6) 0, transparent 5px),
    radial-gradient(circle at 75% 25%, rgba(255,0,170,.45) 0, transparent 30px);
  animation: flarepulse 4s ease-in-out infinite alternate;
}
@keyframes flarepulse {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.06); }
}

/* ---------- "HTML geht kaputt" Glitch ----------
   Der echte Inhalt blitzt kurz weg, das Roh-HTML blitzt durch,
   dann fängt sich alles wieder. Rein per CSS, nichts echt kaputt.   */
.glitchzone__real { animation: glitch-real 9s infinite; }
.glitchzone__raw  { animation: glitch-raw  9s infinite; }

@keyframes glitch-real {
  0%, 58% { opacity: 1; transform: none; filter: none; }
  59%     { opacity: 1; transform: translateX(-4px) skewX(6deg); filter: hue-rotate(90deg); }
  60%     { opacity: 0; }
  94%     { opacity: 0; }
  95%     { opacity: 1; transform: translateX(3px) skewX(-4deg); }
  100%    { opacity: 1; transform: none; }
}
@keyframes glitch-raw {
  0%, 59%  { opacity: 0; }
  60%      { opacity: 1; }
  92%      { opacity: 1; transform: translateY(-2px); }
  94%      { opacity: 1; transform: none; }
  95%, 100%{ opacity: 0; }
}
/* Damit display-Wechsel greift, liegt das Roh-HTML absolut über dem echten Block */
.glitchzone { overflow: hidden; }
.glitchzone__raw {
  position: absolute; inset: 0; z-index: 5; margin: 16px;
  font-size: clamp(11px, 2.4vw, 15px);
}

/* ---------- Reduced motion: kritische Loops anhalten ---------- */
@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; opacity: 1; }
  .logo3d__cube { animation: none; transform: rotateX(-20deg) rotateY(-25deg); }
  .hero__flares { animation: none; }
  .glitchzone__real { animation: none; opacity: 1; }
  .glitchzone__raw { animation: none; display: none; }
  .wordart--fire { animation: none; }
  .config__bar > span { animation: none; width: 7%; }
}