/**
 * Animations CSS - Le Repaire Du Phénix
 * Zootopia-inspired interactive animations
 */

/* ══════════════════════════════════════
   CURSOR GLOW — accent light follows mouse on hero
══════════════════════════════════════ */
.cursor-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,125,12,0.12) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

/* ══════════════════════════════════════
   HERO PARALLAX enhancements
══════════════════════════════════════ */
.hero-bg img {
  will-change: transform;
  transform: scale(1.1);
}

.hero-content {
  will-change: transform, opacity;
}

/* ══════════════════════════════════════
   SECTION HEADER ANIMATIONS
══════════════════════════════════════ */
.section-header .section-eyebrow,
.section-header .section-title,
.section-header .section-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.section-header.animate-in .section-eyebrow {
  opacity: 1; transform: translateY(0); transition-delay: 0s;
}
.section-header.animate-in .section-title {
  opacity: 1; transform: translateY(0); transition-delay: 0.1s;
}
.section-header.animate-in .section-subtitle {
  opacity: 1; transform: translateY(0); transition-delay: 0.2s;
}

/* Section head row (collection titles) */
.section-head-row {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.section-head-row.animate-in {
  opacity: 1; transform: translateY(0);
}

/* ══════════════════════════════════════
   3D TILT CARDS — perspective enhancement
══════════════════════════════════════ */
.product-card,
.blog-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.06);
}

/* Shine effect on hover */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.03) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}
.product-card:hover::after {
  opacity: 1;
}

/* ══════════════════════════════════════
   CATEGORY CIRCLES — spring bounce animation
══════════════════════════════════════ */
.cat-circle {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
              border-color 0.3s,
              box-shadow 0.3s;
}

.cat-item:hover .cat-circle {
  transform: scale(1.1);
  border-color: var(--accent);
  box-shadow: 0 0 28px rgba(240,125,12,0.35);
}

/* ══════════════════════════════════════
   PROMO BANNER — glow pulse
══════════════════════════════════════ */
.promo-banner::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(240,125,12,0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* ══════════════════════════════════════
   BUTTON EFFECTS
══════════════════════════════════════ */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn-primary:active::before {
  width: 300px;
  height: 300px;
}

/* ══════════════════════════════════════
   NEWSLETTER — input focus glow
══════════════════════════════════════ */
.newsletter-form input:focus {
  box-shadow: 0 0 0 3px rgba(240,125,12,0.15);
}

/* ══════════════════════════════════════
   SCROLLBAR STYLING
══════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(240,125,12,0.25);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(240,125,12,0.45);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(240,125,12,0.25) var(--bg-deep);
}

/* ══════════════════════════════════════
   SMOOTH PAGE LOAD
══════════════════════════════════════ */
body {
  animation: pageIn 0.6s ease-out;
}

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

/* ══════════════════════════════════════
   SKELETON LOADING
══════════════════════════════════════ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ══════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cursor-glow { display: none; }
  .hero-bg img { transform: none !important; }
  .hero-content { transform: none !important; opacity: 1 !important; }
}