/* Project BlueStik — cinematic first-visit intro */

body.bs-intro-on { overflow: hidden; }
body.bs-intro-on .nav,
body.bs-intro-on .theme-toggle { opacity: 0; pointer-events: none; }

.bs-intro {
  position: fixed; inset: 0;
  z-index: 9000;
  background: #06080d;
  color: #f4f4f6;
  display: grid; place-items: center;
  overflow: hidden;
  pointer-events: auto;
  animation: bs-intro-fade-in .4s ease-out;
}
.bs-intro.is-leaving {
  animation: bs-intro-fade-out .55s ease-in forwards;
}

@keyframes bs-intro-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bs-intro-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.bs-intro__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(58, 142, 255, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 30% 70%, rgba(120, 80, 220, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 80%, rgba(58, 142, 255, 0.10) 0%, transparent 70%);
  animation: bs-intro-drift 5s ease-in-out infinite alternate;
}
@keyframes bs-intro-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-10px, -8px) scale(1.04); }
}

.bs-intro__beam {
  position: absolute;
  top: -10%; left: 50%;
  width: 1.5px; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(155, 200, 255, 0.55), transparent);
  transform: translateX(-50%);
  animation: bs-intro-beam 4.6s ease-out forwards;
  filter: blur(0.3px);
}
@keyframes bs-intro-beam {
  0%   { opacity: 0; height: 0; top: -10%; }
  20%  { opacity: 1; height: 60%; top: -10%; }
  100% { opacity: 0; }
}

.bs-intro__center {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 20px;
}

.bs-intro__mono {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  margin-bottom: 38px;
  opacity: 0;
  animation: bs-intro-fade .8s 0.6s forwards;
}

.bs-intro__title {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  line-height: 1;
}
.bs-intro__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px) blur(8px);
  filter: blur(8px);
  animation: bs-intro-rise .9s var(--ease-out, cubic-bezier(.2,.7,.2,1)) forwards;
}
.bs-intro__word:nth-child(1) { animation-delay: 1.1s; }
.bs-intro__word:nth-child(2) {
  animation-delay: 1.7s;
  background: linear-gradient(180deg, #cce4ff, #3a8eff 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-left: 0.18em;
}
@keyframes bs-intro-rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

.bs-intro__sub {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
  opacity: 0;
  animation: bs-intro-fade 1s 2.7s forwards;
}

@keyframes bs-intro-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bs-intro__line {
  position: absolute;
  bottom: 0; left: 0;
  height: 1.5px;
  width: 0;
  background: linear-gradient(90deg, transparent, #3a8eff 35%, #cce4ff 65%, transparent);
  animation: bs-intro-line 4s 1.4s var(--ease-out, ease-out) forwards;
}
@keyframes bs-intro-line {
  to { width: 100%; }
}

.bs-intro__skip {
  position: absolute;
  bottom: 28px; right: 28px;
  z-index: 3;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.40);
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  animation: bs-intro-fade .8s 2.4s forwards;
  transition: color .2s, border-color .2s;
}
.bs-intro__skip:hover {
  color: #fff; border-color: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .bs-intro__sky { animation: none; }
  .bs-intro__beam { display: none; }
  .bs-intro__word { animation-duration: 0.3s; animation-delay: 0s; filter: none; }
  .bs-intro__mono, .bs-intro__sub, .bs-intro__skip { animation-delay: 0s; animation-duration: 0.3s; }
  .bs-intro__line { animation: none; width: 100%; }
}