/* =====================================================================
   CUTSCENE — DESIGN TOKENS
   Every look-and-feel value on the site lives here. A design tweak should
   almost always be a one-line change in this file.
   ===================================================================== */

:root{
  color-scheme: dark;

  /* ---- Colour: film POSITIVE (the resting state of the site).
          The film-NEGATIVE palette is added with the opening animation. ---- */
  --bg: #0b0b0a;                       /* projection black                 */
  --fg-rgb: 233 224 204;               /* cream  (#e9e0cc)                 */
  --fg: rgb(var(--fg-rgb));
  --fg-2: rgb(var(--fg-rgb) / .62);    /* secondary text                   */

  /* Brand colours taken from the Cutscene logo file */
  --brand-ink: #1b2527;
  --brand-steel-rgb: 148 166 173;      /* blue-grey (#94a6ad)              */

  --edge-rgb: var(--fg-rgb);           /* edge-print colour                */
  --edge-alpha: .33;                   /* edge-print strength              */
  --edge-color: rgb(var(--edge-rgb) / var(--edge-alpha));
  --frame-empty: #151513;              /* shows while a still loads        */

  /* ---- Type ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --title-size: clamp(28px, 2.6vw, 46px);  /* project title under the frame */
  --title-weight: 350;
  --title-width: 108%;                     /* 100% normal, higher = wider   */
  --title-track: 0em;                     /* letter spacing                */
  --label-size: 13.5px;                      /* category, role, 01. .07       */
  --label-track: .16em;
  --nav-size: 14px;
  --logo-h: 46px;                          /* height of the Cutscene logo   */
  --edge-size: 11px;                       /* edge-print markings           */
  --edge-track: .28em;                     /* spacing between letters       */
  --edge-gap: 5em;                         /* spacing between words/groups  */
  --tc-size: 17px;                         /* running timecode digits       */
  --tc-rgb: var(--fg-rgb);                 /* timecode colour               */
  --tc-font: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;   /* timecode typeface */
  --tc-weight: 300;
  --tc-reel-gap: 3px;

  /* Words sliding in letter by letter (Home labels, Work captions) */
  --word-rise: 850ms;                      /* each letter settling          */
  --word-letter-step: 0ms;                 /* 0 = all letters at once       */
  --word-line-step: 0ms;                   /* 0 = all lines at once         */
  --words-early: .15;                      /* Home: words come in when the strip
                                              is this close to a film (in frames)
                                              and slowing                     */
  --words-leave: .2;                       /* Home: words go out once the strip
                                              is this far off the film        */
  --words-speed: 4;                        /* Home: "slowing" = under this many
                                              films per second                */
  --words-after-opening: .45;              /* Home: after the opening, words
                                              start this far into the develop */                      /* "Reel 01" -> timecode         */

  /* "malaysia" under the logo */
  --brand-sub-scale: .3;                   /* size, as a share of the logo height */
  --brand-sub-track: .39em;
  --brand-sub-weight: 490;

  /* ---- Layout ---- */
  --gutter: clamp(16px, 2.4vw, 40px);  /* page side margin                  */
  --ratio: 1.85;                       /* frame shape: 1.85:1               */
  --frame-vw: 33;                      /* centre frame width, % of screen   */
  --chrome-h: 360px;                   /* height kept for everything
                                          that isn't the centre frame       */
  --frame-w: min(
    calc(var(--frame-vw) * 1vw),
    calc((100svh - var(--chrome-h)) * var(--ratio)),
    1180px
  );
  --frame-h: calc(var(--frame-w) / var(--ratio));
  --strip-glide: 95;                   /* strip motion: higher = slower, softer glide */
  --wheel-per-film: 100;               /* scroll-wheel travel for one film (a notch ≈ 100) */
  --gap: 40px;                         /* space between frames              */
  --edge-h: 22px;                      /* height of an edge-print row       */
  --label-space: 46px;                 /* edge row -> frame (holds labels)  */
  --title-space: 104px;                /* frame -> edge row (holds title)   */
  --tc-gap: 129px;                     /* edge row -> timecode              */

  /* ---- Frames either side of the main one ---- */
  --side-scale: .8;                    /* size compared with the centre     */
  --side-opacity: .5; 
  --side-gray: .25;                    /* 0 = full colour, 1 = black & white */

  /* ---- Centre frame ---- */
  --corner-alpha: .59;                 /* strength of the corner marks      */
  --corner-len: 14px;
  --corner-offset: 0px;                /* distance outside the frame        */

  /* ---- "PLAY" label beside the cursor over the main frame ---- */
  --cursor-label-size: 15.5px;
  --cursor-label-x: 18px;              /* distance right of the cursor      */
  --cursor-label-y: 14px;              /* distance below the cursor         */

  /* ---- Blurred footage behind everything (0 = off) ---- */
  --backdrop-alpha: .12;
  --backdrop-blur: 70px;
  --grain-alpha: .37;                   /* film grain strength; also hides banding */
  --grain-size: .6;                    /* grain size in px (smaller = finer) */
  --grain-fps: 10;                     /* grain changes per second (0 = still) */
}

/* Phones: the strip turns vertical */
@media (max-width: 760px){
  :root{
    --edge-h: 16px;
    --edge-size: 10px;
    --edge-track: .16em;
    --label-size: 10.5px;
    --title-size: 26px;
    --logo-h: 26px;
    --brand-sub-scale: .38;
    --brand-sub-track: .3em;
    --nav-size: 11px;
    --label-size: 10.5px;
    --edge-gap: 2.5em;
    --tc-size: 14px;
    --frame-w: calc(100vw - 2 * var(--gutter) - 2 * var(--edge-h) - 24px);
    --side-scale: .72;
    --gap-v: 120px;                    /* space between frames, top to bottom */
  }
}