/* The motion hero. Loaded after landing.css, on the motion page only.

   One orchestrated moment, and everything below it is the quiet page it already was: a
   description is typed, and the person it describes arrives in their own place, on their own
   clock. The palette is the band's night teal with one warm colour, the lamp, taken from the
   footage itself -- an oven, a copper pan, a lighthouse -- and used only for the clock, which is
   the one live thing on the page. */

.is-motion {
  --mo-night: #0b2a27;
  --mo-night-2: #12403a;
  --mo-paper: #eef3f1;
  --mo-mist: #9dc3bd;
  --mo-glow: #6fd3c4;
  --mo-lamp: #f3c27a;
  --mo-line: rgba(238, 243, 241, .14);
  --mo-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* The nav sits on the hero, so it takes the hero's ground rather than cutting a pale bar across
   the top of it. It stays dark over the rest of the page: one bar, one colour. */
.is-motion .nav { background: color-mix(in srgb, var(--mo-night) 92%, transparent); }
.is-motion .nav[data-stuck] { border-bottom-color: var(--mo-line); }
.is-motion .nav .wordmark { color: var(--mo-paper); }
.is-motion .nav .wordmark .mark { color: var(--mo-glow); }
.is-motion .nav-cta { color: var(--mo-paper); border-color: var(--mo-line); }
@media (hover: hover) and (pointer: fine) {
  .is-motion .nav-cta:hover { background: rgba(238, 243, 241, .08); }
}
.is-motion :focus-visible { outline-color: var(--mo-glow); }

/* ------------------------------------------------------------------ hero -- */
.mo-hero {
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(243, 194, 122, .10), transparent 70%),
    var(--mo-night);
  color: var(--mo-paper);
  padding-block: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 48px);
}
.mo-in {
  display: grid;
  grid-template-areas: 'title' 'field' 'window' 'people' 'sub' 'cta';
  gap: 22px;
}
@media (min-width: 900px) {
  .mo-in {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    grid-template-areas:
      'title  window'
      'field  window'
      'sub    window'
      'cta    window'
      'cta    people';
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 26px;
    align-items: start;
  }
}

.mo-title {
  grid-area: title;
  color: var(--mo-paper);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
  margin-top: clamp(8px, 3vw, 40px);
}

/* The field is the app's own Describe box, in the app's own mono: the page is showing the one
   thing a reader will do, not describing it. */
.mo-field {
  grid-area: field;
  max-width: 34rem;
  padding: 14px 16px 16px;
  border: 1px solid var(--mo-line);
  border-radius: 14px;
  background: rgba(238, 243, 241, .04);
}
.mo-field-label {
  display: block;
  margin-bottom: 8px;
  font: 600 .6875rem/1 var(--mo-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mo-mist);
}
.mo-typed {
  font: 400 clamp(.9375rem, 1.5vw, 1.0625rem)/1.55 var(--mo-mono);
  color: var(--mo-paper);
}
.mo-caret {
  display: inline-block;
  width: .55em;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -.2em;
  background: var(--mo-glow);
  opacity: 0;
}
.mo-hero[data-typing] .mo-caret { opacity: 1; }
.mo-hero[data-idle] .mo-caret { opacity: 1; animation: mo-blink 1.05s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }

.mo-sub {
  grid-area: sub;
  max-width: 30em;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--mo-mist);
}
.mo-cta { grid-area: cta; }
.mo-cta .badge-link img { height: 54px; width: auto; }
.mo-more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 18px;
  font-weight: 600;
}
.mo-more a { color: var(--mo-glow); text-decoration: none; }
.mo-more a::after { content: ' \2193'; }
@media (hover: hover) and (pointer: fine) {
  .mo-more a:hover { text-decoration: underline; }
}
.mo-fine { margin-top: 12px; font-size: .875rem; color: var(--mo-mist); max-width: 30em; }
.mo-fine a { color: var(--mo-paper); }

/* ---------------------------------------------------------------- window -- */
/* An arch: a window into where they are, not a screen and not a card. The one shape on the
   page that is not a rectangle, so it is the thing the eye goes to. */
