/* =============================================================================
   TrueFit Microsites - hero carousel engine  (microsite-hero.css)
   -----------------------------------------------------------------------------
   ONE shared stylesheet, theme-agnostic. A multi-slide hero renders as:

     .ms-hero-cx > .ms-hero-cx-vp > .ms-hero-cx-track > header.hero.ms-hero-cx-slide (xN)
                 + .ms-hero-cx-arrow.ms-hero-cx-prev / .ms-hero-cx-next
                 + .ms-hero-cx-dots > .ms-hero-cx-dot (xN)

   Each slide is a COMPLETE <header class="hero">, so every theme pack's own hero
   CSS styles it unchanged - this file only stacks the slides, runs the transition,
   and styles the controls (in the hero's own light foreground).

   TRANSITIONS are CSS-only and data-driven. The shared microsite.js does nothing
   per-effect: it just toggles .is-active / .is-prev, sets [data-dir] for direction
   and adds .is-live on the first change. Every effect below is keyed off
   .ms-hero-cx[data-hero-transition="..."], so ADDING ANOTHER is one keyframe block +
   one allow-list entry + one <option> - no JS, no per-pack CSS, no SQL.

   The slides are GRID-STACKED (every slide shares cell 1/1), so the carousel locks
   to the tallest slide's height - no jump as you move between slides of different
   lengths. The initially-active slide does NOT animate on page load (no .is-live
   yet), so each pack's own hero intro - Sanctuary/kpmg's .hi d1-d4 stagger - plays
   exactly as it does today. Later slides don't re-stagger.

   All motion is gated by prefers-reduced-motion.
   ============================================================================= */

.ms-hero-cx { --hcx-dur: .7s; --hcx-ease: cubic-bezier(.22, .61, .36, 1); }

.ms-hero-cx { position: relative; }
.ms-hero-cx-vp { overflow: hidden; }
.ms-hero-cx-track { display: grid; }

.ms-hero-cx-slide {
    grid-area: 1 / 1;                 /* every slide shares the one cell -> height = tallest */
    opacity: 0;
    visibility: hidden;
}
.ms-hero-cx-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.ms-hero-cx-slide.is-prev { opacity: 1; visibility: visible; z-index: 1; }   /* the outgoing slide, kept until the incoming has landed */

/* =============================================================================
   TRANSITIONS - each keyed off .ms-hero-cx[data-hero-transition] (per-hero) and gated by
   .ms-hero-cx.is-live (so the first slide never animates on load). Directional
   effects read [data-dir] (next | prev). ADD ONE: drop a keyframe block here,
   add the value to the allow-list in EditModel.OnPostSettingsAsync, and add an
   <option> to the settings dropdown. That's the whole job.
   ============================================================================= */

/* fade (default, and the fallback when no transition is set) */
.ms-hero-cx[data-hero-transition="fade"].is-live .ms-hero-cx-slide.is-active,
.ms-hero-cx:not([data-hero-transition]).is-live .ms-hero-cx-slide.is-active,
.ms-hero-cx[data-hero-transition=""].is-live .ms-hero-cx-slide.is-active {
    animation: hcx-fade var(--hcx-dur) ease both;
}
@keyframes hcx-fade { from { opacity: 0 } to { opacity: 1 } }

