/* ════════ OUVERTURE MIND & MOTION, 06/11/2026 au 14/11/2026 ════════
   Piste A « Le O se remplit ». Ne s'affiche que sous html.intro, posée par le
   script de tête d'index.html : fenêtre ouverte, première visite de la session,
   jamais en mouvement réduit. Après le 14/11, aucune règle d'ici ne s'applique.

   Partage : la base ci-dessous (calque, filet de secours, bouton Passer) est
   au développeur. Les états du mouvement sont au motion designer, avec
   js/ouverture.js.

   Refaite le 09/11/2026 en bande-annonce de cinéma : jauge, carton de la
   date, carton du titre, bande-annonce entière (25 s), retour dans le O.

   FILET DE SECOURS, À NE PAS RETIRER. Si js/ouverture.js ne se charge pas ou
   plante, le calque couvrirait la page pour toujours. Il s'efface donc tout
   seul au bout de 16 s quand le script n'a pas démarré. Quand il a démarré
   (classe oi-joue), le filet passe à 44 s, puis le script le repousse à la
   fin de son propre budget (jauge 15 s au plus, cartons, attente du film,
   25,2 s de film, atterrissage), allongé de chaque seconde d'attente. Changer
   le délai d'une animation en cours ne la relance pas : elle garde son départ
   et part simplement plus tard.
   Le script retire le calque bien avant, et il retire aussi html.intro, qui
   libère les entrées du héros (voir home.css).

   .oi.oi-joue : le script pose cette classe dès son départ. À l'atterrissage
   il retire html.intro pour lancer les entrées du héros pendant que le calque
   finit de s'effacer ; sans cette seconde accroche le calque disparaîtrait
   d'un coup. Les deux sélecteurs déclarent la même animation, elle continue
   donc sans repartir de zéro, et le filet des 16 s reste valable. */
.oi{display:none}
html.intro .oi,.oi.oi-joue{
  display:block;position:fixed;inset:0;z-index:210;overflow:hidden;
  animation:oi-secours .01s linear 16s forwards;
  /* Le calque ne fait jamais recalculer la page : le compteur change de texte
     soixante fois par seconde, sans contain le navigateur revérifierait tout. */
  contain:strict;
}
html .oi.oi-joue{animation-delay:44s}
@keyframes oi-secours{to{visibility:hidden;opacity:0}}
.oi-fond{position:absolute;inset:0;background:var(--ink)}

/* ── Le film ──
   Une <video> ne se découpe pas par le texte (background-clip:text ne prend
   qu'une image). Le film est donc découpé par un tracé : clip-path:path(), qui
   reprend le contour exact du O d'Anton, l'intérieur évidé. Le script le
   recalcule à chaque image de la métamorphose (O, gélule, cadre, retour dans
   le O du mot) et ne le touche plus quand il ne bouge pas.
   Le film garde sa taille d'origine, il ne bouge que par transform (origine
   en haut à gauche) : aucune mise en page pendant le mouvement, aucun filtre,
   ce qui tient au téléphone. Invisible tant que la jauge monte. */
.oi-film{position:absolute;inset:0;opacity:0;pointer-events:none}
.oi-film video{
  position:absolute;left:0;top:0;display:block;max-width:none;
  width:576px;height:1024px;transform-origin:0 0;will-change:transform;
  background:var(--ink);
}

/* ── Le mot ──
   Copie décorative de « OSE. » du héros (le vrai titre reste le h1 dessous).
   Le script pose chaque lettre sur le pixel de la lettre réelle : même corps,
   même interligne « normal », donc même ligne de pied. letter-spacing à zéro
   parce qu'ici chaque lettre est seule ; l'approche du h1 vit dans la
   position que le script relève sur lui. */
.oi-mot{
  position:absolute;inset:0;pointer-events:none;
  font-family:var(--disp);font-weight:400;font-size:min(59vw,15.5rem);
  line-height:normal;letter-spacing:0;text-transform:uppercase;
}
.oi-mot i,.oi-mot em{font-style:normal}

/* Le O de la jauge. Avant que le script tourne, il est déjà au centre de
   l'écran : la première image est un O fantôme et « 0 % », jamais un noir
   vide. Le script le repose ensuite au pixel près. */
.oi-o{position:absolute;left:50%;top:50%;display:block;white-space:nowrap;transform:translate(-50%,-50%)}
/* Le fantôme et le papier sont le même O : papier à 11 % pendant la jauge,
   papier plein à l'atterrissage, posé sur le film qui s'efface. */
.oi-creux{display:block;color:var(--paper);opacity:.11}
/* L'or monte du pied du O vers son sommet : clip-path inset() rogne le haut. */
.oi-or{position:absolute;left:0;top:0;display:block;color:var(--emy);clip-path:inset(100% 0 0 0)}

/* S, E et le point arrivent après le film, posés sur ceux du h1. */
.oi-l{position:absolute;left:0;top:0;display:block;color:var(--paper);opacity:0}
em.oi-l{color:var(--emy)}
.oi-filet{position:absolute;left:0;top:0;display:block;width:0;height:3px;background:var(--emy);transform:scaleX(0);transform-origin:center}

