/* =====================================================================
   CUTSCENE — OPENING
   1. Dark screen, the logo glowing in silver "negative" colour. It starts
      whole, then its cut pieces slide out into the logo's offset.
   2. A cut runs across the frame at a slight angle (a see-through slit
      showing the page beneath). The splice flashes, the film turns
      positive, and the two cut pieces glide apart.
   3. The home page develops like film, the header fades in and the
      edge print scrolls into place.
   Timings and colours are tokens below; js/intro.js runs the sequence.
   ===================================================================== */

:root{
  /* Negative look: dark slate base, logo in silver (black & white negative) */
  --neg-bg-rgb: 20 26 31;           /* dark slate (#141a1f)          */
  --neg-ink-rgb: 176 181 185;       /* silver (#b0b5b9)              */
  --neg-glow: .35;                  /* soft halation around the logo */

  --intro-hold: 1750ms;             /* total time before the cut         */
  --logo-cut-delay: 550ms;          /* whole logo shows for this long... */
  --logo-cut-dur: 750ms;            /* ...then the pieces slide out      */
  --intro-cut: 420ms;               /* the cut running across the frame  */
  --cut-width: 1.5px;               /* width of the cut (see-through)    */
  --intro-flash: .85;               /* brightness of the splice flash    */
  --cut-angle: 2.2%;                /* slant of the cut (0 = straight)   */
  --cut-tilt: 3deg;                 /* how much the pieces twist apart   */
  --intro-open: 1300ms;             /* the pieces being pulled apart     */
  --intro-develop: 1800ms;          /* home page developing              */
  --intro-words: 1600ms;            /* header + labels coming in         */
  --edge-scroll: 4200ms;            /* edge print scrolling into place   */
  --edge-scroll-dist: 55vw;         /* how far it scrolls from           */
  --intro-ease: cubic-bezier(.77, 0, .18, 1);
  --settle-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Cool blue (colour negative) preset — Tune: "Negative look" */
[data-neg="blue"]{
  --neg-bg-rgb: 8 10 12;
  --neg-ink-rgb: 143 180 201;
}

.intro{
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  cursor: pointer;
}
.intro[hidden]{ display: none; }

/* Two full-screen pieces. Before the cut only the left one shows (whole,
   no seam); js/intro.js cuts the slit and then clips both pieces. */
.intro-half{
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
.intro-left { transform-origin: 30% 50%; }
.intro-right{ transform-origin: 70% 50%; visibility: hidden; }

.intro-scene{
  position: absolute;
  inset: -14px;                     /* oversized so the splice jump never shows an edge */
  display: grid;
  place-items: center;
  background: rgb(var(--neg-bg-rgb));
  color: rgb(var(--neg-ink-rgb));
  transition: background-color .08s linear, color .08s linear;
}

/* After the flash: film positive, same as the site */
.intro.is-positive .intro-scene{
  background: var(--bg);
  color: var(--fg);
}

.intro-scene .grain{ z-index: 0; }

/* Logo lockup, centred */
.intro-brand{
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--intro-logo-h) * .16);
  --intro-logo-h: clamp(40px, 7.5vw, 110px);
  filter: drop-shadow(0 0 calc(var(--intro-logo-h) * .22) rgb(var(--neg-ink-rgb) / var(--neg-glow)));
  transition: filter .12s linear;
}
.intro.is-positive .intro-brand{ filter: none; }

.intro-logo{
  display: block;
  height: var(--intro-logo-h);
  aspect-ratio: 1800 / 317;
}
.intro-sub{
  font-family: var(--font-display);
  font-size: calc(var(--intro-logo-h) * var(--brand-sub-scale));
  font-weight: var(--brand-sub-weight);
  font-stretch: 115%;
  letter-spacing: var(--brand-sub-track);
  margin-right: calc(var(--brand-sub-track) * -1);
  line-height: 1;
}

/* Edge print along the top and bottom */
.intro-edge{
  position: absolute;
  left: 0; right: 0;
  z-index: 1;
  display: flex;
  gap: var(--edge-gap);
  padding-inline: calc(var(--gutter) + 14px);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--edge-size);
  letter-spacing: var(--edge-track);
  text-transform: uppercase;
  opacity: .4;
}
.intro-edge.top   { top: calc(38px + env(safe-area-inset-top, 0px)); }
.intro-edge.bottom{ bottom: calc(38px + env(safe-area-inset-bottom, 0px)); }

/* The flash as the splice passes through the gate */
.intro-flash{
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #fff6e8;
  opacity: 0;
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   Step 3: the home page develops, then its words come in.
   --------------------------------------------------------------------- */

/* Undeveloped: dark, flat and colourless, like a print in the tray */
.intro-pending .stage,
.intro-pending .backdrop{
  filter: brightness(.18) contrast(.75) saturate(0);
}
.intro-pending .site-head{ opacity: 0; }
.intro-pending .edge-a{ opacity: 0; translate: calc(var(--edge-scroll-dist) * -1) 0; }
.intro-pending .edge-b{ opacity: 0; translate: var(--edge-scroll-dist) 0; }
/* (the words round the centre frame don't fade: they slide in letter by
   letter once the page has developed, see js/home.js) */
.intro-pending .corner,
.intro-pending .tc{ opacity: 0; }

/* transitions only run while the page is coming in (class added by
   js/intro.js), so they never slow the page down afterwards */
.intro-words .stage,
.intro-words .backdrop{
  transition: filter var(--intro-develop) cubic-bezier(.4, 0, .2, 1);
}
.intro-words .site-head{
  transition: opacity calc(var(--intro-words) * .8) ease calc(var(--intro-develop) * .3);
}
/* the edge print keeps gliding after everything else has arrived */
.intro-words .edge{
  transition:
    translate var(--edge-scroll) cubic-bezier(.22, .61, .2, 1),
    opacity calc(var(--edge-scroll) * .3) ease;
}
.intro-words .corner,
.intro-words .tc{
  transition:
    opacity calc(var(--intro-words) * .6) ease,
    translate calc(var(--intro-words) * .6) var(--settle-ease);
}
.intro-words .corner{ transition-delay: calc(var(--intro-develop) * .45); }
.intro-words .tc{ transition-delay: calc(var(--intro-develop) * .55); }

@media (max-width: 760px){
  .intro-pending .edge-a{ translate: 0 calc(var(--edge-scroll-dist) * -1); }   /* scrolls down the side */
  .intro-pending .edge-b{ translate: 0 var(--edge-scroll-dist); }            /* scrolls up the side   */
}

@media (prefers-reduced-motion: reduce){
  .intro{ display: none; }
}