/* The launch film (SITE-29) and the gauge that jumps out of it (SITE-30).
   Kept out of styles.css so the two can ship without touching the shared stylesheet's version. */

/* ---------- The film ---------- */
.film .film-frame {
  position: relative;
  margin: 44px 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  background: #0b0b0a url("video/poster-16x9.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--rule-soft), 0 40px 120px -40px var(--accent-glow);
}
.film .film-frame.is-portrait {
  aspect-ratio: 9 / 16;
  width: min(100%, calc(80svh * 9 / 16));
  margin-inline: auto;
  border-radius: 26px;
  background-image: url("video/poster-9x16.webp");
}
.film video,
.film .film-end {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.film video { background: transparent; }
.film .film-end { opacity: 0; pointer-events: none; }
.film .film-end.is-on { opacity: 1; }
.film .film-frame.is-playing .film-end { opacity: 0; }

/* The sketched outline boils with the film's lines (film.js redraws it). */
.film .film-sketch {
  position: absolute; inset: -7px;
  width: calc(100% + 14px); height: calc(100% + 14px);
  max-width: none; /* the site's global svg { max-width: 100% } would pull it back inside the frame */
  pointer-events: none; overflow: visible;
}
.film .film-sketch path { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 2; stroke-linejoin: round; }

.film .film-play {
  display: none;
  position: absolute; left: 50%; bottom: 7%;
  transform: translateX(-50%);
  /* Sized to its own content: at left: 50% the shrink-to-fit width is capped at half the frame,
     and on a phone iOS Safari let "0:39" run out past the pill's edge. Margins, not gap, so the
     spacing counts toward that width in every engine. */
  width: max-content; max-width: calc(100% - 24px);
  align-items: center;
  height: 56px; padding: 0 24px 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 14, 14, 0.86); /* no backdrop blur: over a <video> layer Chromium drops the pill's contents */
  color: var(--ink);
  font: 600 16px/1 var(--body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.film .film-play:hover { background: rgba(30, 30, 32, 0.72); transform: translateX(-50%) translateY(-1px); }
.film .film-play svg { width: 26px; height: 26px; flex: none; margin-right: 12px; }
.film .film-play span { color: var(--ink-2); font-weight: 500; margin-left: 12px; }
.film .film-frame.is-ready .film-play { display: inline-flex; }
.film .film-frame.is-playing .film-play { display: none; }
.film .film-frame.is-portrait .film-play { bottom: 5%; }
.film-note { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }

/* The hero's pointer to it */
.film-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); font-size: 15px; font-weight: 600; text-decoration: none;
}
.film-link svg { width: 22px; height: 22px; }
.film-link span { color: var(--ink-3); font-weight: 500; }
.film-link:hover { color: var(--ink); }

/* ---------- The gauge ---------- */
.gauge-buddy {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  will-change: transform;
}
.gauge-buddy.is-on { opacity: 1; }
.gauge-buddy svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.gauge-buddy.is-perched svg { pointer-events: auto; cursor: pointer; }
.gb-close {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 20, 20, 0.92);
  color: var(--ink);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.gauge-buddy .gb-close svg { width: 10px; height: 10px; filter: none; }
.gauge-buddy.is-perched.show-close .gb-close { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .gauge-buddy.is-perched:hover .gb-close { opacity: 1; pointer-events: auto; }
}
.gb-track { fill: none; stroke: #45433F; stroke-width: 13.5; stroke-linecap: round; }
.gb-edge  { fill: none; stroke: #F0EDE8; stroke-opacity: 0.28; stroke-width: 1.1; transition: opacity 0.3s; }
.gb-fill, .gb-red { fill: none; stroke-width: 13.5; stroke-linecap: round; }
.gb-fill { stroke: #EFECE7; }
.gb-red  { stroke: #FF453A; }
.gb-needle line { stroke: #EFECE7; stroke-width: 5; stroke-linecap: round; }
.gb-hub-o { fill: #292826; }
.gb-hub-m { fill: #373533; }
.gb-white { fill: #EFECE7; }
.gb-pupil { fill: #141312; transition: opacity 0.3s; }
.gb-happy { fill: none; stroke: #EFECE7; stroke-width: 3.6; stroke-linecap: round; opacity: 0; }
.gauge-buddy.is-happy .gb-eye { opacity: 0; }
.gauge-buddy.is-happy .gb-happy { opacity: 1; }
.gb-legs { transition: opacity 0.3s; }
.gb-leg path { fill: none; stroke: #F0EDE8; stroke-width: 4.4; stroke-linecap: round; }
.gb-leg ellipse { fill: #F0EDE8; }
.gb-leg { transform-box: fill-box; transform-origin: 50% 0; }
.gauge-buddy.is-logo .gb-legs,
.gauge-buddy.is-logo .gb-pupil,
.gauge-buddy.is-logo .gb-edge { opacity: 0; }
.gauge-buddy.is-walking .gb-leg-l { animation: gb-step 0.26s ease-in-out infinite alternate; }
.gauge-buddy.is-walking .gb-leg-r { animation: gb-step 0.26s ease-in-out infinite alternate-reverse; }
@keyframes gb-step { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
/* The gauge's tip (SITE-34): a speech bubble up and to the left of it, tail pointing down at it. */
.gb-tip {
  position: fixed; z-index: 61;
  width: max-content;
  padding: 12px 14px 11px;
  border-radius: 14px;
  border: 1px solid var(--rule-soft);
  background: rgba(28, 28, 30, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  font-size: 14px; line-height: 1.4;
  opacity: 0; pointer-events: none;
  transform: translateY(6px) scale(0.96); transform-origin: 90% 100%;
  transition: opacity 0.18s, transform 0.22s cubic-bezier(.2, .9, .3, 1.2);
}
.gb-tip.is-open { opacity: 1; pointer-events: auto; transform: none; }
.gb-tip::after {
  content: ""; position: absolute; right: 22px; bottom: -6px;
  width: 11px; height: 11px;
  background: inherit;
  border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  transform: rotate(45deg);
}
.gb-tip p { margin: 0 0 6px; color: var(--ink); }
.gb-tip a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.gb-tip a:hover, .gb-tip a:focus-visible { text-decoration: underline; }
@media print { .gauge-buddy, .gb-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .gauge-buddy .gb-leg { animation: none !important; } .gb-tip { transition: none; transform: none; } }