/* Type and carbon come from the MIRAI design system. The field is pushed to pure white for this test.
   All other colour comes from the work. */
:root {
  --carbon: #111311;
  --field: #fff;
  --quiet: #8a8a8a;
  --side: 20px;
  --display: "Archivo", Arial, sans-serif;
  --label: "Roboto Condensed", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(.76, 0, .24, 1);
}

* { box-sizing: border-box; margin: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--field);
  color: var(--carbon);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#gl { z-index: 1; touch-action: none; }
#overlay { z-index: 3; pointer-events: none; }

/* The text never moves. The plates below it do all the work. */
.line {
  position: fixed;
  z-index: 2;
  top: 62px;
  left: var(--side);
  font-size: clamp(20px, min(3.05vw, 5.2vh), 60px);
  font-weight: 440;
  line-height: 1.08;
  letter-spacing: -.04em;
  word-spacing: .05em;
  text-wrap: balance;
  pointer-events: none;
}

/* The sentence and a project's name share one spot, each on its own mask. */
.says, .name, .over { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; letter-spacing: -.04em; word-spacing: .05em; }
.says > span, .name > span, .over > span { display: block; transition: transform .9s var(--ease); }
.says > span { white-space: pre-line; }
.name { position: absolute; top: 0; left: 0; right: 0; }
.name > span { transform: translateY(110%); }
.name span span { display: block; }
.name i { display: block; font-style: normal; }
[data-state="project"] .says > span { transform: translateY(-110%); }
[data-state="project"] .name > span { transform: none; transition-delay: .35s; }

/* A wide window: the sentence runs across the block, and a hovered cover's name takes its place. */
.long .says { position: absolute; left: 0; }
.long .says > span { white-space: pre; transition-duration: .55s; }
.over { display: none; position: absolute; left: 0; }
.long .over { display: block; }
.over > span { width: max-content; white-space: pre; transform: translateY(110%); transition-duration: .55s; }
.over i { font-style: normal; }
.over.two span span, .over.two i { display: block; }
[data-state="grid"] .naming .says > span { transform: translateY(-110%); }
[data-state="grid"] .naming .over > span { transform: none; }

/* One square slot per cover, in a single row under the text, sized by main.js to the width of the
   sentence. Out of the flow, so the grid doesn't make room for what only a project shows. */
.strip {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  gap: 7px;
  margin-top: 12px;
}
.slot {
  flex: 1 1 0;
  aspect-ratio: 1;
}

