.js .fil-hub { opacity: 0; scale: .3; animation: fil-hub-in .5s var(--ease) .15s forwards; }
@keyframes fil-hub-in { to { opacity: 1; scale: 1; } }

.fil-path.is-anim { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: fil-draw 1.1s cubic-bezier(.55, 0, .25, 1) forwards; }
.fil-path.is-anim:nth-of-type(1) { animation-delay: .5s; }
.fil-path.is-anim:nth-of-type(2) { animation-delay: .8s; }
.fil-path.is-anim:nth-of-type(3) { animation-delay: 1.1s; }
@keyframes fil-draw { to { stroke-dashoffset: 0; } }

.fil-node.is-anim { opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: fil-node-in .45s var(--ease) forwards; }
.fil-node.is-anim:nth-of-type(1) { animation-delay: 1.5s; }
.fil-node.is-anim:nth-of-type(2) { animation-delay: 1.8s; }
.fil-node.is-anim:nth-of-type(3) { animation-delay: 2.1s; }
@keyframes fil-node-in { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }

.js .hero__anno { opacity: 0; translate: 0 8px; animation: anno-in .6s ease 2.1s forwards; }
@keyframes anno-in { to { opacity: 1; translate: 0 0; } }

.js .reveal-mask { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease); }
.js .reveal-mask.is-in { clip-path: inset(0 0 0 0); }

.js .reveal { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .6s var(--ease); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

.js .rt-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.6s var(--ease); }
.js .supply__route.is-in .rt-line { stroke-dashoffset: 0; }
.js .rt-node { opacity: 0; transition: opacity .5s ease 1.2s; }
.js .supply__route.is-in .rt-node { opacity: 1; }

.js .passport__molecule .mol-link { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.6s var(--ease); }
.js .passport.is-in .passport__molecule .mol-link { stroke-dashoffset: 0; }
.js .passport__molecule .mol-node { opacity: 0; transition: opacity .5s ease; }
.js .passport.is-in .passport__molecule .mol-node { opacity: .9; transition-delay: 1.1s; }

.passport__molecule { animation: mol-pulse 5s ease-in-out infinite; transform-box: view-box; transform-origin: center; }
@keyframes mol-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

.js .request__ring svg circle, .js .request__ring .ring-fil { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 2s var(--ease); }
.js .request.is-in .request__ring svg circle, .js .request.is-in .request__ring .ring-fil { stroke-dashoffset: 0; }

.request__emblem { animation: emblem-float 7s ease-in-out infinite, emblem-pulse 5.5s ease-in-out infinite, emblem-spin 50s linear infinite; }
@keyframes emblem-float { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 12px); } }
@keyframes emblem-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@keyframes emblem-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

.plexus { animation: plexus-drift 26s ease-in-out infinite alternate; }
.plexus--corner { animation-duration: 32s; }
.plexus--tall { animation-duration: 38s; }
@keyframes plexus-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-14px,10px,0) scale(1.04); } }
.glow { animation: glow-pulse 9s ease-in-out infinite alternate; }
.glow--cyan { animation-duration: 11s; }
.glow--indigo { animation-duration: 13s; }
@keyframes glow-pulse { from { opacity: .32; } to { opacity: .6; } }

@supports (animation-timeline: view()) {
  .tf__step {
    animation: tf-cycle linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  
  @keyframes tf-cycle {
    0%   { opacity: 0; transform: translateY(64px) scale(.955); filter: blur(6px); }
    24%  { opacity: 1; transform: none; filter: blur(0); }
    76%  { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: .12; transform: translateY(-42px) scale(.985); filter: blur(3px); }
  }
  
  .tf__frame { overflow: hidden; }
  .tf__frame img {
    animation: tf-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes tf-parallax { from { transform: scale(1.14) translateY(-3.5%); } to { transform: scale(1.14) translateY(3.5%); } }
}