/* ============================================
   ANIMATIONS & REVEAL EFFECTS
   ============================================ */

/* Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.active,
.reveal-left.active,
.reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* Delays */
.reveal-delay { transition-delay: 0.2s; }
.reveal-delay-2 { transition-delay: 0.4s; }
.reveal-delay-3 { transition-delay: 0.6s; }

/* Image Glow Effect */
.image-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  background: var(--color-orange-glow);
  filter: blur(80px);
  z-index: -1;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

/* Page Transition */
body {
  animation: fadeInPage 0.6s ease-out;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Smooth Image Reveal */
.img-reveal {
  overflow: hidden;
}

.img-reveal img {
  transform: scale(1.2);
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.img-reveal.active img {
  transform: scale(1);
}

/* Toast Notifications */
.toast {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-weight: 600;
  pointer-events: auto;
  animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-content i {
  font-size: 1.25rem;
  color: var(--color-orange);
}

.toast.fade-out {
  animation: toastFadeOut 0.4s ease-out forwards;
}

@keyframes toastSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes toastFadeOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-20px); opacity: 0; }
}