/* ======================================================================
   Freedom Senior Services — v1.5.5 motion system (approved prototype)
   Hero door-opening sequence, interior illustrations, numbered-step and
   card interactions. Default (no JS, reduced motion): finished states.
   html.js-motion is set before paint only when motion will run.
   ====================================================================== */

/* ---------- 1. Homepage hero ---------- */
.hero--home .ph--hero { position: relative; }
.hero--home .ph--hero .hero-house { position: absolute; inset: 6% 12% 4% 12%; width: 76%; height: 90%; overflow: visible; pointer-events: none; z-index: 3; opacity: 0; }
.hero--home .ph--hero .hero-house .house-body { fill: var(--white); }
.hero--home .ph--hero .hero-house .house-door { fill: var(--orange); transform-box: view-box; }
/* 1.5.3 settle animation is replaced by the sequence on Home */
.hero--home .ph--hero.ph--photo .ph__shape { animation: none; }
/* Starting state, applied before first paint only when the sequence will run: photo masked at the doorway, accents hidden, house hidden */
html.js-motion .hero--home .ph--hero:not(.is-done) .ph__shape { clip-path: circle(0% at 47% 53%); }
html.js-motion .hero--home .ph--hero:not(.is-done)::after,
html.js-motion .hero--home .ph--hero:not(.is-done) .mosaic-sq,
html.js-motion .hero--home .ph--hero:not(.is-done) .ph__arc { opacity: 0; animation: none; }
html.js-motion .hero--home .ph--hero:not(.is-done) + .house-draw { opacity: 0; }
html.js-motion .hero--home .ph--hero:not(.is-done) .hero-house { opacity: 1; }
html.js-motion .hero--home .ph--hero:not(.is-done) .hero-house .house-door { opacity: 0; }
/* Once the sequence has committed, the 1.5.3 accent fades must not replay (the dot's pop is the final beat) */
.hero--home .ph--hero.is-done .mosaic-sq, .hero--home .ph--hero.is-done .ph__arc { animation: none; }
/* Fallback: if motion.js never runs, everything is shown after 4 s */
html.motion-fallback .hero--home .ph--hero .ph__shape { clip-path: none !important; }
html.motion-fallback .hero--home .ph--hero::after, html.motion-fallback .hero--home .ph--hero .mosaic-sq, html.motion-fallback .hero--home .ph--hero .ph__arc, html.motion-fallback .hero--home .house-draw { opacity: 1 !important; }
html.motion-fallback .hero--home .ph--hero .hero-house { opacity: 0 !important; }
.hero--home .house-draw { transition: opacity 450ms ease; }
.hero--home .house-draw path { stroke-opacity: 0; }

/* ---------- 2. Interior illustrations (Paying for Care, Make a Referral, Veteran Care, Partners) ---------- */
.fss-illo { width: 100%; max-width: 68rem; margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) auto 0; }
.fss-illo svg { display: block; width: 100%; height: auto; }
.hero .hero__inner:has(> .fss-illo) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero .hero__inner:has(> .fss-illo) .hero__copy { padding-bottom: 0; max-width: 46rem; }
.hero .hero__inner:has(> .fss-illo) { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
/* keeps the 1.5.3 tablet rule from applying (it targeted .house-art, which is gone on these pages) */

/* ---------- 3. Interactions (approved prototype) ---------- */
/* Numbered steps: number turns orange with a short orange line, pale-teal row, 4 px shift. Reading aid, not a click affordance (no cursor, no lift). */
.path li { border-radius: var(--radius-soft); padding-top: .35rem; padding-bottom: .35rem; margin-left: -.5rem; padding-left: 4.5rem; padding-right: .75rem; transition: background-color 260ms var(--ease), transform 260ms var(--ease); }
.path li::before { left: .5rem; transition: background-color 260ms var(--ease), color 260ms var(--ease); }
.path li:not(:last-child)::after { left: calc(.5rem + 1.375rem - 1.5px); }
.path li:hover, .path li:focus-within { background: var(--tint-teal); transform: translateX(4px); }
.path li:hover::before, .path li:focus-within::before { background: var(--orange); color: var(--navy); }
.on-dark .path li:hover, .on-dark .path li:focus-within { background: rgba(255,255,255,.08); }
.panel .path li:hover, .panel .path li:focus-within { background: rgba(255,255,255,.7); }
/* Service and informational cards: lift only when the card contains a link (rules exist in motif.css; this adds the icon tiles and panels with a link) */
.doors li:has(a), .states li:has(a), .l2-state:has(a), .panel:has(a.btn), .panel:has(.textlink) { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease); }
.panel:has(a.btn):hover, .panel:has(.textlink):hover, .panel:has(a.btn):focus-within, .panel:has(.textlink):focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(2, 60, 90, .12); }
/* Photographic cards inside links: 3 % zoom in a fixed frame, orange frame line, mosaic settles */
a:has(> .ph) .ph__shape { overflow: hidden; }
a:has(> .ph) .ph__shape img { transition: transform 340ms var(--ease); }
a:has(> .ph):hover .ph__shape img, a:has(> .ph):focus-visible .ph__shape img { transform: scale(1.03); }
a:has(> .ph) .ph__shape::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; transition: border-color 260ms var(--ease); pointer-events: none; }
a:has(> .ph):hover .ph__shape::after, a:has(> .ph):focus-visible .ph__shape::after { border-color: var(--orange); }
/* Text links: orange underline grows from the left to the arrow; arrow nudges (replaces the plain underline from site.css) */
.textlink { position: relative; padding-bottom: 2px; }
.textlink::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--orange); transition: width 260ms var(--ease); }
.textlink:hover, .textlink:focus-visible { text-decoration: none; }
.textlink:hover::before, .textlink:focus-visible::before { width: calc(100% - 1.1em); }
.on-dark .textlink::before { background: var(--orange); }

/* ---------- 4. Reduced motion: finished states, no transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero--home .ph--hero .ph__shape { clip-path: none !important; }
  .hero--home .ph--hero .hero-house { opacity: 0 !important; }
  .hero--home .ph--hero::after, .hero--home .ph--hero .mosaic-sq, .hero--home .ph--hero .ph__arc, .hero--home .house-draw { opacity: 1 !important; }
  .path li, .path li::before, .textlink::before, a:has(> .ph) .ph__shape img, .panel { transition: none !important; }
}