/* ══════════════════════════════════════════════════════════════
   HOKKO: Effets premium (GPU-friendly, prefers-reduced-motion)
   ══════════════════════════════════════════════════════════════ */

/* ── Scène d'ambiance ── */
.site-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

body.has-site-effects {
  background-color: #0b1120;
}

html.is-ready body.has-site-effects {
  animation: site-page-in 0.5s ease;
}

@keyframes site-page-in {
  from { opacity: 0.92; }
  to { opacity: 1; }
}

body.has-site-effects nav {
  position: sticky;
  top: 0;
  z-index: 100;
  transition:
    padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

body.has-site-effects nav.nav-scrolled {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  background: rgba(7, 13, 24, 0.88);
  border-bottom-color: rgba(45, 142, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

body.has-site-effects footer {
  position: relative;
  z-index: 2;
  clear: both;
}

body.has-site-effects #milo-widget {
  position: fixed;
  z-index: 9999;
}

body.has-site-effects .hero,
body.has-site-effects .sec,
body.has-site-effects .cta-band,
body.has-site-effects .stats,
body.has-site-effects .page-main {
  position: relative;
  z-index: 1;
}

body.has-site-effects .hero {
  background: transparent !important;
}

body.has-site-effects .page-main {
  background: transparent;
}

body.has-site-effects .hero .hero-glow,
body.has-site-effects .hero .hero-glow2,
body.has-site-effects .hero .hero-grid,
body.has-site-effects .hero .particles,
body.has-site-effects .hero #particles {
  display: none !important;
}

/* ── Auralis (accueil uniquement) ── */
body.has-auralis,
body.has-auralis.is-navigating {
  background-color: #0b1120 !important;
}

.site-scene--auralis {
  contain: none;
  background: #0b1120;
}

.auralis-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

body.has-auralis.is-navigating .auralis-canvas {
  opacity: 0 !important;
  visibility: hidden;
}

/* ── Fond animé ── */
.site-scene .scene-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

.site-scene .scene-glow--top {
  top: -150px;
  left: 50%;
  width: 700px;
  height: 600px;
  background: radial-gradient(circle, rgba(45, 142, 255, 0.12), transparent 68%);
  transform: translate3d(-50%, 0, 0);
  animation: site-glow-drift-a 22s ease-in-out infinite;
}

.site-scene .scene-glow--left {
  top: 10%;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(45, 142, 255, 0.1), transparent 65%);
  animation: site-glow-drift-b 26s ease-in-out infinite;
}

.site-scene .scene-glow--right {
  bottom: 5%;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(45, 142, 255, 0.07), transparent 65%);
  animation: site-glow-drift-c 20s ease-in-out infinite;
}

.site-scene .scene-glow--accent {
  bottom: -180px;
  right: -80px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(45, 200, 154, 0.07), transparent 65%);
  animation: site-glow-drift-d 24s ease-in-out infinite;
}

@keyframes site-glow-drift-a {
  0%, 100% { transform: translate3d(-50%, 0, 0) scale(1); }
  50% { transform: translate3d(-48%, 18px, 0) scale(1.04); }
}

@keyframes site-glow-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(24px, -16px, 0); }
}

@keyframes site-glow-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-20px, 12px, 0); }
}

@keyframes site-glow-drift-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-16px, -20px, 0) scale(1.05); }
}

.site-scene .particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.site-scene .particle {
  position: absolute;
  border-radius: 50%;
  background: #2d8eff;
  opacity: 0;
  animation: site-float linear infinite;
  will-change: transform, opacity;
}

/* ── Reveal au scroll ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Section carrousel homepage : pas de transform (casse preserve-3d) */
#portfolio.reveal,
#portfolio.reveal.in {
  transform: none;
}

.reveal-scale {
  transform: translate3d(0, 20px, 0) scale(0.98);
}

.reveal-scale.in {
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal-fade {
  transform: none;
}

.reveal-child {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stagger, 0) * 70ms);
}

.reveal.in .reveal-child,
.reveal-child.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── Navigation premium ── */
body.has-site-effects .nav-links a {
  position: relative;
  transition: color 0.25s ease;
}

body.has-site-effects .nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--blue, #2d8eff), var(--bl, #5aaeff));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

body.has-site-effects .nav-links a:hover::after,
body.has-site-effects .nav-links a.active::after {
  transform: scaleX(1);
}

body.has-site-effects .site-logo,
body.has-site-effects .logo .site-logo {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

body.has-site-effects .logo:hover .site-logo {
  transform: scale(1.03);
  filter: drop-shadow(0 0 12px rgba(45, 142, 255, 0.35));
}

/* ── Boutons & CTA ── */
body.has-site-effects .btn-solid,
body.has-site-effects .nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

body.has-site-effects .btn-solid::before,
body.has-site-effects .nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 62%
  );
  transform: translate3d(-130%, 0, 0);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

body.has-site-effects .btn-solid:hover,
body.has-site-effects .nav-cta:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 28px rgba(45, 142, 255, 0.28);
}

body.has-site-effects .btn-solid:hover::before,
body.has-site-effects .nav-cta:hover::before {
  transform: translate3d(130%, 0, 0);
}

