/* widgets/home_hero_scene/widget_home_hero_scene.css */
:root {
  --hero-menu-width: 380px;
  --hero-transition-speed: 0.5s;
  --hero-curve: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hero-label-width: 160px;
  /* SIZE:180px */
}

/* Background & Overlay réintégrés */
.hero-layer--bg-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-bg-img {
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.hero-bg-img--alt.is-active {
  opacity: 1 !important;
}

.hero-layer--bg-base img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-layer--bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  will-change: opacity, filter;
  transition: all var(--hero-transition-speed) var(--hero-curve);
  background-color: transparent !important;
  /* OPACITY:0 */
  opacity: 0 !important;
  /* OPACITY:0 */
}

/* States */
.hero-layer--bg-overlay.is-dimmed {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  /* Très léger (était 0.4) */
}

/* --- Bouton Mute Home Hero (Ajout v3.15) --- */
.home-hero-mute-button {
  position: fixed;
  top: 110px;
  /* Sous le header (env 90px) + marge */
  left: 32px;
  z-index: 9999;
  /* Au-dessus de tout sauf overlay intro */
  /* Fond plus lumineux et vibrant avec dégradé subtil */
  background: linear-gradient(135deg, rgba(157, 78, 221, 0.85), rgba(94, 96, 206, 0.85));
  border: 2px solid rgba(255, 255, 255, 0.2);
  /* Bordure blanche subtile pour la netteté */
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s var(--hero-curve);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  /* Glow violet renforcé + Ombre portée pour détacher du fond sombre */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(157, 78, 221, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.home-hero-mute-button:hover {
  /* Eclaircissement au survol */
  background: linear-gradient(135deg, rgba(177, 98, 241, 0.95), rgba(114, 116, 226, 0.95));
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.1) translateY(0);
  /* Glow intense au survol */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(157, 78, 221, 0.9),
    0 0 10px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.home-hero-mute-button.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.home-hero-mute-button svg {
  pointer-events: none;
  fill: currentColor;
}

.home-hero-mute-button .hidden {
  display: none;
}

/* Responsivité Mobile : On le remonte un peu et on le réduit */
@media (max-width: 768px) {
  .home-hero-mute-button {
    top: 80px;
    left: 16px;
    width: 36px;
    height: 36px;
  }
}

.home-hero-scene-container {
  width: max(2160px, calc(100vw * var(--smart-inverse-scale, 1))) !important;
  max-width: none !important;
  min-height: auto !important;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: transparent !important;
  margin-top: -120px;
  margin-bottom: -150px;
  /* Aspire le footer vers le haut */
  /* [V10.0 REFINED ZOOM] Compensation pour le scale 2160px sur un scaler de 2000px */
  margin-left: min(-80px, calc((2000px - (100vw * var(--smart-inverse-scale, 1))) / 2)) !important;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  height: 1080px;
  /* Hauteur de référence fixe pour le Smart Scaler */
}

/* Vignette de transition basse (Look Refined) */
.hero-bottom-vignette {
  height: 80px;
  bottom: -44px;
  background: linear-gradient(rgba(8, 6, 22, 0.07) 2.1%, rgba(7, 6, 22, 1) 47.06%, rgba(10, 10, 15, 0.5) 77.73%, transparent);
  z-index: 2;
  transform: translate3d(0, 0, 0);
}

/* Z-INDEX:INTERACTIVE */
.hero-layers-content-wrapper {
  position: relative;
  width: 2160px !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
}

/* Le footer doit être au-dessus de tout sur la home */
footer {
  position: relative;
  z-index: 9999 !important;
  /* Z-index massif pour passer au dessus de la scène relative */
}

/* Base Layer Logic */
.hero-layer {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

/* TV Frame & Positioning - À PLAT & NET */
.hero-layer--tv-frame {
  width: 780px;
  height: auto;
  left: 52%;
  margin-left: 110px;
  /* Ancrage central élastique */
  top: 54%;
  /* Correctif Safari : Rotation infime 0.01deg pour forcer le lissage des pixels (Anti-aliasing) */
  transform: translateY(-50%) rotate(0.01deg) translate3d(0, 0, 0);
  z-index: 5;
  opacity: 0;
  /* Caché par défaut pour l'animation d'impact */
  /* Suppression du drop-shadow CSS car lourd et géré dans l'image WebP */
  pointer-events: none;
  will-change: transform, opacity, filter;
  /* Force Safari à garder un rendu de haute qualité */
  -webkit-font-smoothing: antialiased;
}

.hero-layer--tv-bg {
  width: 495px;
  height: 285px;
  left: 52%;
  margin-left: 335px;
  top: 52%;
  opacity: 0;
  /* Caché par défaut pour l'animation d'impact */
  /* Restauration des réglages utilisateur de déformation */
  transform: translateY(-43%) perspective(600px) rotateX(-2deg) rotateY(-20deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scale(1);
  clip-path: polygon(0% 0%,
      100% 0%,
      100% 100%,
      0% 101%);
  z-index: 3;
  overflow: hidden;
  border-radius: 4px;
  will-change: transform, opacity, filter;
}

/* Layer Interface au dessus de tout */
.hero-layer--interface {
  z-index: 20;
  /* Passe au dessus de l'overlay */
}

/* TV Sublayers & Previews */
.tv-sublayer {
  transition: all var(--hero-transition-speed) var(--hero-curve);
}

/* Damier (Checkerboard) pour le contenu de la TV */
.tv-sublayer--content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
  /* Passé derrière le contenu (était 1) */
}

.tv-content-placeholder {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* Nouveau contenu interactif de la TV */
.tv-play-preview {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  animation: tv-fade-in 0.5s var(--hero-curve) forwards;
}

.tv-play-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95) contrast(1.05);
  /* Adouci (était 0.8 / 1.2) */
}

.tv-action-preview-container {
  margin-top: -10px;
  /* Redescendu un peu (était -20px) pour un meilleur équilibre */
}

/* Titre de l'action dans la TV */
.tv-action-preview {
  font-family: "Kanit", sans-serif;
  color: #fff;
  font-weight: 800;
  font-size: 1.8rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: scale(0.9) translate3d(0, 0, 0);
  transition: all 0.5s var(--hero-curve);
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 10;
  backface-visibility: hidden;
}

.tv-action-preview.active {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

.tv-action-preview .title-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) translateZ(0);
  /* Transition calquée sur play.css et uniformisée avec la courbe Juicy */
  transition: all 0.6s var(--hero-curve);
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
}

.tv-action-preview.active .title-word {
  opacity: 1;
  transform: translateY(0);
}

.tv-action-preview .title-word.gradient-text {
  background: linear-gradient(135deg, #a78bfa 0%, #6c63ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* On retire le drop-shadow qui crée du flou avec background-clip: text */
  filter: none;
  /* Optimisation du rendu du texte */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tv-action-preview--compact {
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 420px;
}

.tv-skins-preview .tv-action-preview--compact,
.tv-missions-preview .tv-action-preview--compact {
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: none;
}

.tv-hero-panel-stage {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-inline: 1rem;
}

.tv-skins-preview .tv-action-preview-container {
  margin-top: -2px;
}

.tv-skins-preview .tv-hero-panel-stage {
  padding-top: 0.95rem;
  margin-top: 0.2rem;
  overflow: visible;
}

.tv-skins-preview .tv-hero-panel-stage .latest-forge-highlights {
  transform: translate3d(0, 14px, 0);
  gap: 0.7rem;
  opacity: 0;
  animation: tv-skins-panel-reveal 0.7s var(--hero-curve) 0.16s forwards;
}

.tv-skins-preview .tv-hero-panel-stage .lfh-slot {
  width: 5.15rem;
  height: 5.15rem;
  border-radius: 12px;
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.92);
  animation: tv-skins-slot-reveal 0.55s var(--hero-curve) forwards;
}

.tv-skins-preview .tv-hero-panel-stage .lfh-slot:nth-child(1) {
  animation-delay: 0.24s;
}

.tv-skins-preview .tv-hero-panel-stage .lfh-slot:nth-child(2) {
  animation-delay: 0.31s;
}

.tv-skins-preview .tv-hero-panel-stage .lfh-slot:nth-child(3) {
  animation-delay: 0.38s;
}

.tv-skins-preview .tv-hero-panel-stage .lfh-badge-new {
  font-size: 8px;
  padding: 2px 5px;
}

.tv-skins-preview .tv-hero-panel-stage .lfh-slot:hover {
  transform: scale(1.08) translateY(-2px);
}

.tv-missions-preview .tv-action-preview-container {
  margin-top: -2px;
}

.tv-missions-preview .tv-hero-panel-stage {
  padding-top: 0.15rem;
}

.tv-hero-missions-panel {
  position: relative;
  width: 100%;
  max-width: 390px;
  padding: 0.8rem 0.9rem 0.95rem;
  border-radius: 16px;
  overflow: hidden;
  transform: translate3d(0, 14px, 0) scale(0.975);
  backface-visibility: hidden;
  opacity: 0;
  animation: tv-missions-panel-reveal 0.7s var(--hero-curve) 0.14s forwards;
}

.tv-hero-missions-panel.ms-terminal-panel {
  background: radial-gradient(circle at 14% 14%, rgba(34, 197, 94, 0.12), transparent 42%), radial-gradient(circle at 86% 14%, rgba(168, 85, 247, 0.12), transparent 42%), linear-gradient(145deg, rgba(9, 11, 22, 0.78) 0%, rgba(12, 15, 28, 0.74) 62%, rgba(7, 8, 16, 0.78) 100%);
  border-color: rgba(108, 99, 255, 0.28);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(108, 99, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -18px 28px rgba(0, 0, 0, 0.35);
}

.tv-hero-missions-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.55;
  pointer-events: none;
  border-radius: 16px;
}

.tv-hero-missions-panel::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.52), rgba(108, 99, 255, 0.84), rgba(168, 85, 247, 0.52), transparent);
  box-shadow: 0 0 18px rgba(108, 99, 255, 0.35);
  pointer-events: none;
}

