/* First-visit wordmark, pixel timing and a single upward curtain reveal. */
.brand-intro { display:none; }
.intro-pending .brand-intro {
  position:fixed; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center; background:#f4f4f1; color:#111510;
  transition:transform .6s cubic-bezier(.7,0,.3,1);
  animation:intro-safety-exit .5s 3s forwards;
}
.intro-word {
  position:relative; display:flex; font-family:Pixel,monospace;
  font-size:clamp(38px,11.2vw,210px); line-height:1; font-weight:400;
  letter-spacing:-.035em; padding-right:.15em;
}
.intro-word span {
  opacity:0; transform:translateY(18px);
  animation:intro-letter .45s steps(4,end) both;
  animation-delay:calc(.08s + var(--letter) * .07s);
}
.intro-cursor {
  position:absolute; right:-.06em; bottom:.08em; width:.12em; height:.12em;
  background:#5de2a4; animation:intro-cursor .85s steps(2,start) infinite;
}
.intro-footer {
  position:absolute; left:32px; right:32px; bottom:34px;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.intro-status {
  display:inline-flex; align-items:center; gap:10px; color:#747a70;
  font:10px/1.4 Mono,monospace; letter-spacing:.12em; text-transform:uppercase;
}
.intro-status img { width:14px; height:14px; }
.intro-count { font:40px/1 Pixel,monospace; font-variant-numeric:tabular-nums; }
.intro-progress { position:absolute; inset:auto 0 0; height:3px; background:#cfcfc7; }
.intro-progress i { display:block; width:100%; height:100%; background:#5de2a4; transform:scaleX(0); transform-origin:left; }
.intro-pending .brand-intro.is-leaving { transform:translateY(-100%); pointer-events:none; }
@keyframes intro-letter { to { opacity:1; transform:translateY(0); } }
@keyframes intro-cursor { 50% { opacity:0; } }
/* CSS still releases the page when the JS file cannot load. */
@keyframes intro-safety-exit { to { transform:translateY(-100%); visibility:hidden; pointer-events:none; } }
@media(max-width:600px) {
  .intro-footer { left:20px; right:20px; bottom:24px; }
  .intro-status { font-size:8px; gap:8px; }
  .intro-count { font-size:32px; }
}
@media(prefers-reduced-motion:reduce) { .intro-pending .brand-intro { display:none; } }