/* ═══════════════════════════════════════════
   MOTION — Animations & interactions avancées
   ═══════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes slideLeft  { from { opacity:0; transform:translateX(-50px); } to { opacity:1; transform:none; } }
@keyframes slideRight { from { opacity:0; transform:translateX(50px);  } to { opacity:1; transform:none; } }
@keyframes scaleIn    { from { opacity:0; transform:scale(.9);          } to { opacity:1; transform:none; } }
@keyframes statPop    { from { opacity:0; transform:translateY(16px) scale(.8); } to { opacity:1; transform:none; } }

@keyframes particleFloat {
  0%   { opacity:0; transform:translateY(0) translateX(0) scale(1); }
  20%  { opacity:.65; }
  80%  { opacity:.25; }
  100% { opacity:0; transform:translateY(-180px) translateX(var(--dx, 20px)) scale(.15); }
}

@keyframes goldShimmer {
  0%, 100% { text-shadow: 0 0 20px rgba(200,144,42,.5); }
  50%       { text-shadow: 0 0 50px rgba(200,144,42,1), 0 0 80px rgba(200,144,42,.3); }
}

@keyframes dividerGrow { from { width: 0; } to { width: 80px; } }
@keyframes lineDraw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Reveal directionnel ── */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .95s cubic-bezier(.25,.46,.45,.94), transform .95s cubic-bezier(.25,.46,.45,.94);
}
.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .95s cubic-bezier(.25,.46,.45,.94), transform .95s cubic-bezier(.25,.46,.45,.94);
}
.reveal-right.visible { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal-scale.visible { opacity: 1; transform: none; }

/* ── Stagger enfants ── */
.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.stagger.visible > * { opacity: 1; transform: none; }
.stagger > *:nth-child(1) { transition-delay: .05s; }
.stagger > *:nth-child(2) { transition-delay: .18s; }
.stagger > *:nth-child(3) { transition-delay: .31s; }
.stagger > *:nth-child(4) { transition-delay: .44s; }
.stagger > *:nth-child(5) { transition-delay: .57s; }
.stagger > *:nth-child(6) { transition-delay: .70s; }
.stagger > *:nth-child(7) { transition-delay: .83s; }
.stagger > *:nth-child(n+8) { transition-delay: .96s; }

/* ── Nav — rétrécissement au scroll ── */
nav { transition: padding .4s ease, background .4s ease, box-shadow .4s ease, border-color .4s ease; }
nav.scrolled {
  padding: .85rem 3rem;
  background: rgba(8,5,3,.97);
  box-shadow: 0 4px 32px rgba(0,0,0,.55);
  border-bottom-color: rgba(200,144,42,.22);
}
@media (max-width: 900px) { nav.scrolled { padding: .65rem 1.5rem; } }

/* ── Nav — lien actif ── */
.nav-links a.active { color: var(--gold); }
.nav-links a.active::after { transform: scaleX(1); }

/* ── Nav logo hover ── */
.nav-logo { transition: text-shadow .35s ease; cursor: default; }
.nav-logo:hover { text-shadow: 0 0 50px rgba(200,144,42,1), 0 0 100px rgba(200,144,42,.4); }

/* ── Buttons — hover enrichi ── */
.btn { transition: all .35s cubic-bezier(.25,.46,.45,.94); }
.btn-primary:hover {
  background: var(--parchment);
  box-shadow: 0 0 40px rgba(200,144,42,.6), 0 0 80px rgba(200,144,42,.15);
  transform: translateY(-3px);
}
.btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(200,144,42,.18);
}

/* ── Section divider — animation de tracé ── */
.section-divider {
  width: 0;
  transition: width 1.3s cubic-bezier(.25,.46,.45,.94) .25s;
}
.section-divider.visible { width: 80px; }

/* ── Ornement — lignes qui s'étendent ── */
.ornament-line {
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(.25,.46,.45,.94);
}
.ornament-line       { transform-origin: right; }
.ornament-line.r     { transform-origin: left; }
.ornament.visible .ornament-line   { transform: scaleX(1); }

/* ── Beer cats — hover amélioré ── */
.beer-cat {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.beer-cat:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(200,144,42,.2), 0 0 0 1px rgba(200,144,42,.35);
  border-color: rgba(200,144,42,.55);
  background: rgba(200,144,42,.07);
}
.beer-cat-icon {
  display: inline-block;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.beer-cat:hover .beer-cat-icon { transform: scale(1.3) rotate(-8deg); }

/* ── Menu items — hover avec bord gauche ── */
.menu-item {
  position: relative;
  transition: background .28s ease, padding-left .28s ease;
}
.menu-item::before {
  content: '';
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .3s ease;
}
.menu-item:hover { background: rgba(200,144,42,.05); padding-left: .7rem; }
.menu-item:hover::before { transform: scaleY(1); }

/* ── Service badge — hover glow ── */
.service-badge {
  transition: box-shadow .4s ease, border-color .4s ease;
}
.service-badge:hover {
  box-shadow: 0 0 30px rgba(200,144,42,.15);
  border-color: rgba(200,144,42,.45);
}

/* ── Horaires — hover subtil ── */
.hours-row {
  transition: background .25s ease, padding-left .25s ease;
  cursor: default;
  border-radius: 2px;
}
.hours-row:hover { background: rgba(200,144,42,.05); padding-left: .4rem; }

/* ── Contact rows — hover ── */
.contact-row {
  transition: background .25s ease, padding-left .25s ease;
  cursor: default;
  border-radius: 2px;
}
.contact-row:hover { background: rgba(200,144,42,.05); padding-left: .4rem; }

/* ── Gallery items ── */
.gallery-item {
  transition: box-shadow .4s ease, border-color .4s ease;
}
.gallery-item:hover {
  box-shadow: 0 8px 32px rgba(200,144,42,.18);
  border-color: rgba(200,144,42,.4);
}

/* ── Footer logo — pulsation dorée ── */
.footer-logo { animation: goldShimmer 5s ease-in-out infinite; }

/* ── Hero — particules ── */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  animation: particleFloat var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
  box-shadow: 0 0 4px rgba(200,144,42,.6);
}

