/* ============================================================
   NOTTONE — opening intro overlay (plays once per session)
   Adapted from nottone-intro prototype (handoff).
   ============================================================ */
html.intro-lock, body.intro-lock { overflow: hidden; height: 100%; }

.intro {
  --black:   #15161B;
  --offwhite:#FBFAF8;
  --slate:   #1E8E99;   /* teal-cyan (matches recolored logo left t) */
  --terra:   #B46DF7;   /* violet     (matches recolored logo right t) */
  --word:    clamp(48px, 12vw, 150px);
  position: fixed; inset: 0; z-index: 9999;
  background: var(--offwhite); color: var(--black);
  font-family: "Geist", "Geist Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-weight: 600; letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  transition: opacity .55s ease;
}
.intro.hide { opacity: 0; pointer-events: none; }

.intro .stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.intro .row {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  display: flex; align-items: flex-end; line-height: 1; font-size: var(--word);
  will-change: transform;
}

.intro .ltr { display: inline-block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; will-change: transform, opacity, filter; }
.intro .ltr > i { display: inline-block; font-style: normal; transform: translateY(118%); will-change: transform; }
.intro .space { display: inline-block; width: .34em; }

.intro .phrase.show .ltr > i { animation: intro-reveal .62s cubic-bezier(.2,1.25,.32,1) forwards; animation-delay: var(--d); }
@keyframes intro-reveal { 0% { transform: translateY(118%); } 100% { transform: translateY(0); } }

.intro .phrase.assemble .ltr:not(.keep) {
  transition: opacity .5s ease, transform .5s cubic-bezier(.5,0,.75,0), filter .5s ease;
  opacity: 0; transform: translateY(.55em) scale(.7); filter: blur(5px);
}
.intro .phrase.assemble .space { transition: opacity .4s ease; opacity: 0; }
.intro .phrase.assemble .ltr.keep { transition: transform 1.05s cubic-bezier(.16,1,.3,1); }
.intro .phrase.assemble .ltr.t-slate { transition: transform 1.05s cubic-bezier(.16,1,.3,1), color .55s ease .4s; color: var(--slate); }
.intro .phrase.assemble .ltr.t-terra { transition: transform 1.05s cubic-bezier(.16,1,.3,1), color .55s ease .4s; color: var(--terra); }

.intro .logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) scale(.97); opacity: 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,1.4,.4,1);
  pointer-events: none; user-select: none;
}
.intro .logo.in { opacity: 1; transform: translate(-50%,-50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .intro .ltr > i { transform: translateY(0); }
}