/* =========================================================
   PROCESS — LES SIX DESSINS
   =========================================================
   Chaque etape a son image, construite en code : un brief, une planche de
   references, un storyboard, le viseur, la timeline, les exports. Ils
   remplacent les affiches de films et le volet d'etalonnage.

   CHAQUE DESSIN EST ECRIT A 640 x 360 et mis a l'echelle par le script
   (`--s`, `--ox`, `--oy`). Ecrire en pixels fixes garde les proportions
   exactes du tirage aux vignettes, sans convertir chaque mesure en unite
   relative. Dans une vignette plus haute que le 16/9, le dessin couvre la
   case et se recadre au centre, comme le faisaient les affiches.

   Les classes sont courtes mais toujours prefixees par `.pdN` : la feuille
   commune a deja un `.spec`, d'ou `.fspec` ici.

   L'horloge vit dans process-dessins.js : un element `data-at` recoit `.on`
   pendant sa fenetre dans la boucle, et les transitions ci-dessous font le
   reste. */
.pd-stage {
  --pd-sans: var(--font-sans, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --pd-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pd-g40: #6a6a6a;
  --pd-g60: #9a9a9a;
  --pd-rec: #ff3b30;
  /* L'ENCRE DU STORYBOARD : un graphite, un cran sous le trait du crayon.
     La note reste un murmure en marge et ne dispute pas le dessin. Essayes
     puis ecartes : orange, rouge sombre, craie, gris clair, bleu crayon.
     La tete de lecture et les mesures la reprennent. */
  --pd-encre: #7c7c7c;
  --pd-main: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --pd-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 360px;
  transform-origin: 0 0;
  transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--s, 1));
  overflow: hidden;
  background: #070707;
  color: #fff;
  font-family: var(--pd-sans);
  line-height: 1.2;
  text-align: left;
}
.pd-stage .a { position: absolute; }
.pd-stage .m { font-family: var(--pd-mono); font-variant-numeric: tabular-nums; }
.pd-stage .lbl { font: 500 9.5px/1 var(--pd-mono); letter-spacing: 0.12em; color: var(--pd-g40); text-transform: uppercase; }
/* Les vignettes sont une image arretee : aucune transition, aucune boucle. */
.pd-fige * { transition: none !important; animation: none !important; }

/* Les affiches des films, pour les planches qui en montrent. */
.pd-stage .img-bikelife  { background-image: url("../work/bikelife-poster.jpg"); }
.pd-stage .img-lambo     { background-image: url("../work/lambo-poster.jpg"); }
.pd-stage .img-sickradio { background-image: url("../work/sickradio-poster.jpg"); }
.pd-stage .img-mxgp      { background-image: url("../work/mxgp-poster.jpg"); }
.pd-stage .img-lebonwake { background-image: url("../work/lebonwake-poster.jpg"); }
.pd-stage .img-ironman   { background-image: url("../work/ironman-poster.jpg"); }

/* =========================================================
   01 · DISCOVERY — le brief qui se remplit
   ========================================================= */
