.site-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  place-items: center;
  background: radial-gradient(ellipse 48% 38% at 50% 47%, #242030 0%, #11131e 48%, #080a11 100%);
  color: #d5a673;
  opacity: 1;
  isolation: isolate;
}

html.sa-intro-ready {
  overflow: hidden;
}

html.sa-intro-ready .site-intro {
  display: grid;
}

.site-intro::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 3.2vw, 46px);
  border: 1px solid rgb(213 166 115 / 15%);
  pointer-events: none;
}

.site-intro::after {
  content: "";
  position: absolute;
  width: min(74vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(213 166 115 / 11%) 0%, transparent 67%);
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
}

.site-intro-content {
  position: relative;
  z-index: 1;
  width: min(88vw, 900px);
  display: grid;
  justify-items: center;
  text-align: center;
}

.site-intro-picture {
  display: block;
  width: 100%;
}

.site-intro-logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(18px) scale(.94);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}

.site-intro-rule {
  width: 0;
  height: 1px;
  margin-top: clamp(35px, 5vw, 70px);
  background: linear-gradient(90deg, transparent, rgb(213 166 115 / 85%), transparent);
}

.site-intro-caption {
  margin: 22px 0 0;
  color: #c8b9a8;
  font: 400 clamp(10px, .9vw, 12px)/1.5 Arial, sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
}

.site-intro-skip {
  position: absolute;
  right: clamp(30px, 5vw, 78px);
  bottom: clamp(30px, 5vw, 70px);
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgb(213 166 115 / 50%);
  background: none;
  color: #dfcfb9;
  font: 400 12px/1.5 Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.site-intro-skip:hover,
.site-intro-skip:focus-visible {
  color: #fff;
  border-color: #fff;
}

.site-intro-skip:focus-visible,
.intro-replay:focus-visible {
  outline: 2px solid #d5a673;
  outline-offset: 4px;
}

.site-intro-skip span {
  margin-left: 15px;
}

html.sa-intro-playing .site-intro::after {
  animation: sa-intro-glow 2.2s ease-out both;
}

html.sa-intro-playing .site-intro-logo {
  animation: sa-intro-logo 1.25s cubic-bezier(.19, 1, .22, 1) .12s both;
}

html.sa-intro-playing .site-intro-rule {
  animation: sa-intro-rule .85s cubic-bezier(.19, 1, .22, 1) .72s both;
}

html.sa-intro-playing .site-intro-caption {
  animation: sa-intro-caption .8s ease-out .96s both;
}

html.sa-intro-exiting .site-intro {
  opacity: 0;
  transform: translateY(-1.5%);
  transition: opacity .82s cubic-bezier(.45, 0, .2, 1), transform .82s cubic-bezier(.45, 0, .2, 1);
  pointer-events: none;
}

.intro-replay {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  background: rgb(10 12 18 / 48%);
  color: #fff;
  font: 400 12px/1.4 Arial, sans-serif;
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.intro-replay:hover {
  background: rgb(10 12 18 / 75%);
  border-color: #fff;
}

@keyframes sa-intro-glow {
  0% { opacity: 0; transform: scale(.7); }
  55% { opacity: 1; }
  100% { opacity: .45; transform: scale(1.15); }
}

@keyframes sa-intro-logo {
  0% { opacity: 0; transform: translateY(18px) scale(.94); filter: blur(7px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes sa-intro-rule {
  from { width: 0; opacity: 0; }
  to { width: min(43vw, 320px); opacity: 1; }
}

@keyframes sa-intro-caption {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .site-intro-content { width: min(76vw, 340px); }
  .site-intro-rule { margin-top: 38px; }
  .site-intro-caption { margin-top: 19px; font-size: 10px; letter-spacing: .22em; }
  .site-intro-skip { right: 32px; bottom: 28px; }
  .intro-replay { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro,
  .intro-replay { display: none !important; }
  html.sa-intro-ready { overflow: auto; }
}