:root {
  /* the exact black of the picture's sky, so it melts into the page */
  --sky: rgb(2, 2, 2);
  --bone: rgb(236, 227, 210);

  /* The picture sits dead centre, so it gets the height left after keeping the
     same room above it as the line needs below it, and never more than the width.
     svh: the height with a phone's browser bars showing, so nothing ends up under them. */
  --ratio: 2.388; /* the wide picture */
  --stretch: 100vw; /* how wide it may go */
  --text-room: clamp(120px, 17vh, 320px);
  --w: min(var(--stretch), (100svh - 2 * var(--text-room)) * var(--ratio));
  --h: calc(var(--w) / var(--ratio));
  --gap: clamp(10px, 2.2vh, 24px);
  color-scheme: dark;
}

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

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--sky);
}

body {
  /* Barlow Semi Condensed: the nearest free match to YouTube Sans, the face in the YouTube Premium wordmark */
  font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* the stage: exactly the visible screen; everything is placed from its centre */
main {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ───────── the picture ───────── */

.art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  margin: 0;
  translate: -50% -50%;
  overflow: clip; /* the picture breathes a little; keep that inside its frame */
  opacity: 0;
  animation: arrive 2.4s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s forwards;
}
.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: breathe 14s ease-in-out infinite alternate;
}

/* a soft warm bloom over each of the picture's orange stars, slowly pulsing */
.orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(9% * var(--s));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 100, 0.5), rgba(255, 140, 70, 0.14) 38%, rgba(255, 120, 60, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: pulse 5.5s ease-in-out var(--d) infinite;
}

/* ───────── the words: just under the picture ───────── */

.line {
  position: absolute;
  top: calc(50% + var(--h) / 2 + var(--gap));
  left: 50%;
  width: max-content;
  max-width: min(36ch, calc(100vw - 48px));
  margin: 0;
  translate: -50% 0;
  font-size: clamp(20px, min(2.1vw, 3.6vh), 56px); /* grows on big screens, but never past what fits under the picture */
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--bone);
  opacity: 0;
  animation: rise 1.6s cubic-bezier(0.2, 0.7, 0.1, 1) 1.1s forwards;
}

/* the full stop is a terminal's block cursor, blinking as if it's still being typed */
.end { white-space: nowrap; }
.caret {
  display: inline-block;
  width: 0.38em;
  height: 0.8em;
  margin-left: 0.1em;
  vertical-align: -0.06em;
  border-radius: 1px;
  background: rgba(236, 227, 210, 0.6);
  /* hidden until just after the line has finished arriving (it arrives 1.1s + 1.6s in), then a slow blink */
  opacity: 0;
  animation: blink 1.6s steps(1, end) 2.75s infinite;
}

/* the full stop stays in the sentence for screen readers and copy-paste, just not on screen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────── tall screens (phones, tablets upright): the close-up of the two of them ───────── */

@media (max-aspect-ratio: 6/5) {
  :root {
    --ratio: 1.469;
    /* a little wider than the screen: the sky at the sides is black anyway, and the two of them get bigger */
    --stretch: 128vw;
    --text-room: clamp(110px, 16vh, 170px);
  }
  .orb { width: calc(14% * var(--s)); left: var(--cx); top: var(--cy); }
  .line { font-size: clamp(19px, 5.2vw, 28px); }
}

/* ───────── short screens (a phone on its side, a small laptop window): one smaller line ───────── */

@media (min-aspect-ratio: 6/5) and (max-height: 560px) {
  :root {
    --text-room: 58px;
    --gap: 10px;
  }
  .line {
    max-width: calc(100vw - 48px);
    font-size: clamp(15px, 3.6vh, 19px);
  }
}

/* ───────── motion ───────── */

@keyframes arrive { to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes breathe { to { transform: scale(1.012); } }
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; scale: 0.9; }
  50% { opacity: 1; scale: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; }
  .art,
  .line,
  .caret { opacity: 1; }
}