/* ================================================================
   AIRE DE JEUX — 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(41,72,59,.10);
  }
  50% {
    box-shadow: 0 8px 32px rgba(216,193,160,.32), 0 4px 16px rgba(124,36,58,.16);
  }
}

/* ── 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,
    #d8c1a0 0%, #f5ebdd 40%, #d8c1a0 60%, #f5ebdd 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(124,36,58,.28); }
  50%       { box-shadow: 0 8px 28px rgba(124,36,58,.45); }
}
.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(124,36,58,.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,
    #f7ecef, #fffaf4, #eef4ef, #f8f1e7
  );
  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(216,193,160,.20) 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(41,72,59,.02) 4px,
    rgba(41,72,59,.02) 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(216,193,160,.42), 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;
}


/* ================================================================
   AIRE DE JEUX V2 — EXTRA ANIMATIONS
================================================================ */
@keyframes heroCardRevealLeft {
  from { opacity: 0; transform: translate3d(-26px, 18px, 0) scale(.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes heroCardRevealRight {
  from { opacity: 0; transform: translate3d(28px, 18px, 0) scale(.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes heroCardRevealUp {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes tagReveal {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes imageSweep {
  0% { transform: scale(1.04); filter: saturate(.95) contrast(.98); }
  100% { transform: scale(1); filter: saturate(1) contrast(1); }
}
@keyframes tileReveal {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-shot {
  opacity: 0;
  will-change: transform, opacity;
}
.hero-shot--wide { animation: heroCardRevealUp .92s cubic-bezier(.2,.7,.2,1) .12s forwards; }
.hero-shot--left { animation: heroCardRevealLeft .82s cubic-bezier(.2,.7,.2,1) .26s forwards; }
.hero-shot--right { animation: heroCardRevealRight .82s cubic-bezier(.2,.7,.2,1) .38s forwards; }
.hero-shot img,
.stack-card img {
  animation: imageSweep 1.25s ease-out both;
}
.hero-note {
  opacity: 0;
  animation: tagReveal .7s cubic-bezier(.2,.7,.2,1) .55s forwards;
}
.hero-note:nth-child(2) { animation-delay: .66s; }
.hero-note:nth-child(3) { animation-delay: .77s; }
.photo-tile,
.story-gallery .photo-tile {
  animation: none;
}
.photo-tile.visible,
.story-gallery .photo-tile.visible,
.gallery-grid .photo-tile.visible {
  animation: tileReveal .8s cubic-bezier(.2,.7,.2,1) both;
}
.photo-tile.visible:nth-child(2) { animation-delay: .08s; }
.photo-tile.visible:nth-child(3) { animation-delay: .16s; }
.photo-tile.visible:nth-child(4) { animation-delay: .24s; }
.photo-tile.visible:nth-child(5) { animation-delay: .32s; }
.editorial-point,
.step-card,
.stack-card,
.media-card,
.hero-shot {
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.editorial-point:hover,
.step-card:hover,
.stack-card:hover,
.media-card:hover,
.hero-shot:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.hero-shot:hover img,
.stack-card:hover img,
.photo-tile:hover img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot,
  .hero-shot--wide,
  .hero-shot--left,
  .hero-shot--right,
  .hero-note,
  .photo-tile.visible,
  .story-gallery .photo-tile.visible,
  .gallery-grid .photo-tile.visible,
  .hero-shot img,
  .stack-card img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}