/* ===============================
   PAGE ENTRY FADE (NO FLASH)
   =============================== */

body {
  opacity: 0;
}

body.loaded {
  opacity: 1;
  transition: opacity 1.3s ease;
}

/* ===============================
   BACKGROUND CANVAS (EMBERS)
   =============================== */

#embers-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;              /* WICHTIG: nicht -1 */
  pointer-events: none;
}

/* ===============================
   LOGO RESONANCE
   =============================== */

.logo-img {
  transition: filter 2.2s ease;
  will-change: filter;
}

/* ===============================
   FM 72.74 – NEWS TICKER
   =============================== */

.fm-news {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* ===============================
   RADIO NEWS TICKER
   =============================== */

.news-ticker {
  overflow: hidden;
  width: 100%;
}

.news-track {
  display: inline-flex;
  gap: 60px;
  white-space: nowrap;
  will-change: transform;
}

/* ===============================
   DESKTOP PARALLAX BASE
   =============================== */

.hero {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out;
}
/* ===============================
   DESKTOP HOVER LIFT
   =============================== */

button,
a,
.nav a,
.card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

button:hover,
a:hover,
.nav a:hover,
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* ===============================
   HOVER LIFT – DESKTOP UI
   =============================== */

button,
a,
.card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

button:hover,
a:hover,
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);

}


/* ===============================
   CONTACT FORM BREAKDOWN
   =============================== */

.form-break {
  animation: shake 0.35s infinite;
}

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

.form-fragment {
  animation: fragmentOut 0.6s ease forwards;
}

@keyframes fragmentOut {
  to {
    opacity: 0;
    transform: translateY(50px) rotate(-6deg);
    filter: blur(3px);
  }
}

/* ===============================
   GLITCH ERROR TEXT
   =============================== */

.error-block {
  display: none;
  margin-top: 50px;
  text-align: center;
}

.glitch {
  position: relative;
  font-size: 2.2rem;
  font-weight: 800;
  color: #ff3b2f;
  text-transform: uppercase;
  animation: glitchFlicker 1.4s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0.7;
}

.glitch::before {
  color: #ff0000;
  transform: translate(-3px, 0);
  clip-path: inset(0 0 60% 0);
}

.glitch::after {
  color: #ff8a8a;
  transform: translate(3px, 0);
  clip-path: inset(40% 0 0 0);
}

@keyframes glitchFlicker {
  0% { opacity: 1; }
  40% { opacity: 0.7; }
  50% { opacity: 0.2; }
  60% { opacity: 1; }
  100% { opacity: 1; }
}



/* ===============================
   CRITICAL WARNING TEXT
   =============================== */

.critical-warning {
  color: #ff3b2f;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 20px;
  animation: warningPulse 1.6s infinite;
}

@keyframes warningPulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.65; }
  100% { opacity: 1; }
}

/* ===============================
   CONTACT ERROR ALIGNMENT
   =============================== */

#runeError {
  margin-top: 40px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   GLOBAL ANIMATED BACKGROUND
   =============================== */

.bg-layer{
  position: fixed;
  inset: 0;
  z-index: -1;               /* 🔑 WICHTIG */
  pointer-events: none;      /* 🔑 blockiert keine Klicks */

  background:
    linear-gradient(
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.75)
    ),
    url("../img/background.jpg") center / cover no-repeat;

  overflow: hidden;
}

/* Asche / Glut Partikel */
.bg-layer::after{
  content:"";
  position:absolute;
  inset:-20%;
  background-image: url("../img/embers.png"); /* oder dein Partikelbild */
  background-repeat: repeat;
  opacity: .35;
  animation: drift 90s linear infinite;
}

@keyframes drift{
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-15%) translateX(10%); }
}
/* ===============================
   ORB LAYER (ABOVE EMBERS)
   =============================== */

.bg-layer::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;

  background:
    radial-gradient(circle at 20% 95%, rgba(255,92,92,.22), transparent 40%),
    radial-gradient(circle at 60% 100%, rgba(160,120,255,.20), transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(255,200,160,.18), transparent 50%);

  animation: orbRise 32s linear infinite;
  opacity:.35;
}

@keyframes orbRise{
  0%{
    transform: translateY(20%) scale(1);
    opacity:.15;
  }
  40%{ opacity:.35; }
  100%{
    transform: translateY(-20%) scale(1.1);
    opacity:.15;
  }
}