.tv-hero-missions-panel .terminal-system-header {
  position: relative;
  z-index: 1;
  margin-bottom: 0.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
}

.tv-hero-missions-panel .terminal-system-header .system-path {
  font-size: 0.7rem;
}

.tv-hero-missions-panel .terminal-system-header .system-status {
  font-size: 0.62rem;
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(125, 211, 252, 0.35);
}

.tv-hero-missions-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: tv-missions-grid-reveal 0.55s var(--hero-curve) 0.22s forwards;
}

.tv-hero-mission-chip {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 0.55rem 0.45rem;
  text-align: center;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  opacity: 0;
  animation: tv-missions-chip-reveal 0.55s var(--hero-curve) forwards;
}

.tv-hero-mission-chip:nth-child(1) {
  animation-delay: 0.28s;
}

.tv-hero-mission-chip:nth-child(2) {
  animation-delay: 0.34s;
}

.tv-hero-mission-chip:nth-child(3) {
  animation-delay: 0.40s;
}

.tv-hero-missions-panel--summary .tv-hero-mission-chip:nth-child(1) {
  border-color: rgba(34, 197, 94, 0.26);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(0, 0, 0, 0.3));
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.08);
}

.tv-hero-missions-panel--summary .tv-hero-mission-chip:nth-child(1) .tv-hero-mission-chip__label {
  color: rgba(74, 222, 128, 0.88);
}

.tv-hero-missions-panel--summary .tv-hero-mission-chip:nth-child(1) .tv-hero-mission-chip__value {
  color: #4ade80;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.tv-hero-missions-panel--summary .tv-hero-mission-chip:nth-child(2) {
  border-color: rgba(168, 85, 247, 0.26);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.12), rgba(0, 0, 0, 0.3));
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.08);
}

