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

#aster-arrival-v5 {
  display: none;
}

.aster-arrival-v5-ready {
  overflow: hidden;
}

.aster-arrival-v5-ready #aster-arrival-v5 {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: block;
  overflow: hidden;
  isolation: isolate;
  color: #effff9;
  font-family: "DM Sans", sans-serif;
}

.av5-veil {
  --av5-hole: 0px;
  position: absolute;
  z-index: -5;
  inset: 0;
  background:
    radial-gradient(circle at 74% 44%, rgb(36 120 145 / 30%) 0, transparent 29%),
    radial-gradient(circle at 15% 86%, rgb(68 150 140 / 12%) 0, transparent 34%),
    radial-gradient(circle at 90% 12%, rgb(102 82 190 / 10%) 0, transparent 28%),
    linear-gradient(116deg, #02050d 0%, #06111b 48%, #01040a 100%);
  -webkit-mask-image: radial-gradient(circle at 74% 44%, transparent 0 var(--av5-hole), #000 calc(var(--av5-hole) + 2px));
  mask-image: radial-gradient(circle at 74% 44%, transparent 0 var(--av5-hole), #000 calc(var(--av5-hole) + 2px));
  animation: av5-reveal 3.75s cubic-bezier(.76, 0, .18, 1) forwards;
}

.av5-grain {
  position: absolute;
  z-index: 20;
  inset: -40%;
  opacity: .025;
  pointer-events: none;
  background-image: repeating-radial-gradient(circle at 29% 47%, #fff 0 1px, transparent 1px 4px);
  background-size: 5px 5px;
  animation: av5-grain .24s steps(2) infinite, av5-fade-out .4s 2.82s ease forwards;
}

.av5-specks {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0;
  animation: av5-fade-in 1.2s .2s ease forwards, av5-fade-out .5s 2.7s ease forwards;
}

.av5-specks i {
  --av5-x: 50%;
  --av5-y: 50%;
  --av5-size: 1px;
  --av5-delay: 0s;
  position: absolute;
  left: var(--av5-x);
  top: var(--av5-y);
  width: var(--av5-size);
  height: var(--av5-size);
  border-radius: 50%;
  background: rgb(217 255 244 / 76%);
  box-shadow: 0 0 12px rgb(101 184 255 / 38%);
  animation: av5-drift 3s var(--av5-delay) ease-in-out infinite alternate;
}

.av5-header {
  position: absolute;
  z-index: 8;
  top: clamp(24px, 4vw, 58px);
  left: clamp(24px, 5vw, 78px);
  right: clamp(24px, 5vw, 78px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  opacity: 0;
  animation: av5-meta-in .7s .18s ease-out forwards, av5-meta-out .4s 2.62s ease-in forwards;
}

.av5-header > span {
  font: 500 11px/1 "DM Mono", monospace;
  letter-spacing: .28em;
}

.av5-header > p {
  margin: 0;
  text-align: right;
  font: 400 8px/1.65 "DM Mono", monospace;
  letter-spacing: .2em;
  color: rgb(217 255 244 / 44%);
}

.av5-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, rgb(191 255 239 / 30%), rgb(101 184 255 / 11%) 45%, transparent 72%);
  animation: av5-line-in 1.1s .26s cubic-bezier(.16, 1, .3, 1) both;
}

.av5-eclipse {
  position: absolute;
  z-index: 1;
  left: 74%;
  top: 44%;
  width: min(50vw, 670px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-46%, -50%) scale(.9);
  animation: av5-eclipse-in 3.05s .12s cubic-bezier(.16, 1, .3, 1) forwards;
}

.av5-corona,
.av5-rim,
.av5-disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.av5-corona {
  inset: -9%;
  opacity: .76;
  background:
    conic-gradient(from 190deg, transparent 0 23%, rgb(191 255 239 / 22%) 29%, transparent 36% 62%, rgb(101 184 255 / 18%) 70%, rgb(135 112 255 / 11%) 77%, transparent 85%),
    radial-gradient(circle, transparent 59%, rgb(149 239 223 / 13%) 64%, transparent 72%);
  filter: blur(13px);
  animation: av5-corona-turn 18s linear infinite;
}

.av5-rim {
  inset: -1px;
  background: conic-gradient(from 212deg, transparent 0 34%, rgb(239 255 249 / 96%) 42%, rgb(142 204 255 / 62%) 50%, rgb(135 112 255 / 20%) 57%, transparent 65% 100%);
  filter: blur(.2px);
  box-shadow: 0 0 55px rgb(101 184 255 / 17%);
}

.av5-disk {
  inset: 2px;
  background:
    radial-gradient(circle at 31% 28%, rgb(15 36 45 / 96%), #050b13 52%, #01040a 100%);
  box-shadow:
    inset 22px 16px 55px rgb(191 255 239 / 3%),
    -8px 10px 40px rgb(0 0 0 / 60%);
}

.av5-editorial {
  position: absolute;
  z-index: 6;
  left: clamp(24px, 8vw, 124px);
  top: 52%;
  width: min(66vw, 960px);
  transform: translateY(-50%);
}

.av5-overline {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 18px 5px;
  font: 400 9px/1 "DM Mono", monospace;
  letter-spacing: .25em;
  color: rgb(191 255 239 / 52%);
  opacity: 0;
  transform: translateY(8px);
  animation: av5-copy-in .6s .46s ease-out forwards, av5-copy-out .36s 2.52s ease-in forwards;
}

.av5-overline i {
  display: block;
  width: 34px;
  height: 1px;
  background: rgb(191 255 239 / 48%);
}

.av5-editorial h1 {
  position: relative;
  width: fit-content;
  margin: 0;
}

.av5-editorial h1 > span {
  display: block;
  overflow: hidden;
  padding-right: .08em;
}

.av5-editorial h1 > span i {
  display: block;
  color: #effff9;
  font: 400 clamp(108px, 17vw, 250px)/.66 "Cormorant Garamond", "Times New Roman", serif;
  letter-spacing: -.065em;
  text-shadow: 0 5px 45px rgb(0 0 0 / 35%);
  transform: translateY(105%);
  animation: av5-title-in 1.05s .48s cubic-bezier(.16, 1, .3, 1) forwards, av5-title-out .5s 2.46s cubic-bezier(.7, 0, 1, 1) forwards;
}

.av5-editorial h1 > em {
  position: absolute;
  left: 69%;
  top: calc(100% + 12px);
  width: max-content;
  font: italic 400 clamp(16px, 1.65vw, 24px)/1 "Cormorant Garamond", serif;
  letter-spacing: .04em;
  color: rgb(217 255 244 / 68%);
  opacity: 0;
  transform: translateX(-12px);
  animation: av5-side-copy-in .7s 1.08s ease-out forwards, av5-copy-out .32s 2.46s ease-in forwards;
}

.av5-rule {
  width: min(560px, 54vw);
  height: 1px;
  margin: 36px 0 20px 6px;
  overflow: hidden;
  background: rgb(191 255 239 / 13%);
  opacity: 0;
  animation: av5-fade-in .35s .9s ease forwards, av5-fade-out .3s 2.48s ease forwards;
}

.av5-rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(191 255 239 / 86%), rgb(101 184 255 / 23%), transparent);
  transform-origin: left;
  animation: av5-line-in 1.15s .92s cubic-bezier(.16, 1, .3, 1) both;
}

.av5-cn {
  margin: 0 0 0 6px;
  font-family: "Noto Serif SC", serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 500;
  letter-spacing: .22em;
  color: rgb(226 255 247 / 70%);
  opacity: 0;
  transform: translateY(7px);
  animation: av5-copy-in .65s 1.02s ease-out forwards, av5-copy-out .34s 2.46s ease-in forwards;
}

.av5-footer {
  position: absolute;
  z-index: 8;
  left: clamp(24px, 5vw, 78px);
  right: clamp(82px, 8vw, 126px);
  bottom: clamp(24px, 3.6vw, 50px);
  display: flex;
  justify-content: space-between;
  font: 400 8px/1 "DM Mono", monospace;
  letter-spacing: .2em;
  color: rgb(191 255 239 / 37%);
  opacity: 0;
  animation: av5-meta-in .7s .38s ease-out forwards, av5-meta-out .35s 2.54s ease-in forwards;
}

.av5-skip {
  position: absolute;
  z-index: 10;
  right: clamp(24px, 5vw, 78px);
  bottom: clamp(19px, 3.2vw, 45px);
  padding: 7px 0 7px 12px;
  border: 0;
  color: rgb(191 255 239 / 35%);
  background: transparent;
  font: 500 8px/1 "DM Mono", monospace;
  letter-spacing: .18em;
  cursor: pointer;
  opacity: 0;
  animation: av5-meta-in .6s .42s ease-out forwards, av5-meta-out .3s 2.5s ease-in forwards;
  transition: color .2s ease;
}

.av5-skip:hover,
.av5-skip:focus-visible {
  color: #fff;
  outline: none;
}

.av5-light-sweep {
  position: absolute;
  z-index: 15;
  left: 74%;
  top: 44%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  background: #effff9;
  box-shadow:
    0 0 18px 7px rgb(239 255 249 / 96%),
    0 0 80px 24px rgb(101 184 255 / 62%),
    0 0 220px 70px rgb(135 112 255 / 25%);
  transform: translate(-50%, -50%) scale(.2);
  animation: av5-light 3.75s ease-out forwards;
}

#aster-arrival-v5.is-skipping {
  animation: av5-skip-out .42s ease-in forwards;
}

#aster-arrival-v5.is-skipping .av5-veil {
  animation: av5-skip-veil .42s ease-in forwards;
}

