html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  /* bg.png est en 32/9 : on force la hauteur à toujours remplir la fenêtre,
     la largeur suit proportionnellement et déborde (rognée par overflow: hidden) */
  background-image: url('input/HOME/bg.png');
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#scene {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Les objets/ombres/hover-zones restent sur un canevas 16/9 fixe,
     indépendant du 32/9 du bg, calé sur la hauteur de la fenêtre */
  aspect-ratio: 16 / 9;
  height: 100vh;
  width: calc(100vh * 16 / 9);
  transform: translate(-50%, -50%);
  overflow: hidden;
  /* Fond propre à #scene : pendant le portail, #overlay (noir) est encore
     juste derrière elle en z-index, donc les zones transparentes des PNG
     produits laissaient voir du noir au lieu de bg.png (cachée deux niveaux
     plus loin, sur le body). En le posant ici, les zones transparentes
     révèlent directement bg.png, peu importe ce qu'il y a derrière. */
  background-image: url('input/HOME/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#scene img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none; /* Important pour que le clic passe au travers */
}

.object-img {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  /* will-change posé/retiré en JS au survol seulement : le laisser en
     permanence sur les 20 images crée trop de calques GPU persistants,
     ce qui favorise le bug d'affichage au retour d'onglet en arrière-plan */
}

.object-img.is-hovered {
  transform: translateY(-20px);
}

.shadow-img {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.shadow-img.is-dimmed {
  opacity: 0.5;
  transform: scale(1.02);
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 100000; /* au-dessus de tout, y compris les .hover-zone (max ~1200) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  background-color: #000;
  overflow: hidden;
  /* Dernière étape de la séquence au clic : une fois le texte et la vidéo
     effacés (0.6s), l'overlay entier s'efface à son tour et révèle #scene. */
  transition: opacity 0.6s ease-in-out;
  transition-delay: 1.2s;
}

/* Pas de pointer-events: none ici : contrairement à opacity, cette
   propriété n'est pas animable, elle changerait donc instantanément au
   clic et laisserait les hover-zone de #scene réagir sous l'overlay
   pendant qu'il est encore visible en train de s'effacer. L'overlay
   continue de bloquer les clics jusqu'à sa suppression du DOM par
   overlay.remove() en JS, pile quand le fondu est terminé. */
#overlay.is-off {
  opacity: 0;
}

/* Fond vidéo flouté, plein écran */
#overlay-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px);
  opacity: 1;
  pointer-events: none;
  /* Zoom avant continu dès le clic (2s), fondu au noir qui démarre une fois
     le texte effacé (délai 0.4s, voir #overlay-heading/#power-switch-glow). */
  transition: filter 0.4s ease-in-out, transform 2s ease-out, opacity 0.6s ease-in-out 0.4s;
}

#overlay.is-off #overlay-video {
  filter: blur(150px); /* explicite, indépendant du survol qui vient de disparaître (pointer-events: none) */
  transform: scale(1.15);
  opacity: 0;
}

/* Flou plus intense au survol du bouton Discover (:has() remonte du bouton,
   descendant de #power-switch-glow, jusqu'à la vidéo, simple sibling de ce
   dernier dans #overlay) */
#overlay:has(#power-switch:hover) #overlay-video {
  filter: blur(150px);
  /* Le raccourci "transition" réinitialise TOUTES les sous-propriétés non
     citées : sans redonner transform/opacity ici, elles perdraient leur
     transition dès que la souris survole le bouton (donc pile au moment du
     clic), et sauteraient instantanément à leur valeur finale au lieu de
     s'animer -> c'est ce qui donnait un "fond noir direct". */
  transition: filter 1s ease-in-out, transform 2s ease-out, opacity 0.6s ease-in-out 0.4s;
}

/* Calque sombre pour garder le texte lisible par-dessus la vidéo */
#overlay-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#overlay-heading {
  position: relative;
  z-index: 2;
  text-align: center;
  opacity: 0;
  /* Fondu d'entrée : transition classique (pas d'animation @keyframes),
     déclenchée par .is-ready posée en JS peu après le chargement. Une
     transition ne se déclenche jamais sur une propriété encore pilotée par
     une animation "forwards" -> avec une @keyframes ici, le fondu de sortie
     ci-dessous n'aurait tout simplement pas pu s'animer, quoi qu'on tente
     par ailleurs (opacity sautait instantanément à sa valeur finale). */
  transition: opacity 1.2s ease 0.3s, transform 0.4s ease-in-out;
}

#overlay.is-ready #overlay-heading {
  opacity: 1;
}

