/* ============================================================================
   VOLTYR LABS — vnext, COUCHE PREMIUM (V1 polish)
   S'empile SUR base.css (globals.css du site prod, copié verbatim).
   Rien n'est retiré : on améliore le FEEL DE PARCOURS.
   Règles : 1-2 effets forts/section max, sobriété, prefers-reduced-motion respecté,
   un seul bleu d'accent (tokens Voltyr). Cf. SCROLL.md + COMPONENTS-EXTERNAL.md + PREMIUM.md.
   ============================================================================ */

/* --- Fonts (le site prod les injecte via next/font ; ici Google Fonts) --- */
:root{
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --ease-premium:cubic-bezier(.16,1,.3,1);
}

/* ============================================================================
   1. LENIS — smooth scroll à inertie (T0). Le "feel premium" instantané.
   CSS officielle Lenis : neutralise le smooth natif, laisse Lenis piloter.
   ============================================================================ */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
/* On coupe le scroll-behavior:smooth natif de base.css quand Lenis tourne */
html.lenis{scroll-behavior:auto;}

/* ============================================================================
   2. NAV — barre de progression de lecture + fond qui se densifie
   ============================================================================ */
.nav-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--electric-bright),var(--electric-deep));
  box-shadow:0 0 12px var(--glow);pointer-events:none;
  will-change:transform;
}
/* liens nav : soulignement animé au survol (micro-interaction Magic UI-like) */
.nav-menu a{position:relative;}
.nav-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:linear-gradient(90deg,var(--electric-bright),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease-premium);
}
.nav-menu a:hover::after,.nav-menu a.is-active::after{transform:scaleX(1);}
.nav-menu a.is-active{color:var(--text);}

/* ============================================================================
   3. HERO — CADRE ONLY. Le canvas #dragon-canvas reste 100% intact.
   On enrichit uniquement l'ENVIRONNEMENT du dragon : spotlight, grille, entrée.
   ============================================================================ */

/* 3a. Spotlight Aceternity rebranché bleu : faisceau doux depuis le haut */
.hero-spotlight{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.hero-spotlight::before,.hero-spotlight::after{
  content:"";position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;
  mix-blend-mode:screen;
}
.hero-spotlight::before{
  top:-28%;left:6%;width:52%;height:78%;
  background:radial-gradient(closest-side,rgba(31,143,255,.28),transparent 72%);
  transform:rotate(-16deg);
  animation:spot-drift-a 16s ease-in-out infinite;
}
.hero-spotlight::after{
  top:-22%;right:4%;width:46%;height:70%;
  background:radial-gradient(closest-side,rgba(77,171,255,.18),transparent 72%);
  transform:rotate(14deg);
  animation:spot-drift-b 19s ease-in-out infinite;
}
@keyframes spot-drift-a{0%,100%{opacity:.42;transform:rotate(-16deg) translateY(0);}50%{opacity:.6;transform:rotate(-13deg) translateY(14px);}}
@keyframes spot-drift-b{0%,100%{opacity:.32;transform:rotate(14deg) translateY(0);}50%{opacity:.5;transform:rotate(11deg) translateY(18px);}}

/* 3b. Grille de points subtile (Magic UI Dot Pattern), fondue vers les bords */
.hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 62% 55% at 50% 34%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 62% 55% at 50% 34%,#000 0%,transparent 72%);
  opacity:.55;
}

/* 3c. anneau lumineux qui respire autour du dragon (cadre, pas le canvas) */
.dragon-stage::after{
  content:"";position:absolute;inset:-9%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 78%,rgba(77,171,255,.55) 88%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  opacity:.0;animation:dragon-ring 7s linear infinite;
}
@keyframes dragon-ring{0%{transform:rotate(0);opacity:.0;}12%{opacity:.9;}88%{opacity:.9;}100%{transform:rotate(360deg);opacity:.0;}}

/* 3d. H1 : entrée blur-in par ligne (Aceternity Text Generate / Magic UI Blur-in) */
.hero h1 .t1,.hero h1 br + *{will-change:transform,opacity,filter;}
.js-blurline{opacity:0;transform:translateY(14px);filter:blur(10px);}
.js-blurline.in{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease-premium),transform .9s var(--ease-premium),filter .9s var(--ease-premium);}

/* ============================================================================
   4. CTA SHIMMER (Magic UI Shine Button) — reflet qui balaie le CTA principal
   Classe additive .btn-shimmer, n'altère pas .btn-primary de base.css
   ============================================================================ */
.btn-shimmer{position:relative;overflow:hidden;isolation:isolate;}
/* ⚠️ ANIMÉ EN `transform`, JAMAIS EN `left` (mesuré le 03/08). Animer `left`
   oblige le navigateur à REFAIRE LA MISE EN PAGE à chaque image ; `transform`
   est pris en charge par le compositeur et ne coûte rien au fil de rouge.
   Le reflet est identique au pixel près : on part du même point, on arrive au
   même point, on garde le même biseau — il est simplement composé avec le
   déplacement au lieu d'être posé après lui. Trois de ces boutons vivent dans
   la page, tous animés en permanence. */
