/* =============================================================================
   MAQUETTES — 3 prototypes locaux (à valider par Pavlé avant commit prod)
   =============================================================================

   1. Curseur custom "sphère qui se dédouble" (inspiré rcarecords.com)
      → petite sphère + point, pas de morph play/flèche, juste ✕ sur crédits
   2. Bandeau plein-écran page projet (titre / MORE INFO / année)
      → se masque au scroll, RÉAPPARAIT au retour en haut
   3. Bloc CTA "Looking for a director?" en fin de page (inspiré unseen.co)
      → compact, centré, reveal parallax (en dessous de la page)

   Toutes les classes commencent par .mq- pour éviter tout conflit avec la prod.
   ========================================================================= */


/* =============================================================================
   1) CURSEUR CUSTOM — petite sphère qui se dédouble au mouvement
   =============================================================================
   - Halo 26px + dot 5px (réduit à la demande de Pavlé).
   - Aucun morph play/flèche. Seule exception : ✕ sur le modal crédits.
   - Sur les vidéos de projet en lecture (body.video-playing), on laisse le
     curseur custom natif de player.js (play/pause svg) reprendre la main.
   - Desktop fin uniquement (hover: hover + pointer: fine). Tactile = rien.
   ========================================================================= */

@media (hover: hover) and (pointer: fine) {
  /* Sphere + dot sont cachés par défaut, affichés seulement si body a la
     classe mq-cursor-active. On toggle cette classe depuis le JS :
     — ON partout sur la page (sphère visible, curseur système caché)
     — OFF quand la souris survole la vidéo projet en lecture → le player
       peut alors afficher son curseur inline (play/pause svg url).      */
  .mq-cursor {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    /* z-index très haut pour passer AU-DESSUS du modal crédits (30000) et
       de tout autre overlay. Sinon le backdrop-filter blur du modal
       floute aussi le curseur (qui est derrière dans l'empilement). */
    z-index: 100000;
    mix-blend-mode: difference; /* la sphère devient blanche sur fond noir
                                    et noire sur fond blanc, toujours lisible */
    will-change: transform;
  }
  body.mq-cursor-active .mq-cursor {
    display: block;
  }

  /* Sélecteur UNIVERSEL pour garantir qu'aucun descendant ne réinjecte
     le curseur système (ex: les <a> dans les cartes home qui montraient
     le doigt par-dessus la sphère). */
  body.mq-cursor-active,
  body.mq-cursor-active * {
    cursor: none !important;
  }

  .mq-cursor-halo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    transform: translate(-50%, -50%);
    transition: width 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2),
                height 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2),
                opacity 0.2s ease;
  }
  .mq-cursor-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.15s ease;
  }

  /* État CLOSE (✕) — seule exception morph : sur le modal crédits ouvert.
     Pavlé veut JUSTE la petite croix blanche, identique au bouton de
     fermeture du modal en prod (deux rects blancs rotate ±45°). Pas de
     gros halo autour — on réduit la sphère au strict minimum et on
     COUPE le mix-blend-mode (sinon le fond dark + difference rendait la
     croix noire donc invisible sur la page sombre du modal). */
  .mq-cursor-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    color: #fff;
  }
  body.mq-cursor-close .mq-cursor-shape--close {
    opacity: 1;
  }
  body.mq-cursor-close .mq-cursor {
    /* Plus de mix-blend difference en close : la croix doit rester
       franchement blanche sur le fond sombre du modal, comme en prod. */
    mix-blend-mode: normal;
  }
  body.mq-cursor-close .mq-cursor-halo {
    /* Plus de gros cercle qui s'élargit. La sphère se réduit au niveau
       de la croix elle-même et devient TRANSPARENTE : seule la croix
       blanche reste visible, exactement comme le bouton × en prod. */
    width: 18px;
    height: 18px;
    background: transparent;
  }
  body.mq-cursor-close .mq-cursor-dot {
    opacity: 0;
  }
}


/* =============================================================================
   2) BANDEAU PROJET PLEIN-ÉCRAN — titre / more info / année
   =============================================================================
   Fine bande noire en bas de la vidéo pleine-page des pages projet, à la
   Salomon Ligthelm : titre à gauche, "More info" au centre (clic = scroll
   vers la suite), année à droite. Se masque au scroll, revient au retour
   en haut de page.
   ========================================================================= */