/* Fondu de sortie du texte au clic sur Discover, avec un léger zoom (pas
   juste une disparition à plat) : première étape de la séquence. Redéclare
   "transition" sans le délai d'entrée (0.3s), sinon le fondu de sortie
   démarrerait avec 0.3s de retard. Vient après la règle .is-ready ci-dessus
   dans le fichier : à spécificité égale, c'est l'ordre qui tranche. */
#overlay.is-off #overlay-heading {
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  opacity: 0;
  transform: scale(1.15);
}

#overlay-title {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-feature-settings: 'ss01' on;
  font-size: clamp(1.25rem, 3.5vw, 2.5rem);
  /* Dégradé vertical gris bleuté -> gris quasi blanc, même technique que
     #overlay-subtitle (background-clip: text). */
  background-image: linear-gradient(180deg, #ffffff 0%, #a6a9c2 50%, #2f3b53 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Dégradé violet -> rose, appliqué uniquement aux lettres via background-clip: text */
#overlay-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0 0; /* pousse le sous-titre à mi-chemin entre le titre et le bouton */
  padding-left: 0.2em; /* compense le décalage visuel du point final */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.4rem);
  background-image: linear-gradient(100deg, #836eff 0%, #ca6a33cb 45%, #f1238a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Wrapper : positionnement + fondu d'apparition + état "éteint" (chargement).
   Le spotlight lui-même vit dans #power-switch-spotlight, un frère du bouton. */
#power-switch-glow {
  --base: 350;
  --spread: 60;
  --spotlight-size: 100;
  position: relative;
  z-index: 2;
  opacity: 0;
  /* Même logique que #overlay-heading : transition pure déclenchée par
     .is-ready, pas d'animation @keyframes (qui bloquerait le fondu de
     sortie au clic, voir le commentaire détaillé sur #overlay-heading). */
  transition: opacity 1.2s ease 0.6s, transform 0.4s ease-in-out;
}

#overlay.is-ready #power-switch-glow {
  opacity: 1;
}

/* Éteint tant que les images ne sont pas toutes chargées : classe posée/
   retirée en JS (pas de :disabled possible sur ce wrapper, ce n'est pas un
   bouton). !important nécessaire : #overlay.is-ready #power-switch-glow a
   une spécificité plus forte (2 ids) que cette règle (1 id) et gagnerait
   sinon dès que .is-ready est posée. */
#power-switch-glow.is-disabled {
  opacity: 0.35 !important;
}

/* Fondu de sortie du bouton au clic, en même temps que le titre. Redéclare
   "transition" sans le délai d'entrée (0.6s), voir #overlay.is-off
   #overlay-heading pour la même raison. */
#overlay.is-off #power-switch-glow {
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  opacity: 0;
  transform: scale(1.2);
}

/* Glow qui suit le curseur (position globale, --x/--y/--xp posés en JS sur
   #power-switch-glow, héritées ici par ce descendant). background-attachment:
   fixed fait correspondre les coordonnées écran à la position du dégradé :
   le bouton "s'allume" naturellement quand le curseur passe à proximité,
   sans état :hover. */
#power-switch-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px;
  pointer-events: none;
  background-image: radial-gradient(
    calc(var(--spotlight-size, 100) * 1px) calc(var(--spotlight-size, 100) * 1px) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(calc(var(--base, 350) + (var(--xp, 0.5) * var(--spread, 60))) 90% 65% / 0.35),
    transparent 70%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Anneau lumineux : dégradé posé en pseudo-élément puis masqué pour ne
   garder que le contour (padding + mask-composite: exclude) */
#power-switch-spotlight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background-image: radial-gradient(
    calc(var(--spotlight-size, 100) * 0.75 * 1px) calc(var(--spotlight-size, 100) * 0.75 * 1px) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(calc(var(--base, 350) + (var(--xp, 0.5) * var(--spread, 60))) 95% 60% / 1),
    transparent 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: brightness(1.8);
  pointer-events: none;
}

#power-switch {
  position: relative;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 3rem;
  border-radius: 10px;
  border: 1px solid transparent; /* garde l'épaisseur/mise en page, le rendu vient du ::before */
  color: #fff;
  cursor: pointer;
  background-color: transparent;
  transition: transform 0.2s ease-out;
  transform: perspective(500px) rotateX(0deg) rotateY(0deg) translateZ(0);
}

/* Bord en dégradé violet -> rose (même dégradé que #overlay-subtitle),
   dessiné en anneau via la technique padding + mask-composite: exclude
   pour respecter le border-radius */
#power-switch::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: linear-gradient(100deg, #8b5cf6 0%, #ec4899 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

#power-switch:disabled {
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.15);
}

.hover-zone {
  position: absolute;
  box-sizing: border-box;
  cursor: pointer;
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
}