/* slide (horizontal push - both slides travel together) */
.ms-hero-cx[data-hero-transition="slide"].is-live[data-dir="next"] .ms-hero-cx-slide.is-active { animation: hcx-in-r var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="slide"].is-live[data-dir="next"] .ms-hero-cx-slide.is-prev { animation: hcx-out-l var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="slide"].is-live[data-dir="prev"] .ms-hero-cx-slide.is-active { animation: hcx-in-l var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="slide"].is-live[data-dir="prev"] .ms-hero-cx-slide.is-prev { animation: hcx-out-r var(--hcx-dur) var(--hcx-ease) both; }
@keyframes hcx-in-r { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes hcx-in-l { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes hcx-out-l { from { transform: translateX(0) } to { transform: translateX(-100%) } }
@keyframes hcx-out-r { from { transform: translateX(0) } to { transform: translateX(100%) } }

/* zoom in - incoming grows in from slightly small */
.ms-hero-cx[data-hero-transition="zoomin"].is-live .ms-hero-cx-slide.is-active { animation: hcx-zoomin var(--hcx-dur) var(--hcx-ease) both; }
@keyframes hcx-zoomin { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: scale(1) } }

/* zoom out - incoming settles in from slightly oversized (the xokitchen feel) */
.ms-hero-cx[data-hero-transition="zoomout"].is-live .ms-hero-cx-slide.is-active { animation: hcx-zoomout var(--hcx-dur) var(--hcx-ease) both; }
@keyframes hcx-zoomout { from { opacity: 0; transform: scale(1.12) } to { opacity: 1; transform: scale(1) } }

/* blur fade - crossfade with a soft focus-pull */
.ms-hero-cx[data-hero-transition="blur"].is-live .ms-hero-cx-slide.is-active { animation: hcx-blur var(--hcx-dur) ease both; }
@keyframes hcx-blur { from { opacity: 0; filter: blur(16px); transform: scale(1.03) } to { opacity: 1; filter: blur(0); transform: scale(1) } }

/* reveal - new slide rises over the old (vertical) */
.ms-hero-cx[data-hero-transition="reveal"].is-live[data-dir="next"] .ms-hero-cx-slide.is-active { animation: hcx-up var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="reveal"].is-live[data-dir="prev"] .ms-hero-cx-slide.is-active { animation: hcx-down var(--hcx-dur) var(--hcx-ease) both; }
@keyframes hcx-up { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes hcx-down { from { transform: translateY(-100%) } to { transform: translateY(0) } }

/* wipe - clip-path mask reveal (geometric, architectural) */
.ms-hero-cx[data-hero-transition="wipe"].is-live[data-dir="next"] .ms-hero-cx-slide.is-active { animation: hcx-wipe-r var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="wipe"].is-live[data-dir="prev"] .ms-hero-cx-slide.is-active { animation: hcx-wipe-l var(--hcx-dur) var(--hcx-ease) both; }
@keyframes hcx-wipe-r { from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(0 0 0 0) } }
@keyframes hcx-wipe-l { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }

/* cover - incoming drives in while the old slide shrinks + darkens back (depth) */
.ms-hero-cx[data-hero-transition="cover"].is-live[data-dir="next"] .ms-hero-cx-slide.is-active { animation: hcx-in-r var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="cover"].is-live[data-dir="prev"] .ms-hero-cx-slide.is-active { animation: hcx-in-l var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="cover"].is-live .ms-hero-cx-slide.is-prev { animation: hcx-back var(--hcx-dur) var(--hcx-ease) both; }
@keyframes hcx-back { from { transform: scale(1); filter: brightness(1) } to { transform: scale(.92); filter: brightness(.6); opacity: 0 } }

/* parallax - incoming at full speed, outgoing drifts away slowly and dims */
.ms-hero-cx[data-hero-transition="parallax"].is-live[data-dir="next"] .ms-hero-cx-slide.is-active { animation: hcx-in-r var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="parallax"].is-live[data-dir="next"] .ms-hero-cx-slide.is-prev { animation: hcx-para-l var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="parallax"].is-live[data-dir="prev"] .ms-hero-cx-slide.is-active { animation: hcx-in-l var(--hcx-dur) var(--hcx-ease) both; }
.ms-hero-cx[data-hero-transition="parallax"].is-live[data-dir="prev"] .ms-hero-cx-slide.is-prev { animation: hcx-para-r var(--hcx-dur) var(--hcx-ease) both; }
@keyframes hcx-para-l { from { transform: translateX(0); filter: brightness(1) } to { transform: translateX(-30%); filter: brightness(.5) } }
@keyframes hcx-para-r { from { transform: translateX(0); filter: brightness(1) } to { transform: translateX(30%); filter: brightness(.5) } }

/* =============================================================================
   Ken Burns - ambient slow zoom on the active slide's hero IMAGE. Layers on top
   of any transition; per-hero via data-hero-ken. The image element differs per
   pack (hartwell .hero-bg, Sanctuary collage photo, kpmg plate), and a single-
   slide banner carries the flag on the header itself. Best on full-bleed photo
   heroes; gentle on framed ones. Disabled under reduced motion.
   ============================================================================= */
.ms-hero-cx[data-hero-ken] .ms-hero-cx-slide.is-active .hero-bg,
header.hero[data-hero-ken] .hero-bg,
.ms-hero-cx[data-hero-ken] .ms-hero-cx-slide.is-active .collage .photo img,
header.hero[data-hero-ken] .collage .photo img,
.ms-hero-cx[data-hero-ken] .ms-hero-cx-slide.is-active .plate > img,
header.hero[data-hero-ken] .plate > img {
    animation: hcx-ken 18s ease-out both;
    will-change: transform;
}
@keyframes hcx-ken { from { transform: scale(1.04) } to { transform: scale(1.16) translate(-1.5%, -2%) } }

/* Text stagger off (default is ON) - force each pack's .hi intro to appear at
   once instead of staggering. Mirrors the packs' own reduced-motion handling. */
.ms-hero-cx[data-hero-stagger="0"] .hi,
header.hero[data-hero-stagger="0"] .hi {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}


/* =============================================================================
   Controls - arrows + dots, in the hero's own light foreground (all packs have
   dark heroes). Shown only for 2+ slides (the partial emits them then).
   ============================================================================= */
.ms-hero-cx-arrow,
.ms-hero-cx-dots { color: var(--on-brand, #fff); }

.ms-hero-cx-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--on-brand, #fff);
    border-radius: 50%;
    background: transparent;
    color: var(--on-brand, #fff);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s ease, background-color .2s ease;
}
.ms-hero-cx-arrow:hover { opacity: 1; background: color-mix(in srgb, var(--on-brand, #fff) 14%, transparent); }
.ms-hero-cx-arrow:focus-visible { outline: 3px solid var(--on-brand, #fff); outline-offset: 2px; opacity: 1; }
.ms-hero-cx-prev { left: 18px; }
.ms-hero-cx-next { right: 18px; }

.ms-hero-cx-dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .30);          /* subtle dark glass: legible over a light cut (e.g. kpmg's diagonal) */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.ms-hero-cx-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--on-brand, #fff);
    opacity: .45;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transition: opacity .2s ease, width .25s ease;
}
.ms-hero-cx-dot:hover { opacity: .75; }
.ms-hero-cx-dot.is-active { opacity: 1; width: 22px; }
.ms-hero-cx-dot:focus-visible { outline: 2px solid var(--on-brand, #fff); outline-offset: 2px; opacity: 1; }

.ms-hero-cx-vp { touch-action: pan-y; }

/* reduced motion - effects become an instant swap (JS also disables autoplay) */
@media (prefers-reduced-motion: reduce) {
    .ms-hero-cx.is-live .ms-hero-cx-slide.is-active,
    .ms-hero-cx.is-live .ms-hero-cx-slide.is-prev { animation-duration: .001s !important; }
    .ms-hero-cx[data-hero-ken] .hero-bg,
    .ms-hero-cx[data-hero-ken] img,
    header.hero[data-hero-ken] .hero-bg,
    header.hero[data-hero-ken] img { animation: none !important; }
    .ms-hero-cx-arrow,
    .ms-hero-cx-dot { transition: none !important; }
}

@media (max-width: 640px) {
    .ms-hero-cx-arrow { width: 36px; height: 36px; font-size: 19px; }
    .ms-hero-cx-prev { left: 10px; }
    .ms-hero-cx-next { right: 10px; }
    .ms-hero-cx-dots { bottom: 12px; }
}