/* Polymorphic — shared motion layer.
 * Loaded last on every page. Owns: page-to-page transitions, headline and block
 * reveals, the acquisition reticle, scroll progress, the living mark and the coda.
 * Everything here degrades to the static page: without JS nothing stays hidden,
 * and under reduced motion nothing moves. */

:root {
  --pm-ink: #e8eef5; --pm-mut: #8b929c; --pm-bg: #000;
  --pm-line: rgba(232, 238, 245, 0.58); --pm-faint: rgba(232, 238, 245, 0.12);
  --pm-spot: rgba(232, 238, 245, 0.075);
  --pm-ease: cubic-bezier(.16, 1, .3, 1);
}
[data-theme="light"] {
  --pm-ink: #111; --pm-mut: #4d4d4d; --pm-bg: #f4efe2;
  --pm-line: rgba(17, 17, 17, 0.6); --pm-faint: rgba(17, 17, 17, 0.14);
  --pm-spot: rgba(17, 17, 17, 0.06);
}

/* ---------------------------------------------------------------- page to page */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pm-leave .34s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: pm-enter .62s var(--pm-ease) both; }
::view-transition-group(pm-header) { animation-duration: .5s; }
@keyframes pm-leave { to { opacity: 0; transform: translateY(-10px); filter: blur(6px); } }
@keyframes pm-enter { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

/* ---------------------------------------------------------------- headlines */
/* hidden only until motion.js has split them, and never for more than 2.4 s */
.pm-js main :is(h1, h2):not(.pm-ready) { visibility: hidden; animation: pm-failsafe 0s 2.4s forwards; }
@keyframes pm-failsafe { to { visibility: visible; } }
.pm-w { display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em; }
.pm-wi { display: inline-block; transform: translateY(108%); opacity: 0;
  transition: transform 1.05s var(--pm-ease), opacity .7s ease;
  transition-delay: calc(var(--i, 0) * 42ms + var(--d, 0ms)); will-change: transform; }
.pm-in .pm-wi { transform: none; opacity: 1; }

/* ---------------------------------------------------------------- blocks */
.pm-rv { opacity: 0; transform: translateY(22px);
  transition: opacity .9s ease, transform 1.1s var(--pm-ease);
  transition-delay: var(--rd, 0ms); }
.pm-rv.pm-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- scroll progress */
.pm-progress { position: fixed; left: 0; top: 0; z-index: 60; height: 1px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0); background: var(--pm-line); pointer-events: none; }

/* ---------------------------------------------------------------- the reticle */
/* four brackets that fly to whatever the pointer can act on and lock around it */
.pm-reticle { position: fixed; left: 0; top: 0; z-index: 70; width: 0; height: 0;
  pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.pm-reticle.on { opacity: 1; }
.pm-reticle i { position: absolute; width: 10px; height: 10px; border: 0 solid var(--pm-ink); }
.pm-reticle i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.pm-reticle i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.pm-reticle i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.pm-reticle i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.pm-reticle b { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px;
  background: var(--pm-ink); opacity: 0; transition: opacity .2s ease; }
.pm-reticle.small b { opacity: .9; }

/* ---------------------------------------------------------------- spotlight */
.pm-spot { background-image: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px),
  var(--pm-spot), transparent 62%) !important; }

/* ---------------------------------------------------------------- the living mark */
.pm-mark { display: block; width: 100%; height: 100%; }

/* the coda: a band of the mark that closes every long page */
.pm-coda { position: relative; z-index: 2; width: min(1240px, calc(100% - 2.5rem));
  margin: clamp(3rem, 7vw, 6rem) auto 0; height: clamp(170px, 24vw, 300px); }
.pm-coda canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-coda__plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; padding: 0.9rem 1.4rem;
  font: 400 clamp(0.62rem, 1vw, 0.72rem)/1 'SuisseMono', ui-monospace, monospace;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--pm-mut); white-space: nowrap; }
.pm-coda__plate img { display: block; height: clamp(26px, 3.2vw, 40px); width: auto; }
[data-theme="light"] .pm-coda__plate img { filter: invert(1); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(pm-header) { animation: none; }
  .pm-js main :is(h1, h2):not(.pm-ready) { visibility: visible; animation: none; }
  .pm-wi, .pm-rv { transform: none !important; opacity: 1 !important; transition: none !important; }
  .pm-reticle, .pm-progress { display: none; }
}
@media (hover: none), (pointer: coarse) { .pm-reticle { display: none; } }