/* ohmooba.com: five full-screen pages, shared by index.html and 404.html.
   1 hero (wordmark, statement, who we are, the egg) / 2 Now building / 3 Also exploring / 4 What the egg means / 5 Contact.
   Every page aligns to the same left edge. Type is Inter only; colour comes from the brand marks. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #15171c;       /* 17.9:1 on white */
  --ink-soft: #3a3f48;  /* 10.6:1 on white */
  --muted: #585e69;     /* 6.5:1 on white */
  --ring: #8a909b;      /* 3.2:1 on white: outlines of controls only, never text */
  --navy: #0b1a8c;      /* the egg's navy, 13.9:1 on white */
  --red: #e13a2c;       /* 4.3:1 on white: never small text */

  --gutter: clamp(1.25rem, 0.5rem + 4vw, 5rem);
  --frame: min(100% - 2 * var(--gutter), 72rem);
  --size-statement: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Each page is a screen: a scroll comes to rest on the next one. Only where a page fits the window
   (in em, so it follows the reader's text size), never on the 404, never when reduced motion is asked for. */
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 40em) {
  html:has(.pages) {
    scroll-snap-type: y mandatory;
  }
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  timeline-scope: --panel-1, --panel-2, --panel-3, --panel-4, --panel-5;
}

h1,
h2,
h3,
p,
ul,
address {
  margin: 0;
  padding: 0;
  font: inherit;
}

ul {
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: #ffbb1d;
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus and skip link */

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 4px;
}

.skip {
  position: fixed;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 20;
  max-width: calc(100% - 0.75rem);
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transform: translateY(calc(-100% - 1rem));
}

.skip:focus,
.skip:focus-visible {
  transform: none;
  outline: 3px solid var(--navy);
  outline-offset: 0;
}

/* Pages */

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  display: grid;
  align-content: center;
  padding-block: clamp(5.5rem, 14vh, 9rem) clamp(3.5rem, 10vh, 7rem);
}

#top { view-timeline: --panel-1 block; }
#pamojah { view-timeline: --panel-2 block; }
#exploring { view-timeline: --panel-3 block; }
#egg { view-timeline: --panel-4 block; }
#contact { view-timeline: --panel-5 block; }

/* One frame and one left edge for every page */
.frame {
  width: var(--frame);
  margin-inline: auto;
}

/* Small tracked labels: "NOW BUILDING", "ALSO EXPLORING", "CONTACT" */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 1. Hero */

