/**
 * SOULSHORE — Animation System
 * CSS animations, transitions, keyframes for luxury effects
 * @package Soulshore
 */

/* ── Keyframes ───────────────────────────────────────────────────────────── */

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

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-12px); }
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-6px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 0, 0, 0); }
  50%       { box-shadow: 0 0 25px 8px rgba(139, 0, 0, 0.25); }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 163, 115, 0); }
  50%       { box-shadow: 0 0 20px 6px rgba(212, 163, 115, 0.3); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marqueeReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.3); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.3); }
  70%       { transform: scale(1); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes countUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

@keyframes preloaderFill {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(196, 138, 106, 0.3); }
  50%       { border-color: rgba(196, 138, 106, 0.8); }
}

/* ── Animation Utility Classes ───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

  .anim-fade-in     { animation: fadeIn 0.6s ease forwards; }
  .anim-fade-in-up  { animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards; }
  .anim-fade-in-down{ animation: fadeInDown 0.6s cubic-bezier(0.4,0,0.2,1) forwards; }
  .anim-scale-in    { animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
  .anim-slide-left  { animation: slideInLeft 0.5s cubic-bezier(0.4,0,0.2,1) forwards; }
  .anim-slide-right { animation: slideInRight 0.5s cubic-bezier(0.4,0,0.2,1) forwards; }
  .anim-slide-up    { animation: slideInUp 0.5s cubic-bezier(0.4,0,0.2,1) forwards; }
  .anim-float       { animation: float 4s ease-in-out infinite; }
  .anim-float-gentle{ animation: floatGentle 5s ease-in-out infinite; }
  .anim-pulse-glow  { animation: pulseGlow 2s ease-in-out infinite; }
  .anim-pulse-gold  { animation: pulseGold 2.5s ease-in-out infinite; }
  .anim-shimmer     { animation: shimmer 2.5s ease-in-out infinite; }
  .anim-spin-slow   { animation: spinSlow 8s linear infinite; }
  .anim-heartbeat   { animation: heartbeat 1.3s ease-in-out; }
  .anim-border-glow { animation: borderGlow 2s ease-in-out infinite; }

  /* Stagger delays */
  .stagger-1  { animation-delay: 0.1s; }
  .stagger-2  { animation-delay: 0.2s; }
  .stagger-3  { animation-delay: 0.3s; }
  .stagger-4  { animation-delay: 0.4s; }
  .stagger-5  { animation-delay: 0.5s; }
  .stagger-6  { animation-delay: 0.6s; }
  .stagger-7  { animation-delay: 0.7s; }
  .stagger-8  { animation-delay: 0.8s; }

  /* Duration modifiers */
  .dur-fast    { animation-duration: 0.3s !important; }
  .dur-base    { animation-duration: 0.5s !important; }
  .dur-slow    { animation-duration: 0.8s !important; }
  .dur-slower  { animation-duration: 1.2s !important; }
  .dur-slowest { animation-duration: 2s !important;   }
}

/* ── Hover Micro-interactions ────────────────────────────────────────────── */

.hover-lift {
  transition: transform var(--ease-luxury, 0.4s), box-shadow var(--ease-luxury, 0.4s);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(139, 0, 0, 0.15);
}

.hover-scale {
  transition: transform var(--ease-spring, 0.4s);
}
.hover-scale:hover { transform: scale(1.05); }

.hover-glow {
  transition: box-shadow var(--ease-base, 0.3s);
}
.hover-glow:hover { box-shadow: 0 0 25px rgba(139, 0, 0, 0.35); }

.hover-gold-glow {
  transition: box-shadow var(--ease-base, 0.3s);
}
.hover-gold-glow:hover { box-shadow: 0 0 25px rgba(212, 163, 115, 0.4); }

/* ── Button Ripple Effect ─────────────────────────────────────────────────── */

.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}
.btn:active::after {
  inset: 0;
  border-radius: 0;
  transform: scale(1);
  opacity: 1;
  transition: 0s;
}

