/* Motion */
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes floaty{50%{transform:translateY(-8px)}}

html.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
html.js .reveal.is-in{opacity:1;transform:none}

/* hero: masked line-by-line reveal */
.hero__title .line{display:block;overflow:hidden;padding:0 .04em .12em 0;margin-bottom:-.12em}
.hero__title .line__in{display:inline-block;will-change:transform}
html.js .hero__title .line__in{transform:translateY(112%) rotate(3deg);transform-origin:0 100%;transition:transform 1.25s var(--ease)}
html.js .hero__title .line:nth-child(2) .line__in{transition-delay:.12s}
html.js .hero__title .line:nth-child(3) .line__in{transition-delay:.24s}
html.js body.is-loaded .hero__title .line__in{transform:none}
html.js [data-hero-fade]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease) .55s,transform 1.1s var(--ease) .55s}
html.js body.is-loaded [data-hero-fade]{opacity:1;transform:none}
html.js .hero__acts[data-hero-fade]{transition-delay:.7s}
html.js .trust[data-hero-fade]{transition-delay:.9s}

/* clipped frames: navy curtain lifts, image settles */
[data-clip]::after{content:"";position:absolute;inset:0;background:var(--navy);transform-origin:top;transform:scaleY(0);pointer-events:none;z-index:3}
html.js [data-clip]:not(.is-in)::after{transform:scaleY(1)}
html.js [data-clip]::after{transition:transform 1.3s var(--ease-io)}
html.js [data-clip] img{transform:scale(1.22);transition:transform 1.8s var(--ease)}
html.js [data-clip].is-in img{transform:scale(1)}
html.js .phero--navy [data-clip]::after,html.js .hhero [data-clip]::after{background:var(--blue)}
html.js .frame.is-in:hover img{transform:scale(1.05)}

[data-tilt]{transition:transform .9s var(--ease);transform-style:preserve-3d}
.hhero__mark{animation:floaty 6s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  html.js .reveal,html.js [data-hero-fade]{opacity:1;transform:none}
  html.js .hero__title .line__in{transform:none}
  html.js [data-clip]:not(.is-in)::after{transform:scaleY(0)}
  html.js [data-clip] img{transform:none}
  .mq__track{animation:none}
  [data-parallax]{transform:none!important}
}