/* ---------- the welcome door: Copius + Manager + Jobs = Nokime ----------
   Default = two calm static blocks (the three projects, then the equation and the mark): reduced-motion visitors and no-script visitors get this.
   With motion and scripting allowed, the stage is pinned in a tall track and js/door.js drives every layer from the scroll progress.
   The text takes the site's readable tool colours (Copius --accent, Manager --brass, Jobs --blue); the paint takes the bright ones
   (--paint-c, --paint-m, --paint-j). --mix is the paint's multiply mix, per channel r1*r2*r3 on 0-1 values:
   #BBEB8A x #E7C370 x #4B75FF = #32523D (js/door.js computes the same from the tokens). */
.door{--mix:#32523D;position:relative;background:var(--bg);color:var(--ink)}
.door-track{position:relative}
.door-stage{position:relative;overflow:hidden;isolation:isolate}
.d-paint,.d-hint,.d-star{display:none}
.d-end{display:block;height:0}
.d-end:focus{outline:none}   /* a landmark position the skip links move focus to, not a control */
/* the way out of the door, from the first frame: skip, and the language (the site header only comes after the door). Static = at the top, so a keyboard visitor meets it first */
.d-tools{position:absolute;right:16px;top:16px;z-index:6;display:flex;gap:8px;align-items:center}
.d-skip,.d-lang{padding:5px 12px;border-radius:999px;border:1px solid var(--hair);background:rgba(243,241,232,.8);font:inherit;font-size:13px;line-height:1.6;color:var(--ink-3);cursor:pointer}
.d-lang[hidden]{display:none}
.d-skip.done:not(:focus),.d-lang.done:not(:focus){opacity:0;pointer-events:none}
.d-skip:hover,.d-lang:hover{color:var(--ink);border-color:var(--ink-3)}

/* the title */
.d-head{grid-column:1/-1;padding:40px 0 clamp(18px,3vh,32px);text-align:center}   /* the first row of the worlds block: it sits a fixed gap above the three questions (his ask 12 Oct: « lower the sentence at the top »), never stranded at the top of the screen */
.d-head p{margin:0;font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);line-height:1.15;color:var(--ink-2)}

/* the three worlds: one strict system. Three equal columns with equal gutters; the text of each is centred and top-aligned on shared rows
   (a subgrid, so the labels, names, influence lines and sentences sit on one line each); under it, in a row of its own, a disc of ONE diameter
   (--D, the same for the three, never wider than its column) centred on its column, its centres on one horizontal line. The drawings are placed on the disc, not on the column. */
.d-worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0 36px;max-width:1280px;margin:0 auto;padding:12px 24px 44px}
.d-col{display:grid;grid-row:2/4;grid-template-rows:subgrid;min-width:0}
.d-copius{--c:var(--accent);--p:var(--paint-c)}.d-manager{--c:var(--brass);--p:var(--paint-m)}.d-jobs{--c:var(--blue);--p:var(--paint-j)}
.d-text{position:relative;z-index:3;padding:14px 0 6px;text-align:center}
.d-q{margin:0 0 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}
.d-name{margin:0 auto 6px;width:max-content;font-family:var(--serif);font-size:clamp(40px,min(5.2vw,8vh),76px);line-height:1;letter-spacing:-.01em;font-variation-settings:"opsz" 96;color:var(--c)}
.d-inf{margin:0 0 6px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,min(2.1vw,3.4vh),28px);line-height:1.15;color:var(--ink)}
.d-world{position:relative;z-index:1;container-type:size;aspect-ratio:1;--k:1;margin-top:clamp(10px,2vh,22px)}   /* a disc as wide as its column at most, so the gutters stay clear between the three */
.d-disc{position:absolute;left:50%;top:50%;--D:min(calc(var(--k) * 100cqw),100cqh);width:var(--D);height:var(--D);margin:calc(var(--D) / -2) 0 0 calc(var(--D) / -2)}
.d-disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--p) 34%,transparent) 86%,transparent)}   /* the static pool; with motion the paint layer draws it */
.d-piece{transform:rotate(calc(var(--rot,0) * 1deg));transform-origin:50% 50%}

/* the drawings: the atlas hand, each world's line tinted in its colour (door-js dyes them through --da1…--dal as they melt).
   A drawing is placed by its centre (--cx, --cy) and size (--s), all fractions of the disc. */
