/* ============================================================
   Checking — animations & effets visuels partagés
   Importe par : landing.blade.php + app.blade.php
   ============================================================ */

/* === Mesh gradient animé (background hero) === */
@keyframes mesh-shift {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.05); }
  66% { transform: translate(-20px,30px) scale(.95); }
}

/* === Gradient text qui slide === */
@keyframes gradient-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-pan {
  background-size: 200% auto;
  animation: gradient-pan 6s ease-in-out infinite;
}

/* === Floating petits éléments décoratifs === */
@keyframes float-slow { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(15px,-25px) rotate(8deg)} }
@keyframes float-med  { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(-20px,-15px) rotate(-6deg)} }
@keyframes float-fast { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(10px,20px) rotate(10deg)} }
.anim-float-slow { animation: float-slow 8s ease-in-out infinite; }
.anim-float-med  { animation: float-med 10s ease-in-out infinite; }
.anim-float-fast { animation: float-fast 6s ease-in-out infinite; }

/* === Pulse ring (autour des éléments importants) === */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.anim-pulse-ring { animation: pulse-ring 2.5s ease-out infinite; }

/* === Tilt 3D au hover (cards) === */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.tilt-3d:hover {
  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) translateY(-6px) scale(1.01);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.25), 0 18px 36px -18px rgba(99,102,241,.3);
}

/* === Lift simple (sans 3D) === */
.anim-lift {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.anim-lift:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(0,0,0,.2); }

/* === Reveal au scroll === */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal-left.in { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal-right.in { opacity: 1; transform: none; }
.reveal-zoom { opacity: 0; transform: scale(.9); transition: opacity .8s, transform .8s cubic-bezier(.34,1.56,.64,1); }
.reveal-zoom.in { opacity: 1; transform: none; }

/* === Shimmer button (lumière qui passe) === */
.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 45%, transparent 60%);
  transform: translateX(-100%); transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.btn-shimmer:hover::before { transform: translateX(100%); }

/* === Glow au hover === */
.anim-glow:hover { box-shadow: 0 0 30px rgba(99,102,241,.4), 0 0 60px rgba(139,92,246,.2); }

/* === Bounce in === */
@keyframes bounce-in {
  0% { opacity: 0; transform: scale(.7); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.anim-bounce-in { animation: bounce-in .5s cubic-bezier(.34,1.56,.64,1) both; }

/* === Slide-up fade === */
@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.anim-slide-up { animation: slide-up-fade .45s cubic-bezier(.4,0,.2,1) both; }

/* === Count up shake (pour stats) === */
@keyframes count-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.anim-count { animation: count-pop .6s cubic-bezier(.34,1.56,.64,1) both; }

/* === Spinner moderne === */
@keyframes spin-grow {
  0% { transform: rotate(0deg) scale(.8); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(.8); }
}
.anim-spin-grow { animation: spin-grow 2.5s ease-in-out infinite; }

/* === Marquee horizontal === */
@keyframes marquee-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.anim-marquee { display: flex; gap: 3rem; animation: marquee-x 40s linear infinite; }
.anim-marquee:hover { animation-play-state: paused; }

/* === Drift lent (background blobs) === */
@keyframes drift-blob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.1); }
}
.anim-drift { animation: drift-blob 20s ease-in-out infinite; }

/* === Confetti (succès) === */
@keyframes confetti-fall {
  0%   { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), 100vh) rotate(720deg); opacity: 0; }
}
.confetti {
  position: fixed; top: -10px; width: 8px; height: 8px;
  animation: confetti-fall 2.5s ease-out forwards; pointer-events: none; z-index: 100;
}

/* === Sparkle (étoiles autour des éléments magiques ✨) === */
@keyframes sparkle-twinkle {
  0%,100% { opacity: 0; transform: scale(.5); }
  50%     { opacity: 1; transform: scale(1); }
}
.anim-sparkle { animation: sparkle-twinkle 1.5s ease-in-out infinite; }

