/* The opening cube (CJ 2026-11-03, after intel.com's homepage). The opening fills the screen as before; scrolling
   shrinks it into the front face of a cube, and each further stretch of scrolling turns the cube a quarter turn to the
   next agent: Company Research, Medicine Atlas, Prepare the Next Build (build.py agent_cube, content/agent-cube.json,
   their words from content/agents.json). An agent face is its name and headline, a line on what it does, Try it (its
   try world) and Make It (Maker) beside its clip, cropped here to its best part; over the clip the opening's Play
   Video pill opens the product film (home-opening.css). The wall after the cube slides over the last face while the
   cube tips back; a giant word for each face scrolls behind it, a glow takes each face's colour, and dots on the side
   jump to a face.
   site.js sets [data-cube-on] (motion allowed, no forced colours, a screen at least 540px tall) and writes the geometry
   as custom properties on the section: the screen (--cube-vw/-vh), the face (--cube-w/-h, the screen's own aspect at
   the scale --cube-s, so the opening shrinks without cropping; --cube-depth is half its height), the shrink
   (--cube-m, 0-1, tied to the scroll), the turn (--cube-turn, a whole number: the cube eases to it on its own, as
   intel.com's does), the words' scroll (--cube-scroll), the wall's cover (--cube-exit, 0-1) and the lengths
   (--cube-length, --cube-cover, --cube-step). Without it (no JavaScript, reduced motion, forced colours, short screens,
   print) the opening and the three agents show as plain sections. ASCII only. */

@property --cube-glow-a { syntax: '<color>'; inherits: true; initial-value: rgb(150 128 222 / 40%); }
@property --cube-glow-b { syntax: '<color>'; inherits: true; initial-value: rgb(104 150 226 / 28%); }

.agent-cube {
  --cube-face: #0c0b11;
  --cube-face-rim: rgb(255 255 255 / 8%);
  /* The turn starts at once and settles softly (intel.com's moves within ~80ms and rests by ~400ms). */
  --cube-ease: cubic-bezier(.3, 0, .15, 1);
  --cube-time: 560ms;
  --cube-hue: #cdb8ec;
  position: relative;
}
/* Each agent's colour (its dot, its glow) and the part of its clip that shows best in the face. */
.cube-agent--company-research { --cube-hue: #a9bff2; --cube-clip-x: 0%; }
.cube-agent--medicine-atlas { --cube-hue: #a7dfcb; --cube-clip-x: 35%; }
.cube-agent--prepare-the-next-build { --cube-hue: #ecc9a0; --cube-clip-x: 41%; }

/* Plain sections: the cube's frames step aside, and the agents follow the opening as three cards. */
.cube-pin, .cube-scene, .cube-tilt, .cube { display: contents; }
.cube-glow, .cube-words, .cube-dots { display: none; }
.cube-agent { container: cube-face / inline-size; position: relative; width: calc(100% - 2 * var(--pad)); max-width: 1180px; margin: 20px auto 0; border-radius: 20px; overflow: hidden; background: var(--cube-face); box-shadow: inset 0 0 0 1px var(--cube-face-rim); }
.worlds-hero + .cube-agent { margin-top: clamp(40px, 6vw, 88px); }
.cube-agent:last-child { margin-bottom: clamp(40px, 6vw, 88px); }
.cube-agent-body { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); height: 100%; }
.cube-agent-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(24px, 4cqw, 56px); background: radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--cube-hue) 13%, transparent), transparent 62%); }
.cube-agent-title { margin: 0; color: var(--ink); font-family: Manrope, sans-serif; font-weight: 400; font-size: clamp(23px, 3.25cqw, 40px); line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
.cube-agent-name { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(12px, 1.9cqw, 22px); color: var(--muted); font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; }
.cube-agent-name::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cube-hue); box-shadow: 0 0 14px var(--cube-hue); }
.cube-agent-headline { display: block; }
/* The headline's two parts, one line each where they fit (as on the agents' own pages). */
.cube-agent-headline .spectral { display: block; }
.cube-agent-text { max-width: 34em; margin-top: clamp(12px, 1.7cqw, 20px); color: var(--muted); font-size: clamp(14px, 1.6cqw, 16px); line-height: 1.6; text-wrap: pretty; }
.cube-agent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2.8cqw, 30px); }
/* The face's two buttons: Try it is solid, Make It outlined, both pills like the header's Try the agents. */
.cube-try, .cube-make { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.cube-try { background: var(--ink); color: var(--bg); }
.cube-try:hover { border-color: #fff; background: #fff; color: var(--bg); }
.cube-try .arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cube-make { border-color: var(--rule-strong); background: transparent; color: var(--ink); }
.cube-make:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.cube-agent-media { position: relative; min-height: 0; aspect-ratio: 16 / 11; background: #000; }
.cube-agent-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cube-clip-x, 50%) 50%; }
/* The clip meets the words in a short fade, so the split reads as one face. */
.cube-agent-media::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 14%; background: linear-gradient(to right, var(--cube-face), transparent); pointer-events: none; }
/* Play Video over the clip: the opening's pill (home-opening.css .worlds-film); at rest it sits over the clip. */
.cube-film { --film-rest: 50%; }
/* A narrow face stacks: the clip on top, the words below. */
@container cube-face (max-width: 599px) {
  .cube-agent-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .cube-agent-media { order: -1; aspect-ratio: 16 / 11; }
  .cube-agent-media::after { inset: auto 0 0 0; width: auto; height: 16%; background: linear-gradient(to top, var(--cube-face), transparent); }
  .cube-agent-copy { justify-content: flex-start; padding: 22px 22px 26px; }
  .cube-agent-title { font-size: clamp(22px, 7cqw, 30px); }
  .cube-agent-text { font-size: 14px; line-height: 1.55; }
  /* On the cube the face has a set height: the clip takes what the words leave. */
  [data-cube-on] .cube-agent-body { grid-template-rows: minmax(0, 1fr) auto; }
}

