/* Mothership of AI Assistants: styles for this topic's components only. */
.bot {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  filter: drop-shadow(0 12px 16px rgba(30, 50, 80, .18));
}
.bot video, .bot img, .bot canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Muse's own film crops him at its sides and bottom, so those edges fade away. */
.bot-muse {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 38%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 38%, #000 60%, transparent 100%);
}
.bot-dots {
  object-fit: contain;
  transform: scale(1.35);
  opacity: 0;
}
.bot-dots.on { opacity: 1; }
.bot-instinct { object-fit: contain; }

/* The sky: no frame, it dissolves into the page on every side. */
.sky {
  position: relative;
  width: 1440px;
  height: 900px;
}
/* Only the sky fades; the fleet stays whole wherever it flies. */
.sky-back, .sky-wisps, .sky-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}
.sky-wisps { pointer-events: none; }
/* San Francisco under the clouds, in 3D: it fills the whole window, placed from the
   script, and fades in as the fleet comes out under the cloud sea. */
.sky-city {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.sky-city canvas { display: block; width: 100%; height: 100%; }
.sky-city-credit {
  position: absolute;
  left: 16px;
  bottom: 12px;
  margin: 0;
  font: 500 11px/1.3 "Season Sans", sans-serif;
  color: rgb(255 255 255 / .45);
}
/* the contrails are drawn at half size and blurred, so they are light rather than lines */
.sky-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(6px);
}
.sky-fleet { position: absolute; inset: 0; }
/* the layers over the city only draw; every listener is on the window, so they let the
   pointer through to the landmark tags under them */
.sky-trails, .sky-dust, .sky-fleet { pointer-events: none; }
.ship {
  position: absolute;
  left: 0;
  top: 0;
  container-type: inline-size;
  will-change: transform, width;
}
/* Each bot's name on a small white pill under it, sized with the bot so it
   keeps the perspective. */
.ship-name {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 1cqw;
  padding: 1.8cqw 5cqw 2.1cqw;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 18, 17, .06), 0 6px 18px rgba(20, 18, 17, .08);
  color: #3B3936;
  font-size: 8cqw;
  line-height: 1.3;
  font-weight: 550;
  white-space: nowrap;
}
.ship > .hull:first-child {
  display: block;
  width: 100%;
  filter: drop-shadow(0 14px 22px rgba(30, 50, 80, .2)) brightness(calc(1 - .5 * var(--night, 0))) saturate(calc(1 - .3 * var(--night, 0)));
}
/* the glass's daylight reflections fade as night falls, so they never wash over the
   dark night hull */
.ship > .hull ~ .hull { position: absolute; inset: 0; width: 100%; opacity: calc(1 - .65 * var(--night, 0)); }
.ship.pilot > .hull ~ .hull { opacity: calc(.7 - .45 * var(--night, 0)); }
/* The 3D mothership: its canvas reaches past the box so it can bank and turn, and
   the pictures step aside. The box keeps the picture's shape, which places the engines'
   plumes and wingtip lights. */
.ship-model {
  position: absolute;
  left: -25%;
  top: -75%;
  width: 150%;
  height: 250%;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(30, 50, 80, .2));
}
.ship.pilot.modelled { aspect-ratio: 720 / 461; }
/* a 3D pod keeps its picture's shape; its canvases reach past it so it can bank and
   roll; the seat becomes a dome-shaped window placed by script */
.ship.pod.modelled { aspect-ratio: 720 / 523; }
/* every pod's hull in one canvas under the ships and its glass in one over them */
.sky-pods { position: absolute; filter: drop-shadow(0 10px 16px rgba(30, 50, 80, .18)); }
.sky-pod-hulls { z-index: 0; }
.sky-pod-glass { z-index: 150; }
.ship.pod.modelled .pod-seat { border-radius: 50% 50% 46% 46% / 100% 100% 18% 18%; transform-origin: 50% 96%; }
.ship.modelled > :is(.hull, .dusk-hull, .night-hull, .skin, .pilot-q, .dome-light) { display: none; }
/* Q. rides in the big glass dome on the mothership's back. */
.pilot-q {
  position: absolute;
  left: 44.3%;
  top: 17.5%;
  width: 11.3%;
  border-radius: 22.5%;
}
/* A child pod's seat is the half circle under its glass dome; the assistant sits low
   in it, so the bowl hides its feet. */
