/* light-hero-preview.css — HeroVisual Lovable → Vanilla CSS */
/* Préfixe : lhv- (light hero visual) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page (standalone preview uniquement) ─────────────── */
.lhv-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at top left, #eef2ff 0%, #f8fafc 45%, #ffffff 100%);
  font-family: system-ui, -apple-system, sans-serif;
  padding: 40px 24px;
  overflow-x: hidden;
}

.lhv-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(100, 116, 139, 0.65);
  margin-bottom: 40px;
  text-align: center;
}

/* ── Intégration hero : caché en dark, visible en light ── */
.lhv-visual { display: none; }
body:not(.dark) .hp-hero-right .lhv-visual {
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  contain: none;
}

/* ── Container ────────────────────────────────────────── */
.lhv-visual {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  height: 340px;
  contain: layout paint;
}

/* ── Ambient glow ─────────────────────────────────────── */
.lhv-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lhv-ambient-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(129,140,248,0.35) 0%,
    rgba(167,139,250,0.15) 40%,
    transparent 70%
  );
  filter: blur(40px);
}

/* Drift glows — desktop only, off by default */
.lhv-drift-a,
.lhv-drift-b {
  display: none;
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

/* ── Orbits container ─────────────────────────────────── */
.lhv-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Orbit rings ──────────────────────────────────────── */
.lhv-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
}

.lhv-orbit-1 {
  width: 260px; height: 260px;
  margin-top: -130px; margin-left: -130px;
  border: 1px solid rgba(165,180,252,0.4);
  animation: lhv-spin-slow 30s linear infinite;
  will-change: transform;
}

.lhv-orbit-2 {
  width: 200px; height: 200px;
  margin-top: -100px; margin-left: -100px;
  border: 1px solid rgba(196,181,253,0.5);
  animation: lhv-spin-reverse 22s linear infinite;
  will-change: transform;
}

.lhv-orbit-3 {
  width: 140px; height: 140px;
  margin-top: -70px; margin-left: -70px;
  border: 1px solid rgba(147,197,253,0.6);
}

/* ── Orbiting dots ────────────────────────────────────── */
.lhv-dot-a {
  position: absolute;
  top: -8px; left: 50%;
  width: 16px; height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa 0%, #4f46e5 100%);
  box-shadow: 0 0 20px rgba(99,102,241,0.6);
}

.lhv-dot-b {
  position: absolute;
  top: 50%; right: -4px;
  width: 12px; height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa 0%, #d946ef 100%);
  box-shadow: 0 0 18px rgba(168,85,247,0.6);
}

/* ── Main glass sphere ────────────────────────────────── */
.lhv-sphere-wrap {
  position: absolute;
  left: 50%; top: 50%;
  width: 176px; height: 176px;
  transform: translate(-50%, -50%); /* base centering (reduced-motion fallback) */
  animation: lhv-float 6s ease-in-out infinite;
  will-change: transform;
  z-index: 2;
}

.lhv-sphere {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%,
    rgba(255,255,255,0.95)   0%,
    rgba(191,219,254,0.6)   14%,
    rgba(100,140,255,0.55)  40%,
    rgba(100,59,245,0.75)   85%
  );
  box-shadow:
    0 30px 80px -10px rgba(100,59,245,0.5),
    inset 0 -20px 60px   rgba(100,59,245,0.4),
    inset 0  20px 40px   rgba(255,255,255,0.35);
}

.lhv-sphere-hi-1 {
  position: absolute;
  left: 18%; top: 15%;
  width: 48px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  filter: blur(12px);
}

.lhv-sphere-hi-2 {
  position: absolute;
  left: 28%; top: 22%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  filter: blur(2px);
}

.lhv-sphere-lo {
  position: absolute;
  bottom: 15%; right: 20%;
  width: 40px; height: 24px;
  border-radius: 50%;
  background: rgba(196,181,253,0.4);
  filter: blur(16px);
}

.lhv-sphere-ring {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ── Floating glass shard (sm+) ───────────────────────── */
.lhv-shard-wrap {
  display: none;
  position: absolute;
  right: 8%; top: 18%;
  width: 80px; height: 80px;
  animation: lhv-float-b 7s ease-in-out infinite;
  will-change: transform;
  z-index: 2;
}

.lhv-shard {
  width: 100%; height: 100%;
  transform: rotate(12deg);
  border-radius: 24px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.7),
    rgba(191,219,254,0.5),
    rgba(129,140,248,0.6)
  );
  box-shadow: 0 20px 60px -10px rgba(99,102,241,0.5);
  border: 1px solid rgba(255,255,255,0.6);
}

/* ── Secondary glass sphere ───────────────────────────── */
.lhv-sphere2-wrap {
  position: absolute;
  bottom: 6%; left: 4%;
  width: 64px; height: 64px;
  animation: lhv-float-c 5s ease-in-out infinite;
  will-change: transform;
  z-index: 2;
}

.lhv-sphere2 {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%,
    rgba(255,255,255,0.95)  0%,
    rgba(196,181,253,0.7)  35%,
    rgba(124,58,237,0.85)  95%
  );
  box-shadow:
    0 15px 40px -5px rgba(139,92,246,0.6),
    inset 0 -8px 20px rgba(76,29,149,0.5);
}

