/* Home hero, after the Info Display OOH hero:
   the group film plays full bleed, the line sits top left (after Egmont) with three dots that
   keep counting, and what we do runs along the bottom in a row. Hovering or focusing a word
   fades in its house's film and the house's own words take the line's place; leaving the row
   fades back to the group film. Film logic in
   /assets/js/hero-brands.js. */
.hb { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; background: var(--ink); color: var(--paper); isolation: isolate; }

@media (max-height: 500px) and (orientation: landscape) { .hb { min-height: 0; } } /* phones held sideways */

/* The films */
.hb__media { position: absolute; inset: 0; z-index: -1; }
.hb__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.hb__vid.is-shown { opacity: 1; }

/* Soft shade under the line and under the houses, the same on every film */
.hb__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hb__scrim--top { background: linear-gradient(to bottom, rgba(19, 21, 15, .55) 0%, rgba(19, 21, 15, .38) 40%, rgba(19, 21, 15, 0) 64%); }
.hb__scrim--bottom { background: linear-gradient(to top, rgba(19, 21, 15, .62) 0%, rgba(19, 21, 15, .26) 24%, rgba(19, 21, 15, 0) 46%); }

/* The line: Newsreader light, roman with the italic word, as the other Pear titles */
.hb__line { position: absolute; left: var(--pad); right: var(--pad); top: clamp(104px, 20vh, 220px); font-family: var(--serif); font-weight: 300; font-size: clamp(2.75rem, 1.4rem + 6vw, 8.5rem); line-height: .98; letter-spacing: -.02em; color: var(--paper); text-transform: none; text-shadow: 0 0 28px rgba(19, 21, 15, .3); }
@media (min-width: 768px) { .hb__line > span { display: block; } }
.hb__line em { font-style: italic; }
.hb__word { white-space: nowrap; }

/* The three dots count one, two, three, then start again */
.hb__dots span { animation: 1.8s linear infinite; }
.hb__dots span:nth-child(2) { animation-name: hb-dot-2; }
.hb__dots span:nth-child(3) { animation-name: hb-dot-3; }
@keyframes hb-dot-2 { 0%, 33.32% { opacity: 0; } 33.33%, 100% { opacity: 1; } }
@keyframes hb-dot-3 { 0%, 66.65% { opacity: 0; } 66.66%, 100% { opacity: 1; } }
.hb.is-paused .hb__dots span { animation-play-state: paused; }

/* What we do, in a row along the bottom; the hovered word dims, as on Info Display. Each word keeps
   room on its right for the link arrow, so the arrow never touches the next word. */
.hb__brands { position: absolute; left: var(--pad); right: calc(var(--pad) + 48px); bottom: clamp(28px, 6vh, 56px); display: flex; flex-wrap: wrap; column-gap: clamp(16px, 2vw, 32px); row-gap: 4px; padding: 0; list-style: none; }
.hb__link { display: inline-block; color: var(--paper); }
.hb__name { position: relative; display: inline-block; padding-right: .72em; font-family: var(--sans); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.025em; transition: opacity .2s ease; }
/* The link arrow is always there, so every word reads as a way into the house's own site; it nudges on hover */
.hb__name .hb__go { position: absolute; right: .04em; top: .12em; width: .48em; height: .48em; transition: transform .3s ease; }
.hb__item.is-active .hb__go, .hb__link:focus-visible .hb__go { transform: translate(2px, -2px); }
@media (hover: hover) and (min-width: 640px) { .hb__item.is-active .hb__name { opacity: .6; } }
/* Touch screens: the words sit a little closer */
@media (hover: none) { .hb__brands { column-gap: 18px; } }
.hb__link:focus-visible { outline: none; }
.hb__link:focus-visible .hb__name { outline: 2px solid var(--paper); outline-offset: 6px; border-radius: var(--radius-s); }

/* The fades take turns: the line leaves quickly and comes back only once the house's words have
   gone, so the two never show through each other */
.hb__line { transition: opacity .3s ease .25s; }
.hb.is-picked .hb__line { opacity: 0; transition: opacity .2s ease; }

/* Each word's house speaks in the line's place: the same font, set smaller so it fits, with the
   house name under it */
.hb__line--house { font-size: clamp(2.25rem, 1rem + 4.6vw, 6.5rem); line-height: 1.02; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.hb__line-by { display: block; margin-top: .5em; font-size: max(.26em, 1.125rem); font-style: italic; font-weight: 400; letter-spacing: 0; }
.hb.is-picked .hb__line--house { opacity: 0; }
.hb.is-picked .hb__line--house.is-on { opacity: 1; transition: opacity .35s ease .15s; }

/* Pause control, bottom right */
.hb__ctl { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--paper); background: transparent; border: 0; border-radius: var(--radius-s); cursor: pointer; }
@media (min-width: 768px) { .hb__ctl { right: 16px; bottom: 16px; } }
.hb__ctl svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(19, 21, 15, .6)); }
.hb__ctl .hb__i-pause { stroke-width: 2.25; stroke-linecap: butt; }
.hb__ctl:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.hb:not(.is-paused) .hb__i-play, .hb.is-paused .hb__i-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hb__vid, .hb__go, .hb__line { transition: none; }
  .hb.is-picked .hb__line, .hb.is-picked .hb__line--house.is-on { transition: none; }
  .hb__dots span { animation: none; }
  .hb__ctl { display: none; }
}