/* Standalone opening animation. No website styles required. */
@keyframes amphorna-intro-star {
  0% {
    transform: scale(0.35);
    opacity: 0;
    filter: brightness(2.6);
  }

  45% {
    transform: scale(1.14);
    opacity: 1;
    filter: brightness(1.5);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes amphorna-intro-reveal {
  0% {
    clip-path: circle(2% at var(--intro-star-x, 72.9%) var(--intro-star-y, 30.4%));
    opacity: 0.35;
  }

  25% {
    opacity: 1;
  }

  100% {
    clip-path: circle(120% at var(--intro-star-x, 72.9%) var(--intro-star-y, 30.4%));
    opacity: 1;
  }
}

@keyframes amphorna-intro-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.95;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes amphorna-intro-outro {
  0%,
  77% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.amphorna-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--hero-background, #06122a);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: amphorna-intro-outro var(--amphorna-intro-duration, 1.8s)
    cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.amphorna-intro__logo {
  position: relative;
  width: min(72vw, 820px);
  aspect-ratio: var(--intro-logo-ratio, 1707 / 592);
}

/* Each star asset shares the canvas and coordinates of its locale's wordmark. */
html[lang="en"] .amphorna-intro__logo {
  --intro-logo-ratio: 1761 / 461;
  --intro-star-x: 70.93%;
  --intro-star-y: 45.77%;
}

html[lang="zh-Hant"] .amphorna-intro__logo {
  --intro-logo-ratio: 1928 / 662;
  --intro-star-x: 73.44%;
  --intro-star-y: 40.48%;
}

.amphorna-intro__flash {
  position: absolute;
  left: var(--intro-star-x, 72.9%);
  top: var(--intro-star-y, 30.4%);
  /* The expanding flash never exceeds half the logo width. */
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 246, 216, 0.85) 0%,
    rgba(242, 194, 76, 0.35) 45%,
    rgba(233, 161, 27, 0) 70%
  );
  opacity: 0;
  animation: amphorna-intro-burst 0.45s ease-out forwards;
}

.amphorna-intro__star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transform-origin: var(--intro-star-x, 72.9%) var(--intro-star-y, 30.4%);
  animation: amphorna-intro-star 0.2s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.amphorna-intro__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: circle(0% at var(--intro-star-x, 72.9%) var(--intro-star-y, 30.4%));
  animation: amphorna-intro-reveal 1s 0.5s cubic-bezier(0.3, 0.75, 0.25, 1)
    forwards;
}

.amphorna-intro {
  pointer-events: none;
}
.amphorna-intro,
.amphorna-intro * {
  box-sizing: border-box;
}
.amphorna-intro img {
  display: block;
  max-width: none;
}
@media (prefers-reduced-motion: reduce) {
  .amphorna-intro {
    display: none;
  }
}

/* Match the hero background; keep the grid beneath the animated logo. */
.amphorna-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 45%,#000 0%,transparent 85%);
  mask-image: radial-gradient(70% 70% at 60% 45%,#000 0%,transparent 85%);
}