/* The film belongs only to the home hero; original content and motion targets stay intact. */
.boost-palette-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* Keep the approved dark header opaque over the moving footage. */
.nav-component { background-color: var(--boost-background); }
.hero-section.hero-with-film {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-bottom: 6rem;
  isolation: isolate;
  overflow: clip;
  background: var(--boost-background);
}
.hero-with-film > .padding-global { width: 100%; }
.hero-with-film .padding-section-large.is-home-hero { padding-block: 4rem; }
.hero-film,
.hero-film__video,
.hero-film__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-film { z-index: -1; pointer-events: none; }
.hero-film__video { display: block; object-fit: cover; object-position: center; }
.hero-film__shade {
  background: linear-gradient(180deg, rgba(var(--boost-background-rgb), .5) 0%, rgba(var(--boost-background-rgb), .16) 30%, rgba(var(--boost-background-rgb), .28) 62%, rgba(var(--boost-background-rgb), .94) 100%),
    radial-gradient(ellipse at center, rgba(var(--boost-background-rgb), .36), rgba(var(--boost-background-rgb), .06) 75%);
}
.hero-with-film h1 { text-shadow: 0 2px 24px rgba(var(--boost-background-rgb), .55); }
/* Use the approved transparent logo as the mask, so the moving highlight
   follows its gold lettering and never draws a rectangular shine. */
.hero-brand {
  position: relative;
  width: clamp(14rem, 26vw, 25rem);
  max-width: 72vw;
  flex: none;
  isolation: isolate;
  filter: drop-shadow(0 5px 18px rgba(var(--boost-background-rgb), .48));
}
.hero-brand__logo { display: block; width: 100%; height: auto; }
.hero-brand__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url('/assets/boost-logo-clean.png') center / 100% 100% no-repeat;
  mask: url('/assets/boost-logo-clean.png') center / 100% 100% no-repeat;
  background: linear-gradient(110deg, transparent 43%, rgba(246,222,163,.2) 47%, rgba(255,255,255,.9) 50%, rgba(246,222,163,.35) 53%, transparent 57%) 160% 50% / 250% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: hero-logo-sheen 4.5s ease-in-out infinite;
}
@keyframes hero-logo-sheen {
  0% { background-position: 120% 50%; opacity: 0; }
  15%, 85% { opacity: .8; }
  100% { background-position: -20% 50%; opacity: 0; }
}
.hero-with-film .hero_content > .button {
  background-color: rgba(var(--boost-background-rgb), .58);
  backdrop-filter: blur(8px);
}
.hero-with-film .hero_scroll.is-hero { background: transparent; text-shadow: 0 2px 12px var(--boost-background); }
.hero-film-toggle {
  position: absolute;
  inset-inline-end: clamp(1.25rem, 3vw, 3rem);
  bottom: 2rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: .65rem;
  border: 1px solid rgba(213,170,83,.6);
  border-radius: 50%;
  background: rgba(var(--boost-background-rgb), .65);
  color: #fff;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.hero-film-toggle[hidden] { display: none; }
.hero-film-toggle:hover { background: var(--boost-background); border-color: #f6dea3; }
.hero-film-toggle:focus-visible { outline: 2px solid #f6dea3; outline-offset: 4px; }
.hero-film-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-film-toggle__pause,
.hero-film-toggle.is-playing .hero-film-toggle__play { display: none; }
.hero-film-toggle.is-playing .hero-film-toggle__pause { display: block; }
@media (max-width: 767px) {
  .hero-brand { width: clamp(12rem, 58vw, 15rem); }
  .hero-with-film .padding-section-large.is-home-hero { padding-block: 3rem; }
  .hero-film__shade {
    background: linear-gradient(180deg, rgba(var(--boost-background-rgb), .5), rgba(var(--boost-background-rgb), .35) 38%, rgba(var(--boost-background-rgb), .38) 60%, rgba(var(--boost-background-rgb), .94));
  }
  .hero-film-toggle { bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand__shine { animation: none; display: none; }
  .hero-film-toggle { transition: none; }
}