/* Hero B — "The Inside World": the film's length (the pull-back takes twice the scroll it used to). */
.hx--b { --film: 629vh; } /* opening 129 + inside world 130 + pull-back 242 + hold 128 (see LEN in film-b.js) */

/* the note above the flagged panel: two short sentences and a hairline down to the panel */
.hx-note {
  position: absolute; z-index: 3; left: 0; top: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 16px; line-height: 1.35; white-space: nowrap; color: rgba(245, 243, 238, 0.95);
  text-shadow: 0 1px 2px rgba(11, 11, 12, 0.9), 0 0 14px rgba(11, 11, 12, 0.75);
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.hx-note b { font-weight: 600; color: #f5f3ee; }
.hx-note i { width: 1px; height: 22px; background: #ffb020; transform-origin: bottom; transform: scaleY(var(--rule, 0)); }
@media (max-width: 820px) { .hx-note { font-size: 14px; } }

/* the words live in the scene: headline and subline as one calm block in the sky above the house */
.hx--b .hx__copy { left: 50%; right: auto; top: clamp(96px, 13vh, 150px); transform: translateX(-50%); width: min(58rem, calc(100% - 2 * var(--edge))); text-align: center; }
.hx--b .hx__title { font-size: clamp(2.4rem, 4.85vw, 4.7rem); text-wrap: balance; } /* 10% smaller (was clamp(2.6rem, 5.4vw, 5.2rem)) */
.hx--b .hx__sub { margin: 18px auto 0; max-width: 34rem; font-size: clamp(15px, 1.1vw, 17px); color: rgba(245, 243, 238, 0.68); }
/* a light scrim (about half the old one) so the sunset keeps its colour; a soft shadow under the headline keeps it readable */
.hx--b .hx__scrim { background: linear-gradient(180deg, rgba(8, 10, 16, 0.26) 0%, rgba(8, 10, 16, 0.1) 26%, rgba(8, 10, 16, 0) 40%); }
.hx--b .hx__title { text-shadow: 0 2px 28px rgba(8, 10, 16, 0.32), 0 1px 3px rgba(8, 10, 16, 0.25); }

@media (max-width: 820px) {
  .hx--b .hx__copy { top: max(84px, 11svh); left: 50%; right: auto; transform: translateX(-50%); width: calc(100% - 2 * var(--edge)); }
  .hx--b .hx__title { font-size: clamp(2.2rem, 9.6vw, 3.4rem); }
  .hx--b .hx__sub { font-size: 15px; margin-top: 12px; }
  .hx--b .hx__scrim { background: linear-gradient(180deg, rgba(8, 10, 16, 0.6) 0%, rgba(8, 10, 16, 0.3) 34%, rgba(8, 10, 16, 0) 55%); }
}

/* the opening focus box and its readout: thin, faint, quiet */
.hx-scan { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; overflow: visible; }
.hx-lens { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; will-change: transform; filter: brightness(1.75) contrast(1.08); box-shadow: inset 0 0 0 1px rgba(245, 243, 238, 0.08), 0 10px 30px rgba(0, 0, 0, 0.35); }
.hx-scan__frame { fill: none; stroke: rgba(245, 243, 238, 0.14); stroke-width: 1; }
.hx-scan__ticks { fill: none; stroke: rgba(245, 243, 238, 0.62); stroke-width: 1.2; stroke-linecap: round; }
.hx-scan__dot { fill: #f5f3ee; opacity: 0; }
/* the readout lives inside the focus box (bottom left), placed by film-b.js */
.hx-readout {
  position: absolute; z-index: 3; left: 0; top: 0; margin: 0; display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: rgba(245, 243, 238, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; will-change: transform, opacity;
  transition: opacity 0.3s ease;
}
.hx-readout i { width: 5px; height: 5px; border-radius: 50%; background: rgba(245, 243, 238, 0.85); }
.hx-readout span { transition: opacity 0.4s ease; }

/* no WebGL: the film's last frame as a still (poster.jpg, captured from this build) */
.no-gl .hx--b .hx__stage { background-image: url(poster.jpg); background-position: center; }

/* the rendered frames stay hidden until the first frame of the opening is on screen */
html:not(.is-ready) .hx__bake { visibility: hidden; }

/* the opening box speaks in the film's two colours: amber while it checks, the river's green when all is clear */
.hx--b { --scan-amber: #ffb020; --scan-green: #0fe22e; }
/* the box itself keeps its quiet white; only the word and its dot take the colour */
.hx-readout { transition: opacity 0.3s ease, color 0.35s ease; }
.hx-readout i { transition: background-color 0.35s ease, box-shadow 0.35s ease; }
.is-checking .hx-readout { color: var(--scan-amber); }
.is-checking .hx-readout i { background: var(--scan-amber); box-shadow: 0 0 6px rgba(255, 176, 32, 0.7); }
.is-clear .hx-readout { color: var(--scan-green); }
.is-clear .hx-readout i { background: var(--scan-green); box-shadow: 0 0 6px rgba(15, 226, 46, 0.7); }

/* the logo's amber dot sits after Care365, on its line */
.nav__sub { display: inline-flex; align-items: center; gap: 5px; }
.nav__logo .nav__sub .nav__dot { margin: 0 0 0 1px; width: 5px; height: 5px; }
@media (max-width: 819.98px) { .hx--b .hx__copy { top: var(--head-m); } }