/* ==========================================================================
   Blissporium Design System — Animations
   Lightweight, elegant motion. GPU-friendly (transform/opacity only).
   ========================================================================== */

/* --------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------
   Animation utility classes
   -------------------------------------------------------------------- */
.anim-fade-in     { animation: fade-in var(--duration-slow) var(--ease-out) both; }
.anim-slide-up    { animation: slide-up var(--duration-slow) var(--ease-out) both; }
.anim-slide-down  { animation: slide-down var(--duration-base) var(--ease-out) both; }
.anim-slide-left  { animation: slide-left var(--duration-slow) var(--ease-out) both; }
.anim-slide-right { animation: slide-right var(--duration-slow) var(--ease-out) both; }
.anim-scale-in    { animation: scale-in var(--duration-base) var(--ease-out) both; }

/* Stagger helpers — apply to sibling items */
.anim-delay-1 { animation-delay: 80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }
.anim-delay-5 { animation-delay: 400ms; }

/* --------------------------------------------------------------------
   Scroll-reveal (driven by js/global/animations.js via IntersectionObserver)
   -------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------
   Hover effects
   -------------------------------------------------------------------- */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Wrap an <img> in .zoom-frame for the elegant image zoom */
.zoom-frame {
  overflow: hidden;
}

.zoom-frame img {
  transition: transform var(--duration-slower) var(--ease-out);
}

.zoom-frame:hover img {
  transform: scale(1.05);
}

/* --------------------------------------------------------------------
   Skeleton loading
   -------------------------------------------------------------------- */
.skeleton {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--color-skeleton) 25%,
    var(--color-skeleton-shine) 50%,
    var(--color-skeleton) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.skeleton--text   { height: 1em; width: 100%; }
.skeleton--title  { height: 1.4em; width: 60%; }
.skeleton--image  { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius-md); }
.skeleton--circle { border-radius: var(--radius-full); aspect-ratio: 1 / 1; }
.skeleton--button { height: 44px; width: 140px; border-radius: var(--radius-full); }