/* =====================================================================
   Eternal VRChat - Zusatz-Styles
   Wird nach dem Haupt-Stylesheet geladen und überschreibt es gezielt.
   ===================================================================== */

:root {
  --et-cyan:   #00f0ff;
  --et-ice:    #9fe9ff;
  --et-blue:   #3b7bff;
  --et-violet: #a855f7;
  --et-pink:   #ff2d95;
}

/* =====================================================================
   1. HERO-ÜBERSCHRIFT "ETERNAL"
   ===================================================================== */

.eternal-title {
  position: relative;
  display: block;
  padding: 0;
  font-family: "Orbitron", "Sora", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  perspective: 1000px;

  /* Wieder wie ganz am Anfang: schlicht weiß mit einem festen Cyan-Glow,
     keine laufende Farbanimation mehr. Der Übergang beim Hovern läuft
     über eine kurze, einmalige CSS-Transition statt einer Dauerschleife -
     das kostet den Browser fast nichts. */
  filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.5));
  transition: filter 0.3s ease;
}

.eternal-title:hover {
  filter: drop-shadow(0 0 26px rgba(0, 240, 255, 0.8));
}

.eternal-title--intro {
  letter-spacing: 0.14em;
}

/* Jeder Buchstabe einzeln: schlicht weiß, gestaffelter Einflug beim Laden,
   dauerhaftes leichtes Schweben. */
.eternal-letter {
  display: inline-block;
  transform-origin: 50% 65%;
  will-change: transform;
  color: #ffffff;

  animation:
    et-in 0.95s cubic-bezier(0.16, 0.9, 0.24, 1.04) both,
    et-float 4.5s ease-in-out infinite;
  animation-delay:
    calc(var(--i, 0) * 95ms),
    calc(1.6s + var(--i, 0) * 170ms);
}

/* Glitch-Ebenen: liegen deckungsgleich über der Schrift und
   flackern nur alle paar Sekunden kurz auf */
.eternal-title::before,
.eternal-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  background: none;
  opacity: 0;
  mix-blend-mode: screen;
  letter-spacing: inherit;
}

.eternal-title::before {
  -webkit-text-fill-color: var(--et-cyan);
  color: var(--et-cyan);
  animation: et-glitch-a 8s steps(1, end) infinite;
  animation-delay: 3.2s;
}

.eternal-title::after {
  -webkit-text-fill-color: var(--et-pink);
  color: var(--et-pink);
  animation: et-glitch-b 8s steps(1, end) infinite;
  animation-delay: 3.32s;
}

@keyframes et-in {
  0% {
    opacity: 0;
    transform: translateY(0.6em) rotateX(-80deg) scale(0.72);
    filter: blur(16px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  72% {
    transform: translateY(-0.07em) rotateX(0deg) scale(1.07);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes et-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-0.06em) rotate(-0.6deg); }
}

@keyframes et-glitch-a {
  0%, 84%   { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
  85%       { opacity: 0.9; clip-path: inset(8% 0 66% 0);  transform: translate(-4px, -2px); }
  87%       { opacity: 0.9; clip-path: inset(44% 0 30% 0); transform: translate(5px, 1px); }
  89%       { opacity: 0.9; clip-path: inset(72% 0 6% 0);  transform: translate(-3px, 2px); }
  91%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
}

@keyframes et-glitch-b {
  0%, 84%   { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
  85%       { opacity: 0.75; clip-path: inset(30% 0 48% 0); transform: translate(4px, 2px); }
  87%       { opacity: 0.75; clip-path: inset(62% 0 18% 0); transform: translate(-5px, -1px); }
  89%       { opacity: 0.75; clip-path: inset(14% 0 74% 0); transform: translate(3px, -2px); }
  91%, 100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
}

/* =====================================================================
   2. ALLGEMEINE POLITUR
   ===================================================================== */

html { scroll-behavior: smooth; }

::selection {
  background: rgba(0, 240, 255, 0.28);
  color: #ffffff;
}

/* Neon-Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.5) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(11, 14, 20, 0.7); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.7), rgba(90, 110, 255, 0.7));
  border-radius: 999px;
  border: 2px solid rgba(11, 14, 20, 0.95);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--et-cyan), var(--et-blue));
}

/* Buttons: Anheben + Lichtreflex beim Hovern */
.btn-neon,
.btn-outline-neon {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
}

.btn-neon::after,
.btn-outline-neon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.btn-neon:hover::after,
.btn-outline-neon:hover::after {
  animation: et-shine 0.75s ease-out;
}

@keyframes et-shine {
  from { left: -140%; }
  to   { left: 150%; }
}

.btn-neon:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.65), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.btn-outline-neon:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(0, 240, 255, 0.85);
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.35);
}

.btn-neon:active,
.btn-outline-neon:active {
  transform: translateY(-1px) scale(0.99);
}

/* Fokus-Ring für Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(0, 240, 255, 0.85);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =====================================================================
   3. REDUZIERTE BEWEGUNG (Barrierefreiheit / Systemeinstellung)
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .eternal-title,
  .eternal-title::before,
  .eternal-title::after,
  .eternal-letter,
  .btn-neon::after,
  .btn-outline-neon::after {
    animation: none !important;
  }
  .eternal-letter { opacity: 1; transform: none; filter: none; }
  html { scroll-behavior: auto; }
}