/* ==========================================================================
   ANI'S TERMINAL — intro.css
   The landing animation: shadow-black stage, line -> box -> collapse,
   vertical line, curtains opening onto the home page. Home page only.
   ========================================================================== */

/* scrolling stays locked until the intro finishes (unlocked by intro.js) */
body {
  overflow: hidden;
}

#intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

/* the two black curtains that later split open from the center line */
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%; /* tiny overlap so no seam shows */
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(30, 30, 30, .35) 0%, transparent 70%),
    var(--black);
  transition: transform 1s cubic-bezier(.77, 0, .18, 1);
}

.curtain.left {
  left: 0;
  transform-origin: left center;
}

.curtain.right {
  right: 0;
  transform-origin: right center;
}

/* soft vignette = "shadow black" */
.curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 110% at 50% 50%, transparent 40%, rgba(0, 0, 0, .75) 100%);
}

#intro.open .curtain.left,
#intro.open .curtain.right {
  transform: scaleX(0);
}

/* ---- the line that becomes a square box ---- */
#box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border: 1px solid var(--cream);
  box-shadow:
    0 0 18px rgba(255, 238, 219, .28),
    inset 0 0 22px rgba(255, 238, 219, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width .65s cubic-bezier(.65, 0, .35, 1),
    height .55s cubic-bezier(.65, 0, .35, 1);
}

/* small white square boxes pinned to all four corners */
#box .corner {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .45);
}

#box .corner.tl { top: -1px;    left: -1px;  transform: translate(-50%, -50%); }
#box .corner.tr { top: -1px;    right: -1px; transform: translate(50%, -50%); }
#box .corner.bl { bottom: -1px; left: -1px;  transform: translate(-50%, 50%); }
#box .corner.br { bottom: -1px; right: -1px; transform: translate(50%, 50%); }

#box.line {
  width: min(72vw, 460px);
}

#box.square {
  /* a snug rectangle around the ANI'S TERMINAL text */
  width: min(72vw, 460px);
  height: min(20vh, 120px);
}

#boxText {
  font-family: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  font-size: clamp(18px, 4vw, 30px);
  font-weight: 400;
  letter-spacing: .28em;
  color: var(--cream);
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 238, 219, .45);
  opacity: 0;
  transition: opacity .3s ease;
}

#boxText.show {
  opacity: 1;
}

/* ---- the vertical line that stretches top to bottom, then opens the page ---- */
#vline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* the reveal line keeps its original weight and brightness */
  width: 3px;
  height: 0;
  background: var(--cream);
  box-shadow:
    0 0 20px rgba(255, 238, 219, .6),
    0 0 40px rgba(255, 238, 219, .3);
  transition: height .65s cubic-bezier(.65, 0, .35, 1), opacity .45s ease .25s;
}

#vline.stretch {
  height: 100vh;
}

#intro.open #vline {
  opacity: 0;
}

#skipHint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .3em;
  color: rgba(255, 238, 219, .35);
  text-transform: uppercase;
  user-select: none;
}

/* respect users who prefer no motion: skip straight to the home page */
@media (prefers-reduced-motion: reduce) {
  #intro {
    display: none;
  }

  body {
    overflow: auto;
  }
}