/* Morgan-GLII — motion. Ported verbatim from the "Motion" block of the static
   prototype. Paired with assets/js/main.js; visitors with "reduce motion" get none. */

@keyframes heroZoom{ from{scale:1.12;} to{scale:1;} }
@keyframes heroIn{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;} }

/* Hero text entrance (pure CSS, so it also runs without JS) */
.hero-home .wrap > div > *,
.page-hero .wrap > *,
.hero-stats > *{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both;}
.hero-home .wrap > div > :nth-child(1), .page-hero .wrap > :nth-child(1){animation-delay:.1s;}
.hero-home .wrap > div > :nth-child(2), .page-hero .wrap > :nth-child(2){animation-delay:.22s;}
.hero-home .wrap > div > :nth-child(3), .page-hero .wrap > :nth-child(3){animation-delay:.34s;}
.hero-home .wrap > div > :nth-child(4), .page-hero .wrap > :nth-child(4){animation-delay:.46s;}
.hero-stats > :nth-child(1){animation-delay:.5s;}
.hero-stats > :nth-child(2){animation-delay:.6s;}
.hero-stats > :nth-child(3){animation-delay:.7s;}

/* Scroll reveal — only when main.js has marked the page (js-motion); otherwise content just shows */
.js-motion .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
.js-motion .reveal.in{opacity:1;transform:none;}

/* Budget bars grow once their row has been seen */
.bar-fill{transform-origin:left center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .15s;}
.js-motion .bar-row:not(.seen) .bar-fill{transform:scaleX(0);}

/* Card hover lift */
.card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
a.card-link:hover{border-color:var(--orange);}
.icon-badge{transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.card:hover .icon-badge, .fam-row:hover .icon-badge{transform:rotate(-6deg) scale(1.08);}

/* Header: reading-progress bar + deeper shadow once scrolled */
header.site{transition:box-shadow .25s ease;}
header.site.scrolled{box-shadow:0 10px 30px -16px rgba(7,21,39,.4);}
.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange-bright) 100%);
  transform:scaleX(var(--progress,0));transform-origin:left center;pointer-events:none;
}