/* The Butterfly — a page from an old school book that moves.

   Beige paper with the studio's paper grain laid over everything (multiply),
   the words in the left column, and on the right THE PLATE: a canvas that
   prints the film's frames onto the paper with mix-blend-mode: multiply. The
   frames stand on exact white (brand/frames.py), and white times paper is
   paper, so there is no rectangle, no key and no matte: the plant and the
   animal are simply printed on the page, down to the antennae. The plate is
   a square as tall as the window, against its right and bottom edges, so the
   stem grows out of the bottom of the page and the butterfly can leave
   through the top.

   Type: Bulings Nature for the headlines, a narrow vintage display serif
   with high contrast and flared terminals, cut in one weight only (400: it
   is never asked for bold, which the browser would fake); Old Standard TT,
   cut after the modern faces of late 19th-century school and science books,
   for the text; Playwrite DE LA, the German school cursive (Lateinische
   Ausgangsschrift), in fountain-pen blue, for the one handwritten line above
   each headline. Self-hosted from website/fonts/. */

@font-face { font-family: "Bulings Nature"; font-weight: 400; src: url("./fonts/bulings-nature.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bulings Nature"; font-weight: 400; font-style: italic; src: url("./fonts/bulings-nature-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Old Standard TT"; font-weight: 400; src: url("./fonts/old-standard-tt-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Old Standard TT"; font-weight: 400; font-style: italic; src: url("./fonts/old-standard-tt-400i.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Old Standard TT"; font-weight: 700; src: url("./fonts/old-standard-tt-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400 600; font-style: italic; src: url("./fonts/cormorant-garamond-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Playwrite DE LA"; font-weight: 100 400; src: url("./fonts/playwrite-de-la.woff2") format("woff2"); font-display: swap; }

:root {
  --paper: #e9dfc9;
  --ink: #2a2017;
  --ink-soft: rgba(42, 32, 23, .82);
  --pen: #27418f;                      /* fountain-pen blue */
  --display: "Bulings Nature", "Old Standard TT", "Century Schoolbook", Georgia, serif;   /* the headlines: one weight, 400 */
  --serif: "Old Standard TT", "Century Schoolbook", "Iowan Old Style", Georgia, serif;
  --hand: "Playwrite DE LA", "Snell Roundhand", cursive;
  /* The plate's side: larger than the window is tall (its top bleeds off the page, as a picture in a book
     can), and as wide as the words leave room for (the client: "the area where we place this video is too
     small"). */
  --plate: min(70vw, 112vh);
  --sheet: 0;                          /* the title's normal scroll: 0 the title, 1 the egg's page (butterfly.js) */
}
:root[data-paper="light"] { --paper: #efe7d6; }
:root[data-paper="deep"]  { --paper: #e2d5b9; }

* { box-sizing: border-box; }
/* One screen, no scrolling: nothing moves the page, and nothing lets it bounce past its edges. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: var(--serif); background: var(--paper); -webkit-font-smoothing: antialiased; }

/* The paper: the grain the studio lays over its pages, over everything here
   too, the plate included, so the film sits IN the paper, not on it. Fixed,
   because the stage it covers is fixed as well. */
#paper {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: url("assets/paper-grain.jpg") center / 820px 820px repeat;
  mix-blend-mode: multiply; opacity: .6; filter: grayscale(1) contrast(1.3) brightness(1.2);   /* lifted: only the fibres and specks darken, the beige stays beige */
}
/* The age of the page, a little darker towards the edges. Its own layer: in the 3D finale the grain moves
   into the floor (finale.js) and #paper fades out, while this stays on the glass, like a lens. */
#vignette {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(110, 80, 30, .16) 100%);
}
/* The finale: the page as a world (finale.js). Over the plate and the words; under the end card. */
#world { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; pointer-events: none; }

/* The stage is the whole window, fixed. It carries the paper colour itself: the plate multiplies against what
   is behind it inside its own stacking context. */
#stage { position: fixed; inset: 0; overflow: hidden; background: var(--paper); isolation: isolate; }

#plate {
  position: absolute; right: 0; bottom: 0; width: var(--plate); height: var(--plate);
  mix-blend-mode: multiply; opacity: 0;
  /* Its left edge lies on the page; where the camera's move runs leaves into it, butterfly.js fades it. */
}
#plate.on { opacity: 1; }

/* The title page: the title set large, our butterfly perched on it, and a line under
   it, centred. The egg's page waits a window below it; scrolling moves both, like one long page (--sheet). */
#title {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6vh 7vw; background: transparent;
  visibility: hidden;
}
#title.on { visibility: visible; }
/* The masthead: the title set large, and our butterfly perched on it, wings closed, partly over the letters
   (assets/perched.webp, cut out, paper-tinted like every picture on the page; it stands in front of the type). */
#title .masthead { position: relative; margin: 0 0 5vh; width: max-content; max-width: 100%; }
#title h1 { font-family: var(--display); font-weight: 400; font-size: clamp(4.4rem, 14vw, 16.5rem); line-height: .86; letter-spacing: -.005em; margin: 0; text-align: left; }
#title h1 .last { display: block; position: relative; width: max-content; }
/* In ems of the title: it stands in front of the tops of the letters of the last word, its wings rising into
   the space beside the first. (perched.webp is 0.977 wide for 1 high, its feet at the very bottom.) The three
   values are measured against the face: Bulings Nature sets "Monarch" 3.69 em wide where Old Standard TT set it
   3.92, so the same place along the word is 2.56 em, and its taller x-height carries the feet 0.05 em higher. */
#title .perched {
  position: absolute; pointer-events: none; height: var(--perch-h, 1.76em); width: auto;
  left: var(--perch-x, 2.56em); bottom: var(--perch-y, .55em);
  filter: drop-shadow(.025em .04em .03em rgba(60, 40, 20, .25));
}
#title .text { font-size: clamp(1.7rem, 3.6vw, 4.3rem); font-style: italic; line-height: 1.35; margin: 0 0 4.6vh; color: var(--ink-soft); max-width: 30em; }   /* a quarter of the title: three words under it have to hold their own */
/* "Turn the page" as a chevron and nothing else (the client, 2026-09-23). It nudges downwards every few
   seconds, which is the whole message; the words it replaces are still there for a screen reader. */
#title .begin {
  display: block; margin: 0 auto; padding: .9rem 1.8rem; line-height: 0;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  opacity: calc(1 - var(--sheet) * 1.6);          /* it has said its piece once the reader starts scrolling */
  position: relative; top: 4.5vh;                 /* lower than the block it belongs to, without moving the title */
}
#title .chevron {
  display: block; width: clamp(3.9rem, 5.2vw, 5.8rem); height: auto; overflow: visible;
  animation: nudge 2.6s ease-in-out infinite;
}
/* Off the title page the chevron is hidden, but hiding an element does not stop its animation: the
   compositor would go on ticking it under the film and the 3D finale. */
#title:not(.on) .chevron { animation: none; }
#title .chevron path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: opacity .3s; }
#title .begin:hover .chevron path,
#title .begin:focus-visible .chevron path,
#title .begin:active .chevron path { opacity: .92; }     /* a phone has no hover: the focus and press states carry it there */
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 35% { transform: translateY(20%); } }
@media (prefers-reduced-motion: reduce) { #title .chevron { animation: none; } }
#title .begin:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The words: one chapter at a time, in the left column, clear of the plate. */
#words { position: absolute; left: 7vw; top: 0; bottom: 0; width: min(34vw, calc(100vw - var(--plate) - 2vw)); }
/* The title and the chapter page scroll as one page: the title goes up, the egg's page comes up under it. */
#title { translate: 0 calc(var(--sheet) * -100vh); }
#words, #plate, #count { translate: 0 calc((1 - var(--sheet)) * 100vh); }
.chapter {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  visibility: hidden;
}
/* The words change as a page is turned: at once, no fade (the client, 2026-09-19). */
.chapter.on { visibility: visible; }
.chapter h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3.1rem, 6.4vw, 6.8rem); line-height: 1.02; letter-spacing: 0; margin: 0; }
.chapter h1::after { content: ""; display: block; width: 8.5rem; height: 2px; background: var(--ink); margin: .42em 0 .4em; opacity: .85; }
.chapter p.text { font-size: clamp(1.15rem, 1.5vw, 1.62rem); line-height: 1.55; margin: 0; color: var(--ink-soft); hyphens: manual; max-width: 31em; }

