/* ============================================================
   ANIMATIONS.CSS — États initiaux GSAP · Keyframes CSS · Loader
   Wild Valley Ouirgane

   Convention:
   - Préfixe [data-gsap] = piloté par animations.js
   - Préfixe .anim-*    = animations CSS pures
   - transform + opacity UNIQUEMENT (GPU composite)
   ============================================================ */

/* ------------------------------------------------------------
   1. LOADER
   ------------------------------------------------------------ */
#loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--c-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
/* initial states — GSAP animates from these */
.loader__logo-img { opacity: 0; transform: scale(0.08); }
.loader__bar-wrap,
.loader__tagline   { opacity: 0; }

.loader__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader__logo-img {
  width: 1040px;
  height: 1040px;
  object-fit: contain;
  max-width: 90vw;
  max-height: 72vh;
  margin-bottom: -20px;
}

.loader__bar-wrap {
  width: 180px;
  height: 2px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.loader__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-lt));
  border-radius: 2px;
  width: 0;
  animation: loaderFill 1.6s var(--ease-smooth) forwards;
}
@keyframes loaderFill {
  0%   { width: 0; }
  70%  { width: 75%; }
  100% { width: 100%; }
}

.loader__tagline {
  font-family: var(--f-cormorant);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.42);
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   IMAGE BRIDGE — gallery item → about section
   GSAP contrôle top / left / width / height via set() + to()
   ------------------------------------------------------------ */
#img-bridge {
  position: fixed;
  z-index: 7000;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
  will-change: top, left, width, height, opacity;
}

#img-bridge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ------------------------------------------------------------
   2. ÉTATS INITIAUX — éléments gérés par GSAP
   (opacity:0, transform = pré-état avant animation)
   ------------------------------------------------------------ */

/* Hero */
.hero__badge,
.hero__sub,
.hero__actions,
.hero__stats,
.hero__scroll {
  opacity: 0;  /* GSAP timeline anime ces éléments */
}

/* Reveal générique — tous les éléments avec [data-gsap="reveal"] */
[data-gsap="reveal"] {
  opacity: 0;
  transform: translateY(36px);
}

/* Reveal depuis la gauche */
[data-gsap="reveal-left"] {
  opacity: 0;
  transform: translateX(-48px);
}

/* Reveal depuis la droite */
[data-gsap="reveal-right"] {
  opacity: 0;
  transform: translateX(48px);
}

/* Reveal scale — cards */
[data-gsap="reveal-scale"] {
  opacity: 0;
  transform: scale(0.95) translateY(24px);
}

/* Stagger enfants — le parent est visible, les enfants [data-gsap-child] partent d'ici */
[data-gsap-child] {
  opacity: 0;
  transform: translateY(24px);
}

/* Score bars — largeur animée par GSAP */
.score-bar {
  width: 0 !important;  /* GSAP anime width → exception justifiée : SVG/line */
  height: 3px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-lt));
  border-radius: 2px;
  transition: none; /* GSAP gère tout */
}

/* Chars SplitText — créés par JS */
.char {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.1;
  padding: 0;
  margin: 0;
}
.char-inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
  padding: 0;
  margin: 0;
}

/* Image parallax — GSAP ScrollTrigger anime transform */
[data-gsap="parallax"] {
  will-change: transform;
}

/* ------------------------------------------------------------
   Clip-path reveals — hint GPU pour les éléments wipés
   ------------------------------------------------------------ */
.about__img-main,
.about__img-accent,
.restaurant__img,
.activities__side-img,
.room-card__img,
.gallery__item,
.sec-label {
  will-change: clip-path;
}

/* Gallery : overflow visible au niveau item pour que le wipe
   ne soit pas coupé par le parent overflow:hidden du grid */
