/* --------------------------------------------------------------------------
   Hero media — slideshow and still-picture heroes chosen in the CMS.

   Loaded only by a page whose hero uses a slideshow (or a still picture on the
   home page), the way cms-blocks.css is: pages whose heroes are unchanged never
   load it, and site.css stays byte for byte what it was.

   The slideshow keeps the clubhouse slideshow's pace and its one rule (site.css,
   "Clubhouse slideshow"): 5.0s a picture, a 0.8s fade, and the incoming
   picture reaches full opacity BEFORE the outgoing one fades, so something is
   always at opacity 1 and the dark panel never shows through. Every picture uses
   the same curve, offset by 5s; later pictures sit above earlier ones, and
   the first is restored beneath the last while the last still covers it, which
   closes the loop without a dissolve. One curve per picture count, because the
   cycle is 5s x the count. Generated arithmetic: percentages are
   seconds / cycle. The first picture carries -0.8s so the page opens on it,
   fully shown.
   -------------------------------------------------------------------------- */

.heroslides {
  position: absolute;
  inset: 0;
}

.heroslides > img,
.hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heroslides > img {
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.heroslides > img:nth-child(1) { animation-delay: -0.8s; }
.heroslides > img:nth-child(2) { animation-delay: 4.2s; }
.heroslides > img:nth-child(3) { animation-delay: 9.2s; }
.heroslides > img:nth-child(4) { animation-delay: 14.2s; }
.heroslides > img:nth-child(5) { animation-delay: 19.2s; }
.heroslides > img:nth-child(6) { animation-delay: 24.2s; }
.heroslides > img:nth-child(7) { animation-delay: 29.2s; }
.heroslides > img:nth-child(8) { animation-delay: 34.2s; }

.heroslides--n2 > img { animation-name: rhSlides2; animation-duration: 10s; }
.heroslides--n3 > img { animation-name: rhSlides3; animation-duration: 15s; }
.heroslides--n4 > img { animation-name: rhSlides4; animation-duration: 20s; }
.heroslides--n5 > img { animation-name: rhSlides5; animation-duration: 25s; }
.heroslides--n6 > img { animation-name: rhSlides6; animation-duration: 30s; }
.heroslides--n7 > img { animation-name: rhSlides7; animation-duration: 35s; }
.heroslides--n8 > img { animation-name: rhSlides8; animation-duration: 40s; }

/* Motion off: the first picture, still. */
@media (prefers-reduced-motion: reduce) {
  .heroslides > img { animation: none; opacity: 0; }
  .heroslides > img:first-child { opacity: 1; }
}

/* 2 pictures: 10s */
@keyframes rhSlides2 {
  0.000%  { opacity: 0; }
  8.000% { opacity: 1; }   /* 0.80s  fully opaque */
  58.000% { opacity: 1; }   /* 5.80s  holds until the next is fully opaque */
  66.000% { opacity: 0; }   /* 6.60s */
  100.000% { opacity: 0; }
}

/* 3 pictures: 15s */
@keyframes rhSlides3 {
  0.000%  { opacity: 0; }
  5.333% { opacity: 1; }   /* 0.80s  fully opaque */
  38.667% { opacity: 1; }   /* 5.80s  holds until the next is fully opaque */
  44.000% { opacity: 0; }   /* 6.60s */
  100.000% { opacity: 0; }
}

/* 4 pictures: 20s */
@keyframes rhSlides4 {
  0.000%  { opacity: 0; }
  4.000% { opacity: 1; }   /* 0.80s  fully opaque */
  29.000% { opacity: 1; }   /* 5.80s  holds until the next is fully opaque */
  33.000% { opacity: 0; }   /* 6.60s */
  100.000% { opacity: 0; }
}

/* 5 pictures: 25s */
@keyframes rhSlides5 {
  0.000%  { opacity: 0; }
  3.200% { opacity: 1; }   /* 0.80s  fully opaque */
  23.200% { opacity: 1; }   /* 5.80s  holds until the next is fully opaque */
  26.400% { opacity: 0; }   /* 6.60s */
  100.000% { opacity: 0; }
}

/* 6 pictures: 30s */
@keyframes rhSlides6 {
  0.000%  { opacity: 0; }
  2.667% { opacity: 1; }   /* 0.80s  fully opaque */
  19.333% { opacity: 1; }   /* 5.80s  holds until the next is fully opaque */
  22.000% { opacity: 0; }   /* 6.60s */
  100.000% { opacity: 0; }
}

/* 7 pictures: 35s */
@keyframes rhSlides7 {
  0.000%  { opacity: 0; }
  2.286% { opacity: 1; }   /* 0.80s  fully opaque */
  16.571% { opacity: 1; }   /* 5.80s  holds until the next is fully opaque */
  18.857% { opacity: 0; }   /* 6.60s */
  100.000% { opacity: 0; }
}

/* 8 pictures: 40s */
@keyframes rhSlides8 {
  0.000%  { opacity: 0; }
  2.000% { opacity: 1; }   /* 0.80s  fully opaque */
  14.500% { opacity: 1; }   /* 5.80s  holds until the next is fully opaque */
  16.500% { opacity: 0; }   /* 6.60s */
  100.000% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Hero video playlist — the home hero's sequence, at any length from 1 to 12.

   Same timing as site.css §8 ("Hero cycle"): the first clip plays underneath
   and stays opaque; each later clip fades in over the one before while that one
   is still fully shown (0.8s), holds, and the next begins 3.4s after it. The
   cycle is 1.2s + 3.4s a clip: 28.4s for eight. Every later clip shares one
   curve per count, offset 3.4s; with eight, the curve and offsets are site.css's
   own rhHeroA…G, which a test checks. The dots ride the same curves. The first
   later clip keeps .hero__layer--a, which site.js uses to rewind the first clip
   at the top of the cycle; the rules here take precedence over its §8 timing.
   Each clip's crop is its own (.heroclip-yNN), so it moves with the clip.
   -------------------------------------------------------------------------- */

.heroclips .hero__layer { object-position: center 50%; }
.heroclips .heroclip-y0 { object-position: center 0%; }
.heroclips .heroclip-y12 { object-position: center 12%; }
.heroclips .heroclip-y25 { object-position: center 25%; }
.heroclips .heroclip-y32 { object-position: center 32%; }
.heroclips .heroclip-y35 { object-position: center 35%; }
.heroclips .heroclip-y40 { object-position: center 40%; }
.heroclips .heroclip-y55 { object-position: center 55%; }
.heroclips .heroclip-y60 { object-position: center 60%; }

.heroclips .heroclip {
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.heroclips .hero__dots span::after { animation-timing-function: linear; animation-iteration-count: infinite; }

.heroclips .heroclip--1 { animation-delay: -0.8s; }
.heroclips .heroclip--2 { animation-delay: 2.6s; }
.heroclips .heroclip--3 { animation-delay: 6.0s; }
.heroclips .heroclip--4 { animation-delay: 9.4s; }
.heroclips .heroclip--5 { animation-delay: 12.8s; }
.heroclips .heroclip--6 { animation-delay: 16.2s; }
.heroclips .heroclip--7 { animation-delay: 19.6s; }
.heroclips .heroclip--8 { animation-delay: 23.0s; }
.heroclips .heroclip--9 { animation-delay: 26.4s; }
.heroclips .heroclip--10 { animation-delay: 29.8s; }
.heroclips .heroclip--11 { animation-delay: 33.2s; }
.hero.heroclips .hero__dots span:nth-child(1)::after { animation-delay: -0.8s; }
.hero.heroclips .hero__dots span:nth-child(2)::after { animation-delay: -0.8s; }
.hero.heroclips .hero__dots span:nth-child(3)::after { animation-delay: 2.6s; }
.hero.heroclips .hero__dots span:nth-child(4)::after { animation-delay: 6.0s; }
.hero.heroclips .hero__dots span:nth-child(5)::after { animation-delay: 9.4s; }
.hero.heroclips .hero__dots span:nth-child(6)::after { animation-delay: 12.8s; }
.hero.heroclips .hero__dots span:nth-child(7)::after { animation-delay: 16.2s; }
.hero.heroclips .hero__dots span:nth-child(8)::after { animation-delay: 19.6s; }
.hero.heroclips .hero__dots span:nth-child(9)::after { animation-delay: 23.0s; }
.hero.heroclips .hero__dots span:nth-child(10)::after { animation-delay: 26.4s; }
.hero.heroclips .hero__dots span:nth-child(11)::after { animation-delay: 29.8s; }
.hero.heroclips .hero__dots span:nth-child(12)::after { animation-delay: 33.2s; }

.hero.heroclips--n2 .heroclip, .hero.heroclips--n2 .hero__dots span::after { animation-name: rhClips2; animation-duration: 8s; }
.hero.heroclips--n2 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst2; }
.hero.heroclips--n3 .heroclip, .hero.heroclips--n3 .hero__dots span::after { animation-name: rhClips3; animation-duration: 11.4s; }
.hero.heroclips--n3 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst3; }
.hero.heroclips--n4 .heroclip, .hero.heroclips--n4 .hero__dots span::after { animation-name: rhClips4; animation-duration: 14.8s; }
.hero.heroclips--n4 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst4; }
.hero.heroclips--n5 .heroclip, .hero.heroclips--n5 .hero__dots span::after { animation-name: rhClips5; animation-duration: 18.2s; }
.hero.heroclips--n5 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst5; }
.hero.heroclips--n6 .heroclip, .hero.heroclips--n6 .hero__dots span::after { animation-name: rhClips6; animation-duration: 21.6s; }
.hero.heroclips--n6 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst6; }
.hero.heroclips--n7 .heroclip, .hero.heroclips--n7 .hero__dots span::after { animation-name: rhClips7; animation-duration: 25s; }
.hero.heroclips--n7 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst7; }
.hero.heroclips--n8 .heroclip, .hero.heroclips--n8 .hero__dots span::after { animation-name: rhClips8; animation-duration: 28.4s; }
.hero.heroclips--n8 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst8; }
.hero.heroclips--n9 .heroclip, .hero.heroclips--n9 .hero__dots span::after { animation-name: rhClips9; animation-duration: 31.8s; }
.hero.heroclips--n9 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst9; }
.hero.heroclips--n10 .heroclip, .hero.heroclips--n10 .hero__dots span::after { animation-name: rhClips10; animation-duration: 35.2s; }
.hero.heroclips--n10 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst10; }
.hero.heroclips--n11 .heroclip, .hero.heroclips--n11 .hero__dots span::after { animation-name: rhClips11; animation-duration: 38.6s; }
.hero.heroclips--n11 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst11; }
.hero.heroclips--n12 .heroclip, .hero.heroclips--n12 .hero__dots span::after { animation-name: rhClips12; animation-duration: 42s; }
.hero.heroclips--n12 .hero__dots span:nth-child(1)::after { animation-name: rhClipsFirst12; }

