/* ============================================================
   SUMNU BOOKS — animations.css  (CSS-only, mobile-safe)
   NO JavaScript click handlers. NO page transitions.
   Pure CSS animations only.
   ============================================================ */

/* ── Page entry ── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
main {
  animation: pageIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Logo glow pulse ── */
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(212,168,67,.12)); }
  50%       { filter: drop-shadow(0 0 20px rgba(212,168,67,.5)); }
}
.hero-logo-img {
  animation: logoPulse 3.5s ease-in-out infinite;
}

/* ── Gold shimmer on page headings ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.page-hero h1 {
  background: linear-gradient(90deg, #d4a843 0%, #ffd700 30%, #fffde0 50%, #ffd700 70%, #d4a843 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Cards: lift on hover/tap ── */
.card.product,
.ab-available,
.ab-upcoming,
.album-card,
.media-item {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease;
  will-change: transform;
}
.card.product:hover,
.ab-available:hover,
.ab-upcoming:hover,
.album-card:hover,
.media-item:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(212,168,67,.15);
}
/* Active state for mobile tap */
.card.product:active,
.ab-available:active,
.ab-upcoming:active,
.album-card:active,
.media-item:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

/* ── Buttons: bounce on press ── */
.btn {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease !important;
  position: relative;
  overflow: hidden;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.btn:active {
  transform: scale(0.96) !important;
  transition-duration: 0.08s !important;
}

/* ── VIP nav badge pulse ── */
@keyframes vipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67,.45); }
  60%       { box-shadow: 0 0 0 7px rgba(212,168,67,.0); }
}
.nav-links-shell .nav-cta {
  animation: vipPulse 2.8s ease-in-out infinite;
}

/* ── Cover image subtle zoom on card hover ── */
.cover img,
.product-cover img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.card.product:hover .cover img,
.ab-available:hover .product-cover img {
  transform: scale(1.05);
}

/* ── Nav link underline slide ── */
.nav-links-shell a {
  position: relative;
}
.nav-links-shell a::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%; right: 50%;
  height: 2px;
  background: #d4a843;
  border-radius: 2px;
  transition: left 0.22s ease, right 0.22s ease;
}
.nav-links-shell a:hover::after,
.nav-links-shell a.active::after {
  left: 12px; right: 12px;
}

/* ── Scroll fade-in (works with IntersectionObserver in animations.js) ── */
.sr {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.sr.visible {
  opacity: 1;
  transform: none;
}
.sr-d1 { transition-delay: 0.1s; }
.sr-d2 { transition-delay: 0.2s; }
.sr-d3 { transition-delay: 0.3s; }

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}