/* Silverleaf Home Care, home page hero options A, B and C (prompt 02).

   One hero section, one H1. The head script on the home page sets
   html[data-hero] from ?hero=a|b|c before first paint (default c), and the
   .hx-only-* blocks below show the matching variant.

   Contract, same as the Eldercare motion system:
   - Without JS, under prefers-reduced-motion, in Low Power Mode and with
     Save-Data, the hero is a composed still: end frame, eyebrow, H1, subline
     and both buttons readable at once. Nothing is pinned.
   - With motion, hero-switch.js adds .is-live: the section grows to two or
     three screens and the stage sticks while the variant's timeline scrubs.
     Layout inside the stage never changes between still and live (panels are
     stacked in one grid cell and only fade), so there is no layout shift.
   - Only transform and opacity animate. */

/* ---------------------------------------------------------------- switch */
.hx-only-a, .hx-only-b { display: none; }
html[data-hero="a"] .hx-only-a,
html[data-hero="b"] .hx-only-b { display: block; }
html[data-hero="a"] .hx-only-c,
html[data-hero="b"] .hx-only-c { display: none; }
html[data-hero="a"] .hx-slot > .hx-only-a,
html[data-hero="b"] .hx-slot > .hx-only-b { display: grid; }

/* --------------------------------------------------------------- section */
:root { --hx-top: 3.85rem; } /* condensed header height, where the stage sticks */
.hx {
  position: relative;
  background: var(--ink);
  --hx-screens: 3;
}
/* C loops in place: one screen, no pin. */
html[data-hero="c"] .hx, html:not([data-hero]) .hx { --hx-screens: 1; }
.hx.is-live { height: calc(var(--hx-screens) * 100vh); height: calc(var(--hx-screens) * 100svh); }

.hx-stage {
  position: sticky;
  top: var(--hx-top);
  height: calc(100vh - var(--hx-top));
  height: calc(100svh - var(--hx-top));
  min-height: 34rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

/* ----------------------------------------------------------------- media */
.hx-media { position: absolute; inset: 0; z-index: 0; }
.hx-media > div { position: absolute; inset: 0; }
.hx-move { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 55%; }
.hx-media picture, .hx-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hx-media img, .hx-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The start frame sits over the end frame; the timeline fades it out. The
   still state shows the end frame. */
.hx-start { z-index: 1; }
.hx-end { z-index: 0; }
.hx.is-still .hx-start { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hx-start { opacity: 0; } }
.hx-video { z-index: 2; opacity: 0; }

/* Phones see a tall crop of the 16:9 frames; keep the subject in view. */
@media (max-width: 47.9rem) {
  .hx-media-a img { object-position: 64% 50%; }
  .hx-media-b img { object-position: 50% 50%; }
  .hx-media-c img, .hx-media-c video { object-position: 30% 50%; }
}
.hx-media-a .hx-move { transform-origin: 62% 60%; }
.hx-media-b .hx-move { transform-origin: 50% 48%; }

/* Contrast scrim: the frames are bright cream, the copy is white. */
.hx-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(0deg, rgba(8, 24, 48, 0.9) 0%, rgba(8, 24, 48, 0.6) 45%, rgba(8, 24, 48, 0.15) 85%),
    linear-gradient(90deg, rgba(8, 24, 48, 0.8) 0%, rgba(8, 24, 48, 0.55) 38%, rgba(8, 24, 48, 0) 68%);
}
/* Extra layers the timelines fade: A warms, B deepens behind the day. */
.hx-warm, .hx-deep { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
.hx-warm { background: radial-gradient(120% 90% at 70% 30%, rgba(216, 184, 144, 0.55), rgba(216, 184, 144, 0) 70%); mix-blend-mode: soft-light; }
.hx-deep { background: rgba(8, 24, 48, 0.45); }

/* C: three depth layers. The room (video or frames), window light, and the
   Eldercare leaf ornament in front. */
.hx-light {
  position: absolute;
  inset: -10%;
  z-index: 3;
  background: radial-gradient(45% 55% at 62% 30%, rgba(255, 236, 205, 0.35), rgba(255, 236, 205, 0) 70%);
  pointer-events: none;
  will-change: transform;
}
.hx-orn {
  position: absolute;
  z-index: 4;
  right: -3rem;
  bottom: -5rem;
  width: clamp(10rem, 22vw, 20rem);
  aspect-ratio: 547 / 899;
  background: url("../img/orn-hero-home-care.webp") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------------------------------ copy */
.hx-copy {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  /* At the top of the page the stage starts below the utility bar and the
     full header, so the buttons need that much air to sit above the fold. */
  padding-bottom: calc(var(--util-h) + var(--header-h) - var(--hx-top) + var(--sp-6));
  color: var(--paper);
}
.hx-copy > * { max-width: 40rem; }
.hx-copy .eyebrow { color: var(--champagne); }
.hx-h1 {
  color: var(--white);
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  line-height: 1.05;
  max-width: 15ch;
  margin: var(--sp-3) 0 var(--sp-5);
}
.hx-lede { font-size: var(--fs-1); line-height: 1.5; max-width: 36ch; color: rgba(244, 240, 235, 0.94); margin: 0; }
.hx-copy .hero-ctas { margin-top: var(--sp-5); }

/* The slot holds the intro (subline and buttons) in the flow, so the still
   state's height is set by the intro alone. The story panels sit over it,
   anchored to its bottom edge, and grow upward; when one is taller than the
   intro (A's levels on small phones), the timeline fades the eyebrow and H1
   out for that stretch and brings them back with the buttons at the end. */
.hx-slot { position: relative; }
.hx-panels { position: absolute; left: 0; right: 0; bottom: 0; }
/* No display here: the switch rules at the top show only the picked
   variant's panels (display: grid); a display set here would override them
   and the hidden variants would still take up room. */
.hx-panels { align-content: start; }
.hx-panels > .hx-panel { grid-area: 2 / 1; }
.hx-panels, .hx-panel { visibility: hidden; opacity: 0; }

.hx-panel .hx-panel-eyebrow {
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--track-caps, 0.12em);
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 var(--sp-2);
}
.hx-panel .hx-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 var(--sp-3);
}
.hx-panel p { color: rgba(244, 240, 235, 0.94); margin: 0 0 var(--sp-3); max-width: 38ch; }
.hx-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hx-panel li { padding-left: 1.5rem; position: relative; color: rgba(244, 240, 235, 0.94); }
.hx-panel li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid var(--champagne);
  border-radius: 50%;
}

