/* The heading that opens: three tall sections; in each one a heading in two halves fills the screen, then the halves
   shrink and move apart and a paragraph opens between them. The headings fit the width with CSS alone. */
:root {
  --night: #10132e;
  --amber: #ffb81c;
  --cream: #fff3da;
  --sky: #9ad6ff;
  /* the side margin of the stages */
  --pad: 32px;
}

@media (min-width: 62em) {
  :root {
    --pad: 70px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: 'Newsreader Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: clamp(18px, 3.4vh, 30px) var(--pad);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.brand {
  margin: 0;
  font-size: 17px;
  font-weight: 720;
  font-stretch: 112%;
  letter-spacing: -0.02em;
}

.top__line {
  margin: 0;
  color: rgba(255, 243, 218, 0.62);
  font-size: 13px;
}

/* ------------------------------------------------------------------ fit to width, with CSS alone
   The hidden copy (.fit__ref) keeps the text at 16px and takes its own width; the box next to it takes the rest.
   A registered length turns 100cqi into pixels where it is written: in the box it is the whole line, in the display
   it is the box, that is the line minus the text. Line / (line − box) = line / text: tan(atan2(a, b)) = a / b is the
   one way CSS has to divide a length by a length. */
@property --fit-captured {
  syntax: '<length>';
  initial-value: 0px;
  inherits: true;
}

.fit {
  --fit-captured: initial;
  display: flex;
  margin: 0;
  container-type: inline-size;
  font-size: 16px;
  white-space: nowrap;
}

.fit__ref {
  visibility: hidden;
}

.fit__box {
  --fit-captured: 100cqi;
  --fit-space: var(--fit-captured);
  flex-grow: 1;
  container-type: inline-size;
}

.fit__display {
  --fit-captured: 100cqi;
  --fit-ratio: tan(atan2(var(--fit-space), var(--fit-space) - var(--fit-captured)));
  display: block;
  inline-size: var(--fit-space);
  font-size: clamp(1em, 1em * var(--fit-ratio), var(--fit-max, 1000px));
  text-align: center;
}

/* ------------------------------------------------------------------ the split sections */
.split {
  --bg: var(--night);
  --fg: var(--amber);
  --text: var(--cream);
  position: relative;
  height: 300vh;
  background: var(--bg);
}

.split--amber {
  --bg: var(--amber);
  --fg: var(--night);
  --text: var(--night);
}

.split--sky {
  --bg: var(--sky);
  --fg: var(--night);
  --text: var(--night);
}

.split__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: clip;
  background: var(--bg);
}

/* two equal halves: the top heading sits on the middle line from above, the bottom one from below */
.split__grid {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
  padding-inline: var(--pad);
}

.split__half {
  display: flex;
  justify-content: center;
  min-height: 0;
  container-type: size;
  z-index: 2;
}

.split__half--top {
  align-items: flex-end;
}

.split__half--bottom {
  align-items: flex-start;
}

.split__title {
  width: 100%;
  color: var(--fg);
  font-family: 'Big Shoulders Variable', 'Arial Narrow', sans-serif;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* never taller than the half it sits in (cqh = the half, the nearest container with a height) */
  --fit-max: 100cqh;
  will-change: transform;
}

.split__text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(620px, calc(80% - 2 * var(--pad)));
  margin: 0;
  translate: -50% -50%;
  color: var(--text);
  font-size: 22px;
  line-height: 1.3;
  text-wrap: pretty;
  pointer-events: none;
}

.split__hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  translate: -50% 0;
  color: rgba(255, 243, 218, 0.7);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 560;
}

.split__hint::after {
  content: '';
  width: 1px;
  height: 26px;
  background: currentColor;
  transform-origin: 50% 0;
  animation: hint 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes hint {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
    transform-origin: 50% 0;
  }
  50.1% {
    transform-origin: 50% 100%;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }
}

@media (max-width: 62em) {
  .split__text {
    width: calc(100% - 2 * var(--pad));
    font-size: 18px;
    text-align: center;
  }
}

.outro {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: 80px var(--pad);
  background: var(--night);
}

.outro__text {
  max-width: 24ch;
  margin: 0;
  color: var(--cream);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.2;
  text-align: center;
}

/* with reduced motion the sections are one screen each, already open */
@media (prefers-reduced-motion: reduce) {
  .split {
    height: auto;
  }

  .split__stage {
    position: relative;
  }

  .split__hint::after {
    animation: none;
  }
}