.pd1 .sheet { left: 32px; top: 30px; width: 384px; height: 300px; background: #0e0e0e; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 20px 24px; }
.pd1 .sh-top { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 4px; }
.pd1 .row { display: grid; grid-template-columns: 88px 1fr; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.pd1 .row:last-child { border-bottom: 0; }
.pd1 .val { font: 500 13.5px/1.2 var(--pd-sans); color: #fff; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path .35s linear; }
.pd1 .val.on { clip-path: inset(0 0 0 0); transition: clip-path 1.1s steps(24); }
.pd1 .checks { left: 446px; top: 46px; width: 170px; }
.pd1 .checks .lbl { margin-bottom: 14px; display: block; }
.pd1 .ck { display: flex; gap: 11px; align-items: center; font: 500 13px/1 var(--pd-sans); color: #5a5a5a; padding: 10px 0; transition: color .4s; }
.pd1 .box { width: 15px; height: 15px; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; position: relative; flex: none; transition: background .3s, border-color .3s; }
.pd1 .box::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #000; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--pd-ease); }
.pd1 .ck.on { color: #fff; }
.pd1 .ck.on .box { background: #fff; border-color: #fff; }
.pd1 .ck.on .box::after { transform: rotate(45deg) scale(1); }
.pd1 .quote { left: 446px; top: 292px; width: 170px; font: 400 12px/1.4 var(--pd-sans); color: var(--pd-g60); opacity: 0; transition: opacity .6s; }
.pd1 .quote.on { opacity: 1; }

/* =========================================================
   02 · CREATIVE DIRECTION — la planche de références
   ========================================================= */
.pd2 .pin { background-size: cover; background-position: center; outline: 1px solid rgba(255,255,255,.35); box-shadow: 0 18px 30px -12px #000; opacity: 0; transform: translateY(-14px) rotate(var(--r)) scale(1.05); transition: opacity .35s, transform .35s; }
.pd2 .pin.on { opacity: 1; transform: rotate(var(--r)); transition: opacity .5s, transform .9s var(--pd-ease); }
.pd2 .chips { left: 440px; top: 230px; display: flex; gap: 5px; }
.pd2 .chip { width: 24px; height: 24px; border-radius: 4px; outline: 1px solid rgba(255,255,255,.18); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s; }
.pd2 .chip.on { opacity: 1; transform: none; transition: opacity .4s, transform .6s var(--pd-ease); }
.pd2 .tags { left: 440px; top: 272px; width: 176px; display: flex; flex-wrap: wrap; gap: 5px; }
.pd2 .tag { font: 500 11px/1 var(--pd-sans); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 5px 9px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.pd2 .tag.on { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--pd-ease); }
.pd2 .intention { left: 30px; top: 306px; width: 390px; opacity: 0; transition: opacity .4s; }
.pd2 .intention.on { opacity: 1; transition: opacity .8s; }
.pd2 .intention p { font: 500 14px/1.3 var(--pd-sans); margin-top: 7px; color: #fff; }

/* =========================================================
   03 · PRE-PRODUCTION — le storyboard annote
   =========================================================
   Trois cases dessinees au crayon, les notes du realisateur a la main au
   graphite, et dessous la sequence minutee sur le tempo de la musique. La tete de
   lecture est placee par le script sur l'horloge du dessin : elle allume la
   case qu'elle traverse au meme instant, meme apres une relance. */
.pd3 .top { left: 28px; right: 28px; top: 24px; display: flex; justify-content: space-between; }
.pd3 .case { top: 50px; width: 180px; left: calc(28px + var(--k) * 202px); }
.pd3 .case .tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pd3 .case .num { font: 600 20px/1 var(--pd-sans); letter-spacing: -.04em; color: #3a3a3a; transition: color .4s; }
.pd3 .case .obj { font: 500 9px/1 var(--pd-mono); letter-spacing: .08em; color: var(--pd-g60); text-transform: uppercase; }
.pd3 .cadre { position: relative; height: 101px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; background: #0c0c0c; transition: border-color .4s, background .4s; }
.pd3 .cadre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pd3 .crayon { fill: none; stroke: #d8d8d8; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s; }
.pd3 .case.on .crayon { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.5,.1,.3,1); }
.pd3 .hachure { opacity: 0; transition: opacity .3s; }
.pd3 .case.on .hachure { opacity: 1; transition: opacity 1.2s .8s; }
.pd3 .note-trait { fill: none; stroke: var(--pd-encre); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s; }
.pd3 .case.on .note-trait { stroke-dashoffset: 0; transition: stroke-dashoffset .9s 1.2s ease-out; }
.pd3 .note { margin-top: 10px; font: 600 17px/1.05 var(--pd-main); color: var(--pd-encre); transform: rotate(-1.5deg); transform-origin: left; }
/* L'ECRITURE, LETTRE A LETTRE. Chaque lettre sort d'un leger flou en glissant
   d'un demi-pixel, 38 ms apres la precedente : assez vite pour lire un geste
   continu, assez lent pour voir la main avancer. La note commence quand le
   crayon a fini sa case (1,6 s). En fin de boucle, tout s'efface d'un coup. */
.pd3 .note .mot { display: inline-block; white-space: nowrap; }
.pd3 .note .l { display: inline-block; opacity: 0; filter: blur(1.5px); transform: translateX(-2px); transition: opacity .25s, filter .25s, transform .25s; }
.pd3 .case.on .note .l { opacity: 1; filter: none; transform: none; transition: opacity .18s ease-out, filter .3s ease-out, transform .3s ease-out; transition-delay: calc(1.6s + var(--i) * 38ms); }
.pd3 .cadre.vif { border-color: #fff; background: #131313; }
.pd3 .case .vif-num { color: #fff; }
.pd3 .bande { left: 28px; width: 584px; top: 250px; height: 26px; display: flex; gap: 3px; }
.pd3 .seg { position: relative; height: 100%; border-radius: 3px; background: #141414; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; padding-left: 8px; font: 500 9px/1 var(--pd-mono); letter-spacing: .06em; color: var(--pd-g60); transition: background .4s, color .4s, border-color .4s; }
.pd3 .seg.vif { background: #fff; color: #000; border-color: #fff; }
.pd3 .tete-lecture { left: 28px; top: 244px; width: 1px; height: 64px; background: var(--pd-encre); }
.pd3 .tete-lecture::before { content: ""; position: absolute; left: -4px; top: -1px; border: 4.5px solid transparent; border-top: 6px solid var(--pd-encre); border-bottom: 0; }
.pd3 .temps { left: 28px; width: 584px; top: 284px; height: 14px; background: repeating-linear-gradient(to right, rgba(255,255,255,.3) 0 1px, transparent 1px 30.4px); }
/* Un temps tous les 30,4 px (0,625 s a 48,67 px/s), une mesure de quatre temps au graphite. */
.pd3 .temps::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, var(--pd-encre) 0 1.5px, transparent 1.5px 121.6px); }
.pd3 .bas { left: 28px; right: 28px; top: 314px; display: flex; justify-content: space-between; }

/* =========================================================
   04 · PRODUCTION — le viseur
   ========================================================= */
.pd4 .bg { inset: -4%; background-size: cover; background-position: 30% 30%; animation: v4kb 16s ease-in-out infinite alternate; }
@keyframes v4kb { from { transform: scale(1); } to { transform: scale(1.08) translate(1.5%, 1%); } }
.pd4 .shade { inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%), linear-gradient(to bottom, rgba(0,0,0,.5), transparent 24%, transparent 76%, rgba(0,0,0,.6)); }
.pd4 .tiers { inset: 0; background:
  linear-gradient(to right, transparent 213px, rgba(255,255,255,.16) 213px 214px, transparent 214px 426px, rgba(255,255,255,.16) 426px 427px, transparent 427px),
  linear-gradient(to bottom, transparent 120px, rgba(255,255,255,.16) 120px 121px, transparent 121px 240px, rgba(255,255,255,.16) 240px 241px, transparent 241px); }
.pd4 .cn { width: 22px; height: 22px; border: 0 solid #fff; }
.pd4 .cn.hg { left: 20px; top: 20px; border-width: 2px 0 0 2px; }
.pd4 .cn.hd { right: 20px; top: 20px; border-width: 2px 2px 0 0; }
.pd4 .cn.bg2 { left: 20px; bottom: 20px; border-width: 0 0 2px 2px; }
.pd4 .cn.bd { right: 20px; bottom: 20px; border-width: 0 2px 2px 0; }
.pd4 .croix { left: 312px; top: 172px; width: 16px; height: 16px; }
.pd4 .croix::before, .pd4 .croix::after { content: ""; position: absolute; background: rgba(255,255,255,.8); }
.pd4 .croix::before { left: 7.5px; top: 0; width: 1px; height: 16px; }
.pd4 .croix::after { top: 7.5px; left: 0; height: 1px; width: 16px; }
.pd4 .rec { left: 44px; top: 34px; display: flex; gap: 7px; align-items: center; font: 600 12px/1 var(--pd-mono); letter-spacing: .06em; }
.pd4 .rec i { width: 9px; height: 9px; border-radius: 50%; background: var(--pd-rec); animation: v4blink 1.2s steps(1) infinite; }
@keyframes v4blink { 50% { opacity: .15; } }
.pd4 .tc { left: 50%; top: 30px; transform: translateX(-50%); font: 500 14px/1 var(--pd-mono); background: rgba(0,0,0,.4); padding: 4px 8px; border-radius: 3px; }
.pd4 .clip { right: 44px; top: 33px; display: flex; gap: 10px; align-items: center; font: 500 10.5px/1 var(--pd-mono); }
.pd4 .batt { width: 22px; height: 11px; border: 1px solid #fff; border-radius: 2px; position: relative; padding: 1px; }
.pd4 .batt::before { content: ""; display: block; height: 100%; width: 84%; background: #fff; }
.pd4 .batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 3px; background: #fff; }
.pd4 .regl { left: 50%; bottom: 30px; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 var(--pd-mono); letter-spacing: .05em; background: rgba(0,0,0,.4); padding: 5px 9px; border-radius: 3px; }
.pd4 .vu { left: 44px; top: 112px; display: flex; gap: 5px; }
.pd4 .vu .col { display: grid; gap: 5px; justify-items: center; }
.pd4 .vu .tr { width: 5px; height: 136px; background: rgba(255,255,255,.14); display: flex; align-items: flex-end; }
.pd4 .vu .lv { width: 100%; height: 100%; transform-origin: bottom; background: linear-gradient(to top, #fff 0 68%, #ffd60a 68% 86%, var(--pd-rec) 86%); animation: v4lvl .9s ease-in-out infinite alternate; }
.pd4 .vu .col + .col .lv { animation-duration: 1.13s; animation-delay: -.4s; }
@keyframes v4lvl { 0% { transform: scaleY(.38); } 30% { transform: scaleY(.72); } 55% { transform: scaleY(.52); } 80% { transform: scaleY(.84); } 100% { transform: scaleY(.46); } }
.pd4 .vu .lbl { color: rgba(255,255,255,.7); font-size: 8px; }
.pd4 .af { left: 150px; top: 44px; width: 72px; height: 72px; animation: v4af 6s ease-in-out infinite; background:
  linear-gradient(#fff,#fff) 0 0 / 12px 1.5px no-repeat, linear-gradient(#fff,#fff) 0 0 / 1.5px 12px no-repeat,
  linear-gradient(#fff,#fff) 100% 0 / 12px 1.5px no-repeat, linear-gradient(#fff,#fff) 100% 0 / 1.5px 12px no-repeat,
  linear-gradient(#fff,#fff) 0 100% / 12px 1.5px no-repeat, linear-gradient(#fff,#fff) 0 100% / 1.5px 12px no-repeat,
  linear-gradient(#fff,#fff) 100% 100% / 12px 1.5px no-repeat, linear-gradient(#fff,#fff) 100% 100% / 1.5px 12px no-repeat; }
@keyframes v4af { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(6px, 4px); } 70% { transform: translate(-3px, 7px); } }

/* =========================================================
   05 · POST-PRODUCTION — la timeline
   ========================================================= */
.pd5 .mon { left: 28px; top: 20px; width: 220px; height: 124px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background-size: cover; background-position: center; overflow: hidden; }
.pd5 .mon.ironman { background-size: auto 144%; }
.pd5 .mon .lut { position: absolute; left: 6px; top: 6px; font: 500 8.5px/1 var(--pd-mono); letter-spacing: .06em; background: rgba(0,0,0,.55); padding: 3px 5px; border-radius: 2px; }
.pd5 .info { left: 272px; top: 22px; right: 28px; }
.pd5 .info .tcg { font: 500 27px/1 var(--pd-mono); margin: 9px 0 7px; letter-spacing: -.01em; }
.pd5 .taches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.pd5 .tache { font: 500 10.5px/1 var(--pd-sans); border: 1px solid rgba(255,255,255,.18); color: var(--pd-g60); border-radius: 999px; padding: 5px 8px; transition: color .3s, border-color .3s, background .3s; }
.pd5 .tache.on { color: #000; background: #fff; border-color: #fff; }
.pd5 .regle { left: 70px; top: 160px; width: 542px; height: 16px; background: repeating-linear-gradient(to right, rgba(255,255,255,.25) 0 1px, transparent 1px 9.0333px) 0 12px / 100% 4px no-repeat; }
.pd5 .regle span { position: absolute; top: 0; font: 500 8px/1 var(--pd-mono); color: var(--pd-g40); transform: translateX(-50%); }
.pd5 .regle span:first-child { transform: none; }
.pd5 .regle span:last-child { transform: translateX(-100%); }
.pd5 .piste-n { left: 28px; width: 36px; height: 32px; display: grid; place-items: center; background: #0e0e0e; border-radius: 3px; font: 500 9.5px/1 var(--pd-mono); color: var(--pd-g60); }
.pd5 .piste { left: 70px; width: 542px; height: 32px; background: #0c0c0c; border-radius: 3px; }
.pd5 .cl { position: absolute; top: 0; bottom: 0; border-radius: 3px; overflow: hidden; }
.pd5 .cl.titre { background: #262626; border: 1px solid rgba(255,255,255,.22); font: 500 8px/30px var(--pd-mono); padding-left: 5px; letter-spacing: .06em; color: #ddd; }
.pd5 .cl.plan { background-size: auto 100%; background-repeat: repeat-x; border: 1px solid #000; }
.pd5 .cl.plan.ironman { background-size: auto 144%; background-position: 0 50%; }
.pd5 .cl.sfx { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.pd5 .cl.sfx::after { content: ""; position: absolute; inset: 9px 3px; background: repeating-linear-gradient(to right, rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 3px); -webkit-mask: linear-gradient(to right, transparent, #000 30%, #000 60%, transparent); mask: linear-gradient(to right, transparent, #000 30%, #000 60%, transparent); }
.pd5 .onde { position: absolute; inset: 0; width: 100%; height: 100%; }
.pd5 .onde rect { fill: rgba(255,255,255,.5); }
.pd5 .ph { left: 70px; top: 156px; width: 1px; height: 172px; background: #fff; will-change: transform; }
.pd5 .ph::before { content: ""; position: absolute; left: -5px; top: 0; border: 5px solid transparent; border-top: 7px solid #fff; border-bottom: 0; }

/* =========================================================
   06 · DELIVERY — un plan, trois formats
   ========================================================= */
.pd6 .top { left: 30px; right: 30px; top: 24px; display: flex; justify-content: space-between; align-items: center; }
.pd6 .versions { display: flex; gap: 6px; }
.pd6 .ver { font: 500 9.5px/1 var(--pd-mono); letter-spacing: .06em; padding: 4px 7px; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); color: var(--pd-g40); }
.pd6 .ver.ok { transition: all .4s; }
.pd6 .ver.ok.on { background: #fff; color: #000; border-color: #fff; }
.pd6 .fmt { background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; clip-path: inset(100% 0 0 0); transition: clip-path .3s; }
.pd6 .fmt.on { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--pd-ease); }
.pd6 .fspec { top: 250px; display: grid; gap: 5px; }
.pd6 .fspec b { font: 600 10px/1 var(--pd-mono); letter-spacing: .06em; }
.pd6 .fspec span { font: 400 11px/1 var(--pd-sans); color: var(--pd-g60); white-space: nowrap; }
.pd6 .bar { top: 292px; height: 3px; background: rgba(255,255,255,.14); }
.pd6 .bar i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.pd6 .bar i.on { transform: scaleX(1); transition: transform 2.2s cubic-bezier(.45, .05, .35, 1); }
.pd6 .st { top: 303px; font: 500 9.5px/1 var(--pd-mono); letter-spacing: .08em; }
.pd6 .st .fait { display: none; color: #fff; }
.pd6 .st .cours { color: var(--pd-g40); }
.pd6 .st.on .fait { display: inline; }
.pd6 .st.on .cours { display: none; }
.pd6 .envoi { left: 62px; top: 330px; font: 500 10px/1 var(--pd-mono); letter-spacing: .06em; color: var(--pd-g60); opacity: 0; transition: opacity .4s; }
.pd6 .envoi.on { opacity: 1; transition: opacity .8s; }
.pd6 .envoi b { color: #fff; font-weight: 500; }