/* Le compteur, petit, en Plex Mono, collé à gauche du O. Le trait le relie au
   niveau de l'or : il monte avec lui. Jamais un grand pourcentage. */
.oi-compteur{
  position:absolute;
  left:calc(50% - min(59vw,15.5rem) * .2119 - 18px);
  top:calc(50% + min(59vw,15.5rem) * .4375);
  display:flex;align-items:center;gap:8px;margin-top:-.5em;
  font:500 13px/1 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;
  color:rgba(239,238,233,.78);white-space:nowrap;transform:translateX(-100%);
}
.oi-compteur::after{content:"";width:10px;border-top:1px solid rgba(239,238,233,.5)}

/* ── Les cartons ──
   Deux cartons de cinéma sur le noir, l'un après l'autre : la date en Plex
   Mono espacé, comme une mention de générique, puis le titre en Anton, la
   perluète en or. Ils ne bougent que par opacité et par une lente
   approche (scale de 1,05 à 1), posées par le script. */
.oi-cartons{position:absolute;inset:0;pointer-events:none}
.oi-carton{
  position:absolute;left:24px;right:24px;top:50%;margin:0;text-align:center;
  color:var(--paper);opacity:0;transform:translateY(-50%);will-change:transform,opacity;
}
.oi-date{font:400 clamp(15px,2.1vw,24px)/1.4 var(--mono);letter-spacing:.32em;text-transform:uppercase;padding-left:.32em}
.oi-titre{font:400 clamp(3.4rem,11vw,10rem)/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.oi-titre em{font-style:normal;color:var(--emy)}

/* ── La ligne de temps du film ──
   Elle n'apparaît qu'avec le film plein cadre et se remplit d'or au rythme du
   film. Au bureau le script la cale sous le cadre ; au téléphone elle court
   au bas de l'écran, au-dessus de « Passer l'intro ». */
.oi-temps{
  position:absolute;left:22px;right:22px;bottom:62px;height:2px;
  background:rgba(239,238,233,.16);opacity:0;pointer-events:none;
}
.oi-temps i{position:absolute;inset:0;background:var(--emy);transform:scaleX(0);transform-origin:0 50%}

/* « Passer l'intro », visible dès la première image, au pouce en bas à droite
   au téléphone, en bas à droite au bureau. Plex Mono comme les libellés.
   L'ombre du texte le garde lisible quand le film plein écran passe dessous
   au téléphone ; le bouton ne bouge pas, elle ne coûte rien. */
.oi-passer{
  position:absolute;z-index:5;right:clamp(22px,3.6vw,52px);bottom:clamp(26px,3.6vw,40px);
  font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,238,233,.78);background:none;border:0;border-bottom:1px solid rgba(239,238,233,.4);
  padding:10px 2px 6px;cursor:pointer;transition:color .25s,border-color .25s;
  text-shadow:0 1px 10px rgba(14,15,12,.7);
}
/* « Activer le son », au même niveau, à gauche. Il n'apparaît qu'avec le
   film ; le script le cache (visibility) le reste du temps, pour qu'il ne
   prenne ni un clic ni le focus quand on ne le voit pas. */
.oi-son{
  position:absolute;z-index:5;left:clamp(22px,3.6vw,52px);bottom:clamp(26px,3.6vw,40px);
  font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:none;border:0;border-bottom:1px solid var(--emy);
  padding:10px 2px 6px;cursor:pointer;opacity:0;visibility:hidden;
  text-shadow:0 1px 10px rgba(14,15,12,.7);
}
.oi-son:focus-visible{outline:2px solid var(--emy);outline-offset:4px}
/* « Voir la bande-annonce », sous le titre, seulement quand le navigateur a
   refusé la lecture automatique (iPhone en économie d'énergie) : le titre
   attend alors le clic du visiteur. Caché le reste du temps. */
.oi-lancer{
  position:absolute;z-index:5;left:50%;top:calc(50% + clamp(3.4rem,11vw,10rem) * .5 + 30px);
  transform:translateX(-50%);
  font:400 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--paper);background:none;border:0;border-bottom:1px solid var(--emy);
  padding:12px 2px 7px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;
}
.oi-lancer.vu{opacity:1;visibility:visible;transition:opacity .4s}
.oi-lancer:focus-visible{outline:2px solid var(--emy);outline-offset:4px}
/* Écran large : la bande-annonce, verticale, est encadrée au centre à pleine
   hauteur (124 px réservés dessous, 24 px de marge). Les deux boutons
   s'alignent sur les bords du cadre, comme la ligne de temps. Formule du
   cadre de js/ouverture.js (film de 576 x 1024), posée ici pour que la bonne
   place soit là dès la première image. */
@media (min-width:901px) and (min-aspect-ratio:1/1){
  .oi-passer{right:calc((100% - min(100% - 48px, (100vh - 124px) * .5625)) / 2)}
  .oi-son{left:calc((100% - min(100% - 48px, (100vh - 124px) * .5625)) / 2)}
}
.oi-passer:hover{color:var(--paper);border-color:var(--emy)}
.oi-passer:focus-visible{outline:2px solid var(--emy);outline-offset:4px}