/* Ouverture « la porte » (première visite seulement, ou ?intro=1) : page entièrement noire, la porte ambre du
   symbole Malkovich au centre, fenêtre sur le film de la porte qui s'ouvre (bureau, plan 8). Quand la lumière
   remplit la porte, on la traverse et le site apparaît. Aucun texte (choix de Mike, 07/11/2026).
   Géométrie du symbole : carré de 224, porte de 51,12 x 162,56 posée sur le bas, à 86,44 du bord gauche
   (assets/brand/symbole.svg) ; le carré est de la couleur du fond, seule la porte se voit. */

.intro { display: none; }

html.intro-on .intro {
  --mark: min(66vh, 86vw);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  transition: opacity 0.7s var(--ease-out);
}

/* le site attend derrière : couverture et barre figées jusqu'à l'entrée */
html.intro-hold body { overflow: hidden; }
html.intro-hold .cover *,
html.intro-hold .nav * { animation-play-state: paused !important; }

.intro__mark {
  position: relative;
  width: var(--mark);
  height: var(--mark);
  background: var(--ink);
  transform-origin: 50% 64%; /* le milieu de la porte : on entre par là */
  animation: intro-mark-in 0.9s var(--ease-out) both;
}

.intro__door {
  position: absolute;
  left: 38.59%;
  bottom: 0;
  width: 22.82%;
  height: 72.57%;
  overflow: hidden;
  border-radius: calc(var(--mark) * 0.1141) calc(var(--mark) * 0.1141) 0 0;
  background: #f5a524;
}

.intro__door video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* voile de lumière : prend le relais de la vidéo quand on traverse la porte */
.intro__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 66%, #fffaf0 0%, #fbe7c2 45%, var(--paper) 100%);
  opacity: 0;
  pointer-events: none;
}

.intro__skip {
  position: absolute;
  right: var(--pad);
  bottom: max(24px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(var(--bg-rgb), 0.3);
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--bg-rgb), 0.8);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro__skip:hover { border-color: var(--paper); color: var(--paper); }
.intro__skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.intro.is-leaving { opacity: 0; pointer-events: none; }

@keyframes intro-mark-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-on .intro { display: none; }
}