/* ============================================================
   desk.cloud — cinematic art direction
   The single decisive move: a premium proportional DISPLAY face
   (Space Grotesk) for all headings + wordmark, mixed-case instead of
   blocky all-caps, restrained glow, and editorial composition.
   Monospace is now an ACCENT (eyebrows, labels, code), not the whole page.
   Loads last; overrides the base terminal styling.
   ============================================================ */

:root {
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ink: #eafdff;            /* crisp near-white for display type */
  --ink-soft: #9fc7cc;
}

/* ---- HERO: title sequence, mixed-case, huge, restrained glow ---- */
.hero { min-height: 100vh; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 8.4vw, 7.2rem);
  font-weight: 600; line-height: 0.92; letter-spacing: -0.035em;
  text-transform: none;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(0,245,255,.14);
}
h1 .scramble { font-family: var(--font-display); }
h1 em {
  font-style: normal; font-weight: 600;
  color: var(--accent, #ffd166);
  text-shadow: 0 0 50px rgba(255,209,102,.22);
}
.kicker { font-size: 10.5px; letter-spacing: .42em; color: var(--line-strong); margin-bottom: 30px; }
.lede { margin-top: 30px; color: var(--ink-soft); font-size: clamp(13.5px, 1.45vw, 15.5px); line-height: 1.78; max-width: 31em; }
.lede b { color: var(--ink); font-weight: 500; }

/* hero line-mask reveal: each block masks up while it deciphers */
h1 .stage { display: block; overflow: hidden; padding-bottom: .085em; }
h1 .stage.in { animation: lineRise 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes lineRise { from { transform: translateY(106%); } to { transform: translateY(0); } }

/* one slow cinematic light-beam sweeps the hero on load */
.hero { position: relative; }
.hero > .sweep {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden;
  background: linear-gradient(105deg, transparent 43%, rgba(190,255,255,.06) 50%, transparent 57%);
  background-size: 280% 100%; background-position: 140% 0;
  animation: heroSweep 2.8s cubic-bezier(.22,1,.36,1) .4s 1 both;
}
@keyframes heroSweep { to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce){
  .hero > .sweep { display: none; }
  h1 .stage { overflow: visible; }
  h1 .stage.in { animation: none; }
}

/* ---- SECTION HEADINGS: display face, mixed-case, editorial ---- */
.band h2, .final h2 {
  font-family: var(--font-display);
  font-weight: 600; text-transform: none;
  letter-spacing: -0.028em; line-height: 1.0;
  color: var(--ink);
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  text-shadow: 0 0 50px rgba(0,245,255,.08);
}
.band .sub, .final .sub { color: var(--ink-soft); font-size: 14px; line-height: 1.78; }
.final h2 { font-size: clamp(2.3rem, 6vw, 4.4rem); }

/* eyebrows stay mono + caps — the techy counterpoint to mixed-case heads */
.eyebrow { font-size: 10.5px; letter-spacing: .34em; }

/* card titles in the display face too (mixed-case, larger) */
.pillar h3 { font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: -.01em; font-size: 19px; color: var(--ink); }
.feat h3 { font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); }
.subtool b, .bcard b { font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 14.5px; }
.nav-mark { font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }

/* ---- OVERSIZED SECTION NUMERALS as composition ---- */
section.band[data-index] { position: relative; }
section.band[data-index]::before {
  content: attr(data-index);
  font-family: var(--font-display);
  position: absolute; left: clamp(8px, 4vw, 40px); top: clamp(28px, 5vw, 60px);
  font-size: clamp(84px, 12vw, 200px); font-weight: 700; line-height: .78; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(0,245,255,.13);
  z-index: 0; pointer-events: none; will-change: transform;
}
section.band[data-index] > * { position: relative; z-index: 1; }
section.final::before { display: none; }
@media (min-width: 920px){
  section.band > .eyebrow,
  section.band > h2,
  section.band > .sub { padding-left: clamp(92px, 11vw, 184px); }
}
@media (max-width: 919px){
  section.band[data-index]::before { font-size: clamp(64px, 15vw, 110px); opacity: .55; left: auto; right: clamp(8px,4vw,20px); }
  section.band > .eyebrow, section.band > h2, section.band > .sub { padding-right: 64px; }
}

/* ---- calmer hero veil so the type reads crisp ---- */
.veil {
  background:
    radial-gradient(60% 50% at 16% 0%, rgba(0,245,255,.10), transparent 45%),
    radial-gradient(50% 60% at 100% 100%, rgba(255,209,102,.045), transparent 50%),
    linear-gradient(90deg, rgba(2,5,6,.74) 0%, rgba(2,5,6,.36) 46%, rgba(2,5,6,.12) 72%) !important;
}

/* ============================================================
   PER-SECTION SIGNATURE ENTRANCES
   Each section assembles with its OWN distinct motion (snappy, ~0.5–0.65s).
   Specificity section[data-anim] .reveal.in (0,0,3,1) beats the global
   .reveal-group .reveal.in (0,0,3,0), so these win without !important.
   Every keyframe ends at identity (transform/filter none, opacity 1,
   no clip) so the settled state is correct even if the anim is killed.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  /* 01 SUBSYSTEMS — DEAL: cards thrown in from the left, like dealing a hand */
  section[data-anim="deal"] .reveal.in {
    animation: sgDeal .58s cubic-bezier(.2,.8,.2,1) both; transform-origin: left center;
  }
  @keyframes sgDeal {
    0%   { opacity: 0; transform: perspective(900px) translateX(-72px) rotateY(-24deg); filter: blur(4px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  /* 02 DEMO — POWER-ON: snaps open vertically with a CRT brightness flash */
  section[data-anim="power"] .reveal.in {
    animation: sgPower .55s cubic-bezier(.22,1,.36,1) both; transform-origin: center center;
  }
  @keyframes sgPower {
    0%   { opacity: 0; transform: scaleY(.014) scaleX(.72); filter: brightness(3) saturate(0); }
    46%  { opacity: 1; transform: scaleY(1.04) scaleX(1); filter: brightness(1.7); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  /* 03 RUNTIME — GLITCH: hard chromatic jitter slams content into place */
  section[data-anim="glitch"] .reveal.in { animation: sgGlitch .5s steps(1, end) both; }
  @keyframes sgGlitch {
    0%   { opacity: 0; transform: translateX(-28px) skewX(15deg); }
    18%  { opacity: 1; transform: translateX(20px) skewX(-11deg); }
    36%  { transform: translateX(-12px) skewX(7deg); }
    54%  { transform: translateX(7px) skewX(-4deg); }
    74%  { transform: translateX(-3px) skewX(1deg); }
    100% { opacity: 1; transform: none; }
  }

  /* 04 CHANNELS — WIPE: revealed left→right behind a moving clip edge */
  section[data-anim="wipe"] .reveal.in { animation: sgWipe .6s cubic-bezier(.65,0,.35,1) both; }
  @keyframes sgWipe {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14px); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  }

  /* 05 ERA — POP: springs up from small with a confident overshoot */
  section[data-anim="pop"] .reveal.in {
    animation: sgPop .56s cubic-bezier(.34,1.56,.64,1) both; transform-origin: 50% 100%;
  }
  @keyframes sgPop {
    0%   { opacity: 0; transform: translateY(46px) scale(.7); filter: blur(3px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  /* 06 CLOUD — UNFOLD: panels hinge up from a folded baseline */
  section[data-anim="unfold"] .reveal.in {
    animation: sgUnfold .6s cubic-bezier(.22,1,.36,1) both; transform-origin: 50% 100%;
  }
  @keyframes sgUnfold {
    0%   { opacity: 0; transform: perspective(1100px) rotateX(-80deg) translateY(22px); filter: brightness(1.45); }
    55%  { opacity: 1; filter: brightness(1.12); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  /* INSTALL — ZOOM: rushes in from a blurred over-scale */
  section[data-anim="zoom"] .reveal.in { animation: sgZoom .6s cubic-bezier(.16,1,.3,1) both; }
  @keyframes sgZoom {
    0%   { opacity: 0; transform: scale(1.32); filter: blur(10px); }
    100% { opacity: 1; transform: none; filter: none; }
  }
}

/* ============================================================
   LIVING COMMAND DECK (hero)
   The hero mock is a miniature, continuously-alive DESK: four agent
   terminals typing in parallel, a streaming commit log, and an
   agent-to-agent channel feed. The product, working — not described.
   ============================================================ */
.deck { display: grid; grid-template-columns: 1.42fr 1fr; gap: 10px; align-items: stretch; }
@media (max-width: 1080px){ .deck { grid-template-columns: 1fr; } }

/* terminals keep their 2×2 grid but shrink slightly to make room for the rail */
.deck .grid-cluster { grid-template-columns: 1fr 1fr; }
.deck .cell { min-height: 120px; }
.deck .cell-body { min-height: 70px; font-size: 10px; }

/* right rail: two stacked live panels */
.deck-rail { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; }
@media (max-width: 1080px){ .deck-rail { grid-template-rows: auto auto; } }
.rail-panel {
  position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 0;
  background: var(--term-bg, #02080a);
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
.rail-panel::before { content: ""; position: absolute; inset: 0; clip-path: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line, rgba(0,245,255,.3)), inset 0 0 24px var(--glow); }
.rp-head { display: flex; align-items: center; gap: 7px; padding: 7px 11px; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--line-strong, #4fe); border-bottom: 1px solid var(--line, rgba(0,245,255,.18)); }
.rp-live { width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #21f7a3); box-shadow: 0 0 8px var(--ok); animation: blink 1.6s ease-in-out infinite; }
.rp-count { margin-left: auto; color: var(--text-dim, #6aa); letter-spacing: .8px; text-transform: none; font-size: 9px; }
.rp-body { padding: 8px 10px; overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 5px; justify-content: flex-end; }

/* commit stream rows */
.commit { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 7px; font-size: 9.5px; line-height: 1.35; color: var(--term-fg, #bdeef0); }
.commit.fresh { animation: commitIn .42s cubic-bezier(.2,.9,.2,1) both; }
@keyframes commitIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
.commit .lane { width: 7px; height: 7px; transform: rotate(45deg); flex: none; box-shadow: 0 0 7px currentColor; }
.commit .hash { color: var(--accent, #ffd166); font-variant-numeric: tabular-nums; }
.commit .msg { color: var(--ink-soft, #9fc7cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commit.fade { opacity: .42; }
.lane.c1 { color: var(--line-strong, #4fe); background: var(--line-strong, #4fe); }
.lane.c2 { color: var(--ok, #21f7a3); background: var(--ok, #21f7a3); }
.lane.c3 { color: var(--accent, #ffd166); background: var(--accent, #ffd166); }

/* channel feed rows */
.cmsg { font-size: 9.5px; line-height: 1.45; color: var(--term-fg, #bdeef0); }
.cmsg.fresh { animation: commitIn .4s cubic-bezier(.2,.9,.2,1) both; }
.cmsg .who { color: var(--line-strong, #4fe); }
.cmsg .who.human { color: var(--accent, #ffd166); }
.cmsg .who::after { content: " ▸ "; color: var(--text-dim, #6aa); }
.cmsg .at { color: var(--accent, #ffd166); }
.cmsg.fade { opacity: .42; }

@media (prefers-reduced-motion: reduce){ .commit.fresh, .cmsg.fresh { animation: none; } }

/* status dot transition support (running ⇄ attention) */
.dot { transition: background .25s; }
.dot.run { background: var(--ok); animation: pdot 2.4s ease-in-out infinite; }
.dot.att { background: var(--accent); animation: pdot 1.1s ease-in-out infinite; }