/* ═══════════════════════════════════════════════════════════════
   Accueil, scène 1 : la salle (js/scenes/ouverture.js). Préfixe .op__
   La photo dans les fauteuils de velours, mon nom en grandes lettres qui passe derrière ma tête,
   la ligne de générique en bas ; puis la lumière se retire de mon visage, jusqu'au noir.
   ═══════════════════════════════════════════════════════════════ */
.op { position: relative; background: var(--night); color: var(--ivory); }
.op__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--night); isolation: isolate; }
.op__cam { position: absolute; inset: 0; will-change: transform; }
/* le bas de l'écran se fond toujours dans le noir, quel que soit le décalage de la photo */
.op__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(10, 6, 5, 0), rgba(10, 6, 5, .45) 60%, rgba(10, 6, 5, .72)); }

/* la photo et ma tête détourée : le même cadre, placé par le script */
.op__ph, .op__hd { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }
.op__ph img, .op__hd img { width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.op__ph { z-index: 1; }
/* sur l'écran large : la même photo, agrandie et floue, prolonge les fauteuils de part et d'autre ; la photo nette s'y fond */
.op__fill { position: absolute; inset: -12%; z-index: 0; background-position: center 30%; background-size: cover; background-repeat: no-repeat; filter: blur(64px) brightness(.62) saturate(1.15); }
/* (la photo nette se fond dans le flou sur ses côtés et en haut) */
.op.is-wide .op__bg { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 13%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 13%, #000 100%); mask-composite: intersect; }
.op__hd { z-index: 3; pointer-events: none; }
/* le noir de la salle autour de moi : le haut et le bas de la photo s'y fondent */
.op__vig { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 5, .5) 0%, rgba(10, 6, 5, 0) 12%, rgba(10, 6, 5, 0) 100%); }
.op.is-wide .op__vig { background: linear-gradient(180deg, rgba(10, 6, 5, .45) 0%, rgba(10, 6, 5, 0) 16%, rgba(10, 6, 5, 0) 100%); }
/* à l'arrivée, la lumière monte depuis mon visage */
.op.is-arriving [data-ph], .op.is-dimming [data-ph] {
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), #000 var(--r, 100%), transparent calc(var(--r, 100%) + 42%));
  mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), #000 var(--r, 100%), transparent calc(var(--r, 100%) + 42%));
}

/* mon nom */
.op__name { position: absolute; z-index: 2; left: 0; right: 0; top: 80px; margin: 0; text-align: center; color: var(--ivory); white-space: nowrap; pointer-events: none; text-shadow: 0 0 60px rgba(10, 6, 5, .35); will-change: transform; }
.op__name--fr { font-family: var(--display); font-stretch: 62.5%; font-weight: 400; line-height: .84; text-transform: uppercase; letter-spacing: .012em; }
.op__name--ar { font-family: var(--ar); font-weight: 700; line-height: 1.02; }
.op__row { display: block; width: max-content; margin: 0 auto; }
.op__u { display: inline-block; will-change: transform, opacity; }
.op__sp { display: inline-block; width: .26em; }
.op__base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* la ligne de générique */
.op__credits { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: max(26px, env(safe-area-inset-bottom)); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--ivory); }
.op__credits .caps { color: var(--ivory-2); }
.op__mid { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.op__ar { font-family: var(--ar); font-size: clamp(1.7rem, 7.6vw, 2.5rem); line-height: 1.25; direction: rtl; }
.op__lat { font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.op__cue { display: block; width: 26px; height: 34px; position: relative; }
.op__cue i { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--line-2); overflow: hidden; }
.op__cue i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: var(--ivory); animation: op-cue 2.4s var(--ease-io) infinite; }
@keyframes op-cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(240%); } }

/* sur ordinateur : générique à gauche et à droite, mon nom dans l'autre écriture au centre */
.op.is-wide .op__credits { flex-direction: row; justify-content: space-between; align-items: flex-end; bottom: 30px; }
.op.is-wide .op__c1, .op.is-wide .op__c2 { flex: 1 1 0; padding-bottom: 6px; }
.op.is-wide .op__c1 { text-align: left; }
.op.is-wide .op__c2 { text-align: right; }
.op.is-wide .op__ar { font-size: clamp(2rem, 2.4vw, 2.8rem); }
.op.is-wide .op__lat { font-size: clamp(2rem, 2.6vw, 3rem); }
.op.is-wide .op__cue { height: 44px; }

/* sur ordinateur : un plan fixe ; la caméra avance, puis la salle s'éteint */
.op.is-stage { height: 220vh; height: 220svh; }
.op.is-stage .op__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
/* le rideau qui tombe (js/scenes/theatre.js le dessine), et son ombre portée sur la salle, juste sous son ourlet */
.op__curtain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; visibility: hidden; will-change: transform; }
.op__dim { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: var(--night); }
.op__shade { position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 8; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(10, 6, 5, .85) 0%, rgba(10, 6, 5, .35) 40%, rgba(10, 6, 5, 0) 100%); will-change: transform, opacity; }