/* Homepage hero: the background film, its scrim and the timed Hakken layer. */
.hero-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0c0e11; pointer-events: none; }
.hero-film video, .hero-film .hero-film-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.7);
}
.hero-film video { opacity: 0; transition: opacity 1.4s var(--ease-standard); }
.hero-film.is-playing video { opacity: 1; }
.hero-film::after {               /* strongest behind the text (left and bottom), lightest on the right where the film carries the story */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 14, 17, .9) 0%, rgba(12, 14, 17, .74) 32%, rgba(12, 14, 17, .3) 64%, rgba(12, 14, 17, .22) 100%),
    linear-gradient(0deg, rgba(12, 14, 17, .9) 0%, rgba(12, 14, 17, 0) 32%),
    linear-gradient(180deg, rgba(12, 14, 17, .7) 0%, rgba(12, 14, 17, 0) 22%);
}
.hero.has-film { color: var(--ink); background: #0c0e11; }   /* Carbon ground in both themes, before the poster paints */
.hero.has-film .hero-canvas { z-index: 1; }
.hero.has-film .hero-inner { z-index: 2; max-width: 1568px; }   /* the text sits further left, toward the frame, leaving the film the right side */
.hero.has-film .tick { z-index: 2; }
/* With the primary call to action in the nav, the hero keeps one quiet link, aligned to the text edge */
@media (min-width: 901px) { .hero.has-film .hero-ctas .hk-btn-ghost { padding-left: 0; } }

/* The Hakken layer: what the film is showing, in the brand's language */
.hero-film-layer {
  position: absolute; z-index: 2; right: max(32px, calc((100vw - 1280px) / 2 + 32px)); top: 60%; width: 320px;
  transform: translateY(-10%); pointer-events: none;
}
.hfl-beat { position: absolute; inset: 0 0 auto 0; display: grid; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard); }
.hfl-beat.is-on { opacity: 1; transform: none; }
.hfl-head { display: flex; align-items: center; gap: 10px; }
.hfl-node { flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--accent); border-radius: var(--radius-full); }
.hfl-node.is-filled { background: var(--accent); box-shadow: var(--shadow-node); }
.hfl-node.is-decision { border: 0; background: var(--decision-lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--decision-lime) 22%, transparent); }
.hfl-label { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #eeece6; text-shadow: 0 1px 8px rgba(12, 14, 17, .8); }
.hfl-sub { padding-left: 20px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238, 236, 230, .72); text-shadow: 0 1px 8px rgba(12, 14, 17, .8); }
.hfl-bar { margin-left: 20px; height: 2px; background: rgba(238, 236, 230, .18); }
.hfl-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.6s var(--ease-layer); }
.hfl-beat.is-on .hfl-bar span { width: var(--w, 60%); }

/* In Paper the nav sits over the dark film until it turns solid: show the light logo there */
.nav[data-theme="carbon"] .logo-carbon { display: block !important; }
.nav[data-theme="carbon"] .logo-paper { display: none !important; }

/* Pause control: the film moves for more than five seconds, so visitors can stop it */
.hero-film-toggle { position: absolute; z-index: 3; right: 32px; bottom: 84px; }

@media (max-width: 900px) {
  .hero-film-layer { display: none; }
  .hero-film::after { background: linear-gradient(0deg, rgba(12, 14, 17, .92) 0%, rgba(12, 14, 17, .62) 45%, rgba(12, 14, 17, .36) 100%); }
  .hero-film-toggle { right: 16px; bottom: 16px; }
}