/* Blueprint for every project page. Pages only supply their content; see project.js. */

@font-face {
  font-family: "Rebond Grotesque";
  src: local("Rebond Grotesque Regular"), local("RebondGrotesque-Regular"),
       url("../fonts/REBONDGROTESQUE-REGULAR.OTF") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tangerine";
  src: local("Tangerine Regular"), local("Tangerine-Regular"),
       url("../fonts/Tangerine-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ballet";
  src: url("../fonts/Ballet-Regular-VariableFont_opsz.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --oxblood: #5b0616;
  --white: #ffffff;

  /* 1 design pixel on the 1920 × 1080 frame, horizontally and vertically */
  --u: calc(100vw / 1920);
  --fh: max(420px, 100vh);
  --v: calc(var(--fh) / 1080);

  --display-size: clamp(15px, calc(32 * var(--u)), 40px);
  --display-line: 1.625;
  --script-size: calc(var(--display-size) * 2);

  --nav-top: calc(7 * var(--v));
  --nav-h: max(36px, calc(66 * var(--u)));
  --bar: calc(var(--nav-top) + var(--nav-h));
  --greeting-gap: 20px;

  --list-size: clamp(20px, calc(48 * var(--u)), 60px);
  --list-row: calc(var(--list-size) * 52 / 48);

  --gutter: max(16px, calc(45 * var(--u)));
  --section-gap: max(96px, calc(280 * var(--u)));
  --shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

@supports (height: 100svh) {
  :root { --fh: max(420px, 100svh); }
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--oxblood); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--oxblood);
  color: var(--white);
  font-family: "Rebond Grotesque", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: var(--display-size);
  line-height: var(--display-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 6px;
  border-radius: 2px;
}

p { margin: 0; text-wrap: pretty; }

main { overflow-x: clip; }

.script {
  font-family: "Tangerine", "Snell Roundhand", cursive;
  font-size: var(--script-size);
  line-height: 0;
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding-top: var(--nav-top);
  background: var(--oxblood);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  margin-right: 1px;
  padding: 0 var(--gutter);
}

.home {
  position: relative;
  display: block;
  flex: none;
  width: max(30px, calc(56 * var(--u)));
  height: var(--nav-h);
}

.home img {
  position: absolute;
  inset: 16.59% 13.26%;
  width: 73.48%;
  height: 66.82%;
  display: block;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1);
}

.home:hover img { transform: rotate(90deg); }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, calc(103 * var(--u)), 128px);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.menu a {
  position: relative;
  display: block;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
}

.menu a:hover::after,
.menu a:focus-visible::after,
.menu a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Title: the still, then the film in its place ---------- */
/* Same behaviour as the home page: pinned, squashing flat as the page scrolls */
.title {
  position: fixed;
  top: calc(110 * var(--v));
  left: 0;
  right: 0;
  height: calc(879 * var(--v));
  z-index: 0;
  margin: 0;
  font-weight: 400;
  pointer-events: none;
}

.title-squash {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 0;
  will-change: transform;
}