.tv-hero-missions-panel--summary .tv-hero-mission-chip:nth-child(2) .tv-hero-mission-chip__label {
  color: rgba(192, 132, 252, 0.9);
}

.tv-hero-missions-panel--summary .tv-hero-mission-chip:nth-child(2) .tv-hero-mission-chip__value {
  color: #c084fc;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.tv-hero-mission-chip--claimable {
  border-color: rgba(125, 211, 252, 0.28);
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.12), rgba(0, 0, 0, 0.3));
  box-shadow: 0 0 18px rgba(125, 211, 252, 0.12);
}

.tv-hero-mission-chip__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: tv-missions-note-reveal 0.45s var(--hero-curve) forwards;
}

.tv-hero-mission-chip__value {
  font-family: "Kanit", sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 12px rgba(108, 99, 255, 0.45);
  opacity: 0;
  animation: tv-missions-value-reveal 0.45s var(--hero-curve) forwards;
}

.tv-hero-missions-note {
  position: relative;
  z-index: 1;
  margin-top: 0.7rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: tv-missions-note-block-reveal 0.45s var(--hero-curve) 0.48s forwards;
}

.tv-hero-missions-note strong {
  color: #fff;
}

.tv-hero-missions-panel--guest {
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.tv-hero-missions-panel--guest .terminal-system-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0;
  width: 100%;
  padding: 0.42rem 0.65rem;
  text-align: left;
}

.tv-hero-missions-panel--guest .terminal-system-header .system-path {
  display: block;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.64rem;
  margin-top: 0;
  text-align: left;
}

.tv-hero-missions-panel--guest .terminal-system-header .system-status {
  display: inline-flex;
  width: fit-content;
  align-self: center;
  margin-left: auto;
  white-space: nowrap;
}

.tv-hero-missions-guest-text {
  position: relative;
  z-index: 1;
  max-width: 280px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: tv-missions-note-block-reveal 0.45s var(--hero-curve) 0.32s forwards;
}

.tv-hero-missions-guest-text strong {
  color: #fff;
}

.tv-hero-missions-panel--guest .tv-hero-missions-grid {
  display: none;
}

@keyframes tv-skins-panel-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tv-skins-slot-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tv-missions-panel-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.975);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tv-missions-grid-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tv-missions-chip-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tv-missions-note-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tv-missions-value-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tv-missions-note-block-reveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.tv-images-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Nouveau calque : Hero Jeux */
.tv-hero-jeux-img {
  position: absolute;
  bottom: 45px;
  /* Remonté encore un peu (était 20px) */
  left: 50%;
  transform: translateX(-50%) translate3d(0, 20px, 0);
  width: 90%;
  height: auto;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  animation: tv-hero-jeux-reveal 0.6s var(--hero-curve) 0.1s forwards;
}

.tv-play-silhouette {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translate3d(0, 20px, 0);
  width: 85%;
  height: auto;
  object-fit: contain;
  z-index: 3;
  opacity: 0;
  animation: tv-silhouette-reveal 0.6s var(--hero-curve) 0.2s forwards;
}

/* Nouveau calque : Hero Rankings */
.tv-hero-rankings-img {
  position: absolute;
  bottom: -15px;
  /* Légèrement masqué par le rebord bas de la TV */
  left: 50%;
  transform: translateX(-50%) translate3d(0, 100%, 0);
  /* Départ totalement masqué */
  width: 90%;
  height: auto;
  object-fit: contain;
  z-index: 1;
  /* Derrière le titre */
  opacity: 0;
  filter: brightness(0.8) contrast(1.1);
  /* Animation massive, plus rapide (était 1.2s), avec délai réduit et sans rebond (ease-out) */
  animation: tv-rankings-reveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
  will-change: transform, opacity;
}

/* Nouveau calque : Hero Stats */
.tv-hero-stats-img {
  position: absolute;
  bottom: -10px;
  /* Légèrement masqué par le rebord bas de la TV */
  left: 50%;
  transform: translateX(-50%) translate3d(0, 100%, 0);
  /* Départ totalement masqué */
  width: 90%;
  height: auto;
  object-fit: contain;
  z-index: 1;
  /* Derrière le titre */
  opacity: 0;
  filter: brightness(0.85) contrast(1.1);
  /* Même animation que rankings */
  animation: tv-rankings-reveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
  will-change: transform, opacity;
}

@keyframes tv-rankings-reveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translate3d(0, 80px, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translate3d(0, 0, 0);
  }
}

@keyframes tv-hero-jeux-reveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translate3d(0, 30px, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translate3d(0, 0, 0);
  }
}

@keyframes tv-silhouette-reveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translate3d(0, 0, 0);
  }
}

@keyframes tv-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-scene-global-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: radial-gradient(circle, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  transition: opacity 0.7s var(--hero-curve);
}

/* --- ORACLE VIDEO (Remplaçant l'image de l'Oracle) --- */
.hero-layer--oracle-video {
  position: absolute;
  left: 51%;
  top: 47.5%;
  width: 410px;
  height: 410px;
  z-index: 15;
  /* S'assure de passer SOUS les boutons (40+) et Pixi (50) */
  pointer-events: none;
  /* Centrage précis de la vidéo alpha (Ajustement -54% pour l'alignement visuel) */
  transform: translate3d(-54%, -50%, 0) scale(0.8);
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 1.5s var(--hero-curve),
    transform 1.8s var(--hero-curve);
}

.hero-layer--oracle-video.is-visible {
  opacity: 1;
  /* Restauration de l'opacité pleine (DFI) */
  transform: translate3d(-54%, -50%, 0) scale(1);
}

.oracle-video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* On retire les filtres qui pourraient dénaturer l'alpha du nouveau MP4 */
  filter: brightness(1.1) contrast(1.05);
}

.hero-layer--oracle-mobile-fallback {
  opacity: 1 !important;
}

