/* ============================================
   Mamma Mia — Animations scroll & hover
   GSAP ScrollTrigger + CSS transitions
   ============================================ */

/* ---- Split Text Characters ---- */
[data-split-text] .char {
  display: inline-block;
  will-change: transform, opacity;
}

[data-split-text] .word {
  display: inline-block;
  overflow: hidden;
}

/* ---- Clip-path Reveal ---- */
.clip-reveal {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.clip-reveal.revealed {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 1.2s var(--ease-out-expo);
}

/* ---- Magnetic Buttons ---- */
[data-cursor="magnetic"] {
  position: relative;
  will-change: transform;
  transition: transform 0.4s var(--ease-out-expo);
}

/* ---- Scroll scrub section reveals ---- */
.scrub-fade {
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}

.scrub-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Parallax layers ---- */
.parallax-layer {
  will-change: transform;
  transition: none; /* GSAP controls this */
}

/* ---- Timeline items stagger ---- */
.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  will-change: transform, opacity;
}

/* ---- Event cards ---- */
.event-card {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* ---- Counter animation ---- */
.avis-number {
  font-variant-numeric: tabular-nums;
}

/* ---- Gallery items scale on scroll ---- */
.gallery-item {
  will-change: transform;
}

/* ---- Hero elements entrance states ---- */
.hero-badge,
.hero-cta-group,
.hero-horaires,
.hero-scroll-indicator {
  will-change: transform, opacity;
}

/* ---- Horizontal scroll progress indicator ---- */
.menu-horizontal-section::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: var(--scroll-progress, 0%);
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  z-index: 100;
  pointer-events: none;
  opacity: 0;
}

.menu-horizontal-section.scrolling::after {
  opacity: 1;
}

/* ---- Menu category panels entrance ---- */
.menu-category-panel {
  opacity: 0.5;
  transform: scale(0.95);
  will-change: transform, opacity;
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.menu-category-panel.active {
  opacity: 1;
  transform: scale(1);
}

/* ---- Section title word stagger (GSAP controlled) ---- */
.section-title .line {
  overflow: hidden;
  display: block;
}

.section-title .line-inner {
  display: block;
  transform: translateY(100%);
  will-change: transform;
}

/* ---- Footer title entrance ---- */
.footer-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) rotateX(-90deg);
  will-change: transform, opacity;
}

/* ---- Avis carousel infinite ---- */
.avis-track {
  will-change: transform;
}

/* Duplicate cards for seamless loop */
.avis-track::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 1px;
}

/* ---- Image hover glow effect ---- */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(212, 168, 83, 0.2) 0%,
    transparent 60%);
  pointer-events: none;
}

.gallery-item:hover::after {
  opacity: 1;
}

/* ---- Nav link underline animation ---- */
.nav-links a {
  position: relative;
}

/* ---- Loading skeleton placeholders ---- */
.skeleton {
  background: linear-gradient(90deg,
    rgba(44, 44, 44, 0.06) 25%,
    rgba(44, 44, 44, 0.12) 50%,
    rgba(44, 44, 44, 0.06) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease infinite;
  border-radius: 8px;
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Smooth entrance for reservation form ---- */
.reservation-form {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

.reservation-info {
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
}

/* ---- Stagger entrance for localisation ---- */
.localisation-info,
.localisation-map {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}