/* ═══════════════════════════════════════════════════════════════
   LOUIS AFRICAN HAIR BRAIDING — Animation System (v3 — audited)
   ═══════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────────────────── */

@keyframes floatY {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
@keyframes floatY-sm {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-5px); }
}
@keyframes floatY-lg {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-16px); }
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes slowSpinReverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes gentleRock {
  0%,100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
/* BUG #3 FIX : breathe utilise box-shadow au lieu de transform
   pour ne pas entrer en conflit avec le hover scale des boutons */
@keyframes breathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,169,97,.25); }
  50%      { box-shadow: 0 0 20px 4px rgba(201,169,97,.18); }
}
@keyframes goldPulseRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,169,97,.35), 0 0 30px -8px rgba(201,169,97,.2); }
  50%      { box-shadow: 0 0 0 10px rgba(201,169,97,0), 0 0 60px -8px rgba(201,169,97,.4); }
}
@keyframes shimmerText {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  25%      { transform: translate(40px,-25px) rotate(90deg) scale(1.05); }
  50%      { transform: translate(10px, 40px) rotate(180deg) scale(.95); }
  75%      { transform: translate(-30px, 5px) rotate(270deg) scale(1.02); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  25%      { transform: translate(-45px, 20px) rotate(-90deg) scale(.96); }
  50%      { transform: translate(15px,-35px) rotate(-180deg) scale(1.04); }
  75%      { transform: translate(35px, 15px) rotate(-270deg) scale(.98); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(25px,-45px) scale(1.08); }
}
@keyframes sparkle {
  0%,100% { opacity: 0; transform: scale(0) rotate(0deg); }
  40%      { opacity: 1; transform: scale(1) rotate(90deg); }
  60%      { opacity: .8; transform: scale(.9) rotate(135deg); }
}
@keyframes twinkle {
  0%,100% { opacity: .3; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
@keyframes scanLine {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}
@keyframes slideRotateIn {
  from { opacity: 0; transform: translateX(-20px) rotate(-3deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* ── UTILITY CLASSES ───────────────────────────────────────────── */

.anim-float       { animation: floatY 4s ease-in-out infinite; }
.anim-float-sm    { animation: floatY-sm 3s ease-in-out infinite; }
.anim-float-lg    { animation: floatY-lg 6s ease-in-out infinite; }
.anim-rock        { animation: gentleRock 5s ease-in-out infinite; }
/* BUG #3 FIX : anim-breathe utilise box-shadow, pas transform */
.anim-breathe     { animation: breathe 4s ease-in-out infinite; }
.anim-spin-slow   { animation: slowSpin 32s linear infinite; display: inline-block; }
.anim-spin-medium { animation: slowSpin 18s linear infinite; display: inline-block; }
.anim-spin-rev    { animation: slowSpinReverse 26s linear infinite; display: inline-block; }
.anim-twinkle     { animation: twinkle 2.5s ease-in-out infinite; }
.anim-gold-glow   { animation: goldPulseRing 3s ease-in-out infinite; }

.anim-d1 { animation-delay: .15s; }
.anim-d2 { animation-delay: .35s; }
.anim-d3 { animation-delay: .55s; }
.anim-d4 { animation-delay: .8s; }
.anim-d5 { animation-delay: 1.1s; }
.anim-d6 { animation-delay: 1.5s; }
.anim-d7 { animation-delay: 2s; }
.anim-d8 { animation-delay: 2.8s; }

/* ── CARD TILT ─────────────────────────────────────────────────── */
/* transform-style:flat car preserve-3d est incompatible avec overflow:hidden */
.tilt-card {
  transform-style: flat;
  transition: transform .2s ease-out, box-shadow .3s;
}

/* ── SHIMMER TEXT ──────────────────────────────────────────────── */
.shimmer-gold {
  background: linear-gradient(90deg,#c9a961 0%,#f5ecd2 30%,#dbc178 50%,#f5ecd2 70%,#c9a961 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 3.5s linear infinite;
}

/* ── ORB BACKGROUNDS ───────────────────────────────────────────── */
/* BUG #8 FIX : z-index:-1 pour être toujours derrière le contenu */
.scene-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;           /* FIX: était 0, apparaissait devant le texte */
  filter: blur(45px);
  mix-blend-mode: normal;
}
.scene-orb-1 {
  background: radial-gradient(circle, rgba(201,169,97,.20) 0%, transparent 70%);
  animation: orbDrift1 20s ease-in-out infinite;
}
.scene-orb-2 {
  background: radial-gradient(circle, rgba(219,193,120,.14) 0%, transparent 70%);
  animation: orbDrift2 27s ease-in-out infinite;
}
.scene-orb-3 {
  background: radial-gradient(circle, rgba(245,236,210,.10) 0%, transparent 70%);
  animation: orbDrift3 16s ease-in-out infinite;
}

/* ── SPARKLE DOTS ──────────────────────────────────────────────── */
/* BUG #9 FIX : z-index:100 pour être au-dessus des sections (z-index 26-45) */
.sparkle-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(201,169,97,.85);
  pointer-events: none;
  z-index: 100;          /* FIX: était 2, disparaissait derrière sections */
  animation: sparkle 2s ease-in-out infinite;
}

/* ── REVEAL CLASSES ────────────────────────────────────────────── */
.tilt-reveal {
  opacity: 0;
  transform: perspective(800px) rotateX(-10deg) translateY(24px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.tilt-reveal.visible {
  opacity: 1;
  transform: perspective(800px) rotateX(0deg) translateY(0);
}
.spin-reveal {
  opacity: 0;
  transform: rotate(-4deg) scale(.96);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.spin-reveal.visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.slide-rotate-reveal {
  opacity: 0;
  transform: translateX(-16px) rotate(-2deg);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.slide-rotate-reveal.visible {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

/* ── NAVBAR ITEMS ──────────────────────────────────────────────── */
.nav-item {
  transition: background .2s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.nav-item:hover {
  transform: translateY(-2px) scale(1.1);
}
.nav-item.active:hover {
  transform: translateY(-1px) scale(1.05);
}

/* ── SOCIAL BUTTONS ────────────────────────────────────────────── */
.social-btn {
  transition: background .2s, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.social-btn:hover {
  transform: scale(1.18);
}
.social-btn:hover svg {
  animation: slowSpin 1.8s linear infinite;
}

/* ── GALLERY ───────────────────────────────────────────────────── */
/* Hover uniquement sur la box-shadow — transform géré par parallax */
.gallery-item {
  transition: box-shadow .4s, outline-color .3s;
  outline: 1px solid transparent;
}
.gallery-item:hover {
  box-shadow: 0 20px 50px -12px rgba(201,169,97,.35);
  outline-color: rgba(201,169,97,.25);
}
/* BUG #14 : scale appliqué à l'img.
   IMPORTANT: parallax.js doit préserver ce scale en combinant les transforms */
.gallery-item img {
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.gallery-item:hover img {
  /* parallax.js lit data-hover-scale pour combiner avec translateY */
}

/* ── FOOTER LINKS ──────────────────────────────────────────────── */
.footer-link {
  display: inline-block;
  transition: color .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.footer-link:hover {
  transform: translateX(3px);
}

/* ── ACCORDION ─────────────────────────────────────────────────── */
.accordion-icon {
  display: inline-block;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

/* ── SCAN-LINE SHIMMER ON CARDS ────────────────────────────────── */
/* Les cards ont overflow:hidden dans responsive.css */
.service-card,
.cta-card {
  position: relative;
}
.service-card::after,
.cta-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.service-card:hover::after,
.cta-card:hover::after {
  animation: scanLine .65s ease-out forwards;
}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn-gold-pulse {
  animation: goldPulseRing 2.5s ease-in-out infinite !important;
}
/* BUG #3 FIX : hover n'écrase plus anim-breathe (breathe utilise box-shadow) */
.btn-primary:hover {
  transform: scale(1.03);
}

/* ── PRICE TAG FLOAT ───────────────────────────────────────────── */
.price-tag {
  animation: floatY-sm 3.5s ease-in-out infinite;
}

/* ── EYEBROW ───────────────────────────────────────────────────── */
.eyebrow {
  transition: letter-spacing .4s, color .3s;
}
.eyebrow:hover {
  letter-spacing: .26em;
}

/* ── IMMERSION IMAGES ──────────────────────────────────────────── */
/* Hover sur le CONTENEUR — parallax sur l'img intérieure — pas de conflit */
.immersion-img {
  transition: box-shadow .4s;
}
.immersion-img:hover {
  box-shadow: 0 20px 60px -12px rgba(201,169,97,.3);
}

/* ── MARQUEE CARDS ─────────────────────────────────────────────── */
.marquee-card {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.marquee-card:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 12px 40px -8px rgba(201,169,97,.25);
}

/* ── BOOKING H2 ────────────────────────────────────────────────── */
/* BUG #1 FIX : display:block, pas de floatY-sm (conflicte avec word-split JS)
   Le float est appliqué mot par mot dans initBookingWordRotate() */
#booking {
  position: relative;
}
.booking-h2 {
  display: block;
  /* Pas d'animation ici : JS anime chaque mot individuellement */
}

/* ── STAR SVG HOVER ────────────────────────────────────────────── */
/* BUG #4 FIX : retiré le twinkle CSS hover (conflit avec gentleRock JS inline) */
svg[viewBox="0 0 20 20"] {
  display: inline-block;
  transition: transform .3s;
}

/* ── REDUCE MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}