.hero-layer--oracle-fallback {
  z-index: 14;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1.5s var(--hero-curve);
}

.hero-layer--oracle-fallback.is-visible {
  opacity: 1;
}

.oracle-mobile-fallback-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.05) contrast(1.02);
}

/* --- PIXI VFX CANVAS --- */
.hero-layer--pixi-vfx {
  z-index: 50;
  /* Entre le cristal et les boutons */
  pointer-events: none;
}

/* --- MENU CENTRAL ORACLE (Disposition Constellation) --- */
.oracle-core-wrapper {
  z-index: 40;
  /* Contient le cristal et le centre */
  pointer-events: none;
}

/* --- Système de Constellation Unifié (Oracle Master Center) --- */
.oracle-master-center {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  transform: translate3d(0, 0, 0);
  z-index: 100;
}

/* Cristal Central (Ancré au Master Center) */
.oracle-crystal-container {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Correction visuelle : décalage -54% sur X pour compenser la pointe du triangle Play */
  transform: translate3d(-54%, -19%, 0);
  z-index: 20;
  /* Sous les lasers (50) et boutons (100) */
  backface-visibility: hidden;
  will-change: transform, filter;
}

/* On sépare l'animation de lévitation pour pouvoir la bloquer avec is-waiting-intro */
.home-hero-scene-container:not(.is-waiting-intro) .oracle-crystal-container {
  animation: oracle-levitate 6s ease-in-out infinite;
}

.oracle-crystal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.4));
}

.oracle-crystal-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: crystal-glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes oracle-levitate {

  0%,
  100% {
    transform: translate3d(-54%, -19%, 0) rotate(0deg);
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.4));
  }

  25% {
    transform: translate3d(-54%, -22%, 0) rotate(1deg);
  }

  50% {
    transform: translate3d(-54%, -25%, 0) rotate(0deg);
    filter: drop-shadow(0 0 50px rgba(139, 92, 246, 0.6));
  }

  75% {
    transform: translate3d(-54%, -22%, 0) rotate(-1deg);
  }
}

