/* AI: a brain of bulbs wired to six capabilities. Desktop holds the screen (sticky stage) while the scroll builds it,
   about one and a fifth screens of scrolling; phones and short landscape screens let the scene grow taller and scroll normally. */
#ai { height: 190vh; }
#ai .stage { display: block; }

#ai .ai-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#ai .ai-ui {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: clamp(8px, 1.6svh, 20px);
  padding: clamp(84px, 12svh, 100px) var(--pad) clamp(18px, 3.4svh, 36px);
}

/* header: title and statement left, the multiplier right */
#ai .ai-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
#ai .ai-title { font-size: clamp(54px, min(7vw, 10.5svh), 112px); letter-spacing: -0.05em; line-height: .9; font-weight: 800; }
#ai .ai-state { margin-top: clamp(8px, 1.4svh, 16px); font-size: clamp(16px, min(1.6vw, 2.8svh), 26px); color: var(--soft); max-width: 27em; text-wrap: balance; }
#ai .w { display: inline-block; clip-path: inset(-0.1em -0.1em -0.16em -0.1em); }
#ai .w > span { display: inline-block; will-change: transform; }

#ai .ai-mult {
  font-weight: 800; letter-spacing: -0.05em; line-height: .8; text-align: right; white-space: nowrap;
  font-size: clamp(64px, min(10vw, 16svh), 168px); font-variant-numeric: tabular-nums lining-nums;
  padding-top: .02em;
}
#ai .ai-mult .mx { color: var(--bulb-cyan); margin-left: .02em; }

/* the system: capabilities left, brain and prompt centre, capabilities right */
#ai .ai-sys {
  display: grid; min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 2.25fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4.6vw, 84px);
}
#ai .ai-core { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; min-height: 0; }
#ai .core-ph { flex: 1; min-height: 0; }
#ai .ai-core { margin-top: calc(-1 * clamp(24px, 12svh, 110px)); }
#ai .ai-prompt {
  height: 2.2em; display: flex; align-items: center; justify-content: center; gap: .7em;
  font-family: var(--mono); font-size: clamp(14px, min(1.25vw, 2.2svh), 19px); color: var(--ink); white-space: nowrap;
}
#ai .ai-prompt .pg { color: var(--bulb-cyan); }
#ai .cur { display: inline-block; width: .55em; height: 1.1em; background: var(--ink); margin-left: -.3em; animation: ai-cursor 2.4s ease-in-out infinite; }
@keyframes ai-cursor { 0%, 100% { opacity: .85; } 50% { opacity: .12; } }
.is-reduced #ai .cur { animation: none; opacity: .6; }

#ai .mod { align-self: center; max-width: 25em; width: 100%; padding-top: clamp(10px, 1.6svh, 18px); position: relative; }
#ai .mod::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  transform-origin: var(--rule-o, 0 50%); transform: scaleX(var(--rule, 1));
}
#ai .mod[data-side="l"] { grid-column: 1; justify-self: end; text-align: right; --rule-o: 100% 50%; }
#ai .mod[data-side="r"] { grid-column: 3; justify-self: start; text-align: left; }
#ai .mod[data-i="0"], #ai .mod[data-i="3"] { grid-row: 1; }
#ai .mod[data-i="1"], #ai .mod[data-i="4"] { grid-row: 2; }
#ai .mod[data-i="2"], #ai .mod[data-i="5"] { grid-row: 3; }