.pod-seat {
  position: absolute;
  left: 23.8%;
  top: 2.6%;
  width: 53.5%;
  height: 40%;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.pod-seat .bot {
  position: absolute;
  left: 10%;
  bottom: -6%;
  width: 80%;
  filter: none;
}
/* Every ship's engines: a hot core in each nozzle and a warm plume of light
   reaching toward you, both soft gradients with no edge. Script sets how bright
   and how long they burn. */
.engine {
  pointer-events: none;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.engine .core,
.engine .plume { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.engine .core {
  inset: -55%;
  background: radial-gradient(closest-side, rgba(255, 250, 232, 1), rgba(255, 196, 120, .75) 40%, rgba(255, 150, 80, 0) 100%);
}
.engine .rainbow {
  position: absolute;
  left: -40%;
  top: 20%;
  width: 200%;
  height: 420%;
  border-radius: 50%;
  transform-origin: 50% 0;
  opacity: 0;
  --hue: 0;
  background: radial-gradient(50% 50% at 50% 0%, hsl(var(--hue) 100% 88%), hsl(calc(var(--hue) + 50) 100% 68% / .7) 40%, hsl(calc(var(--hue) + 110) 100% 62% / 0) 100%);
  will-change: transform, opacity;
}
.engine .plume {
  left: -40%;
  top: 20%;
  width: 200%;
  height: 420%;
  transform-origin: 50% 0;
  background: radial-gradient(50% 50% at 50% 0%, rgba(255, 214, 150, .9), rgba(255, 168, 96, .45) 45%, rgba(255, 140, 80, 0) 100%);
}
/* What Q. says: a grey iMessage bubble over its dome, its tail at the lower left
   reaching down to Q. It grows out of the tail from the typing dots, its words
   settle in from a blur, and it fades away when read. */
.sky-say {
  --fill: #E9E9EB;
  --ink: #000000;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  scale: .6;
  filter: blur(6px);
  transform-origin: 0 100%;
  transition: opacity .35s ease, scale .5s var(--spring), filter .4s ease, width .5s var(--spring), height .5s var(--spring);
}
.sky-say.typing, .sky-say.saying { opacity: 1; scale: 1; filter: none; }
.sky-say.leaving { opacity: 0; scale: .92; filter: blur(6px); transition-duration: .6s; }
.sky-say-body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--fill);
  box-shadow: 0 8px 24px rgba(30, 50, 80, .12);
}
.sky-say-tail {
  position: absolute;
  left: -11px;
  bottom: 0;
  width: 42px;
  height: 32px;
  fill: var(--fill);
}
.sky-say-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 6px;
  translate: -50% -50%;
  transition: opacity .2s ease;
}
.sky-say.saying .sky-say-dots { opacity: 0; }
.sky-say-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8E8E93;
  animation: typing 1.2s ease-in-out infinite;
}
.sky-say-dots span:nth-child(2) { animation-delay: .15s; }
.sky-say-dots span:nth-child(3) { animation-delay: .3s; }
.sky-say-text {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: max-content;
  max-width: 320px;
  padding: 13px 20px 15px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 550;
  color: var(--ink);
  text-wrap: balance;
}
.sky-say-text .word {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transition: opacity .4s ease, filter .4s ease;
}
.sky-say.saying .sky-say-text .word {
  opacity: 1;
  filter: none;
  transition-delay: calc(.12s + var(--i) * 45ms);
}

/* The keys hint: the arrow cluster over the space bar in the bottom right
   corner of the page, below the sky and clear of the frost round the sentence, made as
   Quest's grey 3D carved button, each with a short line under it. A held key
   presses in. It stays for as long as the topic is open. */
