/*
 * Void iris — shared by the founder pages.
 * Arriving: the page opens out of the black through an expanding photon ring.
 * Leaving:  the ring closes back to a point, then we navigate.
 * Pair with /void/transition.js, loaded synchronously in <head> so the first frame is already dark.
 */

@property --iris {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@view-transition {
  navigation: auto;
}

.void-iris,
html[data-iris]::before {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  --iris: 0px;
  background:
    radial-gradient(
      circle at 50% 46%,
      transparent calc(var(--iris) - 3px),
      rgba(226, 232, 255, 0.95) var(--iris),
      rgba(120, 150, 255, 0.35) calc(var(--iris) + 6px),
      transparent calc(var(--iris) + 40px)
    ),
    radial-gradient(circle at 50% 46%, transparent var(--iris), #050505 calc(var(--iris) + 1px));
}

html[data-iris]::before {
  content: "";
}

/* Arriving from the main site dive: slower, more ceremony. */
html[data-iris="open"]::before {
  animation: void-iris-open 1500ms cubic-bezier(0.7, 0, 0.2, 1) 120ms both;
}
html[data-iris="quick"]::before {
  animation: void-iris-open 900ms cubic-bezier(0.6, 0, 0.2, 1) both;
}

.void-iris[data-mode="close"] {
  pointer-events: auto;
  animation: void-iris-close 800ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes void-iris-open {
  0% {
    --iris: 0px;
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    --iris: 150vmax;
    opacity: 0;
  }
}

@keyframes void-iris-close {
  0% {
    --iris: 90vmax;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    --iris: 0px;
    opacity: 1;
  }
}

/* Content rises in once the iris is mostly open. */
html.void-arriving [data-emerge] {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: blur(6px);
}
html.void-arriving.void-emerged [data-emerge] {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--emerge, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .void-iris,
  html[data-iris]::before {
    display: none;
  }
  html.void-arriving [data-emerge] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}