/* The King Crab — a sea-floor chart the crab walks across.

   The same book as The Monarch (lab/butterfly), with Restora for headline
   and text, the studio's paper grain, the credit on black at the end. The page
   is a deep blue chart instead of beige paper: blue like the Bering Sea, the
   colour of old cloth-bound atlases, and the one ground a live red king crab
   stands out on. It darkens with depth as the crab walks down it.

   The sea (#sea) is a canvas crab.js draws for where the camera is: depth
   colour, grain and contours, with no edges. #world carries the words, moved
   by crab.js under a fixed window (the camera). The crab is drawn on its own canvas over it, turned to
   the way it walks. The scroll is real (#track is as long as the walk), so a
   trackpad, a wheel, keys and a finger all work as on any page; the page
   itself never scrolls visibly. */

@font-face { font-family: "Restora"; font-weight: 400; src: url("assets/fonts/Restora.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Restora"; font-weight: 400; font-style: italic; src: url("assets/fonts/RestoraItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Restora"; font-weight: 700; src: url("assets/fonts/RestoraBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Bulings Nature"; font-weight: 400; src: url("./fonts/bulings-nature.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; }

:root {
  --sea: #13304f;                        /* the chart at the surface; crab.js darkens it with depth */
  --ink: #efe6d3;                        /* cream, the butterfly's end-card colour */
  --ink-soft: rgba(239, 230, 211, .8);
  --serif: "Restora", "Century Schoolbook", "Iowan Old Style", Georgia, serif;
  --display: "Bulings Nature", "Restora", Georgia, serif;   /* the headlines: The Monarch's face (lab/butterfly), one weight */
}

* { box-sizing: border-box; }
html { background: #0b1b2e; overscroll-behavior: none; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; color: var(--ink); font-family: var(--serif); background: #0b1b2e; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }

/* The scroll: an invisible column as long as the walk. */
#track { position: relative; width: 1px; pointer-events: none; }

#stage { position: fixed; inset: 0; overflow: hidden; }

/* The sea: drawn by crab.js (drawSea) under the words; the words move with the camera over it. */
#sea { position: absolute; inset: 0; width: 100%; height: 100%; }
#floor { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

/* A film grain on the glass, over everything, faint: it dithers the dark of the ending, which otherwise bands
   (soft-light, tried first, does nothing near black). */
#grain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background: var(--noise) 0 0 / 256px 256px repeat;   /* crab.js makes the tile: plain noise, normal blend, faint */
  opacity: .035;
}
/* The lens: a little darker at the edges, fixed on the glass. */
#vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(2, 8, 18, .42) 100%);
}

#crab { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* The end: the dark of the deep closing in round the crab, a circle of light that shrinks to nothing. */
#dark {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle var(--r, 150vmax) at var(--x, 50%) var(--y, 50%), transparent 0, rgba(3, 6, 11, .35) 45%, rgba(3, 6, 11, .97) 100%);
}

/* The words, printed on the chart where the crab stops. */
#words { position: absolute; left: 0; top: 0; }
.chapter { position: absolute; transform: translateY(-50%); }
.chapter h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.9rem, 5.8vw, 6.2rem); line-height: 1.02; letter-spacing: 0; margin: 0; }
.chapter h1::after { content: ""; display: block; width: 6.5rem; height: 1px; background: var(--ink); margin: .42em 0 .42em; opacity: .6; }
.chapter p { font-size: clamp(1.02rem, 1.22vw, 1.32rem); line-height: 1.58; margin: 0; color: var(--ink-soft); max-width: 31em; }

/* The title page: the title set large; the crab hides below the bottom edge, only its claws and eyes over it. */
.title { position: absolute; transform: none; }
.title h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3.8rem, 12.6vw, 15rem); line-height: .86; letter-spacing: -.005em; margin: 0; }
.title h1 span { display: block; }
.title h1::after { content: none; }
/* The title stands alone, the scroll cue under it. */
.title > * { opacity: 0; transform: translateY(14px); transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.ready .title > * { opacity: 1; transform: none; }
/* The scroll cue: a chevron and nothing else, as on The Monarch (lab/butterfly), in the crab's arms between its
   claws (crab.js places it every frame; --cue-w follows the crab's size). It nudges downwards every few seconds; the
   label is for a screen reader. */
#scroll-cue {
  position: fixed; left: 0; top: 0; z-index: 6; margin: 0; padding: .7rem 1rem; line-height: 0;
  transform: translate(-999px, -999px);
  border: 0; background: none; color: var(--ink); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s;
  filter: drop-shadow(0 1px 6px rgba(0, 8, 18, .8));
}
.ready #scroll-cue.on { opacity: 1; visibility: visible; }
#scroll-cue .chevron { display: block; width: var(--cue-w, 4rem); height: auto; overflow: visible; animation: nudge 2.6s ease-in-out infinite; }
#scroll-cue:not(.on) .chevron { animation: none; }
#scroll-cue .chevron path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: opacity .3s; }
#scroll-cue:hover .chevron path, #scroll-cue:focus-visible .chevron path, #scroll-cue:active .chevron path { opacity: .92; }
#scroll-cue:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 35% { transform: translateY(20%); } }
@media (prefers-reduced-motion: reduce) { #scroll-cue .chevron { animation: none; } }

/* The end: the crab has walked out of the bottom of the page into the deep; black, and the credit. */
#end {
  position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  display: grid; place-items: center; background: #06080c; 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 in the studio's own lettering (from lab/salt-to-taste/site), 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-to-taste-cropped.svg") center / contain no-repeat;
          mask: url("../../assets/salt-to-taste-cropped.svg") 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; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tall windows: the words across the top of the window, the crab below them (crab.js lays them out). */
@media (max-aspect-ratio: 1/1) {
  .chapter h1 { font-size: clamp(2.2rem, 9vw, 4rem); }
  .chapter p { font-size: clamp(.98rem, 3.6vw, 1.2rem); line-height: 1.5; }
  .title h1 { font-size: clamp(2.3rem, 13.8vw, 7rem); }
}

#sea, #crab { transform-origin: 50% 58%; }