/* Shift Happens as a movie trailer (venture-lab P10; js/shift.js). The section is cosmic dark in every look. While it holds
   the middle of the screen, js/shift.js puts html.sh-cosmic on: the whole site takes the cosmic tokens, letterbox bars slide
   in and a timecode runs. Leaving it, either way, the Omegaverse comes back. The trailer is a genre joke (the approval card,
   the voice-over, the quick cuts, the laurels, the billing block); no real studio's marks or words. No filters, no blur. */

/* the whole site, while the trailer plays */
html.sh-cosmic,html.sh-cosmic[data-variant]{--paper:#05040c;--ink:#f3f2ea;--mute:#a5a59c;--line:#f3f2ea;--grid:rgba(201,189,246,.06);--shadow:#c9bdf6;--nav:rgba(5,4,12,.82)}
html.sh-cosmic body,html.sh-cosmic[data-variant] body,html.alive.sh-cosmic[data-variant] body{background:#05040c}
html.sh-cosmic .deckchip,html.sh-cosmic .om-tank{opacity:0;pointer-events:none}

/* the section: a night sky that does not move */
.sh{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding:0;background:#05040c;color:#f3f2ea}
.sh::before,.sh::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.sh::before{opacity:.8;background:
  radial-gradient(1.4px 1.4px at 23px 41px,#fff 50%,transparent 60%),
  radial-gradient(1px 1px at 131px 97px,#e9e4ff 50%,transparent 60%),
  radial-gradient(1.2px 1.2px at 77px 163px,#fff 50%,transparent 60%),
  radial-gradient(1px 1px at 199px 23px,#cfe9ff 50%,transparent 60%),
  radial-gradient(1.8px 1.8px at 263px 211px,#fff 50%,transparent 60%),
  radial-gradient(1px 1px at 311px 131px,#ffe3ee 50%,transparent 60%);
  background-size:340px 260px,340px 260px,340px 260px,517px 389px,517px 389px,233px 571px}
.sh::after{background:
  radial-gradient(70vw 900px at 18% 14%,rgba(201,189,246,.2),transparent 70%),
  radial-gradient(56vw 800px at 86% 38%,rgba(255,174,180,.12),transparent 70%),
  radial-gradient(64vw 900px at 24% 62%,rgba(163,231,244,.1),transparent 70%),
  radial-gradient(56vw 700px at 76% 86%,rgba(210,247,131,.08),transparent 70%)}

/* skip trailer: a real link to the next page, pinned under the top bar for the whole trailer */
.sh-skip{position:sticky;top:calc(var(--sh-top,64px) + var(--sh-bar) + 12px);z-index:3;height:0}
.sh-skipbtn{position:absolute;right:var(--pad);top:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  background:rgba(5,4,12,.72);color:#f3f2ea;border:2px solid #f3f2ea;text-decoration:none;font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.sh-skipbtn:hover{background:#f3f2ea;color:#05040c}
.sh-skipbtn:focus-visible{outline:3px solid var(--lav);outline-offset:3px}
.sh-count:not(:empty){display:inline-grid;place-items:center;min-width:20px;height:20px;background:var(--lav);color:#05040c;border-radius:50%}

/* the shots */
.sh-shot{min-height:70vh;min-height:70svh;display:grid;place-content:center;justify-items:center;gap:clamp(14px,2.4vw,26px);
  padding:clamp(56px,10vh,110px) var(--pad);text-align:center}
.sh-shot.sh-beat{min-height:56vh;min-height:56svh}
.sh-shot>*{margin:0;max-width:100%}
.sh-pre{font:700 12px/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lav)}
.sh-vo,.sh-big{font:800 clamp(30px,6.4vw,92px)/1.02 "Archivo",system-ui,sans-serif;font-stretch:62%;text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.sh-vo{max-width:20ch;color:#d9d6e8}
.sh-big{max-width:16ch;font-weight:900}
.sh-big em,.sh-vo em{font-style:normal;color:var(--lav)}
.sh-num{color:var(--lime)}
.sh-line{max-width:34ch;font:500 clamp(17px,1.9vw,24px)/1.45 "Archivo",system-ui,sans-serif;color:#d9d6e8}
.sh-date,.sh-fine{font:700 clamp(12px,1.4vw,15px)/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#b4b2c4}
.sh-thesis{max-width:22ch;font:300 clamp(30px,5.4vw,78px)/1.12 "Archivo",system-ui,sans-serif;font-stretch:100%;text-wrap:balance}
.sh-thesis em{font-style:normal;font-weight:900;color:var(--lav)}

/* the approval card: the genre's green band, in our colours and our words */
.sh-card{width:min(100%,720px);padding:clamp(22px,4vw,44px);background:#0d0b1c;border:3px solid var(--lav);box-shadow:0 0 0 6px #05040c,0 0 0 8px rgba(201,189,246,.4);
  font:700 clamp(12px,1.5vw,17px)/1.55 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sh-card>p{margin:0}
.sh-card b{color:var(--lav)}
.sh-rate{display:flex;align-items:center;gap:16px;margin:clamp(16px,2.4vw,24px) 0;padding:14px;border:2px solid #f3f2ea;text-align:left}
.sh-rate p{margin:0}
.sh-s{flex:none;display:grid;place-items:center;width:clamp(48px,7vw,68px);aspect-ratio:1;background:#f3f2ea;color:#05040c;font:900 clamp(32px,5vw,48px)/1 "Archivo",system-ui,sans-serif;font-stretch:125%}
.sh-card .sh-by{color:#b4b2c4;font-size:.86em}

/* five forces, in quick cuts */
.sh-forces{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px}
.sh-forces li{padding:.06em .22em .02em;color:#0b0b0c;font:900 clamp(30px,6.2vw,84px)/1 "Archivo",system-ui,sans-serif;font-stretch:62%;text-transform:uppercase;letter-spacing:.02em}
.sh-forces li:nth-child(1){background:var(--lime)} .sh-forces li:nth-child(2){background:var(--pink)} .sh-forces li:nth-child(3){background:var(--cyan)}
.sh-forces li:nth-child(4){background:var(--lav)} .sh-forces li:nth-child(5){background:var(--yellow)}

/* the title card */
.sh-laurels{display:flex;align-items:center;gap:10px;color:#e9e4ff;font:700 11px/1.35 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.sh-laurels svg{width:28px;height:56px;flex:none}
.sh-laurels svg+span+svg{transform:scaleX(-1)}
.sh-name{font:900 clamp(60px,15.5vw,230px)/.86 "Archivo",system-ui,sans-serif;font-stretch:62%;text-transform:uppercase;letter-spacing:-.005em;color:#f3f2ea;
  text-shadow:0 0 42px rgba(201,189,246,.5),0 0 2px rgba(255,255,255,.6)}
.sh-billing{max-width:760px;font:600 clamp(10px,1.15vw,13px)/1.55 "Archivo",system-ui,sans-serif;font-stretch:62%;letter-spacing:.16em;text-transform:uppercase;color:#a9a7ba;
  text-align:justify;text-align-last:center}

/* the end card */
.sh-go{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 28px;background:var(--lav);color:#0b0b0c;border:2px solid #f3f2ea;box-shadow:5px 5px 0 #f3f2ea;
  text-decoration:none;font:900 clamp(17px,2vw,22px)/1 "Archivo",system-ui,sans-serif;font-stretch:112%;text-transform:uppercase;letter-spacing:.02em}
.sh-go:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #f3f2ea}
.sh-go:focus-visible,.sh-mail a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.sh-mail{font:500 clamp(15px,1.5vw,18px)/1.5 "Archivo",system-ui,sans-serif;color:#d9d6e8}
.sh-mail a{color:#f3f2ea;text-underline-offset:.18em}
.sh-home{font:700 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}

/* the letterbox, the timecode and the way home (js/shift.js; aria-hidden) */
.sh-bar{position:fixed;left:0;right:0;z-index:41;height:var(--sh-bar,clamp(20px,5.2vh,56px));display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 var(--pad);background:#000;color:#8f8ca3;font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;pointer-events:none;
  visibility:hidden;transition:transform .7s cubic-bezier(.6,0,.2,1),visibility 0s .7s}
.sh-bar-t{top:var(--sh-top,64px);transform:translateY(-100%)}
.sh-bar-b{bottom:0;transform:translateY(100%)}
.sh-bar span{overflow:hidden;text-overflow:ellipsis}
.sh-tc{flex:none;color:#d9d6e8;font-variant-numeric:tabular-nums}
html.sh-cosmic .sh-bar{visibility:visible;transform:none;transition:transform .7s cubic-bezier(.6,0,.2,1),visibility 0s}
html{--sh-bar:clamp(20px,5.2vh,56px)}
.sh-back{position:fixed;left:50%;top:calc(var(--sh-top,64px) + 14px);z-index:80;max-width:calc(100% - 24px);padding:11px 14px 12px;background:#05040c;color:#f3f2ea;
  border:2px solid #f3f2ea;box-shadow:5px 5px 0 var(--lav);font:700 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;
  opacity:0;transform:translate(-50%,-8px);transition:opacity .35s,transform .35s cubic-bezier(.2,1.5,.3,1)}
.sh-back.on{opacity:1;transform:translate(-50%,0)}

/* leaving: the last card holds three pushes, then Karl's cosmic fog (js/shift-exit.js; aria-hidden). Transform and opacity only */
.sh-end{transform-origin:50% 100%}
.sh-pips{display:inline-flex;align-items:center;gap:10px;color:#b4b2c4;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.sh-pips i{width:12px;height:12px;border:2px solid var(--lime);border-radius:50%;transition:background-color .2s,transform .35s cubic-bezier(.2,1.8,.3,1)}
.sh-pips i.on{background:var(--lime);transform:scale(1.3)}
.sh-key{display:inline-grid;place-items:center;width:26px;height:26px;border:2px solid #f3f2ea;border-radius:6px;color:#f3f2ea;font-size:13px;letter-spacing:0}
.sh-held .sh-key{animation:sh-nudge 1.1s ease-in-out infinite}
@keyframes sh-nudge{50%{transform:translateY(4px)}}
.kf{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden;contain:strict}
.kf>*{position:absolute;left:var(--x);top:var(--y);opacity:0;will-change:transform,opacity}
.kf-veil{left:0;top:0;width:100%;height:100%;background:
  radial-gradient(42vmax 30vmax at 18% 26%,rgba(163,231,244,.55),transparent 70%),
  radial-gradient(42vmax 30vmax at 84% 72%,rgba(255,174,180,.45),transparent 70%),
  radial-gradient(circle at var(--x) var(--y),#fdfbff 0,#e9e2ff 28%,#c4b5f5 62%,#8f7fe0 100%)}
.kf-flash{width:90vmax;height:90vmax;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.78) 18%,rgba(201,189,246,.35) 40%,transparent 68%)}
.kf-ring{width:60vmax;height:60vmax;border:2px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 30px rgba(201,189,246,.8),inset 0 0 30px rgba(163,231,244,.6)}
.kf-s{width:7px;height:7px;border-radius:50%;box-shadow:0 0 12px 2px rgba(255,255,255,.7)}

@media (prefers-reduced-motion:no-preference){
  html.sh-js .sh-shot>*{opacity:0;transform:scale(1.07);transition:opacity .9s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
  html.sh-js .sh-shot.sh-in>*{opacity:1;transform:none}
  html.sh-js .sh-shot.sh-in>:nth-child(2){transition-delay:.35s,.35s}
  html.sh-js .sh-shot.sh-in>:nth-child(3){transition-delay:.7s,.7s}
  html.sh-js .sh-shot.sh-in>:nth-child(n+4){transition-delay:1s,1s}
  html.sh-js .sh-shot.sh-in .sh-forces li{animation:sh-cut .5s cubic-bezier(.2,.9,.2,1) both}
  html.sh-js .sh-shot.sh-in .sh-forces li:nth-child(2){animation-delay:.32s} html.sh-js .sh-shot.sh-in .sh-forces li:nth-child(3){animation-delay:.64s}
  html.sh-js .sh-shot.sh-in .sh-forces li:nth-child(4){animation-delay:.96s} html.sh-js .sh-shot.sh-in .sh-forces li:nth-child(5){animation-delay:1.28s}
}
@keyframes sh-cut{0%{opacity:0;transform:scale(1.6)}12%{opacity:1}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sh-bar,.sh-back{transition:none}}