/* Lamr Motion: the shared look of the marketing films.
   The engine is lamr-motion.js; the style guide is docs/design/motion.md.

   A film is drawn on a stage with a fixed design size, so a shot is laid out
   once and scales as a picture: every length is in em of .lm-stage, where
   1em is the stage width over 140 (16:9) and over 80 once it is phone-sized
   (4:5). Only leaf text sets its own font-size.

   Things are placed from the centre of the stage with --x and --y, and
   horizontal offsets are multiplied by --sx, so a wide composition closes up
   on a phone without a second layout. Placement uses the `translate`
   property; `transform` is left free for the motion.

   Colours are the page's tokens. A film may flood the stage with --lm-blue
   for one beat; on blue, things are white. */
.lm {
  --lm-blue: var(--brand-blue);
  --lm-ink: var(--text-1);
  --lm-paper: var(--bg-raise);
  --lm-ground: var(--bg-sub);
  --lm-white: var(--mock-on-color);
  --lm-dark: var(--spot-ink);
  container-type: inline-size; position: relative;
  font-family: var(--font-sans); color: var(--lm-ink); line-height: 1.2;
  -webkit-user-select: none; user-select: none;
}
.lm-stage {
  --sx: 1;
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 9; font-size: calc(100cqw / 140);
  perspective: 150em; background: var(--lm-ground);
}
@container (max-width: 700px) {
  .lm-stage { --sx: .56; aspect-ratio: 4 / 5; font-size: calc(100cqw / 80); }
}
.lm svg { display: block; flex: none; }
.lm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lm-sprite { position: absolute; width: 0; height: 0; }

/* A shot that is not playing is display:none, not visibility:hidden.
   Visibility is inherited, and Chrome kept a stale "hidden" on a child whose
   animation had been cancelled and started again: from the second loop on,
   that child was never painted although its shot was showing. */
.lm-shot { position: absolute; inset: 0; z-index: 1; display: none; transform-style: preserve-3d; }
.lm-shot.is-on { display: block; }
.lm-el { position: absolute; left: 50%; top: 50%; translate: calc(-50% + var(--x, 0em) * var(--sx)) calc(-50% + var(--y, 0em)); }
.lm-flood { position: absolute; inset: 0; z-index: 2; background: var(--lm-blue); clip-path: circle(0 at 50% 50%); }
.lm-shot.lm-on-blue { z-index: 3; color: var(--lm-white); }
/* The front layer. Inside a shot everything is sorted by real depth, so a
   flat label next to something that tilts or flips gets passed over, and
   z-index does not help. Put flat things in here: the layer is 60em nearer
   the camera and scaled by .6, which on the stage's 150em perspective
   cancels exactly, so it lines up with the stage but is always in front. */
.lm-front { position: absolute; inset: 0; transform: translateZ(60em) scale(.6); pointer-events: none; }

/* the mouth, as a character */
.lm .lamr-loader { overflow: visible; }
.lm .lamr-loader path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* big type; words rise out of a mask */
.lm-type { font-weight: 520; letter-spacing: -.035em; line-height: 1.08; white-space: nowrap; }
.lm-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em 0 .16em; margin: -.08em 0 -.16em; }
.lm-word > span { display: inline-block; }
.lm-dim { color: var(--text-3); }
.lm-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em 0 .16em; margin: -.08em 0 -.16em; }
.lm-roll > * { display: inline-block; font: inherit; }

/* a name with its mark */
.lm-chip {
  display: flex; align-items: center; gap: 1em; padding: 1.1em 2em 1.1em 1.5em; border-radius: 99em;
  background: var(--lm-white); color: var(--lm-dark); white-space: nowrap;
  box-shadow: 0 1.2em 3em color-mix(in srgb, var(--mask-solid) 18%, transparent);
}
.lm-chip svg { width: 3.2em; height: 3.2em; }
.lm-chip b { font-size: 2.6em; font-weight: 550; letter-spacing: -.01em; }

/* an agent's cursor */
.lm-cursor { display: flex; align-items: flex-start; pointer-events: none; }
.lm-cursor > svg { width: 5em; height: 5em; color: var(--lm-blue); filter: drop-shadow(0 .4em .6em color-mix(in srgb, var(--mask-solid) 22%, transparent)); }
.lm-cursor > span {
  margin: 3.8em 0 0 -.8em; padding: .7em 1.6em; border-radius: .7em 2em 2em 2em;
  background: var(--lm-blue); color: var(--lm-white); box-shadow: 0 .6em 1.6em color-mix(in srgb, var(--mask-solid) 16%, transparent);
}
.lm-cursor > span b { display: block; font-size: 2.3em; font-weight: 550; white-space: nowrap; }

/* a sheet of paper, written in ink lines */
.lm-sheet {
  display: flex; flex-direction: column; gap: 1.5em; padding: 4.4em 4em; border-radius: 1.6em;
  background: var(--paper); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--mask-solid) 6%, transparent);
}
.lm-ink { flex: none; height: 1em; width: calc(var(--w) * 1%); border-radius: 1em; background: var(--paper-ink); opacity: .18; transform-origin: 0 50%; }
.lm-ink--name { height: 1.9em; opacity: .9; margin-bottom: .8em; }
.lm-ink--head { height: 1.1em; opacity: .6; margin-top: 1.4em; }

/* a status, in the app's own colours */
.lm-status {
  --c: var(--status-draft);
  display: flex; align-items: center; gap: .9em; padding: .9em 1.8em .9em 1.4em; border-radius: 99em; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 16%, var(--lm-paper)); color: color-mix(in srgb, var(--c) 62%, var(--lm-ink));
  box-shadow: var(--shadow-md); transition: background .3s ease, color .3s ease;
}
.lm-status i { width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--c); transition: background .3s ease; }
.lm-status span { font-size: 2.3em; font-weight: 550; }
.lm-status[data-s="generated"] { --c: var(--status-generated); }

/* pause, bottom right: anything that moves for this long can be stopped */
.lm-pause {
  position: absolute; right: 1.6em; bottom: 1.6em; z-index: 9; display: grid; place-items: center; width: 3.6em; height: 3.6em; min-width: 24px; min-height: 24px;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--lm-paper) 82%, transparent); color: var(--lm-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lm-ink) 10%, transparent); cursor: pointer; opacity: .55; transition: opacity .2s ease;
}
.lm-pause[hidden] { display: none; }
.lm-pause:hover, .lm-pause:focus-visible { opacity: 1; }
.lm-pause:focus { outline: none; }
.lm-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-pause svg { width: 1.5em; height: 1.5em; min-width: 12px; min-height: 12px; }
.lm-pause .lm-pause-play, .lm-pause[aria-pressed="true"] .lm-pause-bars { display: none; }
.lm-pause[aria-pressed="true"] .lm-pause-play { display: block; }