/* ===========================================
   ANIMATIONS — Keyframes & Motion-Safe Rules
   All wrapped in prefers-reduced-motion check
   =========================================== */

/* ——— Marquee — Gallery Scroll ——— */
@keyframes marquee-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* ——— Float — Butterfly gentle hover ——— */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ——— Fade In Up — Scroll reveal ——— */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ——— Glass Shimmer — subtle reflection sweep ——— */
@keyframes glass-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ——— Gold metallic shimmer — GIANG text ——— */
@keyframes gold-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ——— Pulse glow — CTA button ——— */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      var(--glass-shadow),
      var(--glass-inset-highlight),
      0 0 0 0 rgba(184, 134, 11, 0);
  }
  50% {
    box-shadow:
      var(--glass-shadow),
      var(--glass-inset-highlight),
      0 0 24px 4px rgba(218, 165, 32, 0.18);
  }
}

/* ——— UGC Card Filter — fade/scale entrance ——— */
@keyframes cardFilterIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ——— Modal — slide-up entrance ——— */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ——————————————————————————————
   MOTION-SAFE: Apply animations ONLY when
   user has NO motion preference set
   —————————————————————————————— */

/* ——— Photo Bento — fade/scale entrance ——— */
@keyframes photoBentoIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ——— Lightbox — fade-in entrance ——— */
@keyframes lightboxFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media (prefers-reduced-motion: no-preference) {
  /* Marquee left */
  .marquee-left .marquee-track {
    animation: marquee-scroll-left 35s linear infinite;
  }

  /* Marquee right */
  .marquee-right .marquee-track {
    animation: marquee-scroll-right 40s linear infinite;
  }

  /* Butterfly float */
  .butterfly-placeholder {
    animation: float 4s ease-in-out infinite;
  }

  /* CTA glow pulse */
  .glass-btn {
    animation: pulse-glow 3s ease-in-out infinite;
  }

  /* Scroll reveal transitions are already CSS transitions, not animations */

  /* Gallery hover pause */
  .marquee-row:hover .marquee-track {
    animation-play-state: paused;
  }

  /* UGC card filter entrance */
  .ugc-video-card.card-visible {
    animation: cardFilterIn 0.5s var(--ease-out-expo) both;
  }

  /* UGC modal entrance */
  dialog[open].ugc-modal {
    animation: modalSlideIn 0.4s var(--ease-out-expo);
  }

  /* Photo bento entrance */
  .photo-bento-item.photo-item-visible {
    animation: photoBentoIn 0.5s var(--ease-out-expo) both;
  }

  /* Photo lightbox entrance */
  dialog[open].photo-lightbox {
    animation: lightboxFadeIn 0.3s var(--ease-out-expo);
  }
}


/* ——————————————————————————————
   REDUCED MOTION: Kill everything
   —————————————————————————————— */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Gallery becomes static grid instead of marquee */
  .marquee-track {
    animation: none !important;
  }

  /* Ink bleed: no animation */
  .section-dark {
    clip-path: none !important;
    transition: none !important;
  }

  /* Scroll reveal: show immediately */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}