/* Edge-entry ticker rows. Measured from delightsnowparks.com (.pb-row-ticker-list, teardown 10-05), rewritten.
   A ruled list of big names. On entering view the 1px rules draw across (odd rows from the left, even rows from the
   right) and the names rise out of their rows tipped -21deg. Hover (mouse): the row's name slides out through the
   edge FARTHEST from where the pointer came in, and a strip (thumb, stat line, blurb) slides in from the entry edge
   with its marquee running; leaving slides it out through the exit edge. Touch / no hover: tap = accordion.
   part.js decides the edges and sets the classes; all the motion is here. */
.etr {
  --etr-margin: 40px;                                /* side margin; rules inset by it (20px under 768) */
  --etr-size: 96px;                                  /* name size (64px under 1024, 26px under 768) */
  --etr-pad: 12px;                                   /* name padding top + bottom */
  --etr-col: 4;                                      /* name starts at column 4 of 8 (>= 1200px wide) */
  --etr-tilt: -21deg;                                /* name tilt while hidden */
  --etr-rule: 1px;
  --etr-rule-dur: 2000ms;
  --etr-rule-ease: cubic-bezier(.19, 1, .22, 1);     /* easeOutExpo */
  --etr-rule-delay: 100ms;                           /* + index * stagger */
  --etr-rise-dur: 1000ms;
  --etr-rise-ease: cubic-bezier(.215, .61, .355, 1); /* easeOutCubic */
  --etr-rise-delay: 400ms;                           /* + index * stagger */
  --etr-stagger: 100ms;
  --etr-swap-dur: 400ms;                             /* hover slide (easeInOutQuad, written into the keyframes) */
  --etr-tick-dur: 15s;                               /* one marquee copy's trip */
  --etr-thumb: 108px;                                /* strip thumb (60px under 1024) */
  --etr-thumb-r: 20px;                               /* thumb radius (4px under 1024) */
  --etr-gap: 40px;                                   /* space between strip items (30px under 1024) */
  --etr-stat-size: 48px;                             /* strip stat line (36px under 1024, 20px under 768) */
  --etr-blurb-size: 24px;                            /* strip blurb (16px under 768) */
  --etr-blurb-w: 16.667vw;                           /* blurb width (240px under 1200, 170px under 768) */
  --etr-arrow-dur: 450ms;                            /* accordion arrow turn */
  --etr-acc-dur: 0ms;                                /* accordion open time; the source opens instantly */
  container-type: inline-size;
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;                              /* until the reveal has played (part.js adds .is-ready) */
}
.etr.is-ready { pointer-events: auto; }
@media (max-width: 1199.98px) { .etr { --etr-blurb-w: 240px; } }
@media (max-width: 1023.98px) { .etr { --etr-size: 64px; --etr-thumb: 60px; --etr-thumb-r: 4px; --etr-gap: 30px; --etr-stat-size: 36px; } }
@media (max-width: 767.98px)  { .etr { --etr-margin: 20px; --etr-size: 26px; --etr-stat-size: 20px; --etr-blurb-size: 16px; --etr-blurb-w: 170px; } }

.etr__row { position: relative; overflow: hidden; }
/* the rules: one along every row's top, plus one under the last row; inset by the side margin */
.etr__row::before, .etr__row:last-child::after {
  content: ""; position: absolute; left: var(--etr-margin); width: calc(100% - 2 * var(--etr-margin));
  height: 0; border-top: var(--etr-rule) solid; z-index: 2; pointer-events: none;
  transform: scaleX(0); transform-origin: left;
}
.etr__row::before { top: 0; }
.etr__row:last-child::after { bottom: 0; }
.etr__row:nth-child(2n)::before, .etr__row:nth-child(2n):last-child::after { transform-origin: right; }
.etr.is-inview .etr__row::before, .etr.is-inview .etr__row:last-child::after {
  transform: scaleX(1);
  transition: transform var(--etr-rule-dur) var(--etr-rule-ease);
  transition-delay: calc(var(--i, 0) * var(--etr-stagger) + var(--etr-rule-delay));
}
.etr.is-inview .etr__row:last-child::after { transition-delay: calc(var(--i, 0) * var(--etr-stagger) + var(--etr-rule-delay) + var(--etr-stagger)); }

.etr__wrap { position: relative; }
.etr__name {
  position: relative; display: block; width: 100%; margin: 0; box-sizing: border-box;
  padding: var(--etr-pad) var(--etr-margin); border: 0; background: none; color: inherit; text-align: left;
  font: inherit; font-size: var(--etr-size); line-height: 1; letter-spacing: -.01em; cursor: pointer;
  transform: translate3d(0, 110%, 0) rotate(var(--etr-tilt)); transform-origin: right bottom;
}
.etr.is-inview .etr__name {
  transform: none;
  transition: transform var(--etr-rise-dur) var(--etr-rise-ease);
  transition-delay: calc(var(--i, 0) * var(--etr-stagger) + var(--etr-rise-delay));
}
.etr__name:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
@container (min-width: 1200px) {
  .etr__name { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 20px; }
  .etr__name > span { grid-column: var(--etr-col) / span 5; }
}
.etr__arrow { display: none; position: absolute; right: var(--etr-margin); top: calc(50% - 3px); line-height: 0; }
.etr__arrow svg { height: 6px; width: auto; transition: transform var(--etr-arrow-dur) cubic-bezier(.645, .045, .355, 1); }
@media (min-width: 768px) { .etr__arrow svg { height: 12px; } .etr__arrow { top: calc(50% - 6px); } }

