/*
 * The logo film - the lockup arriving, for Instagram.
 *
 *   .lf              the frame
 *   .lf-stage        the lockup, centred, scaled off the frame's short edge
 *
 * Every measurement is a custom property set by render(), derived from the frame's
 * short edge, so one stylesheet serves 1:1, 4:5 and 9:16 without a second layout.
 * Same arrangement as faq-film.css for the same reason.
 *
 * Nothing here animates. The film is deterministic from t - render() computes every
 * transform and opacity - because the capture harness asks for frame 74 directly in
 * a fresh headless Chrome and a CSS animation cannot be asked what it looks like at
 * a given moment.
 */
.lf {
  position: relative; overflow: hidden;
  background: #080c13;
  font-family: 'Circular Std', ui-sans-serif, system-ui, sans-serif;
}

/* The drifting colour field behind the lockup, the same three-blob idea the site
   uses. Two layers moving at different rates so the background is never flat. */
.lf-field { position: absolute; inset: -20%; filter: blur(var(--blur)); }
.lf-blob { position: absolute; border-radius: 50%; }

/* A vignette, so the corners fall away and the eye goes to the middle. Pure film
   grammar and the cheapest way to stop a flat dark rectangle reading as an error. */
.lf-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 34%, rgba(4,7,12,.72) 100%);
}

.lf-stage {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: center; gap: var(--gap);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.lf-mark { width: var(--mark); height: var(--mark); flex: none; }
.lf-mark svg { width: 100%; height: 100%; display: block; }

.lf-words { display: flex; flex-direction: column; }
.lf-w {
  font-size: var(--word); font-weight: 700; line-height: 1.04;
  letter-spacing: .265em; text-transform: uppercase;
  /* The gradient the site uses on the wordmark, clipped to the letters. */
  background: linear-gradient(96deg, #eef4fb 0%, #9ccdf1 46%, #c9b6e8 78%, #eef4fb 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lf-rule { position: relative; height: var(--rule); margin: var(--rule-gap) 0; }
.lf-rule i {
  position: absolute; left: 0; top: 0; height: 100%; display: block;
  background: linear-gradient(90deg, #5498d8, #9ccdf1 46%, #d98fb8);
  border-radius: 999px;
}
/* The ball that putts the rule. A real sphere rather than a flat dot: at 1080 the
   highlight is the difference between a golf ball and a full stop. */
.lf-ball {
  position: absolute; top: 50%; border-radius: 50%;
  width: var(--ball); height: var(--ball); margin-top: calc(var(--ball) / -2);
  background: radial-gradient(circle at 34% 30%, #fff 0%, #f2f8fd 56%, #cfe4f5 100%);
  box-shadow: 0 0 calc(var(--ball) / 2) rgba(156, 205, 241, .5);
}
.lf-tag {
  font-size: var(--tag); font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: #7f93ab;
}

/* ---------------------------------------------------------------- light theme
   The sting at the end of a film follows the film. Blobs are painted inline by
   render() in the dark palette; inverting and hue-rotating them turns the navy
   and plum field into pale sky and lilac without a second palette in the JS. */
html[data-theme="light"] .lf { background: #f4f7fc; }
html[data-theme="light"] .lf-blob { filter: invert(1) hue-rotate(180deg); opacity: .45 !important; }
html[data-theme="light"] .lf-vig { background: radial-gradient(ellipse at 50% 46%, transparent 34%, rgba(196, 210, 230, .55) 100%); }
html[data-theme="light"] .lf-w { background-image: linear-gradient(96deg, #2d4a86 0%, #3f79b4 46%, #785da6 78%, #2d4a86 100%); }
html[data-theme="light"] .lf-rule i { background: linear-gradient(90deg, #3f79b4, #305c8a 46%, #9d3d74); }
html[data-theme="light"] .lf-tag { color: #566270; }
html[data-theme="light"] .lf-ball { box-shadow: 0 0 0 1px rgba(16, 40, 66, .35), 0 0 calc(var(--ball) / 2) rgba(63, 121, 180, .35); }