/* ===== Veo Digital — Premium kit ===== */

/* Barre de progression du scroll */
#scroll-prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: #ffffff; z-index: 9998;
}

/* Grain filmique global */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9997; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Transition de page (fondu) */
#page-fade {
  position: fixed; inset: 0; background: #000; z-index: 10000; opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
#page-fade.show { opacity: 1; pointer-events: all; }

/* Spotlight sur les cartes (lumière qui suit le curseur) */
.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity .35s ease; pointer-events: none; z-index: 1;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 62%);
  mix-blend-mode: soft-light;
}
.spot:hover::before { opacity: 1; }

/* Focus accessible */
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Sélection */
::selection { background: #fff; color: #000; }

/* Scrollbar premium */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #232323; border-radius: 9px; border: 2px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
html { scrollbar-width: thin; scrollbar-color: #232323 #000; }

/* Intro galaxie image : rotation lente */
#galaxy-img { will-change: transform; }
.galaxy-rotate { transform-origin: center; animation: gal-rot 150s linear infinite; }
@keyframes gal-rot {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .galaxy-rotate { animation: none; transform: translate(-50%,-50%); } }

/* ===== Marquee 3D perspective (technologies) ===== */
.tech3d-stage {
  position: relative; perspective: 1200px; overflow: visible; padding: 40px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.tech3d-rot { transform: rotateX(6deg) rotateY(-18deg); transform-style: preserve-3d; }
.tech3d-track { display: flex; align-items: center; gap: 54px; width: max-content; }
.tech3d-item {
  display: inline-flex; align-items: center; gap: 16px; flex: none;
  opacity: .8; transition: opacity .3s ease, transform .3s ease;
}
.tech3d-item:hover { opacity: 1; transform: translateY(-4px); }
.tech-logo { height: 40px; width: auto; flex: none; }
.tech3d-word {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(28px, 4.5vw, 54px); letter-spacing: -0.03em;
  color: #fafafa; line-height: 1.25; white-space: nowrap;
}
@media (max-width: 760px) { .tech3d-track { gap: 38px; } .tech-logo { height: 30px; } }

/* ===== Liquid glass button ===== */
.glass-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; color: #fff; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px) url("#glassfilter");
  box-shadow:
    0 0 8px rgba(0,0,0,0.03), 0 2px 6px rgba(0,0,0,0.08),
    inset 3px 3px 0.5px -3.5px rgba(255,255,255,0.09),
    inset -3px -3px 0.5px -3.5px rgba(255,255,255,0.85),
    inset 1px 1px 1px -0.5px rgba(255,255,255,0.6),
    inset -1px -1px 1px -0.5px rgba(255,255,255,0.6),
    inset 0 0 6px 6px rgba(255,255,255,0.12),
    inset 0 0 2px 2px rgba(255,255,255,0.06),
    0 0 12px rgba(0,0,0,0.15);
  transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease;
}
.glass-btn:hover { transform: scale(1.04); background: rgba(255,255,255,0.10); }
.glass-btn:active { transform: scale(.98); }

/* ===== Mesh-gradient animé (fond de l'intro) ===== */
#intro::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 28% 32%, rgba(140,145,170,.22), transparent 62%),
    radial-gradient(34% 34% at 72% 38%, rgba(90,92,108,.20), transparent 62%),
    radial-gradient(44% 44% at 52% 74%, rgba(165,170,195,.15), transparent 62%);
  filter: blur(48px);
  animation: meshmove 20s ease-in-out infinite alternate;
}
@keyframes meshmove {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(5%, -4%) scale(1.12); }
  100% { transform: translate(-4%, 5%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { #intro::before { animation: none; } }

/* ===== Préloader ===== */
#loader {
  position: fixed; inset: 0; z-index: 10002; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .6s ease, transform .9s cubic-bezier(.76,0,.24,1);
}
#loader.done { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.ld-word { font-family: 'JetBrains Mono', monospace; letter-spacing: .45em; font-size: 13px; color: #fff; opacity: .75; padding-left: .45em; }
.ld-logo { height: 130px; width: auto; margin-bottom: 6px; filter: drop-shadow(0 0 30px rgba(255,255,255,.18)); animation: ld-pulse 2.4s ease-in-out infinite; }
@keyframes ld-pulse { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.05); opacity: 1; } }
.ld-bar { width: 220px; height: 1px; background: rgba(255,255,255,.16); overflow: hidden; }
.ld-bar span { display: block; height: 100%; width: 0; background: #fff; transition: width .2s ease; }
.ld-num { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 72px; line-height: 1; color: #fff; }

/* ===== Navbar premium ===== */
nav { transition: transform .55s cubic-bezier(.16,1,.3,1); }
nav.nav-hidden { transform: translateY(-150%); }
.nav-pill { transition: box-shadow .4s ease, transform .5s cubic-bezier(.16,1,.3,1), background-color .4s ease; }
nav.nav-scrolled .nav-pill { box-shadow: 0 14px 50px rgba(0,0,0,.35); transform: scale(.975); }

/* indicateur coulissant derrière le lien survolé/actif */
.nav-links { position: relative; }
.nav-links > a { position: relative; z-index: 1; }
.nav-ind {
  position: absolute; top: 50%; transform: translateY(-50%); height: 36px; left: 0; width: 0;
  border-radius: 9999px; background: rgba(0,0,0,.07); opacity: 0; z-index: 0; pointer-events: none;
  transition: left .4s cubic-bezier(.16,1,.3,1), width .4s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}

/* texte qui se retourne au survol */
.nav-swap { position: relative; display: inline-block; overflow: hidden; vertical-align: middle; line-height: 1.1; }
.nav-swap-in, .nav-swap-out { display: block; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.nav-swap-out { position: absolute; top: 100%; left: 0; }
.nav-links a:hover .nav-swap-in,
.nav-links a:hover .nav-swap-out { transform: translateY(-100%); }

/* bouton Réserver : reflet qui balaie */
nav a.bg-black { position: relative; overflow: hidden; }
nav a.bg-black::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s cubic-bezier(.16,1,.3,1);
}
nav a.bg-black:hover::after { left: 150%; }

/* Fallback Spline sur mobile : gradient cosmique léger (zéro lag) */
@media (max-width: 760px) {
  #spline-intro { display: none !important; }
  #intro { background: #000 !important; }
}