.sky-keys {
  position: absolute;
  right: 72px;
  top: 780px;
  z-index: 300;
  pointer-events: none;
}
.sky-keyboard { display: flex; flex-direction: column-reverse; align-items: center; gap: 14px; }
.sky-space, .sky-arrows { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sky-keycaps {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-auto-rows: 40px;
  gap: 6px;
}
.sky-keycaps span { grid-row: 2; }
.sky-keycaps .up { grid-row: 1; grid-column: 2; }
.sky-keycaps span, .sky-space .space {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #E4E1E6;
  box-shadow: inset 0 0 0 1px #fff, inset -1px -4px 3.6px rgba(61, 61, 61, .25), inset 1px 2px 1.2px rgba(255, 255, 255, .81), inset 0 -2px 4.5px rgba(255, 255, 255, .78), inset -3px 0 3px rgba(255, 255, 255, .47), inset -1px -4px 3.2px rgba(135, 135, 135, .25), inset 0 0 20px #fff, -1px 2px 6.6px rgba(0, 0, 0, .25), 0 7px 25.6px rgba(0, 0, 0, .25);
  color: #141211;
  transition: scale .12s ease;
}
.sky-space .space {
  width: 132px;
  height: 40px;
  font-size: 13px;
  font-weight: 650;
}
.sky-keycaps span.down, .sky-space .space.down { scale: .965; }
.sky-keycaps svg { width: 18px; height: 18px; fill: currentColor; }
.sky-keys p {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 550;
  color: #3B3936;
  text-shadow: 0 1px 6px rgba(255, 255, 255, .7);
}

/* The eagle that escorts the fleet through the mountains; script sets its place, size,
   lean and how near it is. */
.sky-eagle {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 12px 18px rgba(30, 50, 80, .16)) brightness(calc(1 - .45 * var(--night, 0)));
}

/* Night in the mountains reaches past the sky: the page's ground goes navy with it
   (script fades it in step with the sky) and the page's words turn light, the same
   way as Full Memory's night. */