/* ── Shimmer Loading Skeleton ────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated, #E8D8C8) 25%,
    var(--bg-sunken, #D4C4B0) 50%,
    var(--bg-elevated, #E8D8C8) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md, 8px);
}

[data-theme="dark"] .skeleton,
.dark-mode .skeleton {
  background: linear-gradient(
    90deg,
    rgba(48, 26, 26, 0.6) 25%,
    rgba(60, 32, 32, 0.6) 50%,
    rgba(48, 26, 26, 0.6) 75%
  );
  background-size: 200% 100%;
}

/* ── Text Shimmer Gradient ───────────────────────────────────────────────── */

.text-shimmer {
  background: linear-gradient(
    90deg,
    #8B0000,
    #D4A373,
    #C48A6A,
    #8B0000
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}

/* ── Marquee Animation ───────────────────────────────────────────────────── */

.marquee-track {
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }

/* ── Preloader Bar — width is JS-controlled; no CSS animation here ───────── */

.preloader-bar-fill {
  /* width and transition defined in style.css; JS sets width dynamically */
}

/* ── Category Circle Spin on Hover ──────────────────────────────────────── */

.category-circle-img img {
  transition: transform var(--ease-luxury, 0.6s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.category-circle:hover .category-circle-img img {
  transform: scale(1.1);
}

/* ── Product Image Zoom ──────────────────────────────────────────────────── */

.img-zoom img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.img-zoom:hover img {
  transform: scale(1.07);
}

/* ── Wishlist Heart Animation ────────────────────────────────────────────── */

.soulshore-wishlist-btn.active {
  animation: heartbeat 0.6s ease-in-out;
}
.soulshore-wishlist-btn.active svg {
  fill: currentColor;
}

/* ── Social Link Hover ───────────────────────────────────────────────────── */

.footer-social-link {
  transition: all var(--ease-spring, 0.4s);
}
.footer-social-link:hover {
  transform: translateY(-3px) scale(1.1);
}

/* ── Announcement Bar ────────────────────────────────────────────────────── */

.announcement-bar .marquee-track {
  animation: marquee 30s linear infinite;
}
.announcement-bar:hover .marquee-track {
  animation-play-state: paused;
}

/* ── Scroll reveal initial states ────────────────────────────────────────── */

/*
 * Pre-hides [data-gsap="fade-up"] elements ONLY when GSAP is confirmed
 * running (html.js-gsap class). animations.js adds the class after verifying
 * GSAP + ScrollTrigger are loaded.
 *
 * All GSAP animations now use fromTo() with explicit opacity:1 destination,
 * so GSAP's inline style overrides this CSS rule as soon as it starts the
 * tween — elements are never left permanently invisible.
 *
 * Hero elements (#hero [data-gsap]) are excluded from scrollReveal() and
 * handled by heroAnimations() with a 1.8s preloader delay — they are hidden
 * here and revealed by that timeline.
 */
@media (prefers-reduced-motion: no-preference) {
  html.js-gsap [data-gsap="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* ── Accordion transition ────────────────────────────────────────────────── */

.accordion-content {
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Cart drawer entrance ────────────────────────────────────────────────── */

.cart-drawer {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Popup entrance ──────────────────────────────────────────────────────── */

.popup {
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Search overlay ──────────────────────────────────────────────────────── */

.search-overlay {
  transition: opacity 0.35s ease;
}

/* ── Badge pulse ─────────────────────────────────────────────────────────── */

.badge-trending {
  animation: pulseGold 2.5s ease-in-out infinite;
}

/* ── Active nav item indicator ───────────────────────────────────────────── */

.main-nav .current-menu-item > a::after {
  left: var(--space-3);
  right: var(--space-3);
}

/* ── Mobile bottom nav active indicator ──────────────────────────────────── */

.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
}

/* ── Instagram hover overlay ─────────────────────────────────────────────── */

.instagram-overlay {
  transition: opacity var(--ease-base, 0.3s);
}

/* ── Page transition curtain ─────────────────────────────────────────────── */

#page-curtain {
  transition: opacity 0.4s ease;
}

/* ── Reduced motion fallback ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js-gsap [data-gsap="fade-up"] {
    opacity: 1 !important;
    transform: none !important;
  }
}