.title img,
.film {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film {
  background: #2a020a;
  visibility: hidden;
}

.has-film .film { visibility: visible; }
.has-film .title img { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .has-film .film { animation: letterbox 560ms cubic-bezier(.7, 0, .2, 1) both; }
  .has-film .title img { transition: visibility 0s 560ms; }

  @keyframes letterbox {
    from { clip-path: inset(50% 0 50% 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

.title-button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding: 0 0 max(24px, calc(32 * var(--u))) var(--gutter);
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  text-shadow: var(--shadow);
  cursor: pointer;
  pointer-events: auto;
}

.title-button:focus-visible { outline-offset: -8px; }

/* a thin timeline along the bottom edge: an 8 minute film wants skipping around in */
.film-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  visibility: hidden;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

.has-film .film-bar { visibility: visible; }

.film-bar::before,
.film-bar i {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  transition: height 150ms ease-out;
}

.film-bar::before { right: 0; background: rgba(255, 255, 255, 0.3); }

.film-bar i {
  width: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: 0 0;
}

.film-bar:hover::before,
.film-bar:hover i { height: 8px; }

.hero-space { height: calc(989 * var(--v)); }

/* ---------- Name and facts ---------- */
.facts {
  position: relative;
  z-index: 2;
  padding: calc(27 * var(--v)) max(16px, calc(29 * var(--u))) 0;
}

.fact-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  width: min(calc(1845 * var(--u)), 100%);
  margin: 0;
  padding: calc(60 * var(--u)) 0;
}

.fact-row dt {
  font-family: "Tangerine", "Snell Roundhand", cursive;
  font-size: var(--script-size);
  line-height: calc(var(--display-size) * var(--display-line));
}

.fact-row dd { margin: 0; }

/* ---------- Story: paragraphs dock, images squeeze each other away ---------- */
/* The stage pins to the screen while the script moves everything inside it:
   each image rises until it pins under the navbar, flattening the one before
   it the way the title flattens, while its paragraph docks under the last one.
   When the last image has pinned, the stage lets go and leaves as one. */
.story {
  position: relative;
  z-index: 1;
  margin-top: calc(-103 * var(--u));
}

.stage {
  --story-left: max(16px, calc(29 * var(--u)));
  --story-image-w: calc(936 * var(--u));
  position: sticky;
  top: 0;
  height: var(--fh);
  overflow: hidden;
}

.story-image,
.story-text {
  position: absolute;
  top: 0;
  will-change: transform;
}

.story-image {
  right: 0;
  display: block;
  width: var(--story-image-w);
  height: calc(527 * var(--u));
  object-fit: cover;
  transform-origin: 50% 0;
}

.story-text {
  z-index: 1;
  left: var(--story-left);
  /* the Figma width, narrowing so it always stays 20px clear of the image */
  width: min(calc(915 * var(--u)), calc(100% - var(--story-left) - var(--story-image-w) - 20px));
  /* lifts the first line so the top of its capitals meets the image's top edge */
  margin-top: -0.4375em;
}

.story-text a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* a title with no film has nothing to click; a drawing sits whole in its box */
.no-film .title-button,
.no-film .film-bar { display: none; }
.is-drawing img { box-sizing: border-box; padding: calc(90 * var(--v)) 0; object-fit: contain; }
/* the clip's width and height swap once it is turned */
.story-turn {
  container-type: size;
  overflow: hidden;
}

.story-turn video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(var(--turn));
}

/* ---------- Way out ---------- */
.outro {
  position: relative;
  z-index: 2;
  padding: calc(230 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  font-size: var(--list-size);
  line-height: var(--list-row);
}

/* Rebond capitals that turn to Ballet on hover without changing their box,
   exactly like the project names */
.word {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  text-shadow: var(--shadow);
}

.word::after {
  content: attr(data-title);
  content: attr(data-title) / "";
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  font-family: "Ballet", "Tangerine", cursive;
  font-size: 1.7em;
  font-optical-sizing: auto;
  text-transform: none;
  color: var(--white);
  text-shadow: var(--shadow);
  pointer-events: none;
  visibility: hidden;
}

.word:hover,
.word:focus-visible { color: transparent; text-shadow: none; }

.word:hover::after,
.word:focus-visible::after { visibility: visible; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: exclusion;
  opacity: 0;
  transition: opacity 150ms linear;
}

.cursor.is-visible { opacity: 1; }

.cursor svg {
  position: absolute;
  left: -15.5px;
  top: -14px;
  display: block;
  width: 30px;
  height: 30px;
}

.cursor-hint {
  position: absolute;
  left: 15px;
  top: -8px;
  font-size: clamp(18px, calc(36 * var(--u)), 40px);
  line-height: calc(52 / 36);
  white-space: nowrap;
  color: var(--white);
  opacity: 0;
  transition: opacity 150ms linear;
}

.cursor.has-hint .cursor-hint { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor * { cursor: none !important; }
}

/* ---------- Small and portrait screens ---------- */
@media (max-width: 560px) {
  .menu { font-size: 13px; gap: 14px; }
}

/* Phones: the images fill the width with the text under them. The next image
   pushes the text up, and the text squashes its own image against the navbar. */
@media (max-width: 760px) {
  .fact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    padding: 32px 0;
  }
  .story { margin-top: 0; }
  .story-image {
    width: 100%;
    height: 56.25vw;
  }
  .story-text {
    right: 16px;
    width: auto;
    margin-top: 0;
  }
  .outro { padding: 96px 16px 24px; }
}

@media (max-aspect-ratio: 1/1) {
  .title {
    --free: calc(var(--fh) - var(--bar) - 24px - var(--display-size) * 1.625);
    --title-h: min(calc(var(--free) - 48px), 120vw);
    top: calc(var(--bar) + (var(--free) - var(--title-h)) / 2);
    height: var(--title-h);
  }
  .hero-space {
    height: calc(var(--fh) - 24px - var(--display-size) * 1.625);
  }
}