/* ============================================================
   webdesign.schoscho.at – Saison-Dekoration Halloween: Motive und Animationen
   Autor: Geri (2026)
   Design & Umsetzung: webdesign.schoscho.at
   ============================================================ */

/* Ergänzt saison-grund.css. Alle Animationen verändern nur opacity,
   translate, rotate oder scale: Das erledigt der Browser ohne neues
   Seitenlayout, auch am Handy flüssig. Geister und Spinne stehen links,
   wo der Rahmen frei ist und neben dem mittigen Text Platz bleibt (ab
   900 px Breite); rechts trägt der Rahmen Netz, Fledermäuse und Spinne. */

/* Der Rahmen (Größe und Lage) ist in saison-grund.css geregelt
   (Klasse .saison-rahmen), hier nur Motive und Animationen. */

/* ── Orange Glut am unteren Rand ── */
.halloween-glut {
  position: absolute;
  bottom: 20px;
  width: 260px;
  height: 110px;
  background: radial-gradient(ellipse, rgba(255,121,40,0.18), transparent 72%);
  filter: blur(17px);
  opacity: 0.6;
  animation: halloweenGlut 6s ease-in-out infinite alternate;
}
.halloween-glut-links  { left: 0; }
.halloween-glut-rechts { right: 0; animation-delay: -3s; }
@keyframes halloweenGlut { to { opacity: 1; scale: 1.1; } }

/* ── Geister: erscheinen langsam, schweben, verschwinden wieder ── */
.halloween-geist {
  position: absolute;
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(229,187,255,0.24));
  animation: halloweenGeistErscheinen 13s ease-in-out infinite,
             halloweenGeistSchweben 5.5s ease-in-out infinite;
}
.halloween-geist svg { display: block; width: 100%; height: 100%; overflow: visible; }
.halloween-geist-links  { left: 6%;  top: 34%; width: 62px; height: 72px;  animation-delay: 6s, 2s; transform: scaleX(-1); }
.halloween-geist-oben { left: 17%; top: 13%; width: 86px; height: 100px; animation-delay: 1.5s, 0s; }
@keyframes halloweenGeistErscheinen {
  0%, 10%, 64%, 100% { opacity: 0; }
  23%, 43%           { opacity: 0.78; }
  54%                { opacity: 0.36; }
}
@keyframes halloweenGeistSchweben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 19px -18px; }
}

/* ── Fledermäuse: fliegen hinter dem Text quer durch den Hero ──
   Die Strecke läuft über translate in Fensterbreiten (vw) statt über
   left, damit kein neues Layout je Bild nötig ist. */
.halloween-fledermaus {
  position: absolute;
  left: 0;
  top: 13%;
  width: 50px;
  color: #090715;
  opacity: 0;
  filter: drop-shadow(0 0 2px rgba(255,168,122,0.35));
  animation: halloweenFledermausFlug 22s linear infinite;
}
.halloween-fledermaus svg { display: block; width: 100%; height: auto; fill: currentColor; }
.halloween-fledermaus-zwei { top: 27%; width: 34px; animation-duration: 29s; animation-delay: -12s; }
@keyframes halloweenFledermausFlug {
  0%   { translate: -15vw 14px;  rotate: -12deg; opacity: 0; }
  8%   { opacity: 0.84; }
  42%  { translate: 33vw -26px;  rotate: 6deg; }
  75%  { translate: 72vw 18px; }
  92%  { opacity: 0.75; }
  100% { translate: 112vw -38px; rotate: -8deg; opacity: 0; }
}

/* ── Spinne: seilt sich am linken Rand ab (rechts hängt bereits die
   Spinne des Rahmens am Netz) ── */
.halloween-spinne {
  position: absolute;
  left: 3.8%;
  top: -65px;
  width: 50px;
  height: 190px;
  opacity: 0.83;
  animation: halloweenSpinneAbseilen 12s ease-in-out 1.7s infinite;
}
.halloween-spinne::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 135px;
  background: linear-gradient(#bfb0cf, rgba(255,255,255,0.7));
}
.halloween-spinne svg {
  position: absolute;
  top: 130px; left: 9px;
  width: 34px; height: 34px;
  fill: #1d132b; stroke: #ab8dcd; stroke-width: 1.4;
}
@keyframes halloweenSpinneAbseilen {
  0%, 10%, 82%, 100% { translate: 0 -100px; }
  24%, 66%           { translate: 0 30px; }
  33%, 56%           { translate: 0 39px; }
}

/* ── Glutfunken im unteren Bereich (Position je Funke im Markup) ── */
.halloween-funke {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fbdcb7;
  box-shadow: 0 0 12px 2px rgba(247,158,80,0.45);
  opacity: 0;
  animation: halloweenFunke var(--funke-dauer, 7s) ease-in-out var(--funke-versatz, 0s) infinite;
}
@keyframes halloweenFunke {
  0%, 100% { opacity: 0; translate: 0 18px; }
  45%      { opacity: 0.55; }
  75%      { opacity: 0.08; translate: 15px -35px; }
}

/* Ohne Platz neben dem Text keine Geister und keine Spinne */
@media (max-width: 899px) {
  .halloween-geist,
  .halloween-spinne { display: none; }
}