@keyframes crystal-glow-pulse {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Boutons de la constellation */
.oracle-constellation-menu {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 100;
  /* Au dessus des lasers (50) */
}

/* Animation de démarrage SEULEMENT si on n'attend plus l'intro */
.home-hero-scene-container:not(.is-waiting-intro) .oracle-constellation-menu {
  animation: menu-spiral-entrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes menu-spiral-entrance {
  0% {
    opacity: 0;
    transform: scale(1.5) rotate(-15deg);
    filter: brightness(5) blur(10px);
  }

  40% {
    opacity: 1;
    filter: brightness(2) blur(0px);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1) blur(0px);
  }
}

/* Animation d'Impulsion Lumineuse Syncro Musique */
@keyframes btn-pulse-glow {
  0% {
    filter: brightness(1) contrast(1) saturate(1) blur(0px);
    opacity: 1;
  }

  15% {
    filter: brightness(3) contrast(1.2) saturate(1.5) blur(0px);
    opacity: 1;
  }

  100% {
    filter: brightness(1) contrast(1) saturate(1) blur(0px);
    opacity: 1;
  }
}

.oracle-menu-btn.pulse-sync {
  animation: btn-pulse-glow 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.oracle-menu-btn {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 240px;
  height: 240px;
  pointer-events: auto;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* DFI : Accélération GPU */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  transition: transform 0.4s var(--hero-curve);
  opacity: 0;
}

/* [ANIM] Système d'états pour verrouiller l'intro */
.oracle-menu-btn[data-state="appearing"] {
  animation: btn-pivot-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.oracle-menu-btn[data-state="stable"] {
  opacity: 1 !important;
}

@keyframes btn-pivot-entrance {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
  }

  100% {
    opacity: 1;
    /* Note: le transform final sera écrasé par les classes pos-X, 
           on utilise donc l'animation sur un wrapper ou on laisse le CSS 
           gérer la cascade si possible. Ici on va plutôt animer le CONTENT 
           pour ne pas casser les positions absolues complexes. */
  }
}

/* On échelonne très légèrement pour un effet organique "vif" */
.oracle-menu-btn.pos-top {
  transform: translate3d(-120px, -260px, 0);
}

.oracle-menu-btn.pos-mid-left {
  transform: translate3d(-320px, -100px, 0);
}

.oracle-menu-btn.pos-mid-right {
  transform: translate3d(80px, -100px, 0);
}

.oracle-menu-btn.pos-bottom-left {
  transform: translate3d(-230px, 110px, 0);
}

.oracle-menu-btn.pos-bottom-right {
  transform: translate3d(0px, 110px, 0);
}

/* Hovers Fluides : On utilise EXACTEMENT les mêmes unités que l'état de base */
.oracle-menu-btn:hover {
  z-index: 105;
}

.oracle-menu-btn.pos-top:hover {
  transform: translate3d(-120px, -268px, 0) scale(1.05);
}

.oracle-menu-btn.pos-mid-left:hover {
  transform: translate3d(-338px, -92px, 0) scale(1.05);
}

.oracle-menu-btn.pos-mid-right:hover {
  transform: translate3d(88px, -108px, 0) scale(1.05);
}

.oracle-menu-btn.pos-bottom-left:hover {
  transform: translate3d(-248px, 128px, 0) scale(1.05);
}

.oracle-menu-btn.pos-bottom-right:hover {
  transform: translate3d(-2px, 128px, 0) scale(1.05);
}

/* Textures Hexagonales .webp */
.hex-btn-texture {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* DFI FIX: On utilise 'ease-out' pour l'opacité sur Chrome au lieu de la courbe 'bouncy' qui peut causer des flashs/snaps */
  transition: opacity 0.4s ease-out, filter 0.4s ease-out;
  will-change: opacity, filter;
}

.hex-btn-texture--off {
  opacity: 1;
  /*filter: brightness(0.7) grayscale(0.3);*/
}

.hex-btn-texture--on {
  opacity: 0;
  filter: brightness(1.2) drop-shadow(0 0 20px rgba(139, 92, 246, 0.6));
}

.oracle-menu-btn:hover .hex-btn-texture--off {
  opacity: 0;
}

.oracle-menu-btn:hover .hex-btn-texture--on {
  opacity: 1;
}

.oracle-menu-btn__content {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
}

/* Animation de pivot individuelle SEULEMENT si on n'attend plus l'intro */
.home-hero-scene-container:not(.is-waiting-intro) .oracle-menu-btn__content {
  animation: btn-content-pivot 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.oracle-menu-btn.pos-top .oracle-menu-btn__content {
  animation-delay: 0.4s;
}

.oracle-menu-btn.pos-mid-left .oracle-menu-btn__content {
  animation-delay: 0.45s;
}

.oracle-menu-btn.pos-mid-right .oracle-menu-btn__content {
  animation-delay: 0.5s;
}

.oracle-menu-btn.pos-bottom-left .oracle-menu-btn__content {
  animation-delay: 0.55s;
}

.oracle-menu-btn.pos-bottom-right .oracle-menu-btn__content {
  animation-delay: 0.6s;
}

@keyframes btn-content-pivot {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-25deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.oracle-menu-btn__icon-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--hero-curve);
}

.oracle-menu-btn__icon {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.oracle-menu-btn:hover .oracle-menu-btn__icon-wrapper {
  transform: scale(1.1) translate3d(0, -5px, 0);
}

.oracle-menu-btn__label {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 180px;
}

/* Glow additionnel au hover */
.hex-btn-glow {
  position: absolute;
  inset: 10%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--hero-curve);
  pointer-events: none;
  z-index: 1;
}

.oracle-menu-btn:hover .hex-btn-glow {
  opacity: 1;
}

/* Suppression des anciens styles de menu central */
.home-hero-menu-central,
.jgtr-glass-btn,
.glass-btn-texture,
.hero-menu-btn__label-container {
  display: none !important;
}

.hero-menu-btn__label {
  font-family: "Kanit", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  /* Sera ajusté par JS pour remplir les 220px */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ombre portée par défaut pour détacher le texte de l'icône, surtout à gauche */
  text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9);
  /* Synchronisation exacte avec le switcher universel (0.4s cubic-bezier pour le texte) */
  transition: transform 0.4s var(--hero-curve),
    filter 0.4s var(--hero-curve),
    color 0.4s var(--hero-curve),
    text-shadow 0.4s var(--hero-curve) !important;
  margin-top: -3px;
  position: relative;
  z-index: 2;
  will-change: font-size, transform;
}

/* On supprime les styles spécifiques aux mots du menu car on revient à un texte simple */
.hero-menu-btn__label .label-word.gradient-text {
  display: none;
}

.jgtr-glass-btn:hover .hero-menu-btn__label {
  /* Renforcement de l'ombre au hover pour l'effet "décollé" */
  text-shadow: -4px 4px 8px rgba(0, 0, 0, 1), 0 0 15px rgba(255, 255, 255, 0.2);
  transform: scale(1.02);
}

/* --- ICÔNES (Style Header Immersif) --- */
.hero-menu-btn__icon-wrapper {
  width: 180px;
  /* Taille généreuse pour éviter tout clipping des effets de lueur */
  height: 180px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  /* Accélération GPU */
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-menu-btn__icon {
  width: 55%;
  /* On part de la taille "cible" (impact) */
  height: 55%;
  object-fit: contain;
  /* État éteint : On dé-zoome (0.72) au lieu de zoomer au hover */
  opacity: 0.35;
  filter: grayscale(1) brightness(0.6);
  transform: scale(0.72) translate3d(0, 0, 0);
  image-rendering: -webkit-optimize-contrast;
  /* Force la netteté sur Safari/Chrome */
  /* Synchronisation exacte avec le switcher universel */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Lueur au dessous de l'icône */
.icon-glow-underneath {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: -1;
}

.jgtr-glass-btn:hover .hero-menu-btn__icon {
  opacity: 0.6;
  /* On retire le filter: grayscale(0) pour éviter le flash colorimétrique brutal */
  filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3)) !important;
  /* On revient à la taille native (1) au lieu de dépasser, pour garder le pixel perfect */
  transform: scale(1) translate3d(0, 0, 0);
}

.jgtr-glass-btn:hover .icon-glow-underneath {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.4);
  filter: blur(4px);
}

/* Barre Plasma */
.glass-btn-plasma {
  position: absolute;
  bottom: 6px;
  left: 20px;
  right: 20px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #a78bfa, #8b5cf6, #a78bfa, transparent);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 15px #8b5cf6, 0 0 30px rgba(139, 92, 246, 0.4);
}

.jgtr-glass-btn:hover .glass-btn-plasma {
  opacity: 1;
  transform: scaleX(1);
}

/* État désactivé */
.jgtr-glass-btn.is-disabled {
  cursor: not-allowed;
  filter: grayscale(1) opacity(0.5) !important;
}

.jgtr-glass-btn.is-disabled:hover {
  transform: none;
}

/* --- Fin MENU CENTRAL --- */
/* Texte Gauche - PROPORTIONS 4K */
.home-text-column h1 {
  font-family: "Kanit", sans-serif;
  font-size: 3rem !important;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Style spécifique pour le titre "ZONE DE LANCEMENT" quand connecté */
.home-hero-status-line+h1 {
  text-transform: uppercase;
  font-size: 3.5rem !important;
}

.home-text-column h1 .title-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s var(--hero-curve);
}

.home-hero-scene-container:not(.is-waiting-intro) .home-text-column h1 .title-word {
  opacity: 1;
  transform: translateY(0);
}

.home-hero-scene-container:not(.is-waiting-intro) .home-text-column h1 .title-word:nth-child(1) {
  transition-delay: 0.1s;
}