/* The end: when the butterfly has flown out of the picture the screen goes black (finale.js sets the
   opacity), and the studio's credit comes up, film-style: "a / Salt to taste / production". */
#end {
  position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  display: grid; place-items: center; background: #0c0a08; color: #efe6d3;
}
#end p { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .15em; text-align: center; }
#end .before, #end .after {
  font-family: "Cormorant Garamond", var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.9rem); line-height: 1; letter-spacing: .01em; color: rgba(239, 230, 211, .88);
}
/* The studio's name as the studio's site sets it: its own lettering (lab/salt-to-taste/site/assets/lettering.png,
   cut out as assets/salt-lettering.webp), here in cream. */
#end .name {
  display: block; width: min(60vw, 720px); aspect-ratio: 2090 / 522; margin: .1em 0 .05em;
  background: #efe6d3; transition: background .4s;
  -webkit-mask: url("assets/salt-lettering.webp") center / contain no-repeat;
          mask: url("assets/salt-lettering.webp") center / contain no-repeat;
}
#end .name:hover { background: #fff8ea; }
#end .credit > * { opacity: 0; transform: translateY(8px); transition: opacity 1.6s ease, transform 2s cubic-bezier(.2, .7, .2, 1); }
#end.on { pointer-events: auto; }
#end.on .credit > * { opacity: 1; transform: none; }
#end.on .before { transition-delay: .4s; }
#end.on .name { transition-delay: .9s; }
#end.on .after { transition-delay: 1.5s; }

/* Where the reader is: "2 / 4", at the foot of the words' column, in the text face. */
#count {
  position: absolute; left: 7vw; bottom: 6vh; z-index: 6; margin: 0;
  font-size: clamp(1.12rem, 1.4vw, 1.52rem); letter-spacing: .06em; color: var(--ink-soft);
}

/* Narrow or tall windows: the words above, the plate below them. */
@media (max-aspect-ratio: 7/5) {
  :root { --plate: min(100vw, 60vh); }
  #plate {
    right: 50%; transform: translateX(50%);
    /* Here the plate's left, right and top edges lie on the paper, not on the window's edge, and the close
       framings run the leaf into them: they fade out, so nothing ends in a straight cut. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 9%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 9%);
    mask-composite: intersect;
  }
  #words { left: 7vw; right: 7vw; width: auto; bottom: var(--plate); }
  .chapter, .chapter.on { top: 6vh; transform: none; }   /* the words start higher: they are longer and larger than they were, and the count waits just above the plate */
  .chapter h1 { font-size: clamp(2.5rem, 10.2vw, 4.5rem); }
  .chapter p.text { font-size: clamp(1.02rem, 2.5vw, 1.3rem); line-height: 1.5; }
  #count { left: 7vw; bottom: auto; top: calc(100vh - var(--plate) - 2.6rem); }
  #title h1 { font-size: clamp(3.8rem, 19vw, 9rem); }
}