/* =========================================================
   NALYORA — effects.css
   Toast, apparition au défilement, animations (@keyframes).
   ========================================================= */

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 30px);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 14px;
  font-weight: 600;
  background: #0f2d6e;
  border: 1px solid rgba(95, 208, 255, 0.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), var(--glow);
  transition: opacity .25s, transform .25s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast svg { width: 18px; height: 18px; color: #3ee08a; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Animations ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(20deg); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(62, 224, 138, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(62, 224, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 224, 138, 0); }
}
@keyframes discordFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes discordBounce {
  0%, 60%, 100% { transform: scale(1) rotate(0); }
  70% { transform: scale(1.12, 0.9) rotate(-4deg); }
  80% { transform: scale(0.95, 1.08) rotate(4deg); }
  90% { transform: scale(1.03) rotate(0); }
}
@keyframes shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }
@keyframes ring { 0% { transform: scale(0.95); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes build { 0% { width: 0; } 85%, 100% { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}