.home-hero-scene-container:not(.is-waiting-intro) .home-text-column h1 .title-word:nth-child(2) {
  transition-delay: 0.2s;
}

.home-hero-scene-container:not(.is-waiting-intro) .home-text-column h1 .title-word:nth-child(3) {
  transition-delay: 0.3s;
}

.home-text-column p {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  max-width: 360px;
}

/* Personnages Hero 1 & 2 */
.hero-characters-wrapper {
  position: absolute;
  top: 54%;
  left: 7%;
  transform: translateY(-40px) translate3d(0, 0, 0);
  width: auto;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  /* Animation gérée via :not(.is-waiting-intro) en bas du fichier */
  will-change: transform, opacity, filter;
}

.hero-characters-container {
  display: flex;
  align-items: flex-end;
  position: relative;
}

.hero-img-1-container {
  height: 480px;
  width: auto;
  position: relative;
  z-index: 2;
}

.hero-img-2-container {
  height: 150px;
  width: auto;
  position: absolute;
  left: 560px;
  /* À cheval sur le personnage 1 */
  bottom: 0;
  z-index: 3;
  /* Devant le personnage 1 */
}

.hero-characters-img {
  height: 100%;
  width: auto;
  object-fit: contain;
  /* Correctif Safari : Rotation infime pour forcer l'anti-aliasing lors du scale du Smart-Scaler */
  transform: rotate(0.01deg) translate3d(0, 0, 0);
  backface-visibility: hidden;
  /* Transition de base pour le RETOUR (quand on quitte le light mode) */
  /* La version LIGHT s'en va après un petit délai pour laisser la DARK revenir */
  transition: opacity 0.6s var(--hero-curve) 0.1s;
  will-change: opacity;
  /* Force Safari à garder un rendu de haute qualité */
  -webkit-font-smoothing: antialiased;
}

/* État Light : Logique de "Lead-Follow" pour garantir ZERO transparence */
/* 1. La version DARK attend que la LIGHT soit déjà bien installée avant de commencer à s'effacer */
.home-hero-scene-container.is-light-mode .hero-img-1--dark,
.home-hero-scene-container.is-light-mode .hero-img-2--dark,
.home-hero-scene-container.is-light-mode .hero-tv-illus--dark {
  opacity: 0;
  transition: opacity 0.6s var(--hero-curve) 0.2s;
  /* Délai de 0.4s : elle commence à partir quand l'autre est à 50% */
}

/* 2. La version LIGHT arrive tout de suite pour couvrir la DARK qui est encore opaque */
.home-hero-scene-container.is-light-mode .hero-img-1--light,
.home-hero-scene-container.is-light-mode .hero-img-2--light,
.home-hero-scene-container.is-light-mode .hero-tv-illus--light {
  opacity: 1;
  transition: opacity 0.6s var(--hero-curve) 0.1s;
  /* Délai de 0.1s : elle arrive en premier */
}

/* TV Illus Specific */
.hero-tv-illus {
  /* Transition de base (RETOUR) */
  transition: opacity 0.6s var(--hero-curve) 0.2s;
  will-change: opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* On s'assure que le texte est au dessus des persos */
.home-text-column {
  position: absolute;
  left: 50%;
  /* Pivot central */
  margin-left: -900px;
  /* Décalage fixe vers la gauche (était -800px) */
  top: 180px;
  /* Position haute fixe pour permettre la croissance vers le bas */
  transform: translateX(-50px);
  /* Décalage horizontal pour l'animation d'entrée */
  opacity: 0;
  z-index: 15;
  text-align: left;
  width: 600px;
  transition: opacity 0.8s var(--hero-curve);
}

/* Ligne de statut style Terminal (Logged In) */
.home-hero-status-line {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.home-hero-status-line .status-path {
  color: rgba(255, 255, 255, 0.4);
}

.home-hero-status-line .status-name {
  color: #6c63ff;
  /* Couleur d'accentuation Indigo */
  font-weight: 500;
}

.home-hero-status-line .status-action {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

@keyframes hero-chars-impact {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1.1) translate3d(2px, 2px, 0);
    filter: brightness(5) blur(10px);
  }

  10% {
    transform: translateY(-35px) scale(1.05) translate3d(-2px, -1px, 0);
  }

  20% {
    transform: translateY(-40px) scale(1) translate3d(2px, 1px, 0);
    filter: brightness(3) blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(-40px) scale(1) translate3d(0, 0, 0);
    filter: brightness(1) blur(0);
  }
}

@keyframes hero-tv-impact {
  0% {
    opacity: 0;
    transform: translateY(-45%) scale(1.1) rotate(0.01deg) translate3d(2px, 2px, 0);
    filter: brightness(5) blur(10px);
  }

  10% {
    transform: translateY(-48%) scale(1.05) rotate(0.01deg) translate3d(-2px, -1px, 0);
  }

  20% {
    transform: translateY(-50%) scale(1) rotate(0.01deg) translate3d(2px, 1px, 0);
    filter: brightness(3) blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0.01deg) translate3d(0, 0, 0);
    filter: brightness(1) blur(0);
  }
}

@keyframes hero-tv-bg-impact {
  0% {
    opacity: 0;
    transform: translateY(-38%) scale(1.1) perspective(600px) rotateX(-2deg) rotateY(-20deg) translate3d(2px, 2px, 0);
    filter: brightness(5) blur(10px);
  }

  10% {
    transform: translateY(-41%) scale(1.05) perspective(600px) rotateX(-2deg) rotateY(-20deg) translate3d(-2px, -1px, 0);
  }

  20% {
    transform: translateY(-43%) scale(1) perspective(600px) rotateX(-2deg) rotateY(-20deg) translate3d(2px, 1px, 0);
    filter: brightness(3) blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(-43%) scale(1) perspective(600px) rotateX(-2deg) rotateY(-20deg) translate3d(0, 0, 0);
    filter: brightness(1) blur(0);
  }
}

