/* ============================================================
   KieloLab — Intro (opening sequence)
   ------------------------------------------------------------
   Standalone layer. Nothing here is referenced by style.css.
   REMOVE: delete this file + assets/js/intro.js and the three
   marked blocks in index.html. The site returns to normal.

   Sequence: black → wordmark resolves → hairline draws →
   the pane simply fades away, the homepage coming up behind it.
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  pointer-events: none;
  opacity: 1;
  transition: opacity .95s var(--ease);
}

html.intro-run .intro { display: block; }
html.intro-run,
html.intro-run body { overflow: hidden; }

.intro.is-out { opacity: 0; }

/* ---------- the pane ---------- */
.intro__glass {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 11, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: -webkit-backdrop-filter .95s var(--ease), backdrop-filter .95s var(--ease);
}
.intro.is-out .intro__glass {
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

/* ---------- centre block ---------- */
.intro__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.intro__word {
  font-family: 'Michroma', 'Inter', sans-serif;
  font-size: clamp(13px, 1.5vw, 18px);
  letter-spacing: .52em;
  text-indent: .52em;
  color: rgba(255, 255, 255, .92);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .8s var(--ease),
    letter-spacing 1s var(--ease),
    text-indent 1s var(--ease),
    transform .8s var(--ease);
}
.intro.is-in .intro__word {
  opacity: 1;
  letter-spacing: .2em;
  text-indent: .2em;
  transform: none;
}
.intro.is-out .intro__word {
  opacity: 0;
  transform: translateY(-14px);
  transition-duration: .45s;
}

/* ---------- hairline ---------- */
.intro__line {
  display: block;
  width: min(52vw, 460px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, .08) 10%,
    rgba(255, 255, 255, .62) 50%,
    rgba(255, 255, 255, .08) 90%,
    transparent 100%);
  transform: scaleX(0);
  transition: transform .9s var(--ease), opacity .45s var(--ease);
}
.intro.is-line .intro__line { transform: scaleX(1); }
.intro.is-out .intro__line { opacity: 0; }

/* ---------- logo mark ---------- */
.intro__logo {
  display: block;
  width: 96px;
  height: auto;
  margin-top: -2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.intro.is-logo .intro__logo {
  opacity: 1;
  transform: none;
}
.intro.is-out .intro__logo {
  opacity: 0;
  transform: translateY(-12px);
  transition-duration: .45s;
}

/* ---------- film grain ---------- */
.intro__grain {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- quick variant (in-site return) ---------- */
html.intro-quick .intro { transition-duration: .45s; }
html.intro-quick .intro__line { transition-duration: .5s; }

/* ---------- small screens: cheaper compositing ---------- */
@media (max-width: 760px) {
  .intro__glass { background: #0a0a0b; }
  .intro__line { width: 58vw; }
}

/* ---------- respect system preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  html.intro-run,
  html.intro-run body { overflow: auto; }
}