body.has-site-effects .btn-ghost,
body.has-site-effects .nav-sim {
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

body.has-site-effects .btn-ghost:hover,
body.has-site-effects .nav-sim:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* ── Cartes & blocs interactifs ── */
body.has-site-effects .member,
body.has-site-effects .member-card,
body.has-site-effects .pack-card,
body.has-site-effects .svc-card,
body.has-site-effects .cat-card,
body.has-site-effects .contact-card,
body.has-site-effects .art-card,
body.has-site-effects .tcard,
body.has-site-effects .pi,
body.has-site-effects .pstep,
body.has-site-effects .faq-item,
body.has-site-effects .social-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

body.has-site-effects .member:hover,
body.has-site-effects .member-card:hover,
body.has-site-effects .pack-card:hover,
body.has-site-effects .svc-card:hover,
body.has-site-effects .cat-card:hover,
body.has-site-effects .contact-card:hover,
body.has-site-effects .art-card:hover,
body.has-site-effects .tcard:hover,
body.has-site-effects .pi:hover {
  transform: translate3d(0, -4px, 0) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

body.has-site-effects .stat {
  transition: transform 0.35s ease, background 0.35s ease;
}

body.has-site-effects .stat:hover {
  transform: translate3d(0, -2px, 0);
  background: rgba(45, 142, 255, 0.04);
}

body.has-site-effects .stat-n,
body.has-site-effects .hc-stat-n,
body.has-site-effects .duo-stat-n,
body.has-site-effects .sv-mini-n,
body.has-site-effects .is-ticker {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

body.has-site-effects .stat:hover .stat-n {
  color: var(--bl, #5aaeff);
  text-shadow: 0 0 24px rgba(45, 142, 255, 0.35);
}

/* FAQ icône */
body.has-site-effects .faq-ic {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

body.has-site-effects .faq-q:hover .faq-ic {
  background: rgba(45, 142, 255, 0.15);
}

/* Badge pulse premium */
body.has-site-effects .badge {
  animation: site-badge-glow 4s ease-in-out infinite;
}

@keyframes site-badge-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(45, 142, 255, 0); }
  50% { box-shadow: 0 0 20px rgba(45, 142, 255, 0.12); }
}

/* Titres accent (hors glitch hero accueil) */
body.has-site-effects .acc:not([data-text]),
body.has-site-effects .acc2 {
  background: linear-gradient(135deg, var(--blue, #2d8eff) 0%, var(--bl, #5aaeff) 50%, var(--gr, #2dc89a) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: site-accent-shine 6s linear infinite;
}

@keyframes site-accent-shine {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

body.has-site-effects .cta-band {
  position: relative;
  overflow: hidden;
}

/* Footer icônes sociales */
body.has-site-effects .fsi,
body.has-site-effects .member-social-link,
body.has-site-effects .s-btn {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

body.has-site-effects .fsi:hover,
body.has-site-effects .member-social-link:hover,
body.has-site-effects .s-btn:hover {
  transform: translate3d(0, -2px, 0);
}

/* CTA band shimmer */
body.has-site-effects .cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(45, 142, 255, 0.04),
    transparent
  );
  transform: translate3d(-100%, 0, 0);
  animation: site-cta-sweep 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes site-cta-sweep {
  0%, 100% { transform: translate3d(-100%, 0, 0); }
  50% { transform: translate3d(100%, 0, 0); }
}

/* Parallax glow (déplacement léger via JS) */
.site-scene.is-parallax .scene-glow--left,
.site-scene.is-parallax .scene-glow--right,
.site-scene.is-parallax .scene-glow--accent {
  animation: none;
}

.site-scene.is-parallax .scene-glow--left,
.site-scene.is-parallax .scene-glow--right,
.site-scene.is-parallax .scene-glow--accent {
  transition: transform 0.15s ease-out;
}

@keyframes site-float {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  10% { opacity: 0.55; }
  90% { opacity: 0.08; }
  100% { opacity: 0; transform: translate3d(0, -120vh, 0); }
}

@keyframes site-fade-up {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Cartes services : lueur de bordure suivant la souris ── */
body.has-site-effects .scard.has-edge-glow {
  --mx: 50%;
  --my: 50%;
  isolation: isolate;
}

body.has-site-effects .scard.has-edge-glow > * {
  position: relative;
  z-index: 1;
}

body.has-site-effects .scard.has-edge-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(120, 190, 255, 1),
    rgba(45, 142, 255, 0.7) 32%,
    transparent 62%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

body.has-site-effects .scard.has-edge-glow.is-glowing::after {
  opacity: 1;
}

/* Soft inner wash near cursor */
body.has-site-effects .scard.has-edge-glow::before {
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgba(45, 142, 255, 0.22),
    transparent 68%
  ) !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

body.has-site-effects .scard.has-edge-glow.is-glowing::before {
  opacity: 1;
}

/* ── Accessibilité ── */
@media (prefers-reduced-motion: reduce) {
  html.is-ready body.has-site-effects {
    animation: none;
  }

  .site-scene .particle,
  .site-scene .scene-glow {
    animation: none !important;
  }

  body.has-site-effects .scard.has-edge-glow::after,
  body.has-site-effects .scard.has-edge-glow::before {
    display: none !important;
  }

  .reveal,
  .reveal-scale,
  .reveal-fade,
  .reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.has-site-effects .acc:not([data-text]),
  body.has-site-effects .acc2 {
    animation: none;
    -webkit-text-fill-color: var(--blue, #2d8eff);
    background: none;
  }

  body.has-site-effects .badge {
    animation: none;
  }

  body.has-site-effects .cta-band::after {
    display: none;
  }

  body.has-site-effects .btn-solid:hover,
  body.has-site-effects .nav-cta:hover,
  body.has-site-effects .btn-ghost:hover,
  body.has-site-effects .member:hover,
  body.has-site-effects .pack-card:hover {
    transform: none;
    box-shadow: none;
  }
}