/* Hologram Stats Overlay - CLONE EXACT DES VALEURS D'ORIGINE */
.hologram-stats-wrapper {
  position: absolute;
  top: 36%;
  left: 62%;
  width: 100%;
  text-align: center;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateY(-13deg) rotateX(9deg) rotateZ(-2deg);
  z-index: 45;
  /* Sous le menu central (50) */
  transition: opacity 0.4s var(--hero-curve), transform 0.4s var(--hero-curve);
  will-change: opacity, transform;
}

/* Disparition au survol du menu central */
.home-hero-menu-central:hover~.hologram-stats-wrapper,
.home-hero-menu-central:hover .hologram-stats-wrapper,
.home-hero-scene-container:has(.home-hero-menu-central:hover) .hologram-stats-wrapper,
.home-hero-scene-container:has(.hero-menu-btn:hover) .hologram-stats-wrapper,
.home-hero-scene-container:has(.hero-menu-btn:hover) .tv-content-default-hud {
  opacity: 0 !important;
  transform: translateX(-50%) rotateY(-13deg) rotateX(9deg) rotateZ(-2deg) translate3d(0, -10px, 0) !important;
  visibility: hidden;
  pointer-events: none;
}

/* On s'assure que le HUD par défaut a la même transition que l'hologramme */
.tv-content-default-hud {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 95px;
  transition: opacity 0.4s var(--hero-curve), transform 0.4s var(--hero-curve), visibility 0.4s;
  will-change: opacity, transform;
}

.hologram-stats-content {
  display: inline-block;
  font-family: "JetBrains Mono", "Consolas", "Monaco", "Lucida Console", monospace;
  font-size: 1.2rem;
  /* Réajusté (était clamp(1rem, 2.5vw, 1.5rem)) */
  color: #a7eaff;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
  text-shadow: 0 0 2px #a7eaff,
    0 0 10px #71d9ff,
    0 0 20px #00F0FF;
}

.hologram-cursor {
  display: inline-block;
  animation: hologram-blink 1.2s step-end infinite;
  background-color: #a7eaff;
  box-shadow: 0 0 10px #71d9ff, 0 0 20px #00F0FF;
  margin-left: 0.5em;
  width: 0.6em;
  height: 1.1em;
  vertical-align: -0.1em;
}