/* ── Stat number — apparition ── */
@keyframes statAppear {
  from { opacity:0; transform: translateY(14px) scale(.75); }
  to   { opacity:1; transform: none; }
}
.stat-number { display: block; }
.stat-number.animating { animation: statAppear .5s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ═══════════════════════════════════════════
   IDLE MOTION — Vie ambiante permanente
   ═══════════════════════════════════════════ */

/* ── Beer cat icons — flottement doux & décalé ── */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.beer-cat:nth-child(1) .beer-cat-icon { animation: iconFloat 3.2s ease-in-out infinite 0s; }
.beer-cat:nth-child(2) .beer-cat-icon { animation: iconFloat 3.2s ease-in-out infinite .8s; }
.beer-cat:nth-child(3) .beer-cat-icon { animation: iconFloat 3.2s ease-in-out infinite 1.6s; }
.beer-cat:nth-child(4) .beer-cat-icon { animation: iconFloat 3.2s ease-in-out infinite 2.4s; }
.beer-cat:hover .beer-cat-icon {
  animation-play-state: paused;
  transform: scale(1.3) rotate(-8deg) !important;
}

/* ── Ornement ✦ — rotation lente ── */
@keyframes ornamentSpin {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.2); }
  to   { transform: rotate(360deg) scale(1); }
}
.ornament-sym {
  display: inline-block;
  animation: ornamentSpin 20s linear infinite;
}

/* ── Titres de section — respiration dorée ── */
@keyframes titleBreathe {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 40px rgba(200,144,42,.18), 0 0 80px rgba(200,144,42,.06); }
}
.section-title { animation: titleBreathe 8s ease-in-out infinite; }

/* ── Hero title — respiration après l'entrée ── */
@keyframes heroBreathe {
  0%, 100% { text-shadow: 0 0 80px rgba(200,144,42,.35), 2px 4px 0 rgba(0,0,0,.6); }
  50%       { text-shadow: 0 0 130px rgba(200,144,42,.7), 0 0 220px rgba(200,144,42,.2), 2px 4px 0 rgba(0,0,0,.6); }
}
.hero-title.idle {
  opacity: 1;
  transform: none;
  animation: heroBreathe 6s ease-in-out infinite;
}

/* ── Stats — lueur après comptage ── */
@keyframes statGlow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 24px rgba(200,144,42,.6); }
}
.stat-number.glowing { animation: statGlow 4s ease-in-out infinite; }

/* ── Icônes contact — pulsation douce & décalée ── */
@keyframes contactPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}
.contact-icon { display: inline-block; }
.contact-row:nth-child(1) .contact-icon { animation: contactPulse 3.5s ease-in-out infinite 0s; }
.contact-row:nth-child(2) .contact-icon { animation: contactPulse 3.5s ease-in-out infinite 1.1s; }
.contact-row:nth-child(3) .contact-icon { animation: contactPulse 3.5s ease-in-out infinite 2.2s; }

/* ── Section divider — balayage lumineux ── */
.section-divider { position: relative; overflow: hidden; }
.section-divider::after {
  content: '';
  position: absolute; top: 0; left: -60%; height: 100%; width: 60%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.55), transparent);
  animation: dividerSweep 4s ease-in-out infinite;
  animation-play-state: paused;
}
.section-divider.visible::after { animation-play-state: running; }

@keyframes dividerSweep {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}

/* ── Beer toggle — pulsation dorée ── */
@keyframes toggleGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,.6); }
  50%       { box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 30px rgba(200,144,42,.45); }
}
.beer-toggle { animation: toggleGlow 3s ease-in-out infinite; }

/* ── Service badge heure — lueur respirante ── */
@keyframes serviceGlow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 25px rgba(200,144,42,.45); }
}
.service-badge .stime { animation: serviceGlow 5s ease-in-out infinite; }

/* ── Section inner au-dessus des particules ── */
.section-inner { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════
   SCROLL-DRIVEN MOTION
   ═══════════════════════════════════════════ */

/* ── Barre de progression ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 2px;
  background: linear-gradient(to right, var(--dark-gold), var(--gold), #f5e6c8, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(200,144,42,.7);
}

/* ── Hero content wrapper — parallaxe ── */
.hero-content {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  width: 100%;
  will-change: transform, opacity;
  position: relative; z-index: 2;
}