/* pill-swap: motion hooks only. Folio CD owns the visual look of the pill and listbox.
   This file does not set canvas colour tokens — the site's Night Shift sheet wins.
   Tune: --ps-ar, --ps-img-dur (300ms), --ps-pill-dur (150ms),
         --ps-hl-dur (140ms), --ps-mark-dur (150ms), --ps-stagger (30ms), --ps-stagger-max (150ms),
         --ps-pill-origin (top center), --ps-pill-from (-6px), --ps-pill-gap (8px), --ps-scale (1.02).

   Tokens read (with fallbacks so the file still paints if a sheet is late):
     --surface   image-box background          fallback #171E2E
     --sel       highlight accent              fallback #7CC4FF
     --opt-c     optional per-panel accent     falls back to --sel
     --pill-active-mix  highlight mix amount   fallback 16%
     --ease / --settle  timing functions       fallbacks in the rules below

   Motion-only custom properties (registered so length values can interpolate if used): */
@property --ps-hl-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ps-hl-h { syntax: '<length>'; inherits: true; initial-value: 36px; }

/* ---------- image cross-fade ---------- */
.ps-swap{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:var(--ps-ar,16/10);
  overflow:hidden;
  isolation:isolate;
  background:var(--surface,#171E2E);
}
.ps-swap>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  display:block;
  border:0;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transform:translateZ(0);
}
.ps-swap>img.is-front{opacity:1;z-index:1}
.ps-swap>img.is-in{z-index:2;opacity:0}
.ps-swap>img.is-in.is-show{opacity:1;transform:scale(1)}
.ps-swap.is-scale>img.is-in{transform:scale(var(--ps-scale,1.02))}
.ps-swap.is-scale>img.is-in.is-show{transform:scale(1)}
@media (prefers-reduced-motion:no-preference){
  .ps-swap>img.is-in{
    transition:
      opacity var(--ps-img-dur,300ms) var(--ease,cubic-bezier(.2,.7,.2,1)),
      transform var(--ps-img-dur,300ms) var(--settle,cubic-bezier(.22,1.12,.36,1));
  }
}
.ps-swap.is-snap>img{transition:none!important}

/* ---------- pill open / close ---------- */
.ps-pill{position:relative;display:inline-block}
.ps-pill-panel,.pill-pop{
  position:absolute;
  top:100%;
  left:0;
  z-index:8;
  margin-top:var(--ps-pill-gap,8px);
  transform-origin:var(--ps-pill-origin,top center);
  opacity:0;
  transform:scale(.96) translateY(var(--ps-pill-from,-6px));
  pointer-events:none;
}
.ps-pill[data-open] .ps-pill-panel,
.ps-pill[data-open] .pill-pop,
.ps-pill-panel[data-open],
.pill-pop[data-open]{
  opacity:1;
  transform:scale(1) translateY(0);
  pointer-events:auto;
}
@media (prefers-reduced-motion:no-preference){
  .ps-pill-panel,.pill-pop{
    transition:
      opacity var(--ps-pill-dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1)),
      transform var(--ps-pill-dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1));
  }
}
.ps-pill-panel.is-prep,.pill-pop.is-prep{transition:none!important}

/* ---------- chevron rotation (open / close) ---------- */
.ps-chevron,
.tp-caret,
.ps-pill-btn .chev,
.pill[aria-haspopup]::after{
  transform-origin:center;
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  .ps-chevron,
  .tp-caret,
  .ps-pill-btn .chev,
  .pill[aria-haspopup]::after{
    transition:transform var(--ps-pill-dur,150ms) var(--ease,cubic-bezier(.2,.7,.2,1));
  }
}
.ps-pill[data-open] .ps-chevron,
.ps-pill[data-open] .tp-caret,
.ps-pill[data-open] .ps-pill-btn .chev,
.ps-pill[data-open] .pill[aria-haspopup]::after,
.pill[aria-expanded="true"] .ps-chevron,
.pill[aria-expanded="true"] .tp-caret,
.pill[aria-expanded="true"]::after{
  transform:rotate(180deg);
}