.gallery__item {
  overflow: visible;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   3. ANIMATIONS CSS PURES (ne requièrent pas GSAP)
   ------------------------------------------------------------ */

/* Particules hero */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(201,148,58,0.55);
  animation: particleRise linear infinite;
  pointer-events: none;
}
@keyframes particleRise {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 0.8; }
  100% { transform: translateY(-8vh) rotate(720deg); opacity: 0; }
}

/* Pulse bouton WhatsApp */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.40); }
  50%       { box-shadow: 0 4px 28px rgba(37,211,102,0.65); }
}
.whatsapp-float.is-visible { animation: waPulse 3s ease-in-out infinite; }

/* Shimmer sur les images en chargement */
.img-shimmer {
  background: linear-gradient(
    90deg,
    var(--c-cream-dk) 0%,
    var(--c-cream) 50%,
    var(--c-cream-dk) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Flèche scrollbar hero */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(0.75); transform-origin: top; }
  50%       { opacity: 1;   transform: scaleY(1);    transform-origin: top; }
}

/* Floating badge about */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ------------------------------------------------------------
   Gold shimmer — em italic dans les titres
   ------------------------------------------------------------ */
@keyframes goldShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.t-h1 em,
.t-display em {
  background: linear-gradient(
    90deg,
    var(--c-gold)    0%,
    var(--c-gold-lt) 40%,
    #fff             50%,
    var(--c-gold-lt) 60%,
    var(--c-gold)    100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
  animation: goldShimmer 4s linear infinite;
}

/* Exception hero — le em a sa propre couleur via GSAP entrance */
.hero__title em {
  -webkit-text-fill-color: var(--c-gold-lt);
  animation: none;
  background: none;
  color: var(--c-gold-lt);
}

/* Divider — état initial scaleX:0, GSAP anime à 1 */
.divider {
  transform-origin: left center;
  transform: scaleX(0);
}

/* Nav link active — trait or sous le lien courant */
.nav-link.is-active {
  color: var(--c-white);
}
.nav-link.is-active::after {
  width: 100%;
  background: var(--c-gold);
}

/* Marquee ticker — si utilisé entre sections */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  background: var(--c-gold);
  padding-block: var(--s-3);
}
.ticker-track {
  display: inline-flex;
  gap: var(--s-10);
  animation: ticker 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  font-family: var(--f-sans);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.ticker-item::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}

/* 3D tilt — contexte de rendu pour room-card, activity-card, review-card */
.room-card,
.activity-card,
.review-card {
  transform-style: preserve-3d;
  /* Désactiver le transition CSS sur hover — GSAP gère tout */
  transition: box-shadow 0.4s var(--ease-smooth) !important;
}

/* Supprimer le translateY CSS hover car GSAP scale + rotateX/Y le remplace */
.room-card:hover,
.activity-card:hover {
  transform: none;
}

/* Garder uniquement box-shadow au hover (non géré par GSAP) */
.room-card:hover     { box-shadow: var(--sh-lg); }
.activity-card:hover { box-shadow: var(--sh-md); }


/* ------------------------------------------------------------
   4. TRANSITIONS DE PAGE (entre sections)
   ------------------------------------------------------------ */

/* Ligne séparatrice animée */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--c-stone-lt) 50%,
    transparent 100%
  );
  position: relative;
  overflow: hidden;
}
.section-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    var(--c-gold-lt),
    transparent
  );
  animation: dividerSweep 3s ease-in-out infinite;
}
@keyframes dividerSweep {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* ------------------------------------------------------------
   5. ÉTATS FINAUX (quand GSAP a terminé l'animation)
   Le JS ajoute .is-animated quand la tween est complète
   ------------------------------------------------------------ */
[data-gsap].is-animated,
[data-gsap-child].is-animated {
  will-change: auto;  /* libère la couche composite */
}

/* Rooms infinite marquee — margin-right sur chaque carte garantit sets = taille égale */
@keyframes roomsScroll {
  from { transform: translateX(0%); }
  to   { transform: translateX(-50%); }
}