/* ============================================================
   RÉUNION PREMIÈRE — Micro-animations & Scroll Reveals
   ============================================================ */

/* === SCROLL REVEAL STATES === */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-up"] {
  transform: translateY(60px);
}

[data-animate="fade-up"].is-visible {
  transform: translateY(0);
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-down"].is-visible {
  transform: translateY(0);
}

[data-animate="fade-left"] {
  transform: translateX(60px);
}

[data-animate="fade-left"].is-visible {
  transform: translateX(0);
}

[data-animate="fade-right"] {
  transform: translateX(-60px);
}

[data-animate="fade-right"].is-visible {
  transform: translateX(0);
}

[data-animate="scale-up"] {
  transform: scale(0.9);
}

[data-animate="scale-up"].is-visible {
  transform: scale(1);
}

/* Stagger delays */
[data-delay="0"]   { transition-delay: 0ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }

/* === HERO ENTRANCE === */
.hero-badge { animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
.hero-title { animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }
.hero-subtitle { animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both; }
.hero-cta-group { animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both; }
.hero-stats { animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both; }
.hero-scroll-indicator { animation: heroEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both; }

@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === GLOW PULSE === */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.4), 0 0 80px rgba(255, 107, 53, 0.1);
  }
}

/* === FLOATING === */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* === SHIMMER === */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* === BORDER GLOW ROTATION === */
@keyframes borderGlow {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* === TEXT REVEAL === */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes textReveal {
  from {
    opacity: 0;
    transform: translateY(100%) rotateX(-40deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* === MAGNETIC HOVER === */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === RIPPLE === */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.ripple:hover::after {
  opacity: 1;
}

/* === PARALLAX LAYERS === */
.parallax-slow {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-fast {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* === SMOOTH REVEAL FOR CARDS === */
.card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s,
              box-shadow 0.4s;
}

.card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === IMAGE ZOOM ON SCROLL === */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-zoom:hover img {
  transform: scale(1.15);
}

/* === LINE DRAW === */
.line-draw {
  position: relative;
}

.line-draw::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--lava);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-draw:hover::after {
  width: 100%;
}

/* === GLITCH EFFECT (subtle) === */
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}

/* === TYPING CURSOR === */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--lava);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* === SMOOTH PAGE TRANSITION === */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--shadow);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-transition.active {
  transform: scaleY(1);
}

/* === HOVER LIFT === */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* === GLASS MORPHISM ENHANCED === */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* === NEON GLOW TEXT === */
.neon-text {
  text-shadow:
    0 0 10px rgba(255, 107, 53, 0.5),
    0 0 20px rgba(255, 107, 53, 0.3),
    0 0 40px rgba(255, 107, 53, 0.1);
}

/* === GRADIENT BORDER === */
.gradient-border {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--lava), transparent, var(--vegetal));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* === SCROLL-TRIGGERED COUNTER === */
.counter-animate {
  display: inline-block;
}

/* === WAVE ANIMATION === */
@keyframes wave {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.wave {
  display: inline-block;
  animation: wave 2.5s infinite;
  transform-origin: 70% 70%;
}

/* === SMOOTH SCROLL SNAP === */
.snap-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.snap-section {
  scroll-snap-align: start;
  height: 100vh;
}

/* === DARK MODE ENHANCEMENTS === */
::selection {
  background: rgba(255, 107, 53, 0.3);
  color: var(--sand);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--shadow);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 53, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 53, 0.5);
}

/* === LOADING SKELETON === */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}

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

/* === INTERACTIVE MAP MARKER === */
.map-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lava);
  position: relative;
  cursor: pointer;
}

.map-marker::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--lava);
  animation: marker-ping 2s ease-out infinite;
}

@keyframes marker-ping {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* === SPLIT TEXT ANIMATION === */
.split-text .char {
  display: inline-block;
  animation: charReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes charReveal {
  from {
    opacity: 0;
    transform: translateY(50px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* === AMBIENT LIGHT === */
.ambient-light {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left 0.3s ease-out, top 0.3s ease-out;
}

/* === PROGRESS BAR === */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lava), var(--lava-light));
  z-index: 10000;
  transition: width 0.1s linear;
}

/* === NOTIFICATION TOAST === */
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 16px 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--sand);
  font-size: 0.9rem;
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}