/* In the white under the sentence. */
.hint {
  position: fixed;
  z-index: 4;
  opacity: 0;
  font-weight: 440;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  pointer-events: none;
}
/* The bottom of a tall window belongs to the spiral, so before the grid opens what we do sits here. */
.hint-what {
  display: block;
  margin-top: 12px;
  color: var(--quiet);
  font: 600 .72rem/1.3 var(--label);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.long .hint-what { display: none; }

.info {
  position: fixed;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
[data-state="grid"] .info { opacity: 1; transition: opacity .5s ease 2.4s; }
.info h2 {
  font-size: clamp(22px, 2.5vw, 44px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.info h2 b { font-weight: 750; }
.info-meta {
  margin-top: .8em;
  font: 600 .72rem/1.3 var(--label);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.info-default .info-meta { margin-top: 0; color: var(--quiet); }
#info-meta span { display: block; }

/* A wide window: one line on the bar, over the right group. The name itself is up in the big line.
   The bar is clear of the deck too, so here what we do stays put from the first screen on. */
.long .info { justify-content: center; padding-right: calc(var(--tool, 20px) * 5.85 + 12px); }
.long[data-state="stack"] .info { opacity: 1; }
.long .info-default:not([hidden]) { display: flex; flex-wrap: wrap; column-gap: 1.6em; }
.long .info h2 { display: none; }
.long .info-meta { margin-top: 0; white-space: nowrap; }
.long #info-meta span { display: inline; }
.long #info-meta span:first-child { display: none; }
.long #info-meta span:last-child { margin-left: 1.2em; }

/* The inspector: an editor's properties panel, holding the credits. */
.panel {
  position: fixed;
  z-index: 3;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 10px 12px 28px;
  border: 1px solid var(--accent, var(--carbon));
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.panel > * { opacity: var(--dim, 1); }
.panel::-webkit-scrollbar { display: none; }
.panel:focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; }
[data-state="project"] .panel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity .6s ease .9s, transform 1s var(--ease) .8s;
}
.panel h3 {
  margin: 14px 0 5px;
  font: 600 .66rem/1.2 var(--label);
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--accent, var(--carbon));
}
.panel h3:first-child { margin-top: 0; }
.about {
  margin-top: 14px;
  font-size: .86rem;
  font-weight: 440;
  line-height: 1.26;
  letter-spacing: -.012em;
}
.rows { font: 600 .68rem/1.3 var(--label); letter-spacing: .03em; text-transform: uppercase; }
.rows div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; padding: 2px 0; }
.rows dt { color: var(--quiet); }
.rows dd { margin: 0; text-transform: none; letter-spacing: .015em; }
.rows a { color: inherit; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.out {
  display: inline-block;
  margin-top: 16px;
  color: var(--carbon);
  font: 600 .68rem/1.3 var(--label);
  letter-spacing: .055em;
  text-transform: uppercase;
  text-underline-offset: 3px;
}

.bar {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Turned sideways, an iPhone's camera cutout sits on one of these sides. */
  padding: 0 max(var(--side), env(safe-area-inset-right)) 0 max(var(--side), env(safe-area-inset-left));
  pointer-events: none;
}

.mark {
  width: var(--mark, 46px);
  height: auto;
  overflow: visible;
  fill: var(--carbon);
}

.tools { display: flex; gap: 18px; }
.toggle[hidden] { display: none; }
.toggle {
  pointer-events: auto;
  appearance: none;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--carbon);
  font: 500 var(--tool, clamp(16px, 1.45vw, 22px))/1 var(--display);
  letter-spacing: -.03em;
  cursor: pointer;
}
@media (hover: hover) {
  .toggle:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
}
.toggle:focus-visible { outline: 1px solid var(--carbon); outline-offset: 4px; }

/* The time or the still's number, where the logo was. */
.readout {
  position: absolute;
  left: max(var(--side), env(safe-area-inset-left));
  color: #eeecee;
  font: 500 var(--tool, clamp(16px, 1.45vw, 22px))/1 var(--display);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.readout[hidden] { display: none; }

/* The full view. The picture can run to the edge, so the words take the inverse of what's under them.
   This colour comes out as exactly the carbon on the white, so nothing changes when it switches on. */
.mark { transition: opacity .25s ease; }
.bar { transition: opacity .4s ease; }
[data-full] .mark { fill: #eeecee; opacity: 0; }
[data-full="out"] .mark { opacity: 1; }
[data-full] .bar { mix-blend-mode: difference; }
[data-full] .toggle { color: #eeecee; }
[data-full] .toggle:focus-visible { outline-color: #eeecee; }
[data-full="idle"] .bar { opacity: 0; }
[data-full] .panel { transition: none; pointer-events: none; }

@media (max-width: 620px) {
  .line { top: 52px; font-size: clamp(28px, 9.5vw, 40px); }
  .bar { height: 48px; }
  .info h2 { font-size: 20px; }
  .info-meta { margin-top: .35em; font-size: .64rem; }
  .hint-what { font-size: .64rem; }
}

/* Blurring a moving picture behind the panel is about the most a phone can be asked to do. */
@media (hover: none) {
  .panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .96); }
}

@media (prefers-reduced-motion: reduce) {
  .info, .panel, .says > span, .name > span, .over > span { transition-duration: .01s; transition-delay: 0s; }
}