.mq-project-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 0.9);
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  /* Fade (0.7s) volontairement plus long que le slide (0.55s) pour que
     le fondu soit clairement perceptible en plus du mouvement vers le bas,
     aussi bien au scroll qu'au clic sur "Plus d'infos". */
  transition: opacity 0.7s ease,
              transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.mq-project-bar.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mq-project-bar.dismissed {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
.mq-project-bar-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mq-project-bar-num {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.5px;
}
.mq-project-bar-info {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.25s ease, letter-spacing 0.3s ease;
}
.mq-project-bar-info:hover {
  color: #fff;
  letter-spacing: 2.5px;
}
.mq-project-bar-year {
  justify-self: end;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.5px;
}

@media (max-width: 767px) {
  .mq-project-bar {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: 1.5px;
    grid-template-columns: 1fr auto 1fr;
  }
  .mq-project-bar-title {
    gap: 8px;
  }
  .mq-project-bar-title .mq-project-bar-subtitle {
    display: none;
  }
  .mq-project-bar-info {
    padding: 4px 6px;
  }
}

/* Quand le bandeau projet est visible (pas dismissed), on remonte la barre
   de contrôles du player au-dessus de lui pour qu'elle reste lisible.
   Désactivé si le bandeau est masqué : controls reviennent à bottom:20px. */
.wtf-video-controls {
  transition: bottom 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
body:has(.mq-project-bar.visible:not(.dismissed)) .wtf-video-controls {
  bottom: 72px;
}
@media (max-width: 767px) {
  body:has(.mq-project-bar.visible:not(.dismissed)) .wtf-video-controls {
    bottom: 56px;
  }
}

/* Les boutons mute et fullscreen sont trop loin de la barre de progression
   à cause des colonnes Bootstrap (float-based, col-xs-1/col-xs-2 trop
   larges avec du padding de 15px). On bascule proprement la .container du
   player en FLEX : la barre de progression prend tout l'espace disponible
   (flex:1), puis mute et fullscreen sont collés à sa droite avec juste
   une petite marge de 16px entre chaque. Le bouton play à gauche garde
   sa position d'origine. */
.wtf-video-controls .container {
  display: flex;
  align-items: center;
  gap: 0;
}
.wtf-video-controls .container > .col-xs-1.padding-top-2 {
  flex: 0 0 auto;
}
.wtf-video-controls .container > .col-xs-8 {
  flex: 1 1 auto;
  min-width: 0;
}
.wtf-video-controls .container > .col-xs-1.text-center,
.wtf-video-controls .container > .col-xs-2.text-left {
  flex: 0 0 auto;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  margin-left: 16px; /* petit espace entre seek et mute, puis mute et full */
}
@media (max-width: 767px) {
  .wtf-video-controls .container > .col-xs-1.text-center,
  .wtf-video-controls .container > .col-xs-2.text-left {
    margin-left: 12px;
  }
}


/* =============================================================================
   3) CTA "Un réalisateur pour votre projet ?" — fin de page projet
   =============================================================================
   Style unseen.co : compact, centré. Effet "reveal" = le bloc est invisible
   tant qu'on n'est pas arrivé en bas de page ; dès qu'il entre dans le
   viewport, il monte depuis translateY(60px) + opacity:0 avec une courbe
   douce. Impression qu'il était "derrière/en dessous" et émerge.
   ========================================================================= */

.mq-cta-director {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 20px 110px;
  color: #fff;
  background: transparent;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s ease,
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mq-cta-director.mq-cta-reveal {
  opacity: 1;
  transform: translateY(0);
}
.mq-cta-director .mq-cta-question {
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 20px;
  font-weight: 300;
}
.mq-cta-director .mq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: #fff;
  color: #0c0c0c;
  font-family: 'NHG-55Roman', 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease;
}
.mq-cta-director .mq-cta-btn:hover,
.mq-cta-director .mq-cta-btn:focus {
  transform: translateY(-2px);
  background: #f0f0f0;
  text-decoration: none;
  color: #0c0c0c;
}
.mq-cta-director .mq-cta-btn::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 2px;
  transition: transform 0.25s ease;
}
.mq-cta-director .mq-cta-btn:hover::after {
  transform: rotate(-45deg) translate(2px, 2px);
}

@media (max-width: 767px) {
  .mq-cta-director {
    padding: 70px 16px 80px;
  }
  .mq-cta-director .mq-cta-question {
    font-size: 15px;
    margin-bottom: 16px;
  }
  .mq-cta-director .mq-cta-btn {
    font-size: 12px;
    padding: 11px 20px;
  }
}


/* =============================================================================
   TOGGLE MAQUETTES — petit panneau en bas à droite pour activer/désactiver
   =============================================================================
   Affiché uniquement en local (le script vérifie le hostname). Permet de
   comparer "avec/sans" chaque maquette sans recharger.
   ========================================================================= */
.mq-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 10000;
  background: rgba(15, 15, 15, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'NHG-35Thin', 'Inter', sans-serif;
  font-size: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}
.mq-panel-title {
  font-family: 'NHG-55Roman', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 2px;
}
.mq-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: 300;
}
.mq-panel input[type="checkbox"] {
  accent-color: #fff;
  width: 14px;
  height: 14px;
}