:root {
  --edu-curtain-soft: #f8d9dc;
  --edu-curtain-brand: #d71920;
  --edu-curtain-deep: #720003;
  --edu-curtain-ease: cubic-bezier(.76, 0, .24, 1);
}

html.edu-transition-lock,
html.edu-transition-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.edu-page-transition,
.edu-page-transition * {
  box-sizing: border-box;
}

.edu-page-transition {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

html.edu-transition-leaving .edu-page-transition,
html.edu-transition-arriving .edu-page-transition {
  visibility: visible;
  pointer-events: auto;
}

.edu-page-transition__panel {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  width: calc(100% + clamp(44px, 7vw, 132px));
  backface-visibility: hidden;
  clip-path: polygon(0 0, calc(100% - clamp(38px, 6vw, 112px)) 0, 100% 50%, calc(100% - clamp(38px, 6vw, 112px)) 100%, 0 100%);
  pointer-events: none;
  transform: translate3d(-112%, 0, 0);
  will-change: transform;
}

.edu-page-transition__panel::after {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .15) 1.2px, transparent 1.3px);
  background-position: right 8vw center;
  background-size: 11px 11px;
  content: "";
  opacity: .32;
}

.edu-page-transition__panel--soft {
  z-index: 1;
  background: linear-gradient(115deg, #fff1f2 0%, var(--edu-curtain-soft) 70%, #efbfc3 100%);
}

.edu-page-transition__panel--brand {
  z-index: 2;
  background: linear-gradient(115deg, #ec242a 0%, var(--edu-curtain-brand) 58%, #b9070d 100%);
}

.edu-page-transition__panel--deep {
  z-index: 3;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .11), transparent 24rem),
    linear-gradient(115deg, #9d080d 0%, var(--edu-curtain-deep) 76%, #510002 100%);
}

.edu-page-transition__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  min-width: min(76vw, 330px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  place-items: center;
  transform: translate(-50%, -46%);
}

.edu-page-transition__logo {
  display: block;
  color: #fff;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: clamp(28px, 5vw, 56px);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: 1;
  text-transform: uppercase;
}

.edu-page-transition__logo strong {
  color: #ffd400;
  font: inherit;
}

.edu-page-transition__tagline {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, .9);
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: clamp(8px, 1.2vw, 11px);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.3;
  text-transform: uppercase;
}

html.edu-transition-leaving .edu-page-transition__panel--soft {
  animation: edu-curtain-cover .54s var(--edu-curtain-ease) 0s forwards;
}

html.edu-transition-leaving .edu-page-transition__panel--brand {
  animation: edu-curtain-cover .54s var(--edu-curtain-ease) .08s forwards;
}

html.edu-transition-leaving .edu-page-transition__panel--deep {
  animation: edu-curtain-cover .54s var(--edu-curtain-ease) .16s forwards;
}

html.edu-transition-leaving .edu-page-transition__mark {
  animation: edu-curtain-mark-in .26s ease .34s forwards;
}

html.edu-transition-arriving .edu-page-transition {
  animation: edu-curtain-overlay-hide 0s linear 1.02s forwards;
}

html.edu-transition-arriving .edu-page-transition__panel--deep {
  animation: edu-curtain-reveal .64s var(--edu-curtain-ease) .06s both;
}

html.edu-transition-arriving .edu-page-transition__panel--brand {
  animation: edu-curtain-reveal .64s var(--edu-curtain-ease) .14s both;
}

html.edu-transition-arriving .edu-page-transition__panel--soft {
  animation: edu-curtain-reveal .64s var(--edu-curtain-ease) .22s both;
}

html.edu-transition-arriving .edu-page-transition__mark {
  opacity: 1;
  animation: edu-curtain-mark-out .26s ease .08s forwards;
  transform: translate(-50%, -50%);
}

@keyframes edu-curtain-cover {
  from { transform: translate3d(-112%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes edu-curtain-reveal {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(112%, 0, 0); }
}

@keyframes edu-curtain-mark-in {
  from { opacity: 0; transform: translate(-50%, -42%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes edu-curtain-mark-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -56%) scale(1.02); }
}

@keyframes edu-curtain-overlay-hide {
  to { visibility: hidden; pointer-events: none; }
}

@media (max-width: 640px) {
  .edu-page-transition__panel {
    width: calc(100% + 62px);
    clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 50%, calc(100% - 52px) 100%, 0 100%);
  }

  .edu-page-transition__tagline {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.edu-transition-leaving .edu-page-transition__panel--soft,
  html.edu-transition-leaving .edu-page-transition__panel--brand,
  html.edu-transition-leaving .edu-page-transition__panel--deep {
    animation-duration: .24s !important;
    animation-delay: 0s !important;
  }

  html.edu-transition-arriving .edu-page-transition__panel--soft,
  html.edu-transition-arriving .edu-page-transition__panel--brand,
  html.edu-transition-arriving .edu-page-transition__panel--deep {
    animation-duration: .28s !important;
    animation-delay: 0s !important;
  }

  html.edu-transition-arriving .edu-page-transition {
    animation-delay: .36s !important;
  }

  .edu-page-transition__mark {
    display: none;
  }
}