/* ==========================================================================
   Intro: terminal → "build ui" → agents draw a wireframe → real page
   Runs only when <html> has the .intro class (set in <head>).
   ========================================================================== */

:root {
  --intro-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --intro-term-bg: #18181b;
  --intro-term-text: #e4e4e7;
  --intro-term-muted: #71717a;
  --intro-term-border: rgba(0, 0, 0, 0.08);
  --intro-term-shadow: 0 24px 64px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  --intro-wire-bar: #eaeaeb;
  --intro-wire-line: #cccccd;
  --intro-wire-hatch: #bebebf;
  --intro-wire-label: #a2a2a9;
  --intro-accent: #0073ff;
  --intro-agent-1: #0073ff;
  --intro-agent-2: #8b5cf6;
  --intro-agent-3: #f97316;
  --intro-agent-4: #10b981;
  --intro-agent-5: #ec4899;
  --intro-agent-6: #0891b2;
  --intro-agent-7: #ca8a04;
  --intro-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --intro-term-bg: #0e0e10;
    --intro-term-border: rgba(255, 255, 255, 0.08);
    --intro-term-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    --intro-wire-bar: #2a2a2d;
    --intro-wire-line: #414144;
    --intro-wire-hatch: #4d4d50;
    --intro-wire-label: #71717a;
    --intro-accent: #3b9eff;
    --intro-agent-1: #3b9eff;
    --intro-agent-2: #a78bfa;
    --intro-agent-3: #fb923c;
    --intro-agent-4: #34d399;
    --intro-agent-5: #f472b6;
    --intro-agent-6: #22d3ee;
    --intro-agent-7: #facc15;
  }
}

html.intro,
html.intro body {
  overflow: hidden;
}

html.intro .content {
  animation: none;
  opacity: 0;
}

html.intro-done .content {
  animation: none;
}

/* Layers ------------------------------------------------------------------ */

.intro-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  cursor: default;
}

.intro-wire {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

/* Terminal ---------------------------------------------------------------- */

.intro-term {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(520px, calc(100vw - 32px));
  border: 1px solid var(--intro-term-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--intro-term-bg);
  box-shadow: var(--intro-term-shadow);
  font-family: var(--intro-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--intro-term-text);
  transform: translate(-50%, -50%) scale(0.96);
  transform-origin: center;
  opacity: 0;
  filter: blur(6px);
  transition: transform 450ms var(--intro-ease), opacity 350ms ease, filter 350ms ease;
}

.intro-term.is-open {
  transform: translate(-50%, -50%);
  opacity: 1;
  filter: blur(0);
}

/* Default: a thin line that opens up and down into the window */
.intro-term.is-b {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
  box-shadow: none;
  clip-path: inset(calc(50% - 1px) 50% calc(50% - 1px) 50% round 1px);
  transition: clip-path 380ms cubic-bezier(0.65, 0, 0.35, 1), transform 600ms var(--intro-ease), opacity 400ms ease, filter 400ms ease;
}

.intro-term.is-b.is-line {
  clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0 round 1px);
}

.intro-term.is-b.is-open {
  clip-path: inset(0 round 10px);
  transition: clip-path 520ms cubic-bezier(0.32, 0.72, 0, 1), transform 600ms var(--intro-ease), opacity 400ms ease, filter 400ms ease;
}

.intro-term.is-b.is-full {
  clip-path: none;
  box-shadow: var(--intro-term-shadow);
  transition: box-shadow 400ms ease, transform 600ms var(--intro-ease), opacity 400ms ease, filter 400ms ease;
}

.intro-term.is-docked {
  transform: translate(calc(-50% + var(--dock-x, 0px)), calc(-50% + var(--dock-y, 0px))) scale(var(--dock-scale, 0.7));
  transition: transform 600ms var(--intro-ease), opacity 400ms ease, filter 400ms ease;
}

.intro-term.is-closing {
  opacity: 0;
  filter: blur(6px);
}

.intro-term__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.intro-term__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3f3f46;
}

.intro-term__bar span {
  flex: 1;
  margin-right: 46px;
  text-align: center;
  font-size: 11px;
  color: var(--intro-term-muted);
}

.intro-term__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 236px;
  padding: 12px 16px 14px;
  overflow: hidden;
  white-space: pre;
}

.intro-term__body.is-clearing {
  opacity: 0;
  transition: opacity 160ms ease;
}

.intro-term__line {
  min-height: 1.6em;
}