/* A: the quiet progress rail, four marks. */
.hx-rail { list-style: none; display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; grid-area: 1 / 1; }
.hx-rail li { width: 2.75rem; height: 3px; background: rgba(216, 184, 144, 0.3); border-radius: 2px; overflow: hidden; }
.hx-rail span { display: block; height: 100%; background: var(--champagne); transform: scaleX(0); transform-origin: 0 50%; }

/* B: a line icon per moment of the day, in the hero-points style. */
.hx-ico { width: 2.5rem; height: 2.5rem; color: var(--champagne); margin-bottom: var(--sp-3); display: block; }

/* C: Parker's four level names under the buttons. */
.hx-levels { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.hx-levels li { color: rgba(244, 240, 235, 0.9); font-size: var(--fs-0); display: inline-flex; align-items: center; gap: var(--sp-4); }
.hx-levels li + li::before { content: ""; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: var(--champagne); }


@media (max-width: 47.9rem) {
  .hx-scrim { background: linear-gradient(0deg, rgba(8, 24, 48, 0.9) 0%, rgba(8, 24, 48, 0.66) 50%, rgba(8, 24, 48, 0.2) 100%); }
  /* Phones hide the utility bar, so only the header's own height needs air,
     and the location eyebrow gives way so the copy fits one screen. */
  .hx-copy { padding-bottom: calc(var(--header-h) - var(--hx-top) + var(--sp-5)); }
  .hx-copy > .eyebrow { display: none; }
  .hx-h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); margin-bottom: var(--sp-4); }
  .hx-lede { font-size: var(--fs-0); }
  .hx-copy .hero-ctas { gap: var(--sp-3); }
  .hx-copy .hero-ctas .btn { width: 100%; justify-content: center; }
  .hx-panel .hx-panel-title { font-size: var(--fs-2); }
  .hx-levels { display: none; }
}

/* ---------------------------------------------------- review switch pills */
/* Same switch as the Silverleaf Eldercare review: a pill bar pinned to the
   bottom right (left on Eldercare, but here the hero buttons sit bottom
   left), shown only on review hosts (preview and localhost), never on
   the live domain. The current variant is filled in ink. */
.hero-ab { display: none; }
html[data-review] .hero-ab {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 60;
  padding: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-small);
}
.hero-ab-label {
  padding-inline: var(--sp-3) var(--sp-1);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-weight: 700;
  color: var(--text-soft);
}
.hero-ab a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--sp-4);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}
.hero-ab a:hover { background: var(--bg-alt); }
.hero-ab a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hero-ab .hero-ab-all { color: var(--text-soft); font-weight: 500; }
html[data-hero="a"] .hero-ab a[data-hero-pick="a"],
html[data-hero="b"] .hero-ab a[data-hero-pick="b"],
html[data-hero="c"] .hero-ab a[data-hero-pick="c"] {
  background: var(--ink);
  color: var(--white);
}
@media (max-width: 47.9rem) {
  html[data-review] .hero-ab { left: 50%; right: auto; transform: translateX(-50%); gap: 0; padding: var(--sp-1); }
  /* Centred on phones it would cover the second hero button, so on review
     hosts only the hero copy sits a pill's height higher. */
  html[data-review] .hx-copy { padding-bottom: calc(var(--header-h) - var(--hx-top) + var(--sp-5) + 3.75rem); }
  .hero-ab-label { display: none; }
  .hero-ab a { padding-inline: 0.875rem; font-size: 0.9375rem; }
  .hero-ab .ab-long { display: none; }
}

/* The smallest phones (320 to 359 px wide): a touch less type and air so the
   headline, subline and both buttons still fit one screen. */
@media (max-width: 22.4375rem) {
  .hx-h1 { font-size: 1.95rem; margin: 0 0 var(--sp-3); }
  .hx-lede { line-height: 1.45; }
  .hx-copy .hero-ctas { margin-top: var(--sp-4); }
}