.mo-window {
  grid-area: window;
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 420px;
  justify-self: center;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 22px 22px / 46% 46% 22px 22px;
  overflow: hidden;
  background: var(--mo-night-2);
  box-shadow: 0 0 0 1px var(--mo-line), 0 30px 80px rgba(0, 0, 0, .45);
  isolation: isolate;
}
@media (max-width: 899px) { .mo-window { max-width: 360px; } }
.mo-frame { position: absolute; inset: 0; }
.mo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 6s linear;
}
.mo-video.is-on { opacity: 1; }
/* While a new description is being typed, the last place goes out of focus: the page is
   writing somebody new, and the old view should not compete with the words. */
.mo-hero[data-typing] .mo-video.is-on { filter: blur(14px) brightness(.55) saturate(.7); transform: scale(1.06); }

.mo-card {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 64px 22px 22px;
  background: linear-gradient(to top, rgba(6, 22, 20, .92) 0%, rgba(6, 22, 20, .72) 55%, transparent 100%);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.mo-hero[data-typing] .mo-card { opacity: 0; transform: translateY(10px); }

.mo-when {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 .8125rem/1 var(--mo-mono);
  color: var(--mo-mist);
}
.mo-clock { color: var(--mo-lamp); font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mo-lamp);
  box-shadow: 0 0 0 0 rgba(243, 194, 122, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .mo-live { animation: mo-pulse 2.4s var(--ease-out) infinite; }
}
@keyframes mo-pulse {
  70% { box-shadow: 0 0 0 7px rgba(243, 194, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 194, 122, 0); }
}
.mo-name {
  margin-top: 12px;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #fff;
}
.mo-role { margin-top: 4px; font-size: .875rem; color: var(--mo-mist); }
.mo-hook { margin-top: 12px; font-size: .9375rem; line-height: 1.45; color: var(--mo-paper); max-width: 26em; }
.mo-desc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- people -- */
/* Directly under the window they change, at every width: the control sits with the thing it
   controls, not three paragraphs further down. */
.mo-people {
  grid-area: people;
  width: 100%;
  max-width: 420px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
@media (max-width: 899px) { .mo-people { max-width: 360px; } }
.mo-tabs {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.mo-tab, .mo-pause {
  font: inherit;
  color: var(--mo-mist);
  background: none;
  border: 0;
  cursor: pointer;
}
.mo-tab {
  display: grid;
  gap: 3px;
  padding: 10px 2px 0;
  text-align: left;
  min-width: 0;
}
.mo-tab-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms var(--ease-out);
}
.mo-tab-place {
  font: 400 .75rem/1.2 var(--mo-mono);
  color: rgba(157, 195, 189, .7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mo-tab-bar {
  display: block;
  height: 2px;
  margin-top: 8px;
  background: var(--mo-line);
  border-radius: 2px;
  overflow: hidden;
}
.mo-tab-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--mo-glow);
  transform: scaleX(0);
  transform-origin: left;
}
.mo-tab[aria-selected='true'] { color: var(--mo-paper); }
.mo-tab[aria-selected='true'] .mo-tab-bar i { transform: scaleX(var(--mo-progress, 1)); }
@media (hover: hover) and (pointer: fine) {
  .mo-tab:hover { color: var(--mo-paper); }
}
.mo-pause {
  padding: 8px 14px;
  border: 1px solid var(--mo-line);
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mo-paper);
}
@media (hover: hover) and (pointer: fine) {
  .mo-pause:hover { background: rgba(238, 243, 241, .08); }
}
/* No script, nothing to pause. */
.mo-pause { display: none; }
.mo-hero[data-live] .mo-pause { display: inline-block; }

/* On a narrow phone the places go, and each name takes the width it needs rather than a fifth
   of the row: equal fifths cut "Michèle" to "Mic…" at 320px. */
@media (max-width: 420px) {
  .mo-tab-place { display: none; }
  .mo-tab-name { font-size: .9375rem; overflow: visible; }
  .mo-tabs { grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-video, .mo-card { transition: none; }
  .mo-hero[data-typing] .mo-video.is-on { filter: none; transform: none; }
}