@keyframes hologram-blink {

  from,
  to {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* VFX Layer */
.hero-layer--vfx {
  z-index: 60;
  /* Au-dessus de l'interface (20) et du menu (50) pour que les éclats soient visibles sur les boutons */
  opacity: 1;
  /* Pleine opacité pour les éclats PIXI */
}

/* Animations de révélation (Tactical Opening style) */
.home-hero-scene-container:not(.is-waiting-intro) .home-text-column {
  animation: hero-fade-in-left 1s var(--hero-curve) forwards;
}

.home-hero-menu-central .hero-menu-btn {
  opacity: 0;
  transform: translateY(20px);
}

.home-hero-scene-container:not(.is-waiting-intro) .home-hero-menu-central .hero-menu-btn:nth-child(1) {
  animation: hero-btn-reveal 0.5s var(--hero-curve) 0.2s forwards;
}

.home-hero-scene-container:not(.is-waiting-intro) .home-hero-menu-central .hero-menu-btn:nth-child(2) {
  animation: hero-btn-reveal 0.5s var(--hero-curve) 0.3s forwards;
}

.home-hero-scene-container:not(.is-waiting-intro) .home-hero-menu-central .hero-menu-btn:nth-child(3) {
  animation: hero-btn-reveal 0.5s var(--hero-curve) 0.4s forwards;
}

.home-hero-scene-container:not(.is-waiting-intro) .home-hero-menu-central .hero-menu-btn:nth-child(4) {
  animation: hero-btn-reveal 0.5s var(--hero-curve) 0.5s forwards;
}

.home-hero-scene-container:not(.is-waiting-intro) .home-hero-menu-central .hero-menu-btn:nth-child(5) {
  animation: hero-btn-reveal 0.5s var(--hero-curve) 0.6s forwards;
}

/* Blocage explicite des personnages si on attend */
.home-hero-scene-container.is-waiting-intro .hero-characters-wrapper {
  animation: none !important;
  opacity: 0 !important;
}

/* Intégration du terminal activity dans la zone de lancement (Logged In) */
.home-text-column .terminal-activity-wrapper {
  position: relative;
  width: 100%;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.8s var(--hero-curve) 0.8s;
}

.home-hero-scene-container:not(.is-waiting-intro) .home-text-column .terminal-activity-wrapper {
  opacity: 1;
  transform: translateY(0);
}

.home-text-column .terminal-activity-wrapper .widget-terminal-activity-container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  max-width: 100% !important;
  z-index: 1;
}

/* On réduit un peu la taille de police pour que ça tienne bien sous le texte */
.home-text-column .terminal-activity-wrapper .terminal-line {
  font-size: 0.6rem !important;
}

.home-hero-scene-container:not(.is-waiting-intro) .hero-characters-wrapper {
  animation: hero-chars-impact 0.8s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

.home-hero-scene-container:not(.is-waiting-intro) .hero-layer--tv-frame {
  animation: hero-tv-impact 0.8s cubic-bezier(0.15, 0.85, 0.35, 1) 0.1s forwards;
}

.home-hero-scene-container:not(.is-waiting-intro) .hero-layer--tv-bg {
  animation: hero-tv-bg-impact 0.8s cubic-bezier(0.15, 0.85, 0.35, 1) 0.1s forwards;
}

@media (min-width: 1921px) {

  .home-hero-scene-container:not(.is-waiting-intro) .hero-layer--tv-frame,
  .home-hero-scene-container:not(.is-waiting-intro) .hero-layer--tv-bg {
    margin-top: clamp(26px, 1.8vw, 52px);
  }
}

@keyframes hero-fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hero-btn-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Fixes within Scaler */
@media (max-width: 1279px) {
  .home-hero-scene-container {
    width: 100% !important;
    /* Reset de la largeur Refined */
    margin-left: 0 !important;
    /* Reset de la compensation Refined */
    height: auto !important;
    min-height: 100vh !important;
    display: block !important;
    padding: 0 !important;
    /* [V10.1] Suppression du padding qui écrasait le contenu mobile */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .hero-layers-content-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-auto-flow: row !important;
    justify-items: center !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
  }

  .hero-layer--interface {
    position: static !important;
    inset: auto !important;
    display: contents !important;
    pointer-events: none !important;
  }

  .hero-layers-content-wrapper>.container {
    display: none !important;
  }

  .home-text-column {
    grid-row: 1 !important;
    grid-column: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    width: min(92vw, 560px) !important;
    transform: none !important;
    opacity: 1 !important;
    text-align: center !important;
    z-index: 20 !important;
  }

  /* Mobile: centrer et autoriser le wrapping du statut (utilisateur connecté) */
  .home-hero-status-line {
    justify-content: center !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    gap: 0.35rem;
  }

  .home-hero-status-line .status-path,
  .home-hero-status-line .status-action {
    display: inline-block !important;
    text-align: center !important;
    width: auto !important;
  }

  /* Supprimer le margin-left ajouté via Tailwind (ml-2) sur mobile */
  .home-hero-status-line .status-action {
    margin-left: 0 !important;
    margin-top: 0.25rem !important;
  }

  /* Forcer le paragraphe non connecté à être centré et auto-marginé */
  .home-text-column>p {
    text-align: center !important;
    margin: 0 auto 1.5rem !important;
  }

  .home-text-column>h1 {
    font-size: 2.05rem !important;
    line-height: 1.05 !important;
    margin-bottom: 1.25rem !important;
  }

  .home-text-column>p {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin-bottom: 1.5rem !important;
  }

  .hero-oracle-unified-wrapper {
    grid-row: 2 !important;
    grid-column: 1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 1.5rem auto 0 !important;
  }

  .hero-oracle-unified-stage {
    width: 660px !important;
    height: 620px !important;
    position: relative !important;
    overflow: visible !important;
    transform-origin: center top !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
  }

  .hero-oracle-unified-stage #oracle-video-layer {
    position: absolute !important;
    left: 51% !important;
    top: 51.5% !important;
    margin: 0 !important;
  }

  .hero-oracle-unified-stage .oracle-core-wrapper {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
  }

  .hero-tv-unified-wrapper {
    grid-row: 3 !important;
    grid-column: 1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0.5rem auto 0 !important;
    /* Remonté (réduit de 1.75rem à 0.5rem) */
  }

  .hero-tv-unified-stage {
    width: 660px !important;
    height: 540px !important;
    position: relative !important;
    left: 0 !important;
    overflow: visible !important;
    transform-origin: center top !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
  }

  .hero-tv-unified-stage .hero-layer--tv-frame {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: 0 !important;
    width: 660px !important;
    height: auto !important;
    transform: translate3d(-50%, -50%, 0) rotate(0.01deg) translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
  }

  .hero-tv-unified-stage .hero-layer--tv-bg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: 0 !important;
    width: 420px !important;
    height: 241px !important;
    transform: translate3d(-33%, -43%, 0) perspective(600px) rotateX(-2deg) rotateY(-20deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scale(1) !important;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 101%) !important;
    opacity: 1 !important;
    z-index: 3 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    pointer-events: none !important;
  }

  .hero-characters-wrapper {
    grid-row: 4 !important;
    grid-column: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: -1.5rem auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    transform: translate3d(0, 0, 0) !important;
    transform-origin: center bottom !important;
    will-change: transform, opacity !important;
    z-index: 10 !important;
  }

  .hero-characters-shadow {
    bottom: 5px !important;
    width: 60% !important;
    height: 20px !important;
    filter: blur(5px) !important;
  }

  .home-hero-scene-container.is-waiting-intro .oracle-menu-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .home-hero-scene-container.is-waiting-intro .tv-content-default-hud {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: none !important;
  }

  .home-text-column .terminal-activity-wrapper {
    display: none !important;
  }

  #home-hero-scene .tv-content-default-hud .terminal-path-prefix {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  /* [BUGFIX] Désactivation de l'animation d'impulsion sur mobile car elle provoque un "faux hover" persistant */
  .oracle-menu-btn.pulse-sync {
    animation: none !important;
  }

  /* [BUGFIX] Désactivation des effets de hover sur mobile pour éviter les états bloqués (Safari iOS) */
  .oracle-menu-btn:hover {
    z-index: 100 !important;
    /* On garde le z-index de base mobile */
  }

  /* On force le retour aux transforms de base même au hover sur mobile */
  .oracle-menu-btn.pos-top:hover {
    transform: translate3d(-120px, -260px, 0) !important;
  }

  .oracle-menu-btn.pos-mid-left:hover {
    transform: translate3d(-320px, -100px, 0) !important;
  }

  .oracle-menu-btn.pos-mid-right:hover {
    transform: translate3d(80px, -100px, 0) !important;
  }

  .oracle-menu-btn.pos-bottom-left:hover {
    transform: translate3d(-230px, 110px, 0) !important;
  }

  .oracle-menu-btn.pos-bottom-right:hover {
    transform: translate3d(0px, 110px, 0) !important;
  }

  .oracle-menu-btn:hover .hex-btn-texture--off {
    opacity: 1 !important;
  }

  .oracle-menu-btn:hover .hex-btn-texture--on {
    opacity: 0 !important;
  }

  .oracle-menu-btn:hover .oracle-menu-btn__icon-wrapper {
    transform: none !important;
  }

  .oracle-menu-btn:hover .hex-btn-glow {
    opacity: 0 !important;
  }
}