/* Navbar agrandie ~25% : tout est en em, donc on monte la taille de base
   de la barre → logo, liens, boutons, menu déroulant, paddings et hauteur
   grossissent ensemble et restent cohérents. */
.nav__bar {
  font-size: 1.25em;
}

/* Logo officiel Alu-rex Studio dans la nav (centré).
   Affiché via mask pour suivre la couleur du thème (clair/sombre). */
.nav__logo {
  width: auto;
}

.nav__logo-img {
  display: block;
  width: 8.5em;
  aspect-ratio: 300 / 78;
  background-color: currentColor;
  -webkit-mask: url("/assets/custom/img/logo-alurex-studio.png") center / contain no-repeat;
  mask: url("/assets/custom/img/logo-alurex-studio.png") center / contain no-repeat;
}

@media (max-width: 767px) {
  /* Sur mobile la barre est plus compacte : on réduit un peu l'agrandissement */
  .nav__bar {
    font-size: 1.12em;
  }

  .nav__logo-img {
    width: 8em;
  }
}

/* Nav — lien "What we offer" (hérité de l'ancien product-nav).
   Le JS fige une largeur px mesurée via scrollWidth sur un conteneur
   overflow:hidden, ce qui tronque le texte (arrondi + police chargée après).
   On force la largeur naturelle et on lève le clipping : c'est un simple
   lien statique, pas besoin de l'animation de largeur. */
.nav-left_slot [data-product-nav-source] {
  width: auto !important;
  min-width: max-content !important;
  overflow: visible !important;
}

/* Source vidéo cachée — les frames sont dessinées sur le canvas hero (desktop) */
[data-hero-scroll-video] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 992px) {
  /* Masquer tout de suite le calque vidéo/placeholder (évite le flash camion) */
  [data-hero][data-hero-intro-state="skipped"] [data-hero-video] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  [data-hero] [data-hero-canvas] {
    opacity: 1 !important;
    visibility: visible !important;
    background: #0a0a0a url("/assets/custom/img/hero-seq/frame-00001.webp") center / cover no-repeat;
  }
}

@media (max-width: 991px) {
  [data-hero-scroll-video] {
    display: none !important;
  }

  /* Ne pas masquer la vidéo mobile quand l'intro est skippée */
  [data-hero-intro-state="skipped"] [data-hero-video] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
  }
}