/* ===================================================================
   HOA GARDEN — effects.css — Partikel-Effekte (werden von effects.js erzeugt)
=================================================================== */
.particle{position:absolute; top:-40px; will-change:transform,opacity; pointer-events:none;}

/* Blütenblätter (Lotus / generisch) */
.p-bluetenblaetter{
  width:16px;height:16px; background:radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  border-radius:0 60% 0 60%; opacity:.85; animation:fallSway linear infinite, spin 6s linear infinite;
}
/* Schnee */
.p-schnee{
  width:8px;height:8px; background:#fff; border-radius:50%; opacity:.9; box-shadow:0 0 6px rgba(255,255,255,.8);
  animation:fallSway linear infinite;
}
/* Herbstlaub */
.p-herbstlaub{
  width:14px;height:14px; background:linear-gradient(135deg,#d97c2b,#8a4a1e); clip-path:polygon(50% 0%,100% 38%,80% 100%,20% 100%,0% 38%);
  opacity:.9; animation:fallSway linear infinite, spin 4s linear infinite;
}
/* Frühlingsblüten */
.p-fruehlingsblueten{
  width:14px;height:14px; background:radial-gradient(circle at 35% 35%, #fff, #f3b8c4); border-radius:50% 0 50% 0;
  opacity:.9; animation:fallSway linear infinite, spin 5s linear infinite;
}
/* Laternen */
.p-laternen{
  width:22px;height:28px; background:linear-gradient(180deg,#e7c069,#c8792f); border-radius:6px;
  box-shadow:0 0 14px rgba(231,192,105,.7); opacity:.85; animation:riseSway linear infinite;
}
.p-laternen:before{content:"";position:absolute;top:-6px;left:50%;width:2px;height:6px;background:#c8792f;transform:translateX(-50%);}
/* Lichtpartikel / Glühwürmchen */
.p-lichtpartikel{
  width:6px;height:6px; background:#fff2b8; border-radius:50%; box-shadow:0 0 10px 3px rgba(255,242,184,.9);
  animation:driftGlow ease-in-out infinite;
}
/* Sternenhimmel */
.p-sternenhimmel{
  width:3px;height:3px; background:#fff; border-radius:50%; box-shadow:0 0 6px 1px rgba(255,255,255,.9);
  animation:twinkle ease-in-out infinite;
}
/* Herzen */
.p-herzen{
  width:16px;height:14px; background:var(--accent); opacity:.85; animation:riseSway linear infinite;
}
.p-herzen:before,.p-herzen:after{content:"";position:absolute;width:16px;height:16px;background:var(--accent);border-radius:50%;top:-8px;}
.p-herzen:before{left:0;} .p-herzen:after{left:8px;}
.p-herzen{clip-path:polygon(50% 100%, 0 35%, 0 0, 50% 20%, 100% 0, 100% 35%);}
/* Regentropfen */
.p-regentropfen{
  width:2px;height:16px; background:linear-gradient(180deg, transparent, var(--accent-2)); opacity:.6;
  animation:fallStraight linear infinite;
}

@keyframes fallSway{
  0%{transform:translate(0,-5vh) rotate(0deg); opacity:0;}
  8%{opacity:.9;}
  100%{transform:translate(var(--drift,40px), 105vh) rotate(360deg); opacity:.2;}
}
@keyframes fallStraight{
  0%{transform:translateY(-5vh); opacity:0;}
  10%{opacity:.7;}
  100%{transform:translateY(105vh); opacity:.3;}
}
@keyframes riseSway{
  0%{transform:translate(0,105vh) rotate(0deg); opacity:0;}
  10%{opacity:.9;}
  100%{transform:translate(var(--drift,-30px), -10vh) rotate(15deg); opacity:0;}
}
@keyframes driftGlow{
  0%,100%{transform:translate(0,0); opacity:.2;}
  50%{transform:translate(var(--drift,20px),-30px); opacity:1;}
}
@keyframes twinkle{
  0%,100%{opacity:.15; transform:scale(.8);}
  50%{opacity:1; transform:scale(1.3);}
}
@keyframes spin{ to{transform:rotate(360deg);} }

@media (prefers-reduced-motion: reduce){
  .particle{animation:none !important; display:none;}
}