/* Hero text reveal — shared by the Classic and Studio homepages (see
   hero-reveal.js). The eyebrow, headline and paragraph under the header come
   into focus, the headline line by line. */

/* Hidden until the script has split the headline, so nothing flashes first */
html.hr-js .hero-eyebrow,html.hr-js .hero-title,html.hr-js .hero-sub,
html.hr-js .hero .eyebrow,html.hr-js .hero h1,html.hr-js .hero .sub{opacity:0}

/* Blurred, faded and slightly low until revealed */
.hr-piece{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.32em)}
.hr-block{opacity:0;filter:blur(10px);transform:translateY(14px)}
.hr-piece.hr-in,.hr-block.hr-in{animation:hrFocus 1.15s cubic-bezier(.2,.75,.15,1) var(--hr-d,0s) forwards}
@keyframes hrFocus{to{opacity:1;filter:blur(0);transform:none}}

/* Reduced motion: the hero (.hr-full) keeps its full motion; other headings get
   a gentle fade out of a light blur, with no movement. The !important + extra
   specificity beats Classic's own reduced-motion rule, which shortens every
   animation on the page to ~0s. */
@media (prefers-reduced-motion: reduce){
  .hr-piece:not(.hr-full),.hr-block:not(.hr-full){transform:none;filter:blur(6px)}
  html .hr-piece.hr-in:not(.hr-full),html .hr-block.hr-in:not(.hr-full){animation-name:hrFade!important;animation-duration:.9s!important;animation-iteration-count:1!important}
  html .hr-full.hr-in{animation-duration:1.15s!important;animation-iteration-count:1!important}
}
@keyframes hrFade{to{opacity:1;filter:blur(0)}}