@keyframes av5-reveal {
  0%, 71% { --av5-hole: 0px; opacity: 1; }
  96% { --av5-hole: 128vmax; opacity: 1; }
  100% { --av5-hole: 145vmax; opacity: 0; }
}

@keyframes av5-grain {
  0% { transform: translate3d(-1.5%, 1%, 0); }
  100% { transform: translate3d(1.5%, -1%, 0); }
}

@keyframes av5-fade-in { to { opacity: 1; } }
@keyframes av5-fade-out { to { opacity: 0; } }
@keyframes av5-drift { to { transform: translateY(-10px); opacity: .38; } }

@keyframes av5-meta-in { to { opacity: 1; } }
@keyframes av5-meta-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes av5-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes av5-eclipse-in {
  0% { opacity: 0; transform: translate(-42%, -50%) scale(.9); }
  20%, 73% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); filter: blur(2px); }
}

@keyframes av5-corona-turn { to { transform: rotate(360deg); } }

@keyframes av5-copy-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes av5-copy-out {
  to { opacity: 0; transform: translateY(-7px); }
}

@keyframes av5-title-in { to { transform: translateY(0); } }
@keyframes av5-title-out { to { transform: translateY(-105%); } }

@keyframes av5-side-copy-in {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes av5-light {
  0%, 70% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  75% { opacity: 1; }
  88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

@keyframes av5-skip-out { to { opacity: 0; visibility: hidden; } }
@keyframes av5-skip-veil { to { opacity: 0; } }

@media (max-width: 720px), (pointer: coarse) {
  .av5-veil {
    -webkit-mask-image: radial-gradient(circle at 67% 39%, transparent 0 var(--av5-hole), #000 calc(var(--av5-hole) + 2px));
    mask-image: radial-gradient(circle at 67% 39%, transparent 0 var(--av5-hole), #000 calc(var(--av5-hole) + 2px));
  }

  .av5-header {
    left: 22px;
    right: 22px;
    top: 24px;
  }

  .av5-header > p {
    display: none;
  }

  .av5-eclipse {
    left: 67%;
    top: 39%;
    width: min(102vw, 470px);
  }

  .av5-editorial {
    left: 22px;
    top: 59%;
    width: calc(100vw - 44px);
  }

  .av5-editorial h1 > span i {
    font-size: clamp(96px, 31vw, 142px);
  }

  .av5-editorial h1 > em {
    left: auto;
    right: 4px;
    top: calc(100% + 10px);
    font-size: 16px;
  }

  .av5-rule {
    width: 72vw;
    margin-top: 34px;
  }

  .av5-cn {
    max-width: 86vw;
    font-size: 12px;
    letter-spacing: .15em;
  }

  .av5-footer {
    left: 22px;
    right: 74px;
    bottom: 25px;
  }

  .av5-footer span:last-child {
    display: none;
  }

  .av5-skip {
    right: 22px;
    bottom: 20px;
  }

  .av5-light-sweep {
    left: 67%;
    top: 39%;
  }

  .av5-specks i:nth-child(n + 10) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aster-arrival-v5-ready #aster-arrival-v5 {
    display: none !important;
  }
}