.btn-shimmer::after{
  content:"";position:absolute;top:0;left:0;width:60%;height:100%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-140%) skewX(-18deg);
  will-change:transform;
  animation:shimmer 4.2s var(--ease-premium) infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-233.4%) skewX(-18deg);}
  55%{transform:translateX(233.4%) skewX(-18deg);}
  100%{transform:translateX(233.4%) skewX(-18deg);}
}

/* ============================================================================
   5. BORDER BEAM (Magic UI) — trait lumineux qui court autour du player démo
   Appliqué à .vplayer. Le player a déjà overflow:hidden + border.
   ============================================================================ */
.vplayer{isolation:isolate;}
.vplayer::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--beam-angle,0deg),
     transparent 0deg,transparent 300deg,
     var(--electric-bright) 340deg,#bfe0ff 350deg,var(--electric-bright) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam-spin 6s linear infinite;pointer-events:none;
}
@property --beam-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes beam-spin{to{--beam-angle:360deg;}}
/* le contenu du player passe au-dessus du beam.
   ⚠️ NE PAS inclure .vplayer-glow : il est position:absolute (décoratif) dans base.css ;
   le repasser en relative le remet dans le flux → +300px de vide au-dessus du player. */
.vplayer-top,.vplayer-frame,.vplayer-note{position:relative;z-index:1;}

/* ============================================================================
   6. REVEALS CINÉMATIQUES — on RÉUTILISE l'observer .reveal existant (ajoute .in)
   et on remplace la transition binaire par une entrée premium (blur + scale + Y),
   avec cascade des enfants directs.
   ============================================================================ */
.reveal{
  opacity:0;transform:translateY(34px) scale(.985);filter:blur(6px);
  transition:opacity .9s var(--ease-premium),transform .9s var(--ease-premium),filter .9s var(--ease-premium);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;transform:none;filter:none;}

/* Cascade : enfants d'une grille/liste révélés en escalier via --i (posé en JS) */
.stagger > *{
  opacity:0;transform:translateY(26px) scale(.99);filter:blur(5px);
  transition:opacity .75s var(--ease-premium),transform .75s var(--ease-premium),filter .75s var(--ease-premium);
  transition-delay:calc(var(--i,0) * 80ms);
}
.stagger.in > *{opacity:1;transform:none;filter:none;}

/* eyebrow → titre → sous-titre : micro-décalage interne (choreographie de section) */
.reveal .eyebrow{transition-delay:.02s;}
.reveal .section-title{transition-delay:.06s;}
.reveal .section-sub{transition-delay:.12s;}

/* ============================================================================
   7. CELLULES BENTO — glow de bord au survol renforcé (déjà présent) + lift doux
   (on ne casse pas le tilt 3D JS de site-interactions.js)
   ============================================================================ */
.cell{transition:border-color .35s var(--ease-premium),transform .3s var(--ease-premium),box-shadow .35s var(--ease-premium);}
.cell:hover{box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 0 1px rgba(31,143,255,.18);}

/* ============================================================================
   8. SECTIONS — liseré supérieur lumineux qui apparaît au scroll (repère de rythme)
   ============================================================================ */
#services,#demo,#sites,#pourquoi,#faq{position:relative;}
#services::before,#demo::before,#pourquoi::before,#faq::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1216px,calc(100% - 64px));height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,143,255,.35),transparent);
  opacity:.7;
}

/* ============================================================================
   9. VELOCITY SKEW — inclinaison infime du contenu selon la vitesse de scroll
   (touche awwwards, très dosée). Piloté en JS via --skew sur .skew-wrap.
   ============================================================================ */
.skew-wrap{will-change:transform;}

/* ============================================================================
   FIX (retour Julien) — carré dur autour des mascottes en rendu ÉTROIT.
   base.css applique `.mascot-figure{overflow:hidden}` en <768px, ce qui clippe le
   halo bleu flou (::before, inset:-40%) en CARRÉ. On reclippe en CERCLE.
   ============================================================================ */
@media (max-width:768px){
  .mascot-figure{border-radius:50%;}
}

/* ============================================================================
   REDUCED MOTION — non négociable (SCROLL.md §4) : tout redevient calme et lisible
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .hero-spotlight::before,.hero-spotlight::after,.dragon-stage::after,
  .btn-shimmer::after,.vplayer::before{animation:none !important;}
  .dragon-stage::after{opacity:0 !important;}
  .btn-shimmer::after{display:none;}
  .vplayer::before{background:none;padding:0;}
  .reveal,.stagger > *{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .js-blurline{opacity:1 !important;transform:none !important;filter:none !important;}
  .skew-wrap{transform:none !important;}
}