/* ==========================================================================
   PAGE INTRO — ink curtain + accent line that draws across ("connecting"),
   then the curtain lifts (~0.7s). The overlay covers the page until
   js/main.js adds .is-playing; it's removed when the curtain animation ends.
   ========================================================================== */

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  pointer-events: none;
  /* Failsafe: never keep the page covered if the script doesn't run */
  animation: site-intro-failsafe 0s linear 3s forwards;
}

@keyframes site-intro-failsafe {
  to { visibility: hidden; }
}

.no-js .site-intro {
  display: none;
}

.site-intro__curtain {
  position: absolute;
  inset: 0;
  background: var(--ink-950);
}

.site-intro__mask {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.site-intro.is-playing .site-intro__mask {
  animation:
    site-intro-line .34s var(--ease-in-out-cubic) forwards,
    site-intro-fade .12s linear .36s forwards;
}

.site-intro.is-playing .site-intro__curtain {
  animation: site-intro-lift .38s var(--ease-in-out-cubic) .32s forwards;
}

@keyframes site-intro-line {
  to { transform: scaleX(1); }
}

@keyframes site-intro-lift {
  to { transform: translateY(-100%); }
}

@keyframes site-intro-fade {
  to { opacity: 0; }
}