/* === Wave (pour les indicateurs animés) === */
@keyframes wave {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.anim-wave { animation: wave 1.4s ease-in-out infinite; }
.anim-wave-d1 { animation-delay: .1s; }
.anim-wave-d2 { animation-delay: .2s; }
.anim-wave-d3 { animation-delay: .3s; }

/* === Pulse glow autour des features importantes === */
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(99,102,241,.2); }
  50%     { box-shadow: 0 0 40px rgba(139,92,246,.5); }
}
.anim-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* === Border gradient animée === */
@keyframes border-rotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.border-gradient {
  position: relative;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(90deg,#a855f7,#ec4899,#06b6d4,#a855f7) border-box;
  background-size: 200% 100%;
  border: 2px solid transparent;
  animation: border-rotate 6s linear infinite;
}

/* === Underline reveal au hover === */
.anim-underline { position: relative; }
.anim-underline::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.anim-underline:hover::after { transform: scaleX(1); }

/* === Skeleton shimmer === */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

/* === Background dots décoratif === */
.bg-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* === Enter / Exit Vue transitions === */
.fade-enter-active, .fade-leave-active { transition: opacity .25s cubic-bezier(.4,0,.2,1); }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-enter-active, .slide-leave-active { transition: opacity .35s, transform .35s cubic-bezier(.4,0,.2,1); }
.slide-enter-from { opacity: 0; transform: translateY(20px); }
.slide-leave-to   { opacity: 0; transform: translateY(-20px); }
.modal-enter-active, .modal-leave-active { transition: opacity .25s; }
.modal-enter-from, .modal-leave-to { opacity: 0; }
.modal-enter-active .modal, .modal-leave-active .modal {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
}
.modal-enter-from .modal { transform: scale(.95) translateY(20px); opacity: 0; }
.modal-leave-to .modal   { transform: scale(.95); opacity: 0; }

/* === Card stack pop === */
@keyframes stack-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
.anim-stack > * {
  opacity: 0;
  animation: stack-pop .5s cubic-bezier(.4,0,.2,1) both;
}
.anim-stack > *:nth-child(1) { animation-delay: .05s; }
.anim-stack > *:nth-child(2) { animation-delay: .15s; }
.anim-stack > *:nth-child(3) { animation-delay: .25s; }
.anim-stack > *:nth-child(4) { animation-delay: .35s; }
.anim-stack > *:nth-child(5) { animation-delay: .45s; }
.anim-stack > *:nth-child(6) { animation-delay: .55s; }
.anim-stack > *:nth-child(n+7) { animation-delay: .65s; }

/* ============================================================
   ILLUSTRATIONS SVG ANIMÉES
   ============================================================ */

/* === Plane flight === */
@keyframes plane-fly {
  0%   { transform: translate(-30px, 10px) rotate(-5deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(120px, -40px) rotate(8deg); opacity: 0; }
}
.illu-plane { animation: plane-fly 6s ease-in-out infinite; transform-origin: center; }

/* === Suitcase wobble === */
@keyframes suitcase-wobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(3deg); }
}
.illu-suitcase { animation: suitcase-wobble 3.5s ease-in-out infinite; transform-origin: bottom center; }

/* === Pin bounce === */
@keyframes pin-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.illu-pin { animation: pin-bounce 1.8s cubic-bezier(.4,1.6,.6,1) infinite; }

/* === Cloud drift === */
@keyframes cloud-drift-1 {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}
@keyframes cloud-drift-2 {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-25px); }
}
.illu-cloud-1 { animation: cloud-drift-1 8s ease-in-out infinite; }
.illu-cloud-2 { animation: cloud-drift-2 10s ease-in-out infinite; }

/* === Sun rays === */
@keyframes sun-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.illu-sun-rays { animation: sun-rotate 30s linear infinite; transform-origin: center; }

/* === Wave motion === */
@keyframes wave-roll {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-15px); }
}
.illu-wave { animation: wave-roll 4s ease-in-out infinite; }

/* === Falling element (snow / leaves / confetti) === */
@keyframes fall-sway {
  0%   { transform: translate(0, -20px) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--sway, 30px), 200px) rotate(360deg); opacity: 0; }
}
.illu-fall { animation: fall-sway 5s linear infinite; }

/* === Checkmark draw === */
@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}
.illu-check path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-check 1s ease-out forwards;
}

/* === Pulse big (heart, important) === */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.15); }
  20%, 40% { transform: scale(1); }
}
.illu-pulse { animation: heartbeat 2.2s ease-in-out infinite; transform-origin: center; }

/* === Compass spin === */
@keyframes compass-needle { 0%,100% { transform: rotate(-25deg); } 50% { transform: rotate(35deg); } }
.illu-compass-needle { animation: compass-needle 4s ease-in-out infinite; transform-origin: center; }

/* === Background scenes per travel-type === */
.scene-bg { position: relative; overflow: hidden; }
.scene-bg svg { position: absolute; pointer-events: none; }

/* === Card sparkle ✨ === */
@keyframes sparkle-pop {
  0%   { opacity: 0; transform: scale(0); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}
.illu-sparkle { animation: sparkle-pop 2s ease-in-out infinite; transform-origin: center; }
.illu-sparkle-d1 { animation-delay: .5s; }
.illu-sparkle-d2 { animation-delay: 1s; }
.illu-sparkle-d3 { animation-delay: 1.5s; }

/* === Empty state container === */
.empty-illu-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 16px;
}

/* === Reduce motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1 !important; transform: none !important; }
}