/*--------------------------------------------------------------
# KeyLimeTie "Tie Drop" intro
# Plays once per tab session on the first page with #dsn_preloader.
# Active only while <html> has .klt-intro (set by the inline head gate,
# removed by assets/js/klt-intro.js when the intro finishes).
# Only transform / opacity are animated.
--------------------------------------------------------------*/
#klt_intro {
  display: none;
}

html.klt-intro #klt_intro {
  --klt-intro-size: clamp(120px, 28vmin, 220px);
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  overflow: hidden;
  /* CSS-only failsafe: if every script fails, the overlay still gets out of the way. */
  animation: klt-intro-failsafe 0s linear 4s forwards;
}

#klt_intro .klt-intro__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color, #111);
}

#klt_intro .klt-intro__mark,
#klt_intro .klt-intro__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  will-change: transform, opacity;
}

#klt_intro .klt-intro__mark {
  display: block;
  width: var(--klt-intro-size);
  height: var(--klt-intro-size);
  max-width: none;
  margin: calc(var(--klt-intro-size) / -2) 0 0 calc(var(--klt-intro-size) / -2);
  /* Parked above the viewport until the drop starts. */
  transform: translate3d(0, -100vh, 0);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
}

#klt_intro .klt-intro__ripple {
  --klt-ripple-size: calc(var(--klt-intro-size) * 3.6);
  width: var(--klt-ripple-size);
  height: var(--klt-ripple-size);
  margin: calc(var(--klt-ripple-size) / -2) 0 0 calc(var(--klt-ripple-size) / -2);
  border: 3px solid var(--theme-color, #b3de4f);
  opacity: 0;
  transform: scale(0.28);
}

#klt_intro .klt-intro__ripple + .klt-intro__ripple {
  border-width: 1.5px;
}

/* The intro replaces the preloader's visible sequence on intro sessions. */
html.klt-intro #dsn_preloader {
  visibility: hidden;
}

/* Nav logo stays in layout (so it can be measured) but hidden until the hand-off. */
html.klt-intro #site_menu_header .main-brand img {
  opacity: 0;
  animation: klt-intro-logo-failsafe 0s linear 4s forwards;
}

@keyframes klt-intro-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes klt-intro-logo-failsafe {
  to {
    opacity: 1;
  }
}