/* the strip: a marquee of copies, each sliding one own-width left per --etr-tick-dur, paused unless the row is open */
.etr__strip { position: absolute; left: 0; top: 100%; width: 100%; height: 100%; }
.etr__ticker { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; overflow: hidden; white-space: nowrap; }
.etr__copy {
  display: flex; flex: 0 0 auto; align-items: center; padding-right: var(--etr-gap);
  animation: etr-tick var(--etr-tick-dur) linear infinite paused;
}
.etr__row.is-hover .etr__copy, .etr__row[aria-expanded="true"] .etr__copy, .etr__row.is-open .etr__copy { animation-play-state: running; }
@keyframes etr-tick { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.etr__copy > * + * { margin-left: var(--etr-gap); }
.etr__stat { margin: 0; font-size: var(--etr-stat-size); line-height: 1; text-transform: uppercase; }
.etr__thumb { flex: 0 0 auto; width: var(--etr-thumb); aspect-ratio: 1; margin-top: 0; margin-bottom: 0; border-radius: var(--etr-thumb-r); overflow: hidden; background: currentColor; background-size: cover; background-position: center; }
.etr__thumb img, .etr__thumb svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.etr__blurb { margin: 0; width: var(--etr-blurb-w); white-space: normal; font-size: var(--etr-blurb-size); line-height: 1; }

/* hover devices (part.js sets .etr--hover when (hover: hover) matches): edge-entry swap, 400ms easeInOutQuad.
   in-top: the strip waits ABOVE and the whole wrap slides down 100% (name out the bottom, strip in from the top);
   out-top: back up (strip leaves through the top, name drops back in). Bottom = the mirror image. */
.etr--hover .etr__row.in-top .etr__strip, .etr--hover .etr__row.out-top .etr__strip { top: -100%; }
.etr--hover .etr__row.in-top .etr__wrap     { animation: etr-in-top var(--etr-swap-dur) cubic-bezier(.455, .03, .515, .955) forwards; }
.etr--hover .etr__row.out-top .etr__wrap    { animation: etr-out-top var(--etr-swap-dur) cubic-bezier(.455, .03, .515, .955) forwards; }
.etr--hover .etr__row.in-bottom .etr__wrap  { animation: etr-in-bottom var(--etr-swap-dur) cubic-bezier(.455, .03, .515, .955) forwards; }
.etr--hover .etr__row.out-bottom .etr__wrap { animation: etr-out-bottom var(--etr-swap-dur) cubic-bezier(.455, .03, .515, .955) forwards; }
@keyframes etr-in-top     { from { transform: translateY(0); }     to { transform: translateY(100%); } }
@keyframes etr-out-top    { from { transform: translateY(100%); }  to { transform: translateY(0); } }
@keyframes etr-in-bottom  { from { transform: translateY(0); }     to { transform: translateY(-100%); } }
@keyframes etr-out-bottom { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* touch / no hover: the strip sits under the name as an accordion; one open at a time (part.js) */
.etr--touch .etr__arrow { display: block; }
.etr--touch .etr__strip {
  position: static; height: auto; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--etr-acc-dur) cubic-bezier(.645, .045, .355, 1);
}
.etr--touch .etr__ticker { min-height: 0; height: auto; }
.etr--touch .etr__copy { padding-top: 0; }
.etr--touch .etr__row.is-open .etr__strip { grid-template-rows: 1fr; }
.etr--touch .etr__row.is-open .etr__ticker { padding: 8px 0 30px; }
.etr--touch .etr__row.is-open .etr__arrow svg { transform: rotate(180deg); }
@media (max-width: 767.98px) { .etr--touch .etr__copy { padding-left: 16px; } .etr--touch .etr__copy > * + * { margin-left: 16px; } }

@media (prefers-reduced-motion: reduce) {
  .etr .etr__row::before, .etr .etr__row:last-child::after, .etr .etr__name { transition: none !important; }
  .etr .etr__row::before, .etr .etr__row:last-child::after { transform: scaleX(1); }
  .etr .etr__name { transform: none; }
  .etr .etr__wrap { animation-duration: 1ms !important; }   /* the swap still happens, without the slide */
  .etr .etr__copy { animation-play-state: paused !important; }
  .etr .etr__arrow svg, .etr--touch .etr__strip { transition: none; }
}