/*
 * pod8 opening intro: "one line, one breath".
 * A black splash; the d8 mark draws itself as one line filled with a calm sea:
 *   1. From the d's terminal, round the d's bowl and up the S to the 8's waist.
 *   2. On round the bottom loop, then down under the S and back up out of the gap.
 *   3. Up the d's stem and round the top loop, easing to rest as it closes at the waist.
 *   4. The finished mark breathes slowly until the splash dissolves.
 * Timeline (ms): bowl 200–1617 · bottom loop 1612–2203 · under the S ~2180–2380 ·
 *                stem 2374–2554 · top loop 2550–3895 · breath from 3700 ·
 *                mark fade 5050–5450 · splash fade 5300–5800
 * The splash and mark animate only transform and opacity, so the browser can run
 * the breath and fades off the main thread.
 */
.pod8-intro {
  display: none;
}

.pod8-intro-active {
  overflow: hidden;
  background: #000;
}

.pod8-intro-active .pod8-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: #000;
  cursor: default;
  contain: strict;
  animation: pod8-intro-out 500ms cubic-bezier(0.4, 0, 0.6, 1) 5300ms both;
}

/* The 1100 × 1000 stage fits the screen inside a margin, up to 1000px tall. */
.pod8-intro__mark {
  --pod8-vh: 100vh;
  --pod8-margin: clamp(16px, 8vw, 160px);
  --pod8-size: min(var(--pod8-vh) - 2 * var(--pod8-margin), (100vw - 2 * var(--pod8-margin)) * 10 / 11, 1000px);

  display: block;
  width: calc(var(--pod8-size) * 1.1);
  height: var(--pod8-size);
  /* The centre of the mark, so it breathes in place. */
  transform-origin: 50.32% 49.9%;
  animation:
    pod8-intro-breathe 1900ms linear 3700ms infinite,
    pod8-intro-fade 400ms cubic-bezier(0.4, 0, 0.6, 1) 5050ms forwards;
}

@supports (height: 100dvh) {
  .pod8-intro__mark {
    --pod8-vh: 100dvh;
  }
}

@media (max-aspect-ratio: 1 / 1) {
  .pod8-intro__mark {
    --pod8-margin: 16px;
  }
}

/* Each path has pathLength="1" and a 1.01 dash, so its drawn length equals the animation's
   progress. The four timings are cut from one motion (gather pace, cruise at 1.2 units/ms,
   ease to rest), so the speed never jumps where one path hands over to the next. Exact
   decimal milliseconds matter: rounding them shows as a blip in the line's speed. */
.pod8-intro__bowl {
  animation: pod8-intro-draw 1417ms cubic-bezier(0.25, 0, 0.23, 0.007) 200ms both;
}

.pod8-intro__bottom {
  animation: pod8-intro-draw 591ms linear 1612ms both;
}

.pod8-intro__stem {
  animation: pod8-intro-draw 180.4ms cubic-bezier(0.343, 0.36, 0.677, 0.693) 2373.6ms both;
}

.pod8-intro__top {
  animation: pod8-intro-draw 1344.7ms cubic-bezier(0.512, 0.987, 0.838, 1) 2550.3ms both;
}

@keyframes pod8-intro-draw {
  from {
    stroke-dashoffset: 1.01;
  }

  to {
    stroke-dashoffset: 0.01;
  }
}

/* In over 850ms, out over 1050ms; it starts and ends at rest, so it loops seamlessly. */
@keyframes pod8-intro-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  44.7% {
    transform: scale(1.03);
  }
}

@keyframes pod8-intro-fade {
  to {
    opacity: 0;
  }
}

@keyframes pod8-intro-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Reduced motion: show the finished mark, still, for a moment, then dissolve. */
@media (prefers-reduced-motion: reduce) {
  .pod8-intro-active .pod8-intro {
    animation: pod8-intro-out 300ms linear 1000ms both;
  }

  .pod8-intro-active .pod8-intro * {
    animation: none;
  }
}