/* 210 × 297's one page: the film from the opening of the Sashiko story filling the screen, soft
   and dark under grain, the studio's mark (mark.svg) at the top left and its line in the middle,
   set heavy and narrow in Bricolage Grotesque (OFL, licence beside it in fonts/). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --color-scene: #16110f; /* the dark behind the film */
  --color-paper: #fdfcf9; /* the words */
  --text-statement: clamp(2.6rem, 5.4vw, 4.75rem); /* large and heavy: the line is the page */
  --words-measure: 16ch; /* three lines on a laptop */
  --words-measure-phone: 11ch; /* four or five on a phone */
  --mark-width: clamp(4.25rem, 6vw, 6.25rem); /* small: a signature in the corner, not a headline */
  --text-link: clamp(1.05rem, 1.4vw, 1.3rem); /* the link to Sashiko */
  --gutter: clamp(0.75rem, 2.5vw, 2rem);
  --film-opacity: 0.55; /* the film stays soft so the words read over it */
  --breath-time: 9s; /* one slow breath of the film */
  --breath-scale: 1.06;
  --grain-size: 160px;
  --grain-speed: 0.5s;
  --grain-opacity: 0.5;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--color-scene);
}

body {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

/* The whole first screen, no bar or menu: just the film and the words. */
.opening {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--gutter);
  overflow: hidden;
}

.film {
  position: absolute;
  inset: -6%;
  z-index: -2;
  width: 112%;
  height: 112%;
  object-fit: cover;
  opacity: var(--film-opacity);
  animation: breathe var(--breath-time) ease-in-out infinite alternate;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/grain.svg") 0 0 / var(--grain-size);
  mix-blend-mode: soft-light;
  opacity: var(--grain-opacity);
  animation: grain var(--grain-speed) steps(5) infinite;
  pointer-events: none;
}

/* The mark in the top left corner, over the film. */
.mark {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  width: var(--mark-width);
  height: auto;
}

/* Where the studio's work lives, quiet in the bottom left, opposite the mark. */
.links {
  position: absolute;
  bottom: var(--gutter);
  left: var(--gutter);
  font-size: var(--text-link);
  font-weight: 600;
  font-stretch: 80%;
}

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

.links a:hover,
.links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.words {
  max-width: var(--words-measure);
  margin: 0;
  font-size: var(--text-statement);
  font-weight: 600;
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 40rem) {
  .words {
    max-width: var(--words-measure-phone);
  }
}

@keyframes breathe {
  to {
    scale: var(--breath-scale);
  }
}

@keyframes grain {
  to {
    background-position: var(--grain-size) var(--grain-size);
  }
}

/* Still for people who prefer less motion: the film's own still instead of the film. */
@media (prefers-reduced-motion: reduce) {
  .film {
    display: none;
  }

  .opening::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("/media/opening-1200x900.jpg") center / cover;
    opacity: var(--film-opacity);
  }

  .grain {
    animation: none;
  }
}