/* =========================================================
   intro.css — Site loading intro (BOT Solutions)
   ---------------------------------------------------------
   Shared styles used by every page. The animation logic lives
   in assets/js/intro.js. Each page's <div id="intro"> carries
   data-intro-word="..." so the intro shows that page's name.
   ========================================================= */
#intro {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the floating whatsapp / language buttons */
  pointer-events: none;
}

body.intro-lock {
  overflow: hidden;
}

/* keep floating controls out of the intro sequence */
body.intro-lock .floating-whatsapp,
body.intro-lock .lang-float-btn {
  visibility: hidden;
  opacity: 0;
}

/* solid curtain that retracts upward */
#intro-curtain {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--intro-curtain, #ffffff);
}
#intro-curtain.up {
  bottom: 100%;
  transition: bottom var(--intro-curtain-dur, 1200ms) cubic-bezier(0.76, 0, 0.24, 1);
}

/* center the word */
#intro-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#intro-letters {
  display: flex;
  gap: 0.06em;
  direction: ltr;      /* brand/page name always reads left-to-right */
  unicode-bidi: isolate;
}
#intro-letters span {
  font-family: var(--intro-font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-weight: var(--intro-weight, 800);
  color: var(--intro-color, #111111);
  line-height: 1;
  letter-spacing: var(--intro-letter-spacing, 0.05em);
  font-size: calc((100vw - 64px) / var(--intro-letter-count, 7));
  user-select: none;
  opacity: 0;
  filter: blur(36px);
  transform: translateY(48px);
  will-change: opacity, filter, transform;
}

/* If JS is off, don't block the page */
noscript #intro {
  display: none;
}

@media (max-width: 640px) {
  #intro-letters span {
    font-size: calc((100vw - 24px) / var(--intro-letter-count, 7));
  }
}