/* The cube (site.js: [data-cube-on]). The section is as long as the shrink, the three turns and the wall's cover;
   the pin holds the scene on screen for all of it, and the wall (the next part, raised above it) slides up over the
   last face for the last screen. */
@media screen {
  .agent-cube[data-cube-on] { height: var(--cube-length); margin-bottom: calc(var(--cube-cover) * -1); transition: --cube-glow-a var(--cube-time) var(--cube-ease), --cube-glow-b var(--cube-time) var(--cube-ease); }
  .agent-cube[data-cube-on] + .home-body { position: relative; z-index: 1; }
  [data-cube-on] .cube-pin { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; overflow: hidden; }
  [data-cube-on] .cube-scene { position: absolute; inset: 0; display: block; perspective: var(--cube-perspective); perspective-origin: 50% calc(50% + var(--cube-dy)); }
  /* The tilt carries the wall's exit (tied to the scroll). The cube only passes the 3D space through: each face carries
     its whole place on the cube in its own transform (a turn of (--cube-turn - its index) quarter turns about the cube's
     centre) and eases there on its own. The face in front is then untransformed, which browsers hit-test reliably
     (an edge-on quarter turn in a face's own transform, under a turned cube, lost every click in Chromium). */
  [data-cube-on] .cube-tilt { position: absolute; left: 50%; top: calc(50% + var(--cube-dy)); display: block; width: 0; height: 0; transform-style: preserve-3d;
    transform: translate3d(0, calc(var(--cube-exit) * var(--cube-h) * -.22), 0) rotateX(calc(var(--cube-exit) * 26deg)) scale(calc(1 - var(--cube-exit) * .12)); }
  [data-cube-on] .cube { position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; transform-style: preserve-3d; }
  /* Four faces around the horizontal axis, each a quarter turn on from the one before. */
  [data-cube-on] .cube-face { --cube-index: 0; position: absolute; left: calc(var(--cube-w) / -2); top: calc(var(--cube-h) / -2); width: var(--cube-w); height: var(--cube-h); margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    transform: translateZ(calc(var(--cube-depth) * -1)) rotateX(calc((var(--cube-turn) - var(--cube-index)) * 90deg)) translateZ(var(--cube-depth)); transition: transform var(--cube-time) var(--cube-ease); }
  [data-cube-on] .cube-face:nth-child(2) { --cube-index: 1; }
  [data-cube-on] .cube-face:nth-child(3) { --cube-index: 2; }
  [data-cube-on] .cube-face:nth-child(4) { --cube-index: 3; }
  [data-cube-on] .cube-face:not([data-current]) { pointer-events: none; }
  /* Switching the cube on (load, a live preference change) places every face at once; site.js lifts this after two
     frames, so only real turns animate. */
  [data-cube-still] .cube-face, [data-cube-still] .cube-face::after, .agent-cube[data-cube-still] { transition: none !important; }
  /* A face turning away darkens; the one arriving brightens, in step with the turn. */
  [data-cube-on] .cube-face::after { content: ''; position: absolute; inset: 0; z-index: 6; background: #000; opacity: .62; pointer-events: none; transition: opacity var(--cube-time) var(--cube-ease); }
  [data-cube-on] .cube-face[data-current]::after { opacity: 0; }
  /* The opening: the whole screen at first (no cropping, no reflow), then one even shrink into the front face. The
     shrink (scale) and its rise under the header (translate) follow the scroll; the turn (transform) eases as on every
     face, its depth divided by the face's scale because the scale applies outside it. */
  [data-cube-on] .worlds-hero.cube-face { --cube-zoom: calc(1 - (1 - var(--cube-s)) * var(--cube-m));
    left: calc(var(--cube-vw) / -2); top: calc(var(--cube-vh) / -2); width: var(--cube-vw); height: var(--cube-vh); min-height: 0;
    outline: 1px solid rgb(255 255 255 / calc(var(--cube-m) * 10%)); outline-offset: -1px;
    translate: 0 calc((1 - var(--cube-m)) * var(--cube-dy) * -1); scale: var(--cube-zoom) var(--cube-zoom) var(--cube-zoom);
    transform: translateZ(calc(var(--cube-depth) / var(--cube-s) * -1)) rotateX(calc(var(--cube-turn) * 90deg)) translateZ(calc(var(--cube-depth) / var(--cube-s))); }
  [data-cube-on] .cube-agent { container-type: size; max-width: none; border-radius: 0; }
  [data-cube-on] .cube-agent-media { aspect-ratio: auto; }
  [data-cube-on] .cube-agent-body { grid-template-rows: minmax(0, 1fr); }
  /* The glow behind the cube takes each face's colours. */
  [data-cube-on] .cube-glow { position: absolute; left: 50%; top: calc(50% + var(--cube-dy)); display: block; width: calc(var(--cube-w) * 1.9); height: calc(var(--cube-h) * 2.1); transform: translate(-50%, -50%); pointer-events: none;
    opacity: calc(var(--cube-m) * (1 - var(--cube-exit)));
    background: radial-gradient(38% 40% at 34% 40%, var(--cube-glow-a), transparent 72%), radial-gradient(38% 40% at 66% 62%, var(--cube-glow-b), transparent 72%); }
  .agent-cube[data-cube-showing="1"] { --cube-glow-a: rgb(98 136 232 / 40%); --cube-glow-b: rgb(150 128 222 / 26%); }
  .agent-cube[data-cube-showing="2"] { --cube-glow-a: rgb(72 182 152 / 34%); --cube-glow-b: rgb(98 136 232 / 26%); }
  .agent-cube[data-cube-showing="3"] { --cube-glow-a: rgb(226 156 82 / 32%); --cube-glow-b: rgb(186 118 196 / 24%); }
  /* One giant word per face, scrolling behind the cube at the page's own speed; each rests at the face's lower edge
     while its face is in front. */
  [data-cube-on] .cube-words { position: absolute; inset: 0; display: block; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 64%); mask-image: linear-gradient(to bottom, transparent 34%, #000 64%); }
  /* A tall screen's face leaves no room under it for a word. */
  @media (max-aspect-ratio: 1 / 1) { [data-cube-on] .cube-words { display: none; } }
  [data-cube-on] .cube-words-track { position: absolute; left: 0; right: 0; top: calc(50% + var(--cube-dy) + var(--cube-h) / 2); transform: translate3d(0, calc(var(--cube-scroll) * -1), 0); }
  [data-cube-on] .cube-word { position: absolute; left: 50%; top: 0; color: rgb(205 190 232 / 9%); font-family: Manrope, sans-serif; font-weight: 500; font-size: clamp(96px, 16.5vw, 300px); line-height: 1; letter-spacing: -.055em; white-space: nowrap; transform: translate(-50%, -40%) scale(var(--cube-word-fit, 1)); transform-origin: 50% 40%; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    [data-cube-on] .cube-word { background: linear-gradient(to bottom, rgb(214 200 240 / 24%), rgb(214 200 240 / 3%) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  }
  [data-cube-on] .cube-word:nth-child(2) { top: var(--cube-step); }
  [data-cube-on] .cube-word:nth-child(3) { top: calc(var(--cube-step) * 2); }
  [data-cube-on] .cube-word:nth-child(4) { top: calc(var(--cube-step) * 3); }
  /* The dots: one per face, beside the cube; they arrive with the shrink. */
  [data-cube-on] .cube-dots { position: absolute; left: max(2px, min(40px, calc((100% - var(--cube-w)) / 4 - 14px))); top: calc(50% + var(--cube-dy)); z-index: 3; display: flex; flex-direction: column; gap: 2px; transform: translateY(-50%); opacity: var(--cube-m); }
  [data-cube-on] .cube-dots:focus-within { opacity: 1; }
  /* Over the full-screen opening the dots are not there at all (no invisible targets); they come with the shrink. */
  [data-cube-on]:not([data-cube-shrunk]) .cube-dots { visibility: hidden; }
  .cube-dot { display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
  .cube-dot::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: rgb(242 240 239 / 36%); transition: height 300ms var(--cube-ease), background-color 300ms ease; }
  .cube-dot:hover::before { background: rgb(242 240 239 / 72%); }
  .cube-dot[aria-current="true"]::before { height: 22px; background: var(--ink); }
  .cube-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}
@media screen and (prefers-reduced-motion: reduce) { .cube-try, .cube-make, .cube-dot::before { transition: none; } }
@media (forced-colors: active) {
  .cube-agent { border: 1px solid CanvasText; box-shadow: none; }
  /* Both buttons outlined: a ButtonText fill under ButtonFace text loses the label to the forced backplate. */
  .cube-try, .cube-make { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  .cube-agent-name::before { background: CanvasText; box-shadow: none; }
  .cube-agent-media::after { display: none; }
}
@media print {
  .agent-cube { --cube-face: #fff; }
  .cube-agent { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .cube-agent-media, .cube-film { display: none; }
  .cube-agent-body { grid-template-columns: minmax(0, 1fr); }
  .cube-agent-copy { background: none; }
  .cube-agent-title, .cube-agent-name { color: #111; }
  .cube-agent-text { color: #333; }
  .cube-try, .cube-make { border-color: #111; background: none; color: #111; }
}