.intro-term .is-muted { color: var(--intro-term-muted); }
.intro-term .is-ok { color: #4ade80; }
.intro-term .is-accent { color: #60a5fa; }

.intro-caret {
  display: inline-block;
  width: 7px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--intro-term-text);
  animation: intro-blink 1s steps(1) infinite;
}

@keyframes intro-blink {
  50% { opacity: 0; }
}

/* Wireframe --------------------------------------------------------------- */

.intro-frame {
  position: absolute;
  border: 1px dashed var(--intro-wire-line);
  border-radius: 4px;
  /* The top inset leaves room for the label on the top border, from
     the start, so the label is never cut while the frame draws. */
  clip-path: inset(-10px 100% 100% 0);
  transition: clip-path 420ms var(--intro-ease);
}

.intro-frame.is-drawn {
  clip-path: inset(-10px -2px -2px -2px);
}

/* The label sits on the top border, so it does not cover content
   on the right of a block (for example the Apps arrow). */
.intro-frame__label {
  position: absolute;
  top: -6px;
  right: 8px;
  padding: 0 4px;
  background: var(--color-background);
  font-family: var(--intro-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--intro-wire-label);
  white-space: nowrap;
}

.intro-bar {
  position: absolute;
  border-radius: 3px;
  background: color-mix(in srgb, var(--agent) 32%, var(--color-background));
  clip-path: inset(0 100% 0 0);
  transform-origin: left center;
  transition: background-color 700ms ease;
}

.intro-bar.is-set {
  background: var(--intro-wire-bar);
}

.intro-bar.is-link.is-set {
  background: color-mix(in srgb, var(--intro-accent) 16%, var(--color-background));
}

/* Agents ------------------------------------------------------------------ */

.intro-agent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 250ms ease;
  will-change: transform;
}

.intro-agent.is-on {
  opacity: 1;
}

.intro-agent svg {
  width: 14px;
  height: 14px;
  margin: -2px 0 0 -2px;
  color: var(--agent);
}

.intro-agent span {
  margin: 10px 0 0 -2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--agent);
  font-family: var(--intro-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
}

/* Wireframe style variants (?intro&wire=N) ------------------------------
   1  square corners, solid bars
   2  square corners, diagonal-line bars
   3  square corners, diagonal-line bars with an outline
   4  as 3, with wider lines and solid frame lines
   The bar colour comes from `color`, so the lines change from the
   agent colour to grey the same way the solid bars do. All wireframe
   colours are solid (mixed with the background, not see-through), so
   lines that cross the outline do not look darker. */

html[data-wire] .intro-frame,
html[data-wire] .intro-bar,
html[data-wire] .intro-agent span {
  border-radius: 0;
}

html[data-wire="2"] .intro-bar,
html[data-wire="3"] .intro-bar,
html[data-wire="4"] .intro-bar {
  --hatch-gap: 4px;
  color: color-mix(in srgb, var(--agent) 70%, var(--color-background));
  background: repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px var(--hatch-gap));
  transition: color 700ms ease, box-shadow 700ms ease;
}

html[data-wire="3"] .intro-bar,
html[data-wire="4"] .intro-bar {
  box-shadow: inset 0 0 0 1px currentColor;
}

html[data-wire="4"] .intro-bar {
  --hatch-gap: 6px;
}

html[data-wire="4"] .intro-frame {
  border-style: solid;
}

html[data-wire="2"] .intro-bar.is-set,
html[data-wire="3"] .intro-bar.is-set,
html[data-wire="4"] .intro-bar.is-set {
  background: repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px var(--hatch-gap));
  color: var(--intro-wire-hatch);
}

html[data-wire="2"] .intro-bar.is-link.is-set,
html[data-wire="3"] .intro-bar.is-link.is-set,
html[data-wire="4"] .intro-bar.is-link.is-set {
  color: color-mix(in srgb, var(--intro-accent) 45%, var(--color-background));
}

/* Wireframe → page sweep ------------------------------------------------- */

.intro-scan {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--intro-accent);
  box-shadow: 0 0 12px 1px var(--intro-accent);
  opacity: 0;
}

/* Skip -------------------------------------------------------------------- */

.intro-skip {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 41;
  padding: 6px 2px;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: var(--letter-spacing);
  color: var(--color-text-muted);
  cursor: pointer;
}

.intro-skip:hover,
.intro-skip:focus-visible {
  color: var(--color-text-primary);
}

@media (max-width: 768px) {
  .intro-term {
    font-size: 12px;
  }

  .intro-term__body {
    height: 208px;
  }

  .intro-skip {
    top: 14px;
    right: 16px;
  }
}