.demo-screen { position: relative; container-type: inline-size; }
.intro {
  position: absolute; inset: 0; z-index: 30; background: #0b0c0e;
  opacity: 0; transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  font-family: var(--sans); color: var(--ink); overflow: hidden;
}
.intro.on { opacity: 1; }
.intro.out { opacity: 0; transform: scale(1.03); pointer-events: none; }

.intro-box { position: absolute; left: 0; right: 0; top: 0; height: min(100%, 62cqw); }
.intro-head { position: absolute; left: 0; right: 0; top: 11%; text-align: center; }
.intro-num { font-size: clamp(40px, 8.5cqw, 104px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.intro.wait .intro-num, .intro.wait .intro-cap { opacity: 0; }
.intro-num, .intro-cap { transition: opacity 400ms var(--ease); }
.intro-cap { position: relative; height: 1.6em; margin-top: 0.7em; font-size: clamp(12px, 1.45cqw, 17px); color: var(--ink-soft); }
.intro-cap span { position: absolute; left: 0; right: 0; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.intro-cap-b { opacity: 0; transform: translateY(8px); }
.intro.one .intro-cap-a { opacity: 0; transform: translateY(-8px); }
.intro.one .intro-cap-b { opacity: 1; transform: none; color: var(--ink); }
.intro-field { position: absolute; inset: 0; }
.intro-tile {
  position: absolute; left: var(--x); top: var(--y); width: clamp(54px, 9.4cqw, 116px);
  display: flex; flex-direction: column; align-items: center; gap: 0.55em;
  transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  transition: left 700ms var(--ease), top 700ms var(--ease), transform 420ms var(--ease), opacity 420ms var(--ease);
}
.intro-tile.in { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.intro.grid .intro-tile { left: var(--gx); top: var(--gy); transition-delay: calc(var(--i) * 25ms); }
.intro.fold .intro-tile {
  left: 50%; top: 58%; transform: translate(-50%, -50%) scale(0.25); opacity: 0;
  transition: left 600ms var(--ease), top 600ms var(--ease), transform 600ms var(--ease), opacity 500ms var(--ease) 150ms;
  transition-delay: calc(var(--i) * 35ms);
}
.intro-ic {
  width: clamp(38px, 5.6cqw, 68px); aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}
.intro-ic svg { width: 48%; height: 48%; color: #fff; }
.intro-lb { font-size: clamp(9px, 1.05cqw, 13px); color: var(--ink-soft); white-space: nowrap; }
.intro-logo {
  position: absolute; left: 50%; top: 58%; width: clamp(64px, 10cqw, 124px); aspect-ratio: 1; border-radius: 24%;
  background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(240, 70, 14, 0.45), 0 22px 50px -18px rgba(240, 70, 14, 0.7);
  transform: translate(-50%, -50%) scale(0.4); opacity: 0;
  transition: transform 600ms var(--ease), opacity 400ms var(--ease), box-shadow 900ms var(--ease);
}
.intro-logo svg { width: 56%; height: 56%; }
.intro.one .intro-logo { transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 0 clamp(10px, 1.6cqw, 22px) rgba(240, 70, 14, 0), 0 22px 50px -18px rgba(240, 70, 14, 0.7); }
.intro-skip {
  position: absolute; right: 16px; bottom: 14px; font: 500 12px var(--mono); color: var(--ink-faint);
  background: none; border: 0; text-decoration: underline; padding: 6px 4px; cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.intro-skip:hover { color: var(--ink); border-color: var(--line-strong); }
.intro-replay {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 0; background: none; border: 0;
  font: inherit; color: var(--ink-soft); cursor: pointer; transition: color var(--t);
}
.intro-replay:hover { color: var(--accent-bright); }
.intro-replay .lucide { width: 13px; height: 13px; }

@keyframes intro-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.intro-reveal .card { animation: intro-card 640ms var(--ease) both; }
.intro-reveal .card:nth-child(2) { animation-delay: 70ms; }
.intro-reveal .card:nth-child(3) { animation-delay: 140ms; }
.intro-reveal .card:nth-child(4) { animation-delay: 210ms; }
.intro-reveal .card:nth-child(5) { animation-delay: 280ms; }
.intro-reveal .card:nth-child(n+6) { animation-delay: 350ms; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } .intro-reveal .card { animation: none; } }
@container (max-width: 620px) {
  .intro-lb, .intro-skip { display: none; }
  .intro-head { top: 7%; }
  .intro-num { font-size: 34px; }
  .intro-cap { font-size: 10.5px; margin-top: 0.4em; }
  .intro-tile { width: 40px; }
  .intro-ic { width: 26px; }
  .intro-logo { width: 52px; }
}

@container (max-width: 620px) {
  .intro-lb, .intro-skip { display: none; }
  .intro-head { top: 7%; }
  .intro-num { font-size: 34px; }
  .intro-cap { font-size: 10.5px; margin-top: 0.4em; }
  .intro-tile { width: 40px; }
  .intro-ic { width: 26px; }
  .intro-logo { width: 52px; }
}