:root {
  --stripe-green: #8dc63f;
  --stripe-gold: #ffb743;
  --stripe-coral: #f04d35;
  --stripe-pink: #e65aa3;
  --stripe-blue: #14a9dc;
  --stripe-cream: #fffbea;
  --stripe-ink: #061922;
}

/* Match the color-block frame used on the main index hero. */
.hero::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.5vw, 22px);
  z-index: 3;
  border: clamp(5px, .65vw, 8px) solid transparent;
  border-image: linear-gradient(90deg, var(--stripe-green), var(--stripe-gold), var(--stripe-coral), var(--stripe-pink), var(--stripe-blue)) 1;
  pointer-events: none;
}

.hero-content,
.site-header {
  z-index: 4;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}

.page-transition.is-active {
  visibility: visible;
  pointer-events: auto;
}

.page-transition__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  transform: translateX(var(--door-open-x));
  transition: transform 720ms cubic-bezier(.76, 0, .24, 1);
  background-color: var(--stripe-blue);
  background-image:
    linear-gradient(150deg, transparent 0 24%, var(--stripe-cream) 24% 49.5%, transparent 50%),
    linear-gradient(30deg, transparent 0 24%, var(--stripe-gold) 24% 49.5%, transparent 50%),
    linear-gradient(150deg, transparent 50.5%, var(--stripe-coral) 51% 76%, transparent 76%),
    linear-gradient(30deg, transparent 50.5%, var(--stripe-ink) 51% 76%, transparent 76%),
    repeating-linear-gradient(90deg, rgba(6, 25, 34, .16) 0 8px, transparent 8px 18px);
  background-size: 100% 32vh, 100% 32vh, 100% 32vh, 100% 32vh, 18px 100%;
  background-position: center top, center top, center 16vh, center 16vh, center;
  box-shadow: inset 0 0 0 5px rgba(255, 251, 234, .32), inset 0 0 40px rgba(6, 25, 34, .2);
  will-change: transform;
}

.page-transition__door::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(255, 251, 234, .48) 44% 45%, rgba(6, 25, 34, .28) 45% 46%, transparent 46%),
    repeating-linear-gradient(180deg, transparent 0 31vh, rgba(255, 251, 234, .22) 31vh 31.6vh);
  mix-blend-mode: soft-light;
}

.page-transition__door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, var(--stripe-cream), var(--stripe-gold), var(--stripe-coral), var(--stripe-pink), var(--stripe-blue));
  box-shadow: 0 0 18px rgba(6, 25, 34, .32);
}

.page-transition__door--left { left: 0; --door-open-x: -104%; }
.page-transition__door--right {
  right: 0;
  --door-open-x: 104%;
  background-image:
    linear-gradient(30deg, transparent 0 24%, var(--stripe-gold) 24% 49.5%, transparent 50%),
    linear-gradient(150deg, transparent 0 24%, var(--stripe-cream) 24% 49.5%, transparent 50%),
    linear-gradient(30deg, transparent 50.5%, var(--stripe-ink) 51% 76%, transparent 76%),
    linear-gradient(150deg, transparent 50.5%, var(--stripe-coral) 51% 76%, transparent 76%),
    repeating-linear-gradient(90deg, rgba(6, 25, 34, .16) 0 8px, transparent 8px 18px);
}
.page-transition__door--left::after { right: -6px; }
.page-transition__door--right::after { left: -6px; }

.page-transition__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 720px);
  max-height: 38vh;
  height: auto;
  transform: translate(-50%, -50%) scale(.82);
  opacity: 0;
  transition: opacity 320ms ease, transform 720ms cubic-bezier(.76, 0, .24, 1);
  filter: drop-shadow(0 16px 28px rgba(6, 25, 34, .4));
}

.page-transition.is-closing .page-transition__door,
.page-transition.is-closed .page-transition__door { transform: translateX(0); }
.page-transition.is-closing .page-transition__mark,
.page-transition.is-closed .page-transition__mark { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.page-transition.is-opening .page-transition__door { transform: translateX(var(--door-open-x)); }
.page-transition.is-opening .page-transition__mark { opacity: 0; transform: translate(-50%, -50%) scale(.82); }

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
}