/* 07_pitch: experimental pitch build, NOT Questum house style. Questum's web system: 06_production-context/web/ */
/* Questum loading curtain (2026-09-30). Ported from the Lcell pitch loader (Desktop/Work/pitch/Lcell/Interactive project):
   "FOR [Questum logo]" above "BY [signature]"; the signature writes itself, the logo grows once, then the curtain lifts.
   Recoloured for Questum: grey #F2F2F2 curtain, main logo (black + #8F84DA) at 1.8x (1.5x, then +20%), signature in the logo's black #000
   (baked into assets/questum-signature.png, so rebuild the PNG if the curtain or ink colour changes).
   The look lives here so it paints before any script; questum-curtain.js only decides when it lifts. */
:root {
  --qc-paper: #F2F2F2;
  --qc-lift: 1s;                                  /* the lift: calm, but never a wait (Apple-quality pass, 2026-09-30) */
  --qc-lift-curve: cubic-bezier(.76, 0, .24, 1);
  --qc-in: .8s;  --qc-in-curve: cubic-bezier(.19, 1, .22, 1);   /* Questum's expo-out, as on the site */
  --qc-sign-delay: .25s; --qc-sign-write: 1.1s; --qc-sign-rest: .2s; --qc-sign-grow: 1.1; --qc-sign-grow-dur: 2s;
  --qc-grow-curve: cubic-bezier(.33, 0, .15, 1);     /* the logo's push-in: starts gently, glides, lands softly */
}
.q-curtain { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--qc-paper); color: #000;
  transition: transform var(--qc-lift) var(--qc-lift-curve); will-change: transform; }
.q-curtain .qc-inner { display: grid; justify-items: center; gap: 46px; transition: transform var(--qc-lift) var(--qc-lift-curve); }
.q-curtain .qc-brand { display: grid; justify-items: center; gap: 14px; }
.q-curtain .qc-logo { display: block; width: min(92vw, 540px); height: auto; opacity: 0; transform: translate3d(0, 10px, 0) scale(.97);
  animation: qc-in .8s var(--qc-in-curve) .1s both; }
@media (min-width: 1024px) { .q-curtain .qc-logo { width: 648px; } }
.q-curtain .qc-for, .q-curtain .qc-credit { font: 500 11px/1 var(--font, "Inter", sans-serif); letter-spacing: .22em; text-transform: uppercase; color: #6b6b6b;
  opacity: 0; transform: translate3d(0, 10px, 0); animation: qc-in var(--qc-in) var(--qc-in-curve) .1s both; }
.q-curtain .qc-for { margin-right: -.22em; }
.q-curtain .qc-credit { display: flex; align-items: center; }
@keyframes qc-in { to { opacity: 1; transform: none; } }
/* the signature box keeps the name's proportions from the first paint; the script fills it with ink + covers */
.q-curtain .qc-sign { position: relative; display: block; width: min(46vw, 210px); aspect-ratio: 600 / 135; margin-left: .3em; }
@media (min-width: 1024px) { .q-curtain .qc-sign { width: 240px; } }
/* phones: a safe zone of at least two gutters (48px) each side, ≥ 33px even at the push-in's peak; the signature keeps
   the logo:signature ratio (Fable, 2026-10-04) */
@media (max-width: 639px) {
  .q-curtain .qc-logo { width: min(72vw, calc(100vw - 96px), 320px); }
  .q-curtain .qc-sign { width: min(38vw, 165px); }
  .q-curtain .qc-inner { gap: 32px; } .q-curtain .qc-brand { gap: 12px; }
}
.q-curtain .qc-sign > * { position: absolute; background-repeat: no-repeat; }
/* while the name is written the logo grows slowly by 10% (a camera push-in), and keeps gliding through the lift */
.q-curtain .qc-mark { display: block; transition: transform var(--qc-sign-grow-dur) var(--qc-grow-curve); }
.q-curtain.qc-grown .qc-mark { transform: scale(var(--qc-sign-grow)); }
/* the lift: the words ride out with the curtain; the logo follows a touch behind (small parallax) */
.q-curtain.lifting { transform: translate3d(0, -100%, 0); }
.q-curtain.lifting .qc-inner { transform: translate3d(0, -60px, 0); }
.q-curtain.lifting .qc-mark { transform: translate3d(0, 22px, 0) scale(var(--qc-sign-grow));
  transition: transform calc(var(--qc-lift) + .1s) var(--qc-lift-curve) .1s; }
html.q-locked, html.q-locked body { overflow: clip; }
/* the hero waits hidden under the curtain and fades in as it lifts (the "uncover"); its parts make their own entrance */
html.q-locked [data-hero] > .container { opacity: 0; }
html.q-revealed [data-hero] > .container { animation: qc-uncover var(--qc-lift) var(--qc-lift-curve) .1s backwards; }
@keyframes qc-uncover { from { opacity: 0; } to { opacity: 1; } }   /* opacity only: no second moving offset under the title's own rise */
@media (prefers-reduced-motion: reduce) {
  .q-curtain { transition: opacity .3s ease; }
  .q-curtain.lifting { transform: none; opacity: 0; }
  .q-curtain .qc-logo, .q-curtain .qc-for, .q-curtain .qc-credit, .q-curtain .qc-mark { animation: none; opacity: 1; transform: none; }
  .q-curtain .qc-sign i { display: none; }
  html.q-locked [data-hero] > .container, html.q-revealed [data-hero] > .container { animation: none; transform: none; opacity: 1; }
}