/* Selection triangle — the signature hover/focus highlight (BRAND_GUIDE §6).

   Markup:
     <div class="sel" data-select>            container (position context)
       <ul> … <a class="sel__item"><span class="sel__label" data-label="Home">Home</span></a> … </ul>
     </div>

   Without JS (and in the mobile menu) every label draws its own triangle with
   ::before (ice fill) and a crimson copy of its text in ::after, both clipped by
   the same polygon, so the colour split follows the triangle's edges exactly.

   With JS (public/js/selection.js) the container gets .is-gliding: the per-label
   pseudo-elements switch off and one shared highlight (.sel__hl) plus a crimson,
   aria-hidden clone of the list (.sel__red) are clipped by the same polygon that
   glides between items. */

.sel {
  position: relative;
  isolation: isolate;
}

/* --- Per-label fallback ------------------------------------------------ */

.sel__label {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.sel__label::before,
.sel__label::after {
  position: absolute;
  inset: -50% -15%;
  pointer-events: none;
  clip-path: var(--sel-shape-hidden);
  transition: clip-path var(--sel-snap);
}

.sel__label::before {
  content: '';
  z-index: -1;
  background: var(--ice);
}

.sel__label::after {
  content: attr(data-label);
  content: attr(data-label) / ""; /* decorative copy: keep it out of the link's accessible name */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--crimson);
  white-space: nowrap;
}

/* On the current page the triangle grows out of the underline, not the middle. */
.sel__item.is-active .sel__label::before,
.sel__item.is-active .sel__label::after {
  clip-path: var(--sel-shape-hidden-active);
}

/* Current nav page: a crimson underline, separate from the triangle. */
.sel--nav .sel__item.is-active .sel__label {
  text-decoration: underline var(--rule) var(--crimson);
  text-underline-offset: 0.35em;
}

.sel__item:hover .sel__label::before,
.sel__item:hover .sel__label::after,
.sel__item:focus-visible .sel__label::before,
.sel__item:focus-visible .sel__label::after {
  clip-path: var(--sel-shape-hover);
}

/* --- Shared gliding highlight (JS) ------------------------------------- */

.sel.is-gliding .sel__label::before,
.sel.is-gliding .sel__label::after {
  content: none;
}

.sel__hl,
.sel__red {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--sel-clip, polygon(0 0, 0 0, 0 0, 0 0));
  transition: clip-path var(--sel-glide), opacity var(--sel-glide);
}

.sel__hl {
  inset: calc(-1 * var(--sel-bleed));
  z-index: 0;
  /* The shape is the ::before; a filter on this box shadows its clipped outline
     (a filter on the clipped element itself would be clipped away). */
  clip-path: none;
  filter: drop-shadow(0 4px 10px rgba(255, 31, 75, 0.6));
}

.sel__hl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ice);
  clip-path: var(--sel-clip-hl, polygon(0 0, 0 0, 0 0, 0 0));
  transition: clip-path var(--sel-glide);
}

/* The real list sits between the highlight and the crimson copy. */
.sel.is-gliding > :not(.sel__hl):not(.sel__red) {
  position: relative;
  z-index: 1;
}

.sel__red {
  inset: auto;
  z-index: 2;
  margin: 0;
}

/* The copy keeps the exact layout of the real list but shows only crimson text. */
.sel__red,
.sel__red * {
  color: var(--crimson) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.sel__red img,
.sel__red svg,
.sel__red [data-sel-skip] {
  visibility: hidden;
}

.sel__red *::before,
.sel__red *::after {
  visibility: hidden;
}

.sel:not(.is-gliding) > .sel__hl,
.sel:not(.is-gliding) > .sel__red {
  display: none;
}

.sel.is-snapping > .sel__hl,
.sel.is-snapping > .sel__hl::before,
.sel.is-snapping > .sel__red {
  transition: none;
}

.sel.is-idle .sel__hl,
.sel.is-idle .sel__red {
  opacity: 0;
}

/* Nav: links sit above the highlight but keep the focus ring visible. */
.sel.is-gliding .sel__item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .sel__hl,
  .sel__hl::before,
  .sel__red,
  .sel__label::before,
  .sel__label::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .sel__hl,
  .sel__red,
  .sel__label::before,
  .sel__label::after {
    display: none;
  }
}

/* Gallery titles wrap, so a pseudo-element copy cannot line up with them:
   without JS the gallery relies on its border/glow hover instead. */
.sel--gallery .sel__label::before,
.sel--gallery .sel__label::after {
  content: none;
}