/* Hover swap panel: a small corner card (a square mark + a frosted card) whose resting block folds shut while a
   second block opens in its place. Measured on Alture's header "Contact" corner (Webflow IX2 a-22 / a-23):
   open = both blocks' height (to 0 / to auto) + opacity over 380ms outCubic, together; close = the same backwards in
   280ms; the card's own padding and the square mark never move. Height is driven by part.js (auto heights), the rest
   is here. The live dot's ripple is a-21: 2.5rem disc scale 0 -> 1 and opacity 1 -> 0 over 1000ms outCubic after a
   750ms rest, looping (1.75s). */
.hsp {
  --hsp-open: 380ms;                         /* fold open */
  --hsp-close: 280ms;                        /* fold back */
  --hsp-ease: cubic-bezier(.33, 1, .68, 1);  /* outCubic, 1-(1-t)^3 */
  --hsp-ink: #fff;
  --hsp-ink-2: rgba(255, 255, 255, .5);      /* small labels */
  --hsp-rule: rgba(255, 255, 255, .15);      /* dotted rule between rows */
  --hsp-card-bg: rgba(255, 255, 255, .2);    /* frosted card on a photo/video */
  --hsp-blur: 20px;
  --hsp-radius: 1.125rem;
  --hsp-pad: 1rem 1.5rem 1rem 1rem;
  --hsp-mark: 4.4rem;                        /* the square mark */
  --hsp-gap: .75rem;                         /* mark to card */
  --hsp-row-gap: .875rem;
  --hsp-dot: #f3350c;                        /* live dot + ripple */
  --hsp-dot-size: .4rem;
  --hsp-ripple: 2.5rem;
  --hsp-ripple-dur: 1000ms;
  --hsp-ripple-rest: 750ms;
  --hsp-font: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hsp-gap);
  color: var(--hsp-ink); font: 500 1rem/1.3 var(--hsp-font);
}
.hsp *, .hsp *::before, .hsp *::after { box-sizing: border-box; }

/* the mark: the always-visible square; it is also the toggle for tap and keyboard */
.hsp__mark {
  flex: none; display: grid; place-items: center; width: var(--hsp-mark); aspect-ratio: 1; padding: 0; margin: 0;
  border: 0; border-radius: var(--hsp-radius); background: var(--hsp-card-bg); color: var(--hsp-ink); cursor: pointer;
  -webkit-backdrop-filter: blur(var(--hsp-blur)); backdrop-filter: blur(var(--hsp-blur));
  -webkit-tap-highlight-color: transparent;
}
.hsp__mark > svg, .hsp__mark > img { width: 40%; height: auto; display: block; }
.hsp__mark > img.is-cover { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hsp__mark:focus-visible { outline: 2px solid var(--hsp-ink); outline-offset: 3px; }

.hsp__card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: var(--hsp-pad); border-radius: var(--hsp-radius); background: var(--hsp-card-bg);
  -webkit-backdrop-filter: blur(var(--hsp-blur)); backdrop-filter: blur(var(--hsp-blur));
}
/* both blocks are always laid out (B with no height), so the card's WIDTH never jumps: it is the wider of the two */
.hsp__a, .hsp__b { width: 100%; overflow: clip; }
.hsp__a { display: flex; flex-direction: column; cursor: pointer; }
.hsp__b { height: 0; opacity: 0; visibility: hidden; }
.hsp.is-open .hsp__a { height: 0; opacity: 0; }
.hsp.is-open .hsp__b { height: auto; opacity: 1; visibility: visible; }
.hsp.is-moving .hsp__a, .hsp.is-moving .hsp__b { visibility: visible; }
.hsp.is-open:not(.is-moving) .hsp__a { visibility: hidden; }

.hsp__title { font-weight: 600; }
.hsp__small { color: var(--hsp-ink-2); font-size: .75rem; font-weight: 500; }
.hsp__rows { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hsp-row-gap); }
.hsp__row { display: flex; flex-direction: column; gap: .125rem; width: 100%; padding-top: .5rem; border-top: 1px dotted var(--hsp-rule); }
.hsp__row:first-child { padding-top: 0; border-top: 0; }
.hsp__row a, .hsp__row b { color: var(--hsp-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hsp__row a:hover, .hsp__row a:focus-visible { text-decoration: underline dotted rgba(255, 255, 255, .5); text-decoration-thickness: 1px; text-underline-offset: 2px; outline: none; }

/* live dot on the card's top edge, with a ripple that keeps going out */
.hsp__dot { position: absolute; top: -.15rem; right: 1rem; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hsp__dot::before { content: ""; position: relative; z-index: 1; width: var(--hsp-dot-size); height: var(--hsp-dot-size); border-radius: 50%; background: var(--hsp-dot); }
.hsp__dot::after { content: ""; position: absolute; width: var(--hsp-ripple); height: var(--hsp-ripple); border-radius: 50%; background: var(--hsp-dot);
  transform: scale(0); animation: hsp-ripple calc(var(--hsp-ripple-rest) + var(--hsp-ripple-dur)) infinite; }
@keyframes hsp-ripple {
  0% { transform: scale(0); opacity: 1; }
  42.857% { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(.33, 1, .68, 1); } /* 750 of 1750ms */
  100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hsp__dot::after { animation: none; opacity: 0; }
}