.masthead {
  position: absolute;
  top: clamp(1.25rem, 3.5vh, 2.25rem);
  right: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem 2rem;
  width: var(--frame);
  margin-inline: auto;
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.masthead__nav a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.masthead__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

/* Phones: the same three links, a little closer together. Below 20em (the narrowest phones, or very large
   text) they would wrap down into the wordmark, so there they step aside; a swipe moves between pages anyway. */
@media (max-width: 29.99em) {
  .masthead__nav {
    column-gap: 1.25rem;
  }
}

@media (max-width: 19.99em) {
  .masthead__nav {
    display: none;
  }
}

/* The egg sits behind the hero as a quiet backdrop: the kit's mono mark at low opacity, always whole on the
   first screen, never animated, and kept clear of the wordmark, headline, paragraph and links. Decorative only. */
.hero {
  overflow: clip;
}

.hero__backdrop {
  /* Phones, tablets and small laptops: low on the first screen, to the right. */
  --egg-h: min(46svh, 84vw);
  position: absolute;
  top: calc(100svh - var(--egg-h) / 2 - max(1.5rem, 4svh));
  right: 5vw;
  z-index: 0;
  width: auto;
  max-width: none;
  height: var(--egg-h);
  opacity: 0.1;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

/* Wide screens: the whole egg on the right, clear of the page marks and the links, and sized so it never
   reaches the text column (the wordmark, at most 40rem wide, is its widest line). */
@media (min-width: 75em) {
  .hero__backdrop {
    --text: 40rem;
    --egg-h: max(0px, min(100svh - 9rem, 60rem, 1.1 * (100vw - max(var(--gutter), 4.5rem) - max(var(--gutter), 50vw - 36rem) - var(--text) - 3rem)));
    top: min(52%, 100svh - var(--egg-h) / 2 - 2rem);
    right: max(var(--gutter), 4.5rem);
    opacity: 0.12;
  }
}

.hero > :not(.hero__backdrop) {
  position: relative;
  z-index: 1;
}

.masthead.masthead {
  position: absolute;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.hero__text {
  container-type: inline-size;
}

.hero__wordmark {
  /* On short screens (landscape phones, small windows) the name scales with the height too. */
  width: min(100%, 40rem, 90svh);
  margin-bottom: clamp(1.75rem, 4.5vh, 3rem);
}

.logo {
  width: 100%;
}

/* On small screens the master's fine outlines thin out; draw them a little heavier there. */
@media (max-width: 47.99em) {
  .logo .line {
    stroke-width: 5.5;
  }
}

.hero__title {
  /* Two phrases, "Technology" and "built with care.". The size is capped so the longer phrase fits the column
     (6.2em) and the headline is never wider than the wordmark. It goes up to twice the paragraph size where
     there is room; where that floor wins it grows only to the width of its longest word (5.05em) and "care."
     takes a third line. From 64em the two phrases share one line when it fits, and otherwise break only
     between them. */
  --room: 100cqi;
  font-size: min(clamp(2rem, 1.5rem + 2vw, 3.75rem), min(40rem, 90svh) / 6.2, max(var(--room) / 6.2, min(calc(2 * var(--size-statement)), var(--room) / 5.05)));
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.032em;
  overflow-wrap: break-word;
}

.hero__title span {
  display: block;
}

/* Optical alignment: pull each line's first letter onto the shared left edge. */
.hero__title span:first-child {
  margin-left: -0.02em;
}

.hero__title span:last-child {
  margin-left: -0.055em;
}

.hero__lede {
  max-width: min(28em, 40rem);
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  color: var(--ink-soft);
  font-size: var(--size-statement);
  line-height: 1.5;
  text-wrap: pretty;
}

/* "Pamojah" in the paragraph links to pamojah.com: the same underline as the email link (and the 404's),
   red, a little below the text, and the text's own colour on hover. */
.hero__link {
  text-decoration-thickness: max(1px, 0.035em);
  text-underline-offset: 0.16em;
  text-decoration-color: var(--red);
}

.hero__link:hover {
  text-decoration-color: currentColor;
}

.hero__text {
  max-width: 40rem;
}

/* From 64em the two phrases can share one line when there is room, never leaving "care." alone. */
@media (min-width: 64em) {
  .hero__title {
    max-width: min(40rem, 90svh);
  }

  /* Each phrase stays whole, so the only possible break is between them. */
  .hero__title span {
    display: inline-block;
  }

  .hero__title span:last-child {
    margin-left: 0;
  }
}

@media (min-width: 56em) {
  .hero__next {
    display: block;
  }
}

/* 2. Now building */

.project__name {
  position: relative;
  width: min(100% - 1.5rem, clamp(14rem, 8rem + 18vw, 30rem));
  margin-top: clamp(2rem, 5vh, 3.25rem);
}

.project__name img {
  width: 100%;
}

/* The logo links to pamojah.com. A block, so the focus ring is drawn around the logo itself. */
.project__link {
  display: block;
}

/* The trade mark hangs just outside the logo's top right corner. */
.project__tm {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 0.25em;
  font-size: 0.875rem;
  line-height: 1;
}

.project__line {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  /* The line now wraps on every screen; balanced lines avoid "creators." sitting alone. */
  text-wrap: balance;
}

/* The one-liner, between the tagline and the status. Same voice as the hero's lede. */
.project__blurb {
  max-width: 28em;
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: var(--size-statement);
  line-height: 1.5;
  text-wrap: pretty;
}

.project__status {
  margin-top: 0.75rem;
  color: var(--muted);
}

/* Wide screens: page 2 mirrors the hero, words on the left and the Pamojah logo large on the right. */
@media (min-width: 56em) {
  .project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-content: center;
  }

  .project > .label { grid-column: 1; grid-row: 1; }
  .project > .project__line { grid-column: 1; grid-row: 2; }
  .project > .project__blurb { grid-column: 1; grid-row: 3; }
  .project > .project__status { grid-column: 1; grid-row: 4; }

  .project__art {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    justify-self: end;
  }

  .project__art .project__name {
    width: min(100% - 1.5rem, clamp(16rem, 6rem + 22vw, 32rem));
    margin-top: 0;
    margin-inline: auto 0.75rem;
  }
}

/* 3. Also exploring: phones get a short list (icon beside name); from 30em, three columns. */

.areas {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 1.25rem;
  margin-top: clamp(2rem, 5vh, 3.25rem);
}

/* The rows share the list's two columns, so every icon gets the same width at any text size. */
.areas li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  grid-template-columns: subgrid;
  align-items: center;
}

.icon {
  width: 3.5rem;
}

.areas span {
  font-size: var(--size-statement);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

@media (min-width: 30em) {
  .areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
  }

  .areas li {
    grid-column: auto;
    grid-template-columns: none;
    align-content: start;
    justify-items: start;
    gap: 1.25rem;
  }

  .icon {
    width: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  }
}

/* 4. What the egg means: the four larger circles (and the words beside the egg) open a card with their idea.
   Built on the browser's own popover feature, so it needs no JavaScript; Esc or a click elsewhere closes it. */

.meaning {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.meaning__text {
  container-type: inline-size;
}

/* The mission, above the four words. Same voice as the hero's lede, one size down. */
.meaning__intro {
  max-width: 28em;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  color: var(--ink-soft);
  line-height: 1.5;
  text-wrap: pretty;
}

.meaning__words {
  display: grid;
  gap: 0.25rem;
  margin-top: clamp(1.25rem, 3.5vh, 2.25rem);
}

.meaning__words button {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  /* Never wider than the column: "Togetherness", the longest word, is about 6em. */
  font-size: min(clamp(1.75rem, 1rem + 2.6vw, 3.25rem), 100cqi / 6.2);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: max(1px, 0.035em);
  text-underline-offset: 0.16em;
}

.meaning__words button:hover {
  text-decoration-color: var(--red);
}

.meaning__hint {
  margin-top: 1.25rem;
  color: var(--muted);
  anchor-name: --m-hint;
}

.meaning__art {
  position: relative;
  justify-self: center;
  width: min(100%, 17rem);
  anchor-name: --m-art;
}

.meaning__art img {
  width: 100%;
}

/* Where pages snap in the single-column layout, the egg page must fit the window: the egg takes whatever
   height is left after the padding, the label, the four words and the hint (never below 11rem, where the
   circle buttons would start to overlap). */
@media screen and (prefers-reduced-motion: no-preference) and (min-height: 40em) and (max-width: 55.99em) {
  .meaning__art {
    width: min(100%, 17rem, max(11rem, (100svh - clamp(5.5rem, 14vh, 9rem) - clamp(3.5rem, 10vh, 7rem) - clamp(1.75rem, 4.5vh, 3rem) - clamp(2rem, 5vw, 5rem) - 7rem - 4.6 * clamp(1.75rem, 1rem + 2.6vw, 3.25rem)) / 1.1));
  }
}

/* Each button sits exactly over its circle (positions from the SVG's own coordinates) and is at least
   44px across so it is easy to tap. */
.meaning__dot {
  --d: 12%;
  position: absolute;
  width: max(min(2.75rem, 20%), var(--d));
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 2px rgb(11 26 140 / 0.18);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.meaning__dot:hover,
.meaning__dot:focus-visible {
  box-shadow: 0 0 0 3px rgb(11 26 140 / 0.55);
}

.meaning__dot--creation { left: 50%; top: 61.4%; --d: 19%; anchor-name: --m-creation; }
.meaning__dot--growth { left: 70.75%; top: 75.06%; --d: 15%; anchor-name: --m-growth; }
.meaning__dot--story { left: 60.19%; top: 32.84%; --d: 17%; anchor-name: --m-story; }
.meaning__dot--together { left: 9.75%; top: 61.36%; --d: 20%; anchor-name: --m-together; }

/* While a card is open, its circle and its word stay highlighted. */
#egg:has(#m-creation:popover-open) .meaning__dot--creation,
#egg:has(#m-growth:popover-open) .meaning__dot--growth,
#egg:has(#m-story:popover-open) .meaning__dot--story,
#egg:has(#m-together:popover-open) .meaning__dot--together {
  box-shadow: 0 0 0 3px var(--red);
}

#egg:has(#m-creation:popover-open) [popovertarget="m-creation"],
#egg:has(#m-growth:popover-open) [popovertarget="m-growth"],
#egg:has(#m-story:popover-open) [popovertarget="m-story"],
#egg:has(#m-together:popover-open) [popovertarget="m-together"] {
  text-decoration-color: var(--red);
}

.meaning__card {
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 1.25rem 1.5rem 1.375rem;
  border: 1px solid #e3e5e9;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 50px rgb(21 23 28 / 0.14);
}

.meaning__card h3 {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.meaning__card p {
  margin-top: 0.5rem;
  font-size: var(--size-statement);
  line-height: 1.35;
}

.meaning__card::backdrop {
  background: transparent;
}

/* Where the browser can anchor a card, it opens beside its own circle on wide screens, on the side where it
   covers no other circle; on phones (where a card is wider than the egg) it opens just above the egg.
   Browsers without anchoring open it centred. */
@supports (position-area: top) {
  .meaning__card {
    position-anchor: --m-art;
    position-area: top;
    margin: 0 0 0.75rem;
    position-try-fallbacks: flip-block, --egg-left, --egg-right;
  }

  @position-try --egg-left { position-anchor: --m-art; position-area: left; margin: 0.75rem; }
  @position-try --egg-right { position-anchor: --m-art; position-area: right; margin: 0.75rem; }

  @media (min-width: 56em) {
    .meaning__card {
      margin: 0.75rem;
    }

    .meaning__card--together {
      max-width: min(20rem, max(12rem, 25vw - 2.5rem));
      position-anchor: --m-together;
      position-area: left;
      position-try-fallbacks: bottom span-right, top span-right;
    }

    .meaning__card--story {
      position-anchor: --m-story;
      position-area: left;
      position-try-fallbacks: top, bottom span-left;
    }

    .meaning__card--growth {
      position-anchor: --m-growth;
      position-area: bottom;
      position-try-fallbacks: bottom span-left, left span-bottom, --egg-left, top span-left;
    }

    .meaning__card--creation {
      position-anchor: --m-creation;
      position-area: bottom left;
      position-try-fallbacks: bottom span-left, top left;
    }

    /* Very short wide windows (landscape phones): the egg is too small for a card beside one circle to miss
       the others, so every card opens beside the egg as a whole. */
    @media (max-height: 33.99em) {
      .meaning__card,
      .meaning__card--creation,
      .meaning__card--growth,
      .meaning__card--story,
      .meaning__card--together {
        position-anchor: --m-art;
        position-area: left;
        position-try-fallbacks: --egg-right, top, bottom;
      }
    }
  }
}

@media (min-width: 56em) {
  .meaning {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .meaning__art {
    justify-self: end;
    width: min(100%, 30rem, 62svh);
  }
}

/* 5. Contact */

.contact {
  grid-template-rows: 1fr auto;
  padding-bottom: 2rem;
  font-style: normal;
}

.contact__main {
  align-self: center;
}

.contact__email {
  margin-top: clamp(2rem, 5vh, 3.25rem);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.contact__email a {
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, 0.035em);
  text-underline-offset: 0.16em;
  text-decoration-color: var(--red);
  /* At very large text on narrow screens the address breaks after the @ and, only if it must, before the .com. */
  overflow-wrap: anywhere;
}

.contact__email a:hover {
  text-decoration-color: currentColor;
}


.contact__place {
  margin-top: 1rem;
  color: var(--muted);
}

.legal {
  align-self: end;
  padding-top: 3rem;
  color: var(--muted);
  font-size: 0.8125rem;
  text-wrap: pretty;
}

/* Page marks: five small rings on the right; the one for the page in view fills in. */

.pages {
  position: fixed;
  top: 50%;
  right: max(0.25rem, calc(var(--gutter) / 2 - 1rem));
  z-index: 10;
  display: grid;
  transform: translateY(-50%);
}

.pages a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
}

.pages a::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid var(--ring);
  border-radius: 50%;
}

.pages a:hover::before {
  border-color: var(--ink);
}

.pages a:focus-visible {
  outline-offset: -3px;
}

/* Phones: a swipe already moves page by page, and the marks would sit on top of the content. */
@media (max-width: 47.99em) {
  .pages {
    display: none;
  }
}

/* 404 */

.missing .hero__title {
  margin-left: -0.065em;
}

.missing .hero__next {
  width: fit-content;
  margin-top: 1rem;
  color: var(--ink);
  text-decoration-thickness: max(1px, 0.035em);
  text-underline-offset: 0.16em;
  text-decoration-color: var(--red);
}

@media (max-width: 55.99em) {
  .missing .hero__next {
    display: block;
  }
}

/* Motion. Everything above is the finished, static page; the rest only adds movement, only when the
   visitor has not asked for less of it, and never for longer than a few seconds. */

@media (prefers-reduced-motion: no-preference) {
  /* The wordmark draws itself once on arrival: outlines first, then the solid halves fill in. */
  .logo .line > * {
    animation: draw 1.1s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s) backwards;
  }

  .logo .solid {
    animation: fill-in 0.7s ease-out calc(var(--d, 0s) + 0.75s) both;
  }

  .logo > g:nth-of-type(2) { --d: 0.06s; }
  .logo > g:nth-of-type(3) { --d: 0.12s; }
  .logo > g:nth-of-type(4) { --d: 0.18s; }
  .logo > g:nth-of-type(5) { --d: 0.24s; }
  .logo > g:nth-of-type(6) { --d: 0.30s; }
  .logo > g:nth-of-type(7) { --d: 0.36s; }

  .masthead__nav a,
  .hero__link,
  .contact__email a,
  .meaning__words button {
    transition: text-decoration-color 0.2s ease;
  }

  .meaning__dot {
    transition: box-shadow 0.2s ease;
  }

  .meaning__card {
    transition: opacity 0.22s ease, transform 0.22s ease, overlay 0.22s allow-discrete, display 0.22s allow-discrete;
  }

  @starting-style {
    .meaning__card:popover-open {
      opacity: 0;
      transform: translateY(0.375rem);
    }
  }

  /* Scroll-driven: the page marks fill in for the page in view. */
  @supports (animation-timeline: view()) and (animation-range: entry 0% cover 50%) {
    .pages a:nth-child(1)::before { animation: mark linear both; animation-timeline: --panel-1; animation-range: cover 30% cover 70%; }
    .pages a:nth-child(2)::before { animation: mark linear both; animation-timeline: --panel-2; animation-range: cover 30% cover 70%; }
    .pages a:nth-child(3)::before { animation: mark linear both; animation-timeline: --panel-3; animation-range: cover 30% cover 70%; }
    .pages a:nth-child(4)::before { animation: mark linear both; animation-timeline: --panel-4; animation-range: cover 30% cover 70%; }
    .pages a:nth-child(5)::before { animation: mark linear both; animation-timeline: --panel-5; animation-range: cover 30% cover 70%; }
  }
}

