/* Keep normal document navigation, including browser Back and Forward. */
@view-transition {
  navigation: auto;
}

::view-transition {
  background: #fff;
}

::view-transition-group(root) {
  animation-duration: 720ms;
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root),
::view-transition-new(root) {
  /* The two staggered grids match the background dots on every page. */
  --transition-dot: 4.6px;
  mask-image:
    radial-gradient(circle, #000 calc(var(--transition-dot) - .2px), transparent var(--transition-dot)),
    radial-gradient(circle, #000 calc(var(--transition-dot) - .2px), transparent var(--transition-dot));
  mask-size: 4.5px 7.794px;
  mask-position: 0 0, 2.25px 3.897px;
  mask-repeat: repeat;
  mix-blend-mode: plus-lighter;
  animation-duration: 720ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1), ease-in-out, ease-in-out;
  animation-fill-mode: both;
}

@property --transition-dot {
  syntax: '<length>';
  inherits: false;
  initial-value: 4.6px;
}

::view-transition-old(root) {
  animation-name: dots-depart, dots-surface, dots-tremble;
}

::view-transition-new(root) {
  animation-name: dots-arrive, dots-surface, dots-tremble;
}

/* Both pages blend for the full duration, with complementary opacity curves. */
@keyframes dots-depart {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes dots-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* One shared surface opens back up while the colours are still changing. */
@keyframes dots-surface {
  0%, 100% { --transition-dot: 4.6px; }
  35% { --transition-dot: 2.4px; }
}

/* Tiny offsets tremble in place; the image and page layout never slide. */
@keyframes dots-tremble {
  0%, 100% { mask-position: 0 0, 2.25px 3.897px; }
  12% { mask-position: .4px -.3px, 1.85px 4.197px; }
  20% { mask-position: -.45px .3px, 2.7px 3.597px; }
  28% { mask-position: .4px .3px, 1.85px 3.597px; }
  36% { mask-position: -.35px -.3px, 2.6px 4.197px; }
  44% { mask-position: .3px -.2px, 1.95px 4.097px; }
  52% { mask-position: -.2px .2px, 2.45px 3.697px; }
  64% { mask-position: .1px -.1px, 2.15px 3.997px; }
  80% { mask-position: 0 0, 2.25px 3.897px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* Hidden before first paint, including slow network/decode paths. */
.image-reveals :is(.story-header, .home h1, .story-image img, .watstreet-logo, .research-figure img, .benchmark-crop img, #scene:not(.scene-in-dialog) canvas):not(.image-revealed) { visibility: hidden; }