.d-art{position:absolute;display:block;left:calc((var(--cx) - var(--s) / 2) * 100%);top:calc((var(--cy) - var(--s) / 2) * 100%);width:calc(var(--s) * 100%)}
.d-art .art{width:100%;height:auto;aspect-ratio:1;overflow:visible}
.d-world .art{--art-1:var(--da1,#E4F0DB);--art-2:var(--da2,#D0E2C0);--art-3:var(--da3,#B4CE9B);--art-line:var(--dal,#3E6B1F)}
.d-manager .art{--art-1:var(--da1,#F4EAD5);--art-2:var(--da2,#E9D9B6);--art-3:var(--da3,#D9C18C);--art-line:var(--dal,#876510)}
.d-jobs .art{--art-1:var(--da1,#E2EBFF);--art-2:var(--da2,#CCDBFD);--art-3:var(--da3,#AEC3F6);--art-line:var(--dal,#2038D5)}
.d-copius .a1{--cx:.29;--cy:.445;--s:.372}
.d-copius .a2{--cx:.613;--cy:.152;--s:.356}
.d-copius .a3{--cx:.718;--cy:.55;--s:.275}
.d-copius .a4{--cx:.249;--cy:.827;--s:.258}
.d-copius .a5{--cx:.516;--cy:.723;--s:.226}
.d-manager .a1{--cx:.3;--cy:.47;--s:.34}
.d-manager .a2{--cx:.62;--cy:.18;--s:.3}
.d-manager .a3{--cx:.73;--cy:.58;--s:.25}
.d-manager .a4{--cx:.3;--cy:.8;--s:.27}
.d-jobs .a1{--cx:.28;--cy:.47;--s:.29}
.d-jobs .a2{--cx:.62;--cy:.18;--s:.33}
.d-jobs .a3{--cx:.73;--cy:.6;--s:.25}
.d-jobs .a4{--cx:.34;--cy:.82;--s:.3}


/* the mark and what settles under it */
.d-final{display:flex;flex-direction:column;align-items:center;text-align:center;padding:76px 24px 92px;border-top:1px solid var(--hair)}
.d-markwrap{width:clamp(140px,min(22vw,27vh),230px);aspect-ratio:1;position:relative}
.d-mark{width:100%;height:100%;overflow:visible}
.d-mark .cut-a,.d-mark .cut-b{fill:var(--mix)}                 /* the multiply mix of Jobs blue, Manager gold and Copius green */
.d-mark .d-body{fill:var(--mix)}
.d-mark .d-knife{fill:none;stroke:var(--paint-c);stroke-width:30;stroke-dasharray:1 1}   /* the cut, opened in the bright paint green; the halves sit on top and hide the overshoot */
.d-mark .d-rim{fill:none;stroke:var(--paint-c);stroke-opacity:.6;stroke-width:2}
/* the equation: static = a line above the name, each term in its tool's colour; with motion it shares the name's place and melts into it */
.d-wordbox{display:flex;flex-direction:column;align-items:center}
.d-eq{margin:.9em 0 0;font-family:var(--serif);font-size:clamp(22px,2.6vw,36px);line-height:1.1;color:var(--ink-3);white-space:nowrap}
.d-eq .eq-t{display:inline-block}
.d-eq .eq-c{color:var(--accent)}.d-eq .eq-m{color:var(--brass)}.d-eq .eq-j{color:var(--blue)}
.d-eq .eq-p,.d-eq .eq-is{display:inline-block;margin:0 .35em}
.d-word{position:relative;margin:.12em 0 .22em;font-family:'Nokime Wordmark',var(--sans);font-weight:700;font-stretch:112%;font-size:clamp(46px,min(7vw,9.5vh),96px);letter-spacing:-.015em;line-height:1;color:var(--ink)}
.d-line{margin:0 0 24px;max-width:26ch;font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);line-height:1.2;color:var(--ink-2)}
.d-act{margin:0 0 20px}
.d-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin:0;font-size:15px;font-weight:500}
.d-links a{padding:4px 0;border-bottom:1px solid currentColor}
.d-links a:hover{filter:brightness(.85)}

/* phones: three rows, text left, the disc right; every disc the same size, all on one vertical axis, each centred on its row's text */
@media (max-width:720px){
  .d-head{padding:44px 0 6px}
  .d-head p{font-size:21px}
  .d-worlds{grid-template-columns:1fr;grid-template-rows:none;gap:0;padding:6px 16px 28px}
  .d-col{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);align-items:center;column-gap:6px;border-top:1px solid rgba(226,223,211,var(--hl,1))}
  .d-head + .d-col{border-top:0}
  .d-text{padding:12px 0;text-align:left}
  .d-q{font-size:10.5px;margin-bottom:6px}
  .d-name{font-size:clamp(34px,10.5vw,44px);margin-left:0}
  .d-inf{font-size:17px}
  .d-world{--k:1.1;aspect-ratio:1/1.1;margin-top:0}
  .d-final{padding:56px 16px 64px}
  .d-eq{font-size:clamp(19px,5.4vw,24px)}
  .d-markwrap{width:clamp(120px,36vw,150px)}
  .d-line{font-size:21px;margin-bottom:20px}
}

/* ---------- motion allowed and scripting on: pinned stage, layers stacked, door-js drives them ---------- */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled) and (min-height:560px){   /* a shorter window (a phone on its side) gets the two calm blocks: the pinned stage would clip its own content */
  .door-track{height:300vh}
  .d-tools{top:auto;bottom:10px}
  .door-stage{position:sticky;top:0;height:100vh;height:100svh}
  .d-paint{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
  .d-pools{position:absolute;inset:0;isolation:isolate}
  .d-pool{position:absolute;left:50%;top:50%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;transform:scale(0);will-change:transform;mix-blend-mode:multiply;
    background:radial-gradient(closest-side,var(--pc),var(--pc) 86%,transparent)}   /* js/door.js moves and scales each by transform (radius 160 = scale 1) */
  .d-pool.pa{--pc:var(--paint-c)}.d-pool.pb{--pc:var(--paint-m)}.d-pool.pc{--pc:var(--paint-j)}
  .d-head{position:relative;z-index:3;padding:0 0 clamp(20px,3.4vh,38px)}
  .d-worlds{position:absolute;left:0;right:0;top:clamp(24px,4vh,48px);bottom:clamp(72px,9vh,96px);margin:0 auto;padding:0 24px;z-index:2;grid-template-rows:auto auto auto;align-content:center}   /* text and discs as one block, centred: the gap between them is the same at every size */
  .d-world{max-width:max(200px,calc(100svh - 400px));justify-self:center;width:100%}
  .d-disc::before{display:none}
  .d-hint{display:flex;flex-direction:column;align-items:center;gap:10px;position:absolute;left:0;right:0;bottom:16px;z-index:3;pointer-events:none;
    font-size:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);animation:ddBob 1.8s ease-in-out infinite}   /* bigger and moving: people must see they can scroll (his girlfriend did not, 12 Oct) */
  .d-hint i{width:15px;height:15px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);animation:ddArrow 1.8s ease-in-out infinite}
  .d-final{position:absolute;inset:0;justify-content:center;padding:0 16px;border:0;z-index:4;pointer-events:none}
  .d-final.is-final{pointer-events:auto}
  .d-star{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none}   /* above the mark, under « Passer » and the language */
  .d-halves,.d-glow,.d-rim,.d-body,.d-word,.d-line,.d-act,.d-links{opacity:0}
  .d-wordbox{display:grid;justify-items:center;align-items:center}
  .d-eq,.d-word{grid-area:1/1;will-change:transform,opacity}
  .d-eq{margin:0;font-size:clamp(28px,4.4vw,62px);color:var(--ink-2)}   /* the « + » and « = » a shade darker than at rest: on a wide screen the Jobs pool passes behind the « = » (2.6:1 in --ink-3, 4.2:1 in --ink-2, 27 Oct) */
  .d-eq .eq-t{font-variation-settings:"opsz" 96;letter-spacing:-.01em;opacity:0}   /* the same face as the column names, which land on these terms */
  .d-eq .eq-p,.d-eq .eq-is{opacity:0}
  .d-mark .d-knife{stroke-dashoffset:1}
  .d-piece,.d-name{will-change:transform,opacity}

  /* the worlds are alive before any scroll */
  .d-art .art{animation:ddFloat 7s ease-in-out infinite alternate}
  .d-art.a2 .art{animation-duration:9s;animation-delay:-3s}
  .d-art.a3 .art{animation-duration:8s;animation-delay:-5s}
  .d-art.a4 .art{animation-duration:10s;animation-delay:-2s}
  .d-art.a5 .art{animation-duration:6.5s;animation-delay:-4s}
  .door.away *{animation-play-state:paused}
  .door.melted .d-art .art{animation-play-state:paused}   /* every drawing is invisible once the melt is past; no need to animate them while the finished frame holds */
}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled) and (min-height:560px) and (max-width:720px){
  .door-track{height:240vh}
  .d-worlds{padding:0 16px;grid-template-rows:auto repeat(3,minmax(0,1fr))}
  .d-head{padding:0 0 10px}
  .d-col{height:auto}
  .d-world{align-self:stretch;aspect-ratio:auto;min-height:0;max-width:none;margin-top:0}
  .d-eq{font-size:clamp(22px,6.2vw,28px)}
  .d-hint{flex-direction:row;gap:12px;left:16px;right:auto;bottom:22px;font-size:14px}   /* beside the EN / Passer buttons, never under them */
  .d-hint i{margin-top:-6px}
}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled) and (min-height:560px) and (max-width:720px) and (max-height:620px){   /* the smallest phones (320 x 568): the three rows are 1fr each, so the text tightens until each fits its row */
  .d-head p{font-size:19px}
  .d-text{padding:8px 0}
  .d-q{font-size:10px;margin-bottom:3px}
  .d-name{font-size:32px;margin-bottom:3px}
  .d-inf{font-size:15px;margin-bottom:3px}
}
@keyframes ddFloat{from{transform:translateY(0) rotate(-2.5deg)}to{transform:translateY(-8px) rotate(2.5deg)}}
@keyframes ddBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes ddArrow{0%,100%{transform:translateY(0) rotate(45deg);opacity:.55}50%{transform:translateY(5px) rotate(45deg);opacity:1}}
/* browsers without container queries (iOS 15 and earlier): the disc fills its square world, so the drawings still show */
@supports not (container-type:size){.d-disc{left:0;top:0;width:100%;height:100%;margin:0}}