/* Scroll-reveal animations. Elements are only hidden once js/motion.js has
   marked the page with .motion (JS on, IntersectionObserver available and the
   visitor has not asked for reduced motion), so content never gets stuck hidden. */

html.motion main{overflow-x:clip;}

html.motion [data-reveal]{
  opacity:0;
  transition:opacity .8s ease, transform .9s cubic-bezier(.16,.8,.24,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity, transform;
}
html.motion [data-reveal="up"]{transform:translateY(44px);}
html.motion [data-reveal="down"]{transform:translateY(-30px);}
html.motion [data-reveal="left"]{transform:translateX(-72px);}
html.motion [data-reveal="right"]{transform:translateX(72px);}
html.motion [data-reveal="zoom"]{transform:scale(.9);}
html.motion [data-reveal="fade"]{transform:none;}

html.motion [data-reveal].is-in{opacity:1;transform:none;}

/* On narrow screens, slide sideways less so nothing feels jumpy. */
@media (max-width:720px){
  html.motion [data-reveal="left"]{transform:translateX(-36px);}
  html.motion [data-reveal="right"]{transform:translateX(36px);}
  html.motion [data-reveal="up"]{transform:translateY(32px);}
}

/* Gentle hover lift on cards. Uses the separate `translate` property so it
   doesn't fight the reveal's `transform`. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card,.pillar,.perk,.athlete,.org{transition:translate .25s ease, box-shadow .25s ease;}
  html.motion .card[data-reveal],html.motion .pillar[data-reveal],html.motion .perk[data-reveal],html.motion .athlete[data-reveal],html.motion .org[data-reveal]{
    transition:opacity .8s ease var(--reveal-delay,0ms), transform .9s cubic-bezier(.16,.8,.24,1) var(--reveal-delay,0ms), translate .25s ease 0ms, box-shadow .25s ease 0ms;
  }
  .card:hover,.pillar:hover,.perk:hover,.athlete:hover,.org:hover{translate:0 -4px;box-shadow:0 2px 4px rgba(15,17,19,.06),0 18px 36px rgba(15,17,19,.12);}
}

/* Page-load entrance for the top of each page. Pure CSS, so it is in effect
   from the very first paint (no flash of content disappearing and returning). */
@keyframes jp-rise{from{opacity:0;transform:translateY(34px);}to{opacity:1;transform:none;}}
@keyframes jp-slide-left{from{opacity:0;transform:translateX(64px);}to{opacity:1;transform:none;}}
@keyframes jp-pop{from{opacity:0;transform:scale(.88);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero-actions,
  .hero .notice{animation:jp-rise .9s cubic-bezier(.16,.8,.24,1) both;}
  .hero-grid h1{animation:none;}
  .hero-grid h1 span{animation:jp-rise .9s cubic-bezier(.16,.8,.24,1) both;}
  .hero .eyebrow{animation-delay:.05s;}
  .hero h1,.hero-grid h1 span:nth-child(1){animation-delay:.15s;}
  .hero-grid h1 span:nth-child(2){animation-delay:.3s;}
  .hero-grid h1 span:nth-child(3){animation-delay:.45s;}
  .hero .lead{animation-delay:.55s;}
  .hero-actions,.hero .notice{animation-delay:.7s;}
  .hero-media .photo{animation:jp-slide-left 1s cubic-bezier(.16,.8,.24,1) .35s both;}
  .hero-badge{animation:jp-pop .7s cubic-bezier(.16,.8,.24,1) .95s both;}
}