/* ============================================================================
   Homepage-only layer. Loads after style.css.
   Everything shared now lives in style.css; this file carries just the hero
   entrance animation and the few treatments unique to the front page.
   ========================================================================== */

/* hero word-by-word reveal — armed only when JS runs, so a failed script can
   never leave the headline invisible */
.hero h1 .word-mask{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.1em;margin-bottom:-.1em;}
.hero h1 .word-inner{display:inline-block;}
html.js .hero h1 .word-inner{transform:translateY(118%);opacity:0;
  animation:wordUp .95s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes wordUp{to{transform:translateY(0);opacity:1;}}

html.js .hero .lede,
html.js .hero .hero-ctas,
html.js .hero .stat-row,
html.js .hero .scroll-cue,
html.js .hero .docket-row,
html.js .hero .eyebrow{opacity:0;animation:fadeUp .8s cubic-bezier(.16,1,.3,1) forwards;}
html.js .hero .eyebrow{animation-delay:.05s;}
html.js .hero .docket-row{animation-delay:0s;}
html.js .hero .lede{animation-delay:.55s;}
html.js .hero .hero-ctas{animation-delay:.68s;}
html.js .hero .stat-row{animation-delay:.8s;}
html.js .hero .scroll-cue{animation-delay:.92s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion: reduce){
  html.js .hero h1 .word-inner,
  html.js .hero .lede,html.js .hero .hero-ctas,html.js .hero .stat-row,
  html.js .hero .scroll-cue,html.js .hero .docket-row,html.js .hero .eyebrow{
    animation:none;opacity:1;transform:none;}
  .marquee-track{animation:none;}
}

/* the front page alternates bands, so give the tinted ones a hairline edge */
#services,#projects,#contact{border-top:1px solid var(--line-on-paper);}
#services .ghost-num,#projects .ghost-num,#contact .ghost-num{color:var(--paper-3);}

/* portrait sits above the credential card on the front page */
.about-grid .portrait{margin-bottom:32px;}