.lhv-sphere2-hi {
  position: absolute;
  left: 22%; top: 18%;
  width: 16px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  filter: blur(2px);
}

/* ── Sparkles (lg+ only) ──────────────────────────────── */
.lhv-sparkle {
  display: none;
  position: absolute;
  border-radius: 50%;
}

.lhv-sparkle-1 {
  left: 15%; top: 35%;
  width: 8px; height: 8px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255,255,255,0.9);
  animation: lhv-twinkle 3s ease-in-out infinite;
}

.lhv-sparkle-2 {
  right: 22%; top: 55%;
  width: 6px; height: 6px;
  background: #ddd6fe;
  box-shadow: 0 0 10px rgba(196,181,253,0.9);
  animation: lhv-twinkle 4s ease-in-out infinite 1s;
}

.lhv-sparkle-3 {
  left: 40%; bottom: 15%;
  width: 4px; height: 4px;
  background: #bfdbfe;
  box-shadow: 0 0 8px rgba(191,219,254,0.9);
  animation: lhv-twinkle 3s ease-in-out infinite;
}

/* ── Keyframes ────────────────────────────────────────── */
@keyframes lhv-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%       { transform: translate(-50%, -50%) translateY(-14px); }
}

@keyframes lhv-float-b {
  0%, 100% { transform: translateY(0)    rotate(12deg); }
  50%       { transform: translateY(-18px) rotate(18deg); }
}

@keyframes lhv-float-c {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(12px); }
}

@keyframes lhv-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes lhv-spin-reverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes lhv-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(30px, 20px); }
}

@keyframes lhv-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-25px, -15px); }
}

@keyframes lhv-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — sm (640px+)
══════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .lhv-visual       { max-width: none; height: 480px; }
  .lhv-ambient-center { width: 480px; height: 480px; }

  .lhv-orbit-1 { width: 340px; height: 340px; margin-top: -170px; margin-left: -170px; }
  .lhv-orbit-2 { width: 260px; height: 260px; margin-top: -130px; margin-left: -130px; }
  .lhv-orbit-3 { width: 180px; height: 180px; margin-top: -90px;  margin-left: -90px;  }

  .lhv-dot-a { width: 20px; height: 20px; }
  .lhv-dot-b { width: 14px; height: 14px; }

  .lhv-sphere-wrap  { width: 224px; height: 224px; }
  .lhv-sphere-hi-1  { width: 64px;  height: 48px;  }

  .lhv-shard-wrap   { display: block; }

  .lhv-sphere2-wrap { width: 80px; height: 80px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — lg (1024px+)
══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .lhv-visual       { height: 620px; }
  .lhv-ambient-center { width: 560px; height: 560px; }

  .lhv-drift-a {
    display: block;
    left: 20%; top: 15%;
    width: 288px; height: 288px;
    background: radial-gradient(circle, rgba(59,130,246,0.35) 0%, transparent 70%);
    animation: lhv-drift-a 10s ease-in-out infinite;
  }

  .lhv-drift-b {
    display: block;
    right: 10%; bottom: 15%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 70%);
    animation: lhv-drift-b 12s ease-in-out infinite;
  }

  .lhv-orbit-1 { width: 420px; height: 420px; margin-top: -210px; margin-left: -210px; }
  .lhv-orbit-2 { width: 320px; height: 320px; margin-top: -160px; margin-left: -160px; }
  .lhv-orbit-3 { width: 220px; height: 220px; margin-top: -110px; margin-left: -110px; }

  .lhv-dot-a { width: 24px; height: 24px; }
  .lhv-dot-b { width: 16px; height: 16px; }

  .lhv-sphere-wrap  { width: 288px; height: 288px; }
  .lhv-sphere-hi-1  { width: 80px; height: 64px; }
  .lhv-sphere-hi-2  { width: 24px; height: 24px; }
  .lhv-sphere-lo    { width: 64px; height: 40px; }

  .lhv-shard-wrap   { width: 112px; height: 112px; }

  .lhv-sphere2-wrap { width: 96px; height: 96px; }
  .lhv-sphere2-hi   { width: 24px; height: 20px; }

  .lhv-sparkle { display: block; }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lhv-orbits { visibility: hidden; }
  .lhv-sphere-wrap,
  .lhv-shard-wrap,
  .lhv-sphere2-wrap,
  .lhv-drift-a,
  .lhv-drift-b,
  .lhv-sparkle-1,
  .lhv-sparkle-2,
  .lhv-sparkle-3 { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — le hero (.hp-hero-right) est fortement réduit en
   hauteur (clamp 180-280px) ; les anneaux/sphères gardent leur
   taille de base et débordaient donc du cadre (recadrage visible
   en haut/bas). On réduit l'ensemble proportionnellement plutôt
   que de recalculer chaque taille absolue.
   Le halo ambiant (.lhv-ambient-center, 320px) est l'élément le
   plus grand : à 0.62 il touchait encore le bord du cadre
   (overflow:hidden), d'où un recadrage net résiduel du halo.
   0.48 laisse une marge réelle même sur les plus petits mobiles. ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body:not(.dark) .hp-hero-right .lhv-visual {
    transform: scale(0.48);
    transform-origin: 50% 50%;
  }
}