/* ============================================
   TIERRA DE FUEGO — Animations CSS
   Compagnon des animations GSAP ScrollTrigger
   ============================================ */

/* --- États initiaux pour GSAP --- */

/* Titres split-text : les chars démarrent cachés */
.hero-title .char {
  opacity: 0;
  transform: translateY(80px) rotateX(-90deg);
  transform-origin: bottom center;
}

/* Éléments qui se révèlent au scroll (initialisés par GSAP) */
[data-animate="reveal"] {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

[data-animate="reveal"].is-revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Parallaxe multi-couches */
[data-parallax] {
  will-change: transform;
}

/* --- Custom ember glow pour les CTA --- */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--orange-flamme), var(--rouge-braise), var(--or-latin), var(--orange-flamme));
  background-size: 300% 300%;
  z-index: -1;
  border-radius: inherit;
  animation: emberGlow 4s ease infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-primary:hover::before {
  opacity: 1;
}

@keyframes emberGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Menu horizontal scroll indicator --- */
.menu-scroll-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  opacity: 0.5;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.menu-scroll-hint-arrow {
  width: 30px;
  height: 1px;
  background: var(--or-latin);
  position: relative;
  animation: menuArrowPulse 1.5s ease-in-out infinite;
}

.menu-scroll-hint-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--or-latin);
  border-right: 1px solid var(--or-latin);
  transform: rotate(45deg);
}

@keyframes menuArrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(8px); opacity: 1; }
}

/* --- Gallery tilt 3D --- */
.gallery-item {
  perspective: 800px;
}

.gallery-item-inner {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}

/* --- Avis card hover effects --- */
.avis-card {
  position: relative;
  overflow: hidden;
}

.avis-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange-flamme), var(--or-latin));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.avis-card:hover::before {
  transform: scaleX(1);
}

/* --- Stats counter animation preparation --- */
.stat-number {
  overflow: hidden;
}

/* --- Form input focus animation --- */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: rgba(200, 168, 92, 0.05);
}

/* --- Nav link underline sweep --- */
.nav-links a::after {
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Section divider (fiery line) --- */
.section-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--rouge-braise), var(--orange-flamme), var(--or-latin));
  margin: 0 auto 2rem;
  border-radius: 2px;
  position: relative;
}

.section-divider::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: inherit;
  filter: blur(6px);
  opacity: 0.5;
  border-radius: inherit;
}

/* --- Loading animation --- */
.loading-overlay .loading-text span {
  display: inline-block;
  animation: loadingCharFloat 1.5s ease-in-out infinite;
}

@keyframes loadingCharFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* --- Réservation success checkmark animation --- */
@keyframes checkmarkDraw {
  0% { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}

.reservation-success.visible .reservation-success-icon svg path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkmarkDraw 0.6s ease forwards 0.3s;
}

/* --- Scroll-driven text reveal clip-path transition --- */
.text-clip-reveal {
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  will-change: clip-path;
}

/* --- Parallax image wrapper --- */
.parallax-wrap {
  overflow: hidden;
  border-radius: 8px;
}

.parallax-wrap img {
  will-change: transform;
  transform: scale(1.15);
}

/* --- Smooth transitions between zones --- */
body {
  transition: none;
}

body[data-zone="fire"] {
  --zone-accent: var(--orange-flamme);
}

body[data-zone="transition"] {
  --zone-accent: var(--bleu-lagon);
}

body[data-zone="water"] {
  --zone-accent: var(--bleu-lagon);
}

/* --- Hover distortion hint for gallery images --- */
.gallery-item[data-cursor="image"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 99, 10, 0.15) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item[data-cursor="image"]:hover::after {
  opacity: 1;
}