/* Scroll-driven arrival: each page's content arrives as its page comes into view. It runs only where pages
   snap (same height condition as the snapping above), because the ranges end exactly when a page comes to
   rest; on windows that scroll freely a visitor could stop part-way, so there the content is simply shown. */
@media (prefers-reduced-motion: no-preference) and (min-height: 40em) {
  @supports (animation-timeline: view()) and (animation-range: entry 0% cover 50%) {
    .arrive {
      animation: rise linear both;
      animation-range: entry 20% entry 90%;
    }

    #pamojah .arrive { animation-timeline: --panel-2; }
    #exploring .arrive { animation-timeline: --panel-3; }
    #egg .arrive { animation-timeline: --panel-4; }
    #contact .arrive { animation-timeline: --panel-5; }

    .icon .line > * {
      animation: draw linear backwards;
      animation-timeline: --panel-3;
      animation-range: entry 30% entry 85%;
    }

    .icon .solid {
      animation: fill-in linear both;
      animation-timeline: --panel-3;
      animation-range: entry 65% entry 95%;
    }
  }
}

/* Needs pathLength="1" on each drawn element. The dash only exists while drawing (fill mode "backwards"),
   and the stroke is transparent at the very start so no specks show before a line begins. */
@keyframes draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-opacity: 0; }
  1% { stroke-opacity: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@keyframes fill-in {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}

@keyframes mark {
  0%, 100% { background: transparent; }
  15%, 85% { background: var(--ink); border-color: var(--ink); }
}

@media print {
  .skip,
  .pages,
  .masthead__nav {
    display: none;
  }

  /* Always print the finished page, whatever point the motion has reached on screen. */
  .logo .line > *,
  .icon .line > * {
    stroke-dasharray: none !important;
    stroke-opacity: 1 !important;
  }

  .logo .solid,
  .icon .solid {
    fill-opacity: 1 !important;
  }

  .arrive {
    opacity: 1 !important;
    transform: none !important;
  }

  /* On paper, show every idea under the egg instead of the clickable circles. */
  .meaning__dot,
  .meaning__hint {
    display: none;
  }

  .meaning__card {
    display: block;
    position: static;
    max-width: none;
    margin: 0.25rem 0 1rem;
    padding: 0;
    border: 0;
    overflow: visible;
    box-shadow: none;
    break-inside: avoid;
  }

  .meaning__card h3 {
    display: none;
  }

  #egg {
    padding-block: 0;
  }
}

/* Browsers without popovers show each idea as a line under its word, and the circles are plain drawing. */
@supports not selector(:popover-open) {
  .meaning__dot,
  .meaning__hint,
  .meaning__card h3 {
    display: none;
  }

  .meaning__card {
    position: static;
    max-width: none;
    margin: 0.25rem 0 1rem;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}