/* Scroll reveals, timing measured on apple.com (see LOCAL-STAGING.md): an element reveals once when it reaches
   85% of the viewport height, with a .15s stagger across the items that enter together.
   Hidden states apply only under html.fm-motion, which an inline head script sets when motion is allowed. */
:root{--fm-reveal-y:30px;--fm-ease-quad:cubic-bezier(.455,.03,.515,.955);--fm-ease-sine:cubic-bezier(.45,0,.55,1);--fm-ease-settle:cubic-bezier(.33,0,.83,1)}

/* Text, buttons, cards: fade up 30px, opacity .9s / transform .7s. */
.fm-motion [data-reveal]{opacity:0;transform:translateY(var(--fm-reveal-y))}
.fm-motion [data-reveal].is-in{opacity:1;transform:none;transition:opacity .9s var(--fm-ease-quad),transform .7s var(--fm-ease-quad);transition-delay:calc(var(--i,0) * .15s)}

/* Facts and stats: opacity only, .2s stagger. */
.fm-motion [data-reveal-stat]{opacity:0}
.fm-motion [data-reveal-stat].is-in{opacity:1;transition:opacity .5s var(--fm-ease-sine) calc(var(--i,0) * .2s)}

/* Photos and films: rise and settle inside their rounded frame. */
.fm-motion [data-reveal-media] .cs-frame>img,.fm-motion [data-reveal-media] .cs-frame>video{opacity:0;transform:translateY(4%) scale(1.1)}
.fm-motion [data-reveal-media].is-in .cs-frame>img,.fm-motion [data-reveal-media].is-in .cs-frame>video{opacity:1;transform:none;transition:opacity .9s var(--fm-ease-sine),transform 1.5s var(--fm-ease-settle)}
.fm-motion [data-reveal-media] figcaption{opacity:0}
.fm-motion [data-reveal-media].is-in figcaption{opacity:1;transition:opacity .9s var(--fm-ease-sine) .3s}

/* Hero on load: image settles from a slight zoom, copy fades up. */
.fm-motion [data-motion-hero] .image-bg{animation:fm-hero-settle 1.5s var(--fm-ease-settle) both}
.fm-motion [data-motion-hero] .about-header-contents>*{animation:fm-fade-up .9s var(--fm-ease-quad) both}
.fm-motion [data-motion-hero] .about-header-contents>:nth-child(1){animation-delay:.15s}
.fm-motion [data-motion-hero] .about-header-contents>:nth-child(2){animation-delay:.3s}
.fm-motion [data-motion-hero] .about-header-contents>:nth-child(n+3){animation-delay:.45s}
@keyframes fm-hero-settle{from{transform:scale(1.08)}}
@keyframes fm-fade-up{from{opacity:0;transform:translateY(var(--fm-reveal-y))}}

@media(prefers-reduced-motion:reduce){
 .fm-motion [data-reveal],.fm-motion [data-reveal-stat],.fm-motion [data-reveal-media] .cs-frame>*,.fm-motion [data-reveal-media] figcaption{opacity:1!important;transform:none!important;transition:none!important}
 .fm-motion [data-motion-hero] *{animation:none!important}
}