/* ---------- sliding highlight (active-descendant / hover / data-active) ----------
   JS (or a --ps-hl-y / --ps-hl-h API) moves one absolutely-positioned pill.
   No layout shift: it is out of flow. Duration 120–160ms, transform only. */
.ps-pill-panel,.pill-pop{--ps-hl-y:0px;--ps-hl-h:36px}
.ps-hl{
  position:absolute;
  left:6px;right:6px;
  top:0;
  height:var(--ps-hl-h,36px);
  border-radius:8px;
  background:color-mix(in srgb,var(--opt-c,var(--sel,#7CC4FF)) var(--pill-active-mix,16%),transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--opt-c,var(--sel,#7CC4FF)) 55%,transparent);
  pointer-events:none;
  z-index:0;
  transform:translateY(var(--ps-hl-y,0px));
  opacity:1;
}
.ps-hl.is-off{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ps-hl{
    transition:
      transform var(--ps-hl-dur,140ms) var(--ease,cubic-bezier(.2,.7,.2,1)),
      opacity var(--ps-hl-dur,140ms) var(--ease,cubic-bezier(.2,.7,.2,1));
  }
}
.ps-hl.is-snap,.ps-pill-panel.is-hl-snap .ps-hl,.pill-pop.is-hl-snap .ps-hl{transition:none!important}
/* once the sliding pill is present, don't also paint a static option fill (avoids a double highlight) */
.ps-pill-panel.has-ps-hl [role="option"].is-active,
.ps-pill-panel.has-ps-hl [role="option"][data-active],
.pill-pop.has-ps-hl .pill-opt.is-active,
.pill-pop.has-ps-hl .pill-opt[data-active]{
  background:transparent;
}

/* Options sit above the highlight. */
.ps-pill-panel [role="option"],
.ps-pill-panel .pill-opt,
.pill-pop .pill-opt,
.pill-pop [role="option"]{position:relative;z-index:1}

/* ---------- selected checkmark / dot pop ---------- */
@media (prefers-reduced-motion:no-preference){
  .ps-pill-panel [role="option"][aria-selected="true"]::before,
  .pill-pop [role="option"][aria-selected="true"]::before,
  .pill-opt[aria-selected="true"]::before,
  .ps-mark{
    animation:ps-mark-pop var(--ps-mark-dur,150ms) var(--settle,cubic-bezier(.22,1.12,.36,1)) both;
  }
}
@keyframes ps-mark-pop{
  from{transform:scale(.5);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* ---------- staggered option entrance (on open only; ≤150ms extra) ---------- */
@media (prefers-reduced-motion:no-preference){
  .ps-pill[data-open] .ps-pill-panel [role="option"],
  .ps-pill[data-open] .ps-pill-panel .pill-opt,
  .ps-pill[data-open] .pill-pop [role="option"],
  .ps-pill[data-open] .pill-pop .pill-opt{
    animation:ps-opt-in 120ms var(--ease,cubic-bezier(.2,.7,.2,1)) both;
    animation-delay:min(calc(var(--ps-i,0) * var(--ps-stagger,30ms)),var(--ps-stagger-max,150ms));
  }
}
@keyframes ps-opt-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ps-swap>img,
  .ps-pill-panel,.pill-pop,
  .ps-chevron,.tp-caret,.ps-pill-btn .chev,.pill[aria-haspopup]::after,
  .ps-hl{transition:none!important}
  .ps-pill[data-open] .ps-pill-panel [role="option"],
  .ps-pill[data-open] .ps-pill-panel .pill-opt,
  .ps-pill[data-open] .pill-pop [role="option"],
  .ps-pill[data-open] .pill-pop .pill-opt,
  .ps-pill-panel [role="option"][aria-selected="true"]::before,
  .pill-pop [role="option"][aria-selected="true"]::before,
  .pill-opt[aria-selected="true"]::before,
  .ps-mark{animation:none!important;animation-delay:0s!important}
}