/* Kiteworks page scroll story: the desk-computer hero pulls back, the four controls play as the homepage film scene,
   the case file settles under the lamp, and the closing desk comes forward. */

/* Hero: the AIRA desk computer, close on its monitor, plays the trailer countdown through the VHS screen effect
   (kiteworks-film.js) in front of a dark signal plate (hero-signal, generated): black on the left under the copy, a
   crimson haze with a few clean signal tears on the right. kiteworks-hero-glitch.js cuts real tears out of that plate
   every so often. The section's shade darkens the copy side and fades the top and bottom into black. The glass sits
   at 44.9% / 29% (28.3% x 29.9%) of the 1448 x 1086 desk plate; the monitor is centred on 59.05% / 46%. */
.kw-home .kw-hero { position: relative; isolation: isolate; overflow: clip; background: #030202; }
.kw-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  transform: scale(calc(1.04 + var(--kw-hero-out, 0) * .05)); transform-origin: 70% 50%;
  opacity: calc(1 - var(--kw-hero-out, 0) * .55); }
.kw-hero__plate { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%;
  filter: brightness(.82) contrast(1.06) saturate(1.04); }
.kw-hero__glitch { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.kw-home .kw-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#030202 0%, #03020200 16%, #03020200 78%, #030202 100%),
    linear-gradient(90deg, #030202e6 0%, #030202b3 30%, #03020200 54%),
    radial-gradient(ellipse 70% 80% at 70% 50%, #03020200 50%, #03020299 100%); }
.kw-hero .kw-film__copy :is(h1, .slate, .kw-hero__lead, .body, p) { text-shadow: 0 1px 2px rgb(3 2 2 / .8), 0 0 24px rgb(3 2 2 / .95); }
/* A wide copy column for the question and its answer. The desk frame keeps its size by reaching into the gap on its
   left and past the column on its right (--desk-bleed-*), which also sets the monitor a little further right; the
   bezel stays inside the viewport from 900px up and the hero clips the faded edge of the frame. */
@media (min-width: 900px) {
  .kw-hero .kw-film__grid { --hero-gap: clamp(32px, 4.4vw, 64px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--hero-gap); }
  .kw-hero .kw-desk__set { --desk-bleed-l: var(--hero-gap); --desk-bleed-r: calc(var(--gutter) + 2vw);
    width: calc(100% + var(--desk-bleed-l) + var(--desk-bleed-r)); margin-left: calc(-1 * var(--desk-bleed-l)); margin-right: calc(-1 * var(--desk-bleed-r)); }
}
/* The frame's faded edge can sit beside the button, so only the screen's own control takes the pointer. */
.kw-desk__set { pointer-events: none; }
.kw-desk__set .kw-film__pause { pointer-events: auto; }
/* With the line above it gone, the demo button follows the copy directly at its own width. */
.kw-hero .kw-film__demo { margin-top: 34px; padding-top: 0; border-top: 0; }
@media (min-width: 600px) { .kw-hero .kw-film__demo .btn { width: auto; padding-inline: 34px; } }
/* The paragraph uses the wider column instead of its old narrow measure. */
.kw-hero .kw-film__copy .body { max-width: 60ch; text-wrap: pretty; }
/* Balanced lines keep the question in phrases (WHO CONTROLS / AI AGENTS) in the narrower column. */
.kw-home .kw-hero h1 { text-wrap: balance; }

.kw-desk { --out: var(--kw-hero-out, 0); position: relative; }
/* The whole monitor bezel stays inside the solid part of the mask; only the wood wall and desk edges fade out. */
.kw-desk__set { --cam-w: 230%; position: relative; aspect-ratio: 1 / .92; margin-right: calc(-1 * var(--gutter)); overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 57% 58% at 50% 48%, #000 74%, transparent 100%);
  mask-image: radial-gradient(ellipse 57% 58% at 50% 48%, #000 74%, transparent 100%); }
.kw-desk__set::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 48% 46% at 50% 47%, rgb(3 2 2 / 0) 66%, rgb(3 2 2 / .62) 100%); }
/* Scrolling out of the hero eases the camera back from the monitor and dims the desk. */
.kw-desk__cam { position: absolute; left: 50%; top: 50%; width: var(--cam-w); aspect-ratio: 1448 / 1086; transform-origin: 59.05% 46%;
  transform: translate(-59.05%, -46%) scale(calc(1 - var(--out) * .1)); }
.kw-desk__plate { display: block; width: 100%; height: 100%; filter: brightness(calc(.66 - var(--out) * .28)) saturate(.8) contrast(1.08); }
.kw-desk__screen { position: absolute; left: 44.9%; top: 29%; width: 28.3%; height: 29.9%; overflow: hidden; container-type: size;
  border-radius: 6% / 8%; background: #080302; box-shadow: 0 0 0 1px #000; }
.kw-desk__picture { position: absolute; inset: 0; }
.kw-desk__feed { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06);
  filter: brightness(.6) contrast(1.1) saturate(.95); }
.kw-desk__card { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 3.4cqh; padding: 6cqh 6cqw;
  text-align: center; background: radial-gradient(ellipse 82% 68% at 50% 50%, rgb(8 4 3 / .74), rgb(8 4 3 / .42) 62%, transparent 100%); }
.kw-desk__title { display: block; width: 74cqw; height: auto; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 1.4cqw rgb(241 1 1 / .45)); }
.kw-hero .kw-desk__trailer { margin: 0; font: 400 5.6cqw/1.1 var(--font-display); letter-spacing: .06em; white-space: nowrap; text-transform: uppercase;
  color: #ece6da; text-shadow: 0 2px 0 #000, 0 0 12px #000; }
.kw-desk__count { display: flex; align-items: flex-start; justify-content: center; gap: 1.8cqw; }
.kw-desk__count span { display: grid; justify-items: center; gap: 2cqh; }
.kw-desk__count b { font: 700 11.4cqw/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: #ece6da; text-shadow: 0 2px 0 #000; }
.kw-desk__count small { font: 400 max(9px, 2.6cqw)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #ece6da; text-shadow: 0 1px 0 #000; }
.kw-desk__count i { font: 400 8cqw/1 var(--font-mono); font-style: normal; color: #f10101; animation: kw-desk-colon 1s steps(1, end) infinite; }
@keyframes kw-desk-colon { 0%, 59% { opacity: 1; } 60%, 100% { opacity: .35; } }
.kw-desk [data-canvasui-vhs="output"] { z-index: 2; opacity: .4; pointer-events: none; }
.kw-desk__glass { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(to bottom, rgb(255 236 210 / .045) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 60% 46% at 34% 22%, rgb(255 236 210 / .08), transparent 70%);
  box-shadow: inset 0 0 6cqw rgb(0 0 0 / .85); }

/* Power-on, once: the tube opens out from a bright centre line. */
.kw-desk__power { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.kw-desk__power::before, .kw-desk__power::after { content: ""; position: absolute; left: 0; right: 0; height: 50.5%; background: #050404;
  animation: kw-desk-power 1.1s cubic-bezier(.3, .7, .2, 1) .35s both; }
.kw-desk__power::before { top: 0; box-shadow: 0 2px 0 #fff3e4, 0 0 16px 3px rgb(255 190 150 / .7); --to: -102%; }
.kw-desk__power::after { bottom: 0; --to: 102%; }
@keyframes kw-desk-power { 0%, 30% { transform: none; } 100% { transform: translateY(var(--to)); box-shadow: none; } }

/* A signal burst in the background jolts the picture on the screen (kiteworks-hero-glitch.js). */
.kw-desk.is-glitch .kw-desk__card { animation: kw-desk-card-glitch .34s steps(2, end) 1; }
.kw-desk.is-glitch .kw-desk__feed { animation: kw-desk-feed-glitch .34s steps(2, end) 1; }
@keyframes kw-desk-card-glitch { 0% { transform: translateX(-1.4cqw) skewX(-3deg); clip-path: inset(0 0 12% 0); } 50% { transform: translateX(1cqw); clip-path: inset(14% 0 0 0); } 100% { transform: none; clip-path: none; } }
@keyframes kw-desk-feed-glitch { 0% { transform: scale(1.06) translateX(2cqw); filter: brightness(.9) contrast(1.3) hue-rotate(-12deg); } 100% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .kw-desk__power { display: none; }
  .kw-desk__count i, .kw-desk.is-glitch :is(.kw-desk__card, .kw-desk__feed) { animation: none; }
  .kw-desk__cam { transform: translate(-59.05%, -46%); }
}
.motion-paused .kw-desk__power { display: none; }
.motion-paused .kw-desk__count i { animation-play-state: paused; }

/* One column: the desk sits under the copy across the full width, a little closer so the countdown reads. */
@media (max-width: 899px) {
  .kw-desk__set { --cam-w: 236%; aspect-ratio: 1 / .9; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter));
    -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 62%, transparent 100%); }
}

/* Pause: a VCR readout in the top corner of the glass (kiteworks-film.js hides it when screen motion is off). */
.kw-film__pause { position: absolute; z-index: 5; top: 5cqh; right: 4.5cqw; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px;
  border: 1px solid rgb(244 233 216 / .24); background: rgb(5 4 4 / .5); color: #f4e9d8; font: 400 max(10px, 2.6cqw)/1 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; text-shadow: 0 0 6px rgb(255 160 100 / .45); cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.kw-film__pause::before { content: "❚❚ Pause"; }
.kw-film__pause[aria-pressed="true"]::before { content: "▶ Play"; }
.kw-film__pause:hover { border-color: rgb(244 233 216 / .6); background: rgb(5 4 4 / .72); }
.kw-film__pause:focus-visible { outline: 2px solid #f4e9d8; outline-offset: 2px; }
.kw-film__pause[hidden] { display: none; }

/* Four controls: the homepage "Into the system" film scene (film-versions.css and .js), with the Kiteworks
   controls as its briefing. Each control is a scroll beat; the door light goes red at the verdict. */
/* No header: the scene opens straight onto the room, with its own kicker and title, right after the section above. */
#four-controls.film-story { padding-block: 0 clamp(88px, 10vw, 148px); }
/* A compact briefing so the whole list fits the pinned scene on a laptop screen (film-versions.js pins only then). */
#four-controls .film-copy { width: min(68%, 840px); }
#four-controls .film-copy__title { margin-bottom: 22px; }
/* The scene title is the section heading now that the header carries only the slate, lead and source. */
#four-controls .film-copy__title h2 { margin: 0; max-width: none; font: 400 clamp(30px, 2.9vw, 42px)/1.05 "Home Video", monospace;
  text-transform: uppercase; letter-spacing: .02em; color: var(--film-bone); text-wrap: balance; }
#four-controls .film-copy__title::after { margin-top: 14px; }
.kw-scene-controls { margin: 0; }
.kw-scene-controls .film-copy__line { margin: 0 0 12px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.kw-scene-controls dt { margin: 0 0 2px; font: 400 13px/1.35 "Home Video", monospace; letter-spacing: .12em; color: var(--film-red); }
.kw-scene-controls dd { margin: 0; }
#four-controls .film-copy__hook { margin-top: 18px; padding-top: 16px; font-size: clamp(22px, 2.1vw, 30px); }
@media (max-width: 900px), (max-height: 759px) {
  #four-controls .film-copy { width: 100%; }
}

/* Closing desk: copy on the left, the AIRA desk computer on the right, mirroring the hero's TV. As the section arrives
   the camera pushes in on the monitor (--close), the screen powers on and types out a demo request that ends in the
   demo link (kiteworks-story.js). Without JavaScript, under reduced motion and when motion is paused, the screen is
   already on and the camera already in. The glass sits at 44.9% / 29% (28.3% x 29.9%) of the 1448 x 1086 plate. */
.kw-home .kw-close { --close: 1; position: relative; overflow: hidden; padding-block: clamp(96px, 10vw, 148px); }
.kw-close__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.kw-home .kw-close__copy h2 { margin: 18px 0 0; max-width: 22ch; font-size: clamp(28px, 2.8vw, 40px); }
.kw-home .kw-close__copy .lead { margin: 24px 0 0; max-width: 38ch; font-size: 19px; line-height: 1.6; color: var(--muted); }
.kw-home .kw-close__note { margin: 14px 0 0; max-width: 38ch; font-size: 16px; line-height: 1.6; color: color-mix(in oklch, var(--muted) 78%, transparent); }

.kw-close__set { --cam-w: 168%; --cam-from: .74; position: relative; aspect-ratio: 6 / 5; margin-right: calc(-1 * var(--gutter)); overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 52% 50%, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 62% at 52% 50%, #000 56%, transparent 100%); }
.kw-close__cam { position: absolute; left: 50%; top: 50%; width: var(--cam-w); aspect-ratio: 1448 / 1086; transform-origin: 59.05% 43.97%;
  transform: translate(-59.05%, -43.97%) scale(calc(var(--cam-from) + (1 - var(--cam-from)) * var(--close))); }
.kw-close__plate { display: block; width: 100%; height: 100%; filter: brightness(calc(.4 + var(--close) * .22)) saturate(.86) contrast(1.06); }

/* The screen: a dark CRT face over the glass, scanlines and curvature on top, warm phosphor type. */
.kw-close__screen { position: absolute; left: 44.9%; top: 29%; width: 28.3%; height: 29.9%; overflow: hidden; container-type: inline-size;
  border-radius: 6% / 8%; background: radial-gradient(ellipse 90% 85% at 50% 45%, #1c0c08, #080302 88%); box-shadow: 0 0 0 1px #000; }
.kw-close__screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(to bottom, rgb(255 236 210 / .045) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 60% 46% at 34% 22%, rgb(255 236 210 / .08), transparent 70%);
  box-shadow: inset 0 0 7cqw rgb(0 0 0 / .85); }
.kw-close__display { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 4cqw;
  padding: 7cqw 8.5cqw; color: #f4e4c7; font-family: var(--font-mono); text-transform: uppercase; text-shadow: 0 0 1.4cqw rgb(255 160 100 / .5); }
.kw-close__bar { display: flex; justify-content: space-between; gap: 1em; margin: 0 !important; padding-bottom: 2.4cqw;
  border-bottom: 1px solid rgb(244 228 199 / .22); font-size: max(10px, 2.7cqw); letter-spacing: .16em; color: #e2b48a; }
.kw-close__request { display: grid; gap: 1.8cqw; margin: 0; font-size: max(12px, 3.4cqw); line-height: 1.3; letter-spacing: .05em; }
.kw-close__request > div { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: .6em; }
.kw-close__request dt { color: #ff6b4f; }
.kw-close__request dd { margin: 0; }
.kw-close__cta { display: flex; align-items: center; justify-content: center; gap: .6em; min-height: max(44px, 12cqw); margin-top: 1cqw; padding: 0 4cqw;
  background: #c80704; color: #fff6ea; font-size: max(12px, 3.3cqw); letter-spacing: .08em; text-decoration: none; text-shadow: none;
  box-shadow: 0 0 5cqw rgb(240 40 20 / .4); transition: background-color .18s ease, box-shadow .18s ease; }
.kw-close__cta::after { content: ""; flex: none; width: .55em; height: 1.05em; background: #fff6ea; animation: kw-close-cursor 1s steps(1, end) infinite; }
.kw-close__cta:hover { background: #e3120b; box-shadow: 0 0 7cqw rgb(255 60 30 / .55); }
.kw-close__cta:focus-visible { outline: 2px solid #fff6ea; outline-offset: 3px; }
@keyframes kw-close-cursor { 50% { opacity: 0; } }

/* Power on and type: the screen collapses to a bright line, opens out, then each line types in and the link arrives. */
.kw-close.is-armed .kw-close__display { opacity: 0; }
.kw-close.is-armed.is-on .kw-close__display { animation: kw-crt-on .75s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes kw-crt-on {
  0% { opacity: 1; transform: scale(1, .008); filter: brightness(5); }
  40% { opacity: 1; transform: scale(1, .008); filter: brightness(5); }
  100% { opacity: 1; transform: none; filter: none; }
}
.kw-close.is-armed :is(.kw-close__bar, .kw-close__request > div) { clip-path: inset(0 100% 0 0); }
.kw-close.is-armed.is-on .kw-close__bar { clip-path: inset(0 0 0 0); transition: clip-path .4s steps(16, end) .75s; }
.kw-close.is-armed.is-on .kw-close__request > div { clip-path: inset(0 0 0 0); transition: clip-path .5s steps(20, end) calc(1.15s + var(--i) * .42s); }
.kw-close.is-armed .kw-close__cta { opacity: 0; transform: translateY(.6em); }
.kw-close.is-armed.is-on .kw-close__cta { opacity: 1; transform: none; transition: opacity .35s ease 2.95s, transform .35s ease 2.95s, background-color .18s ease, box-shadow .18s ease; }
@media (prefers-reduced-motion: reduce) { .kw-close__cta::after { animation: none; } }
.motion-paused .kw-close__cta::after { animation: none; }

@media (max-width: 899px) {
  .kw-close__grid { grid-template-columns: 1fr; }
  .kw-close__set { --cam-w: 205%; aspect-ratio: 20 / 19; margin-inline: calc(-1 * var(--gutter));
    -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
}
@media (max-width: 599px) {
  .kw-home .kw-close { padding-block: 80px 56px; }
  .kw-home .kw-close__copy .lead { font-size: 18px; }
  /* Closer on the monitor so the screen reads at phone size. */
  .kw-close__set { --cam-w: 252%; --cam-from: .82; aspect-ratio: 1 / 1; }
  .kw-close__display { gap: 3cqw; padding: 5cqw 6.5cqw; }
  .kw-close__bar { padding-bottom: 2cqw; letter-spacing: .12em; }
  .kw-close__request { gap: 1.2cqw; }
  .kw-close__request > div { grid-template-columns: 4.6em minmax(0, 1fr); }
  .kw-close__request dd { white-space: nowrap; }
  .kw-close__cta { min-height: 44px; padding: 0 3cqw; letter-spacing: .05em; white-space: nowrap; }
}

/* Tape counter: the page plays like a recovered tape. */
.kw-tape-counter { display: none; }
@media (min-width: 1180px) {
  .kw-tape-counter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto 0 36px;
    font: 400 12px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
  .kw-tape-counter__mode { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
  .kw-tape-counter__mode::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid var(--red);
    border-block: 5px solid transparent;
  }
  .kw-tape-counter.is-stopped .kw-tape-counter__mode::before { width: 8px; height: 8px; border: 0; background: var(--red); }
  .kw-tape-counter__time { color: var(--fg); font-variant-numeric: tabular-nums; }
}