/* Motion off: the first clip's still, and the first dot, as site.css §8 does. */
@media (prefers-reduced-motion: reduce) {
  .hero.heroclips .heroclip,
  .hero.heroclips .hero__dots span::after,
  .hero.heroclips .hero__dots span:nth-child(1)::after { animation: none; }
  .heroclips .heroclip { opacity: 0; }
}

/* 2 clips: 8s */
@keyframes rhClips2 {
  0.000% { opacity: 0; }
  47.500% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  57.500% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  100.000% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  110.000% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst2 {
  0.000% { opacity: 0; }
  10.000% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  47.500% { opacity: 1; }   /* 3.8s */
  57.500% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 3 clips: 11.4s */
@keyframes rhClips3 {
  0.000% { opacity: 0; }
  33.333% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  40.351% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  70.175% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  77.193% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst3 {
  0.000% { opacity: 0; }
  7.018% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  33.333% { opacity: 1; }   /* 3.8s */
  40.351% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 4 clips: 14.8s */
@keyframes rhClips4 {
  0.000% { opacity: 0; }
  25.676% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  31.081% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  54.054% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  59.459% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst4 {
  0.000% { opacity: 0; }
  5.405% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  25.676% { opacity: 1; }   /* 3.8s */
  31.081% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 5 clips: 18.2s */
@keyframes rhClips5 {
  0.000% { opacity: 0; }
  20.879% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  25.275% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  43.956% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  48.352% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst5 {
  0.000% { opacity: 0; }
  4.396% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  20.879% { opacity: 1; }   /* 3.8s */
  25.275% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 6 clips: 21.6s */
@keyframes rhClips6 {
  0.000% { opacity: 0; }
  17.593% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  21.296% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  37.037% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  40.741% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst6 {
  0.000% { opacity: 0; }
  3.704% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  17.593% { opacity: 1; }   /* 3.8s */
  21.296% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 7 clips: 25s */
@keyframes rhClips7 {
  0.000% { opacity: 0; }
  15.200% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  18.400% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  32.000% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  35.200% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst7 {
  0.000% { opacity: 0; }
  3.200% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  15.200% { opacity: 1; }   /* 3.8s */
  18.400% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 8 clips: 28.4s */
@keyframes rhClips8 {
  0.000% { opacity: 0; }
  13.380% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  16.197% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  28.169% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  30.986% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst8 {
  0.000% { opacity: 0; }
  2.817% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  13.380% { opacity: 1; }   /* 3.8s */
  16.197% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 9 clips: 31.8s */
@keyframes rhClips9 {
  0.000% { opacity: 0; }
  11.950% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  14.465% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  25.157% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  27.673% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst9 {
  0.000% { opacity: 0; }
  2.516% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  11.950% { opacity: 1; }   /* 3.8s */
  14.465% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 10 clips: 35.2s */
@keyframes rhClips10 {
  0.000% { opacity: 0; }
  10.795% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  13.068% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  22.727% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  25.000% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst10 {
  0.000% { opacity: 0; }
  2.273% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  10.795% { opacity: 1; }   /* 3.8s */
  13.068% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 11 clips: 38.6s */
@keyframes rhClips11 {
  0.000% { opacity: 0; }
  9.845% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  11.917% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  20.725% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  22.798% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst11 {
  0.000% { opacity: 0; }
  2.073% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  9.845% { opacity: 1; }   /* 3.8s */
  11.917% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}

/* 12 clips: 42s */
@keyframes rhClips12 {
  0.000% { opacity: 0; }
  9.048% { opacity: 0; }   /*  3.80s  begins over the clip below, still at 1 */
  10.952% { opacity: 1; }   /*  4.60s  fully opaque -- the one below may now fade */
  19.048% { opacity: 1; }   /*  8.00s  holds until the next is fully opaque */
  20.952% { opacity: 0; }   /*  8.80s  gone at 5.00s on screen */
  100.000% { opacity: 0; }
}
@keyframes rhClipsFirst12 {
  0.000% { opacity: 0; }
  1.905% { opacity: 1; }   /* 0.8s - last clip gone, first clear */
  9.048% { opacity: 1; }   /* 3.8s */
  10.952% { opacity: 0; }   /* 4.6s - the next covers it */
  100.000% { opacity: 0; }
}