/* The opening is opt-in: without the early JavaScript boot, the page stays visible. */
.site-intro {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #0d0e11;
  color: #ebe5e0;
  isolation: isolate;
}

html.intro-active,
html.intro-active body {
  overflow: hidden;
}

.intro-active #site-intro {
  display: grid !important;
  animation: lyna-intro-failsafe 1ms step-end 5200ms forwards;
}

.intro-active.intro-ready #site-intro {
  animation:
    lyna-intro-lift 600ms cubic-bezier(.4, 0, .2, 1) calc(3900ms + var(--intro-offset, 0ms)) both,
    lyna-intro-failsafe 1ms step-end calc(5200ms + var(--intro-offset, 0ms)) forwards;
}

.site-intro__photos,
.site-intro__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.site-intro__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  opacity: 0;
  filter: grayscale(1) brightness(.34) contrast(.94);
}

.site-intro__photo:first-child {
  object-position: 50% 0%;
  opacity: 1;
}

.intro-ready .site-intro__photo:nth-child(2) {
  animation: lyna-intro-photo-in 650ms ease calc(1200ms + var(--intro-offset, 0ms)) both;
}

.intro-ready .site-intro__photo:nth-child(3) {
  animation: lyna-intro-photo-in 650ms ease calc(2400ms + var(--intro-offset, 0ms)) both;
}

.site-intro__shade {
  background: linear-gradient(90deg, rgba(13, 14, 17, .46), rgba(13, 14, 17, .12) 50%, rgba(13, 14, 17, .38)), linear-gradient(0deg, rgba(13, 14, 17, .5), transparent 65%);
}

.site-intro__logo {
  display: block;
  width: clamp(220px, 36vw, 520px);
  max-width: calc(100vw - 64px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(-3px 0 12px rgba(223, 107, 179, .13)) drop-shadow(3px 0 12px rgba(98, 206, 218, .11));
}

.site-intro__skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 74px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(235, 229, 224, .36);
  border-radius: 0;
  background: rgba(13, 14, 17, .44);
  color: #ebe5e0;
  font: 400 12px / 1.5 var(--sans, Arial, sans-serif);
  cursor: pointer;
}

.site-intro__skip:hover {
  border-color: rgba(235, 229, 224, .7);
  background: rgba(13, 14, 17, .7);
}

.site-intro__skip:focus-visible {
  outline: 2px solid #62ceda;
  outline-offset: 5px;
}

@keyframes lyna-intro-photo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lyna-intro-lift {
  0% { transform: translateY(0); opacity: 1; visibility: visible; }
  100% { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Independent of animation events or intro.js successfully loading. */
@keyframes lyna-intro-failsafe {
  to { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 800px) {
  .site-intro__photo { object-position: 50% 0%; }
  .site-intro__photo:first-child { object-position: 43% 0%; }
  .site-intro__logo { width: clamp(220px, 62vw, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-active #site-intro { display: none !important; animation: none; }
}