/* ==========================================================================
   VILLA ÉLYSÉE — ANIMATIONS, CURSEUR PERSONNALISÉ & SCROLL-DRIVEN EFFECTS
   Fluidité 60 FPS, micro-interactions de prestige & narration visuelle
   ========================================================================== */

/* --- 1. Curseur Haute Horlogerie / Luxe (Desktop) --- */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--gold-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.08s linear;
  mix-blend-mode: difference;
}

.custom-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(197, 168, 128, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease-cinematic), 
              height 0.35s var(--ease-cinematic), 
              background-color 0.35s ease, 
              border-color 0.35s ease, 
              opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-cursor-text {
  font-size: 0.55rem;
  font-family: var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bg-primary);
  font-weight: 700;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-cinematic);
  pointer-events: none;
}

/* États interactifs du curseur */
body.cursor-hover .custom-cursor {
  opacity: 0;
}

body.cursor-hover .custom-cursor-follower {
  width: 84px;
  height: 84px;
  background-color: var(--gold-accent);
  border-color: var(--gold-accent);
  mix-blend-mode: normal;
}

body.cursor-hover .custom-cursor-text {
  opacity: 1;
  transform: scale(1);
}

body.cursor-click .custom-cursor-follower {
  transform: translate(-50%, -50%) scale(0.9);
}

/* --- 2. Animations d'apparition & Révélations au Scroll --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease-cinematic), transform 1.1s var(--ease-cinematic);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Délais en cascade pour éléments groupés */
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* Effet de zoom / poussée cinématographique */
.camera-push {
  transform: scale(1.12);
  transition: transform 1.6s var(--ease-cinematic);
  will-change: transform;
}

.camera-push.is-settled {
  transform: scale(1);
}

/* Effet d'expansion de masque (Clip path) */
.clip-reveal {
  clip-path: inset(10% 10% 10% 10%);
  transition: clip-path 1.4s var(--ease-cinematic);
}

.clip-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* Parallaxe subtile pour les éléments décoratifs */
.parallax-slow {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Lueur pulsante délicate pour l'eau & détails dorés */
@keyframes goldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(197, 168, 128, 0.4);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(197, 168, 128, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(197, 168, 128, 0);
  }
}

.gold-pulse-effect {
  animation: goldPulse 3.5s infinite;
}

/* --- 3. Déplacement horizontal fluide de texte d'ambiance --- */
.marquee-luxury-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  padding: 20px 0;
  opacity: 0.2;
}

.marquee-luxury-track {
  display: inline-flex;
  gap: 40px;
  animation: marqueeLuxury 45s linear infinite;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

@keyframes marqueeLuxury {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- 4. Transition de chargement initiale (Preloader épuré) --- */
.preloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-cinematic), visibility 0.8s ease;
}

.preloader-overlay.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 16px;
  opacity: 0;
  animation: preloaderTextFade 1.4s ease forwards;
}

.preloader-line {
  width: 140px;
  height: 1px;
  background-color: var(--border-subtle);
  position: relative;
  overflow: hidden;
}

.preloader-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--gold-accent);
  animation: preloaderLineFill 1.8s var(--ease-cinematic) forwards;
}

@keyframes preloaderTextFade {
  0% { opacity: 0; transform: translateY(10px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes preloaderLineFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* --- 5. Support de la réduction de mouvement (Accessibilité) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .custom-cursor,
  .custom-cursor-follower {
    display: none !important;
  }
}