.sky-night-ground {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 40%, #0E1530, #070A16 70%, #04060D);
}
:root.sky-night {
  --ink: #FFFFFF;
  --token: rgba(255, 255, 255, .08);
  --token-lit: rgba(255, 255, 255, .92);
}
.sky-night .fog-top { background-color: rgba(4, 6, 13, .35); }
.sky-night .fog-bottom { background-color: rgba(4, 6, 13, .1); }
.sky-night .topic.active, .sky-night .sentence .tag { color: #141211; }
.sky-night .download-button { background: rgba(255, 255, 255, .1); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.sky-night .sky-say { --fill: #262629; --ink: #FFFFFF; }
.sky-keys p { transition: color .6s ease; }
.sky-night .sky-keys p { color: rgba(255, 255, 255, .72); text-shadow: none; }

/* Ships at sunset and night: the sunset and night pictures fade in over the day one, the
   dome glows warm from inside so the
   rider shows lit, and soft lights at the wingtips fade up and down on their own beat.
   --night comes from script, 0 by day and 1 at full night. */
.dusk-hull, .night-hull {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
}
/* the sunset picture only warms the day one, at under half strength, so the pearl
   stays; it gives way to the night picture as the dark comes */
.dusk-hull { opacity: calc(.4 * var(--dusk, 0) * (1 - var(--night, 0))); }
.night-hull { opacity: var(--night, 0); }
.dome-light {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 184, .9), rgba(255, 204, 150, .4) 55%, rgba(255, 204, 150, 0));
  opacity: var(--night, 0);
  pointer-events: none;
}
.wing-light {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: var(--night, 0);
  pointer-events: none;
}
.ship.pod .wing-light { width: 14%; }
.wing-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF, rgba(255, 220, 178, .65) 35%, rgba(255, 196, 140, 0));
  animation: wing-light 2.6s ease-in-out infinite;
  animation-delay: calc(var(--beat) * -1.3s);
}
@keyframes wing-light {
  0%, 100% { opacity: .35; scale: .85; }
  50% { opacity: 1; scale: 1.1; }
}
@media (prefers-reduced-motion: reduce) { .wing-light::before { animation: none; } }
.ship-name { transition: background .6s ease, color .6s ease, box-shadow .6s ease; }
.sky-night .ship-name { background: rgba(16, 20, 36, .72); color: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* The world's light on a ship's skin, cut to the ship's own outline: the sun from the
   left with cool shade on the far side, the sky's colour on its top, the light from below on its belly, and a soft
   glint that slides across as it banks. The colours come from script through the
   fleet, following the time of day. */
.skin {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.skin i { position: absolute; inset: 0; }
.skin .sun {
  background: linear-gradient(100deg, rgb(var(--sun, 255, 244, 228)) 0%, rgba(var(--sun, 255, 244, 228), 0) 50%);
  mix-blend-mode: soft-light;
  opacity: var(--sun-a, .3);
}
.skin .shade {
  background: linear-gradient(280deg, rgb(var(--shade, 190, 205, 235)) 0%, rgba(var(--shade, 190, 205, 235), 0) 55%);
  mix-blend-mode: multiply;
  opacity: var(--shade-a, .15);
}
.skin .sky {
  background: linear-gradient(180deg, rgb(var(--sky-tint, 150, 190, 230)) 0%, rgba(var(--sky-tint, 150, 190, 230), 0) 55%);
  mix-blend-mode: soft-light;
  opacity: var(--sky-a, .4);
}
.skin .below {
  background: linear-gradient(0deg, rgb(var(--below, 245, 248, 252)) 0%, rgba(var(--below, 245, 248, 252), 0) 45%);
  mix-blend-mode: screen;
  opacity: var(--below-a, .25);
}
.skin .glint {
  background: radial-gradient(26% 16% at calc(38% - var(--lean, 0) * 22%) 34%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: calc(.3 + .35 * var(--sun-a, .3));
}
/* the engines' magic dust: soft motes, sharper than the blurred contrails under them */
.sky-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(0.6px);
}
/* on a desktop both reach past the sky's box (the script sizes them), so they fade
   at their own far edges rather than the sky's */
html:not(.phone) .sky-trails, html:not(.phone) .sky-dust {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}

/* The chip's ship flies out into the sky when the topic opens (the script hides it the
   moment the fleet leaves it), and springs back in when the topic closes. */
.topic .icon.flying { transition: opacity .3s ease, scale .6s var(--spring); }
.topic .icon.flying.ship-away { opacity: 0; scale: .7; transition: opacity .12s ease, scale .12s ease; }

/* On a phone there are no keys (Q. says how a finger flies instead). The sky is only flown: a drag in any direction steers the fleet and a
   long hold boosts it. Nothing in it can be tapped, selected or held for the phone's
   own menu. */
.phone .sky { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.phone .sky-keys { display: none; }
.phone .bot-dots { transition: opacity .9s ease; }
/* Muse: 48 keyed frames side by side, stepped through over the film's 4 s. */
.bot-muse-strip { position: absolute; inset: 0; overflow: hidden; }
.bot .bot-muse-strip img { right: auto; width: 4800%; animation: muse-wave 4s steps(48) infinite; }
@keyframes muse-wave { to { translate: -100% 0; } }
/* A phone's sky is a film of the live one (see skyFilm), faded in once it has a frame.
   The contrails and dust skip their blur there, and the ships their blended light
   layers, which cost a phone's graphics chip too much on things that move every frame. */
.sky-film { object-fit: fill; opacity: 0; transition: opacity 1.2s ease; }
.sky-film.ready { opacity: 1; }
.phone .sky-trails, .phone .sky-dust { filter: none; }
.phone .skin { display: none; }

/* the chip's 3D ship while it flies round the chip; the flat picture waits hidden */
.chip-flight { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; display: none; }
.topic.ship-orbiting .icon.big.flying { visibility: hidden; }