/* ================================================================
   ROULETTE VERTE — ANIMATIONS
================================================================ */

/* ── Entrance animations ── */
@keyframes ageModalIn {
  from { opacity:0; transform:scale(.92) translateY(20px); }
  to   { opacity:1; transform:none; }
}
@keyframes ageOverlayOut {
  from { opacity:1; }
  to   { opacity:0; }
}

/* ── Product card glow pulse ── */
@keyframes cardGlowPulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(26,77,46,.1);
  }
  50% {
    box-shadow: 0 8px 32px rgba(201,168,76,.3), 0 4px 16px rgba(26,77,46,.15);
  }
}

/* ── Featured card continuous glow ── */
.product-card--featured {
  animation: cardGlowPulse 3s ease-in-out infinite;
}

/* ── Hover glow on all product images ── */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.product-card:hover .product-icon {
  animation: iconFloat 2s ease-in-out infinite;
}

/* ── Gold shimmer button ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.btn--gold:hover {
  background: linear-gradient(
    90deg,
    #c9a84c 0%, #e8c86d 40%, #c9a84c 60%, #e8c86d 100%
  );
  background-size: 400px 100%;
  animation: shimmer .9s linear;
}

/* ── Green glow on green buttons hover ── */
@keyframes greenPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(26,77,46,.3); }
  50%       { box-shadow: 0 8px 28px rgba(26,77,46,.5); }
}
.btn--green:focus { animation: greenPulse 1.5s ease infinite; }

/* ── Cart badge bounce ── */
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.4); }
  60%       { transform: scale(.9); }
}
.cart-count.bounce { animation: cartBounce .5s ease; }

/* ── Loader spinner ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Background section pattern ── */
.section-pattern {
  position: relative;
}
.section-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(26,77,46,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── Product image gradient overlay animated ── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.product-card__image {
  background: linear-gradient(
    -45deg,
    #d4e8d9, #eaf4ee, #c9dfd0, #e8f4eb
  );
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
}

/* ── Review card entrance ── */
@keyframes reviewFadeIn {
  from { opacity:0; transform:translateX(-16px); }
  to   { opacity:1; transform:none; }
}
.review-card.visible {
  animation: reviewFadeIn .5s ease forwards;
}

/* ── Hero title words ── */
@keyframes heroWordIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}

/* ── Floating gold orbs in hero ── */
.hero-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
  pointer-events: none;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 20px) scale(.95); }
}

/* ── Section background images ── */
.bg-felt {
  position: relative;
}
.bg-felt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(26,77,46,.015) 4px,
    rgba(26,77,46,.015) 5px
  );
  pointer-events: none;
}

/* ── Product card border glow on hover ── */
.product-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(201,168,76,0), rgba(201,168,76,.4), rgba(201,168,76,0));
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: -1;
}
.product-card:hover::after { opacity: 1; }

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--clr-green), var(--clr-gold));
  z-index: 9999; width: 0%; transition: width .1s linear;
}