/* ============================================================
   sections/hero-4/style.css — Neural Nexus hero
   Toutes les couleurs sont pilotées par des custom properties
   injectées via render_section_styles() (style_overrides JSON).
   ============================================================ */

.hero-4 {
  position: relative;
  width: 100%;
  height: var(--h4-height, 70svh);
  overflow: var(--h4-overflow, hidden);
  /* Cascade : token de section → var globale du site → fallback hex. */
  background: var(--h4-bg, var(--bg-color, #02010a));
  border-radius: var(--h4-radius, 0px);
  padding: var(--h4-padding, 0px);
  border-top:    var(--h4-border-t, none);
  border-right:  var(--h4-border-r, none);
  border-bottom: var(--h4-border-b, none);
  border-left:   var(--h4-border-l, none);
  z-index: var(--h4-z, auto);
  cursor: crosshair;
}
.hero-4.dragging           { cursor: grabbing; }
.hero-4[data-automode]    { cursor: default; }
.hero-4 canvas {
  display: block;
  position: absolute;
  top:    calc(-1 * var(--h4-bleed, 0px));
  bottom: calc(-1 * var(--h4-bleed, 0px));
  left:   0;
  right:  0;
  touch-action: pan-y;
}

/* ── HUD ──────────────────────────────────────────────────── */
.hero-4 .hud {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 32px;
  color: var(--h4-hud-color, var(--text-color, rgba(0, 255, 245, 0.55)));
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  pointer-events: none;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 92vw;
  text-align: center;
  text-shadow: 0 0 8px var(--h4-primary, var(--primary-color, #00fff5));
}
.hero-4 .hud span { display: inline-flex; align-items: center; gap: 8px; }
.hero-4 .hud .key {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--h4-nav-btn-border-color, var(--primary-color, rgba(0, 255, 245, 0.4)));
  border-radius: 3px;
  color: var(--h4-nav-btn-color, var(--primary-color, rgba(0, 255, 245, 0.85)));
  letter-spacing: 0.08em;
  font-size: 10px;
}

/* ── Charge ring ──────────────────────────────────────────── */
.hero-4 .charge-ring {
  position: absolute;
  pointer-events: none;
  z-index: 9;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.hero-4 .charge-ring.active { opacity: 1; }
.hero-4 .charge-ring svg { width: 100%; height: 100%; overflow: visible; }

.hero-4 .charge-ring .arc {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px var(--h4-primary, var(--primary-color, #00fff5)))
    drop-shadow(0 0 8px var(--h4-primary, var(--primary-color, #00fff5)));
  opacity: 0;
}
.hero-4 .charge-ring.ready .arc {
  stroke: #fff;
  filter:
    drop-shadow(0 0 4px var(--h4-secondary, var(--secondary-color, #ff00ff)))
    drop-shadow(0 0 10px var(--h4-secondary, var(--secondary-color, #ff00ff)));
}

.h4-divider {
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}
/* ── Animations bouton explorer ──────────────────────────── */
@keyframes h4-btn-pulse {
  0%, 100% {
    box-shadow: 0 0 6px -2px transparent;
    border-color: var(--h4-nav-btn-border-color, var(--primary-color, rgba(0,255,245,0.4)));
  }
  50% {
    box-shadow: 0 0 14px 3px rgba(var(--primary-color-rgb, 0,255,245), 0.35);
    border-color: var(--h4-primary, var(--primary-color, #00fff5));
  }
}
@keyframes h4-icon-rotate {
  to { transform: rotate(360deg); }
}
.hero-4 .h4-explore-btn:not(.is-exploring) {
  animation: h4-btn-pulse 2.8s ease-in-out infinite;
}
.hero-4 .h4-explore-btn:not(.is-exploring) .h4-icon-explore {
  animation: h4-icon-rotate 10s linear infinite;
}

/* ── Bouton explorer / retour contenu ────────────────────── */
.hero-4 .h4-explore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: .5rem;
  width: 38px;
  height: 38px;
  border: 1px solid var(--h4-nav-btn-border-color, var(--primary-color, rgba(0, 255, 245, 0.4)));
  border-radius: 50%;
  background: var(--h4-nav-btn-bg, transparent);
  color: var(--h4-nav-btn-color, var(--primary-color, rgba(0, 255, 245, 0.85)));
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 0 8px var(--h4-primary, var(--primary-color, #00fff5));
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.hero-4 .h4-explore-btn:hover {
  background: var(--h4-nav-btn-hover-bg, rgba(var(--primary-color-rgb, 0,255,245), 0.12));
  border-color: var(--h4-primary, var(--primary-color, #00fff5));
  transform: scale(1.06);
}
/* En mode exploration : fond légèrement coloré pour indiquer l'état actif */
.hero-4 .h4-explore-btn.is-exploring {
  background: rgba(var(--primary-color-rgb, 0,255,245), 0.15);
  border-color: var(--h4-primary, var(--primary-color, #00fff5));
}
.hero-4 .h4-icon-back  { display: none; }
.hero-4 .h4-explore-btn.is-exploring .h4-icon-explore { display: none; }
.hero-4 .h4-explore-btn.is-exploring .h4-icon-back    { display: block; }

/* ── Boutons de navigation (haut / bas) ───────────────────── */
.hero-4 .h4-nav-btn {
  position: absolute;
  right: 32px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: 1px solid var(--h4-nav-btn-border-color, var(--primary-color, rgba(0, 255, 245, 0.4)));
  border-radius: 50%;
  background: var(--h4-nav-btn-bg, transparent);
  color: var(--h4-nav-btn-color, var(--primary-color, rgba(0, 255, 245, 0.85)));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 8px var(--h4-primary, var(--primary-color, #00fff5));
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.hero-4 .h4-nav-btn-down { bottom: 24px; }
.hero-4 .h4-nav-btn-up   { bottom: 76px; }

.hero-4 .h4-nav-btn:hover {
  background: var(--h4-nav-btn-hover-bg, rgba(var(--primary-color-rgb, 0,255,245), 0.12));
  border-color: var(--h4-primary, var(--primary-color, #00fff5));
}
.hero-4 .h4-nav-btn-down:hover { transform: translateY(2px);  }
.hero-4 .h4-nav-btn-up:hover   { transform: translateY(-2px); }

/* ── Overlay premier chargement (fade-in unique) ──────────── */
.hero-4 .h4-reveal-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  background: var(--h4-bg, var(--bg-color, #02010a));
  opacity: 1;
  transition: opacity 0.9s ease;
}
.hero-4.h4-visible .h4-reveal-overlay { opacity: 0; }

/* ── Contenu texte overlay ────────────────────────────────── */
.hero-4 .h4-content {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  max-width: var(--h4-content-width, 600px);
  width: calc(100% - 4rem);
  padding: var(--h4-content-padding, 0px);
  background: var(--h4-content-bg, transparent);
  backdrop-filter: blur(calc(var(--h4-content-blur, 0) * 1px));
  -webkit-backdrop-filter: blur(calc(var(--h4-content-blur, 0) * 1px));
  border-radius: var(--h4-content-radius, 0px);
}

/* Mode exploration — masque les éléments marqués h4-hide-in-explore */
.hero-4 .h4-hide-in-explore {
  transition: opacity 0.45s ease;
}
.hero-4 .h4-hide-in-explore.h4-hidden {
  opacity: 0;
  pointer-events: none;
}
/* Masque le fond/blur du bloc content sans toucher à l'opacité (le bouton reste visible) */
.hero-4 .h4-content.h4-exploring {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Positions — --h4-py est injecté en JS au scroll pour l'effet parallaxe */
.hero-4 .h4-content[data-pos="center-left"] {
  top: 50%; left: 6%;
  transform: translateY(calc(-50% + var(--h4-py, 0px)));
}
.hero-4 .h4-content[data-pos="center"] {
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + var(--h4-py, 0px)));
  text-align: center;
}
.hero-4 .h4-content[data-pos="top-left"] {
  top: 8%; left: 6%;
  transform: translateY(var(--h4-py, 0px));
}
.hero-4 .h4-content[data-pos="top-center"] {
  top: 8%; left: 50%;
  transform: translateX(-50%) translateY(var(--h4-py, 0px));
  text-align: center;
}
.hero-4 .h4-content[data-pos="bottom-left"] {
  bottom: 14%; left: 6%;
  transform: translateY(var(--h4-py, 0px));
}
.hero-4 .h4-content[data-pos="bottom-center"] {
  bottom: 14%; left: 50%;
  transform: translateX(-50%) translateY(var(--h4-py, 0px));
  text-align: center;
}

/* Bandeau défilant (tagline) */
.hero-4 .h4-marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34px;
  overflow: hidden;
  z-index: 12;
  pointer-events: none;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.hero-4 .h4-marquee__track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: h4-marquee-scroll calc(var(--h4-marquee-dur, 30) * 1s) linear infinite;
}
.hero-4 .h4-marquee__half {
  flex-shrink: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--h4-primary, var(--primary-color, #00fff5));
  text-shadow: 0 0 8px var(--h4-primary, var(--primary-color, #00fff5));
}
@keyframes h4-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-4 .h4-marquee__track { animation-play-state: paused; }
}

/* Titre */
.hero-4 .h4-title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  
  background-image: linear-gradient(105deg,
    var(--h4-title-from, var(--h4-primary, var(--primary-color, #00fff5))),
    var(--h4-title-to,   var(--h4-secondary, var(--secondary-color, #fff))));
  
  -webkit-background-clip: text;
  background-clip: text;
  
  -webkit-text-fill-color: transparent;
  color: transparent;

  transform: translateY(var(--h4-py-ttl, 0px));
  animation: _h4TitleGlow 4s ease-in-out infinite;
}
@keyframes _h4TitleGlow {
  0%, 100% {
    text-shadow:
      0 0 20px color-mix(in srgb, var(--h4-glow-color, var(--h4-title-from, var(--h4-primary, var(--primary-color, #00fff5)))) calc(var(--h4-glow-strength, 10) * 1%),    transparent),
      0 0 40px color-mix(in srgb, var(--h4-glow-color, var(--h4-title-from, var(--h4-primary, var(--primary-color, #00fff5)))) calc(var(--h4-glow-strength, 10) * 0.4%), transparent);
  }
  50% {
    text-shadow:
      1px  0 14px var(--h4-glow-color, var(--h4-title-from, var(--h4-primary, var(--primary-color, #00fff5)))),
      -1px 0 14px var(--h4-glow-color, var(--h4-title-to,   var(--h4-secondary, var(--secondary-color, #ff00ff)))),
      0 0 55px rgba(255,255,255,.08);
  }
}
/* Chaque lettre est un inline-block pour le glitch (translateX individuel) */
.hero-4 .h4-title span {
  display: inline-block;
  transition: color 0.04s, transform 0.04s;
}
/* Mot entier = unité de retour à la ligne */
.hero-4 .h4-title .h4-word { display: inline; white-space: nowrap; }
/* Lettres interactives (glitch au survol) */
.hero-4 .h4-title [data-ch] { cursor: default; }

/* Sous-titre */
.hero-4 .h4-subtitle {
  margin: 0 0 2rem;
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.65;
  color: var(--h4-subtitle-color, color-mix(in srgb, var(--text-color, #fff) 65%, transparent));
  transform: translateY(var(--h4-py-sub, 0px));
}
.hero-4 .h4-subtitle p { margin: 0; }

/* CTA — hérite du style global .btn / .btn-primary / .btn-outline-primary */
.hero-4 .h4-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  transform: translateY(var(--h4-py-cta, 0px));
}
.hero-4 .h4-content[data-pos="center"] .h4-cta,
.hero-4 .h4-content[data-pos="top-center"] .h4-cta,
.hero-4 .h4-content[data-pos="bottom-center"] .h4-cta {
  justify-content: center;
}
/* Réactiver les clics (le conteneur .h4-content est pointer-events:none) */
.hero-4 .h4-cta .btn { pointer-events: auto; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 820px) {
  .hero-4 .hud { bottom: 42px; gap: 14px; font-size: 10px; letter-spacing: 0.18em; }
  .hero-4 .hud .key { font-size: 9px; padding: 2px 6px; letter-spacing: 0.05em; }
  .hero-4 .h4-nav-btn        { right: 16px; width: 40px; height: 40px; }
  .hero-4 .h4-nav-btn-down   { bottom: 14px; }
  .hero-4 .h4-nav-btn-up     { bottom: 62px; }
  .hero-4 .h4-content { width: calc(100% - 2.5rem); }
  .hero-4 .h4-content[data-pos="center-left"] { left: 5%; }
  .hero-4 .h4-content[data-pos="bottom-left"] { left: 5%; bottom: 16%; }
  .hero-4 .h4-content[data-pos="top-left"]    { left: 5%; top: 6%; }
}
@media (max-width: 480px) {
  .hero-4 .hud { gap: 10px; font-size: 9px; }
  .hero-4 .hud span:nth-child(n+3) { display: none; }
  .hero-4 .h4-content { width: calc(100% - 2rem); }
  .hero-4 .h4-content[data-pos="center-left"],
  .hero-4 .h4-content[data-pos="top-left"],
  .hero-4 .h4-content[data-pos="bottom-left"] { left: 4%; }
}