/* ═══════════════════════════════════════════════════════════════
   MiniMümin — FX Katmanı stilleri (C11 + C12)
   js/fx.js parçacıklarını çizer; tümü transform/opacity (GPU dostu).
   ═══════════════════════════════════════════════════════════════ */

.fx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 55;
}
body > .fx-layer { position: fixed; }

/* ── Görev geçişi: soldan süzülme ── */
.task-enter { animation: fx-task-in .42s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fx-task-in {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Parçacık ortakları ── */
.fx-confetti,
.fx-star,
.fx-crescent {
  position: absolute;
  top: -34px;
  will-change: transform, opacity;
}
.fx-star, .fx-crescent { filter: drop-shadow(0 0 5px rgba(255, 209, 102, .55)); }

/* Konfeti: düşme + salınım + dönme */
.fx-confetti { animation: fx-fall var(--fx-dur, 2200ms) cubic-bezier(.3, .4, .6, 1) both; }
@keyframes fx-fall {
  0%   { transform: translate(0, 0) rotate(0) rotate(var(--fx-spin, 0deg)); opacity: 1; }
  100% { transform: translate(var(--fx-drift, 0px), 105vh) rotate(var(--fx-spin, 0deg)) rotate(0deg); opacity: .92; }
}

/* Yıldız patlaması: merkezden dışa, sönerek */
.fx-star { animation: fx-burst var(--fx-dur, 700ms) cubic-bezier(.15, .75, .4, 1) both; }
@keyframes fx-burst {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--fx-dx, 60px)), calc(-50% + var(--fx-dy, 60px))) scale(.85) rotate(120deg); opacity: 0; }
}

/* Hilal yağmuru: süzülerek düşme */
.fx-crescent { animation: fx-rain var(--fx-dur, 3000ms) cubic-bezier(.35, .3, .55, 1) both; }
@keyframes fx-rain {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(var(--fx-drift, 0px), 108vh) rotate(var(--fx-spin, 0deg)); opacity: .85; }
}

/* Parıltı hedefi: öğe kısa süre ışıldar */
.fx-sparkle-target { animation: fx-glow .7s ease-out both; }
@keyframes fx-glow {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.22) saturate(1.15); }
  100% { filter: brightness(1); }
}

/* ── Hareket azlığı: her şey no-op ── */
@media (prefers-reduced-motion: reduce) {
  .fx-layer { display: none !important; }
  .task-enter, .fx-sparkle-target { animation: none !important; }
}