#ai .mod-top { display: flex; align-items: center; gap: .6em; }
#ai .mod[data-side="l"] .mod-top { flex-direction: row-reverse; }
#ai .mb { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(160, 180, 230, .45); background: transparent; }
#ai .mn { font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-size: clamp(22px, min(2.5vw, 4.4svh), 40px); }
#ai .ms {
  margin-top: .55em; font-family: var(--mono); font-size: clamp(13px, min(1vw, 1.8svh), 15px); line-height: 1.2;
  height: 1.2em; white-space: nowrap; display: grid; color: var(--mute);
}
#ai .mod[data-side="l"] .ms { justify-items: end; }
#ai .mod[data-side="r"] .ms { justify-items: start; }
#ai .st { grid-area: 1 / 1; color: var(--soft); }
#ai .st:last-child { color: var(--ink); }
#ai .ml { text-wrap: balance; margin-top: .45em; font-size: clamp(14px, min(1.1vw, 2.05svh), 18px); line-height: 1.38; color: var(--soft); font-weight: 500; letter-spacing: -0.01em; }

/* footer: the big line and the closer */
#ai .ai-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(20px, 3vw, 56px); }
#ai .ai-big { text-wrap: balance; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-size: clamp(30px, min(4.2vw, 7svh), 68px); }
#ai .ai-close { flex: 0 1 17em; text-align: right; text-wrap: balance; font-size: clamp(16px, min(1.5vw, 2.6svh), 24px); color: var(--ink); font-weight: 600; }

/* phones and short landscape: the scene is taller and scrolls normally; the brain sits on top,
   a spine of light drops down the left with the six capabilities hanging off it */
@media (max-width: 820px), (max-height: 480px) and (orientation: landscape) {
  #ai { height: auto; }
  #ai .stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  #ai .ai-ui {
    height: auto; display: flex; flex-direction: column; row-gap: 0;
    padding: calc(76px + env(safe-area-inset-top, 0px)) max(var(--pad), env(safe-area-inset-left, 0px)) calc(72px + env(safe-area-inset-bottom, 0px));
  }
  #ai .ai-head, #ai .ai-id { display: contents; }
  #ai .ai-title { order: 1; font-size: clamp(58px, 17vw, 84px); }
  #ai .ai-state { order: 2; margin-top: 14px; font-size: 18px; line-height: 1.32; max-width: 22em; }
  #ai .ai-sys { order: 3; display: flex; flex-direction: column; margin-top: 26px; }
  #ai .ai-mult { order: 4; margin-top: 56px; text-align: left; font-size: clamp(72px, 22vw, 104px); }
  #ai .ai-foot { order: 5; display: block; margin-top: 18px; }

  #ai .ai-core { flex-direction: column; margin-top: 0; }
  #ai .core-ph { flex: none; height: min(34svh, 76vw * .8); max-height: 300px; min-height: 170px; }
  #ai .ai-prompt { height: 2em; margin-top: 4px; font-size: 14px; }

  #ai .mod[data-side] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: baseline;
    grid-column: auto; grid-row: auto; justify-self: stretch; align-self: auto;
    max-width: 36em; width: 100%; text-align: left; --rule-o: 0 50%;
    padding: 20px 0 20px 28px; margin-top: 0;
  }
  #ai .mod[data-i="0"] { margin-top: 30px; }
  #ai .mod .mod-top { grid-column: 1; grid-row: 1; flex-direction: row; gap: 0; }
  #ai .mod[data-side="l"] .mod-top { flex-direction: row; }
  #ai .mod .mb { position: absolute; left: 0; top: -5px; width: 11px; height: 11px; }
  #ai .mn { font-size: 21px; }
  #ai .mod .ms { grid-column: 2; grid-row: 1; margin: 0; font-size: 13px; height: 1.2em; justify-items: end; }
  #ai .mod[data-side="l"] .ms, #ai .mod[data-side="r"] .ms { justify-items: end; }
  #ai .mod .ml { grid-column: 1 / 3; grid-row: 2; font-size: 14px; line-height: 1.4; margin-top: 8px; max-width: 28em; text-wrap: pretty; }

  #ai .ai-big { font-size: clamp(29px, 8.4vw, 44px); margin-top: 0; }
  #ai .ai-close { text-align: left; flex: none; margin-top: 12px; font-size: 18px; max-width: 20em; font-weight: 500; color: var(--soft); }
}