/* SNK arrival: compositor-only transform + opacity, one short sequence. */
.brand > .snk-intro-mark {
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  overflow: visible;
}
.snk-intro-mark rect {
  transform-box: fill-box;
  transform-origin: center bottom;
}
.snk-intro-ready:not(.snk-intro-playing) .brand-copy,
.snk-intro-ready:not(.snk-intro-playing) .snk-intro-mark rect,
.snk-intro-ready:not(.snk-intro-playing) .hero h1 > span,
.snk-intro-ready:not(.snk-intro-playing) .hero-lead,
.snk-intro-ready:not(.snk-intro-playing) .hero-illustration {
  opacity: 0;
}
.snk-intro-playing .brand-copy {
  animation: snk-word-arrive 700ms cubic-bezier(.25,.1,.25,1) both;
}
.snk-intro-playing .snk-intro-mark rect {
  animation: snk-bar-arrive 650ms cubic-bezier(.25,.1,.25,1) both;
}
.snk-intro-playing .snk-intro-mark rect:nth-of-type(1) { animation-delay: 100ms; }
.snk-intro-playing .snk-intro-mark rect:nth-of-type(2) { animation-delay: 240ms; }
.snk-intro-playing .snk-intro-mark rect:nth-of-type(3) { animation-delay: 380ms; }
.snk-intro-playing .hero h1 > span {
  animation: snk-slogan-arrive 950ms cubic-bezier(.25,.1,.25,1) both;
}
.snk-intro-playing .hero h1 > span:nth-child(1) { animation-delay: 500ms; }
.snk-intro-playing .hero h1 > span:nth-child(2) { animation-delay: 760ms; }
.snk-intro-playing .hero h1 > span:nth-child(3) { animation-delay: 1020ms; }
.snk-intro-playing .hero-lead {
  animation: snk-word-arrive 900ms cubic-bezier(.25,.1,.25,1) 1320ms both;
}
.snk-intro-playing .hero-illustration {
  animation: snk-picture-arrive 1450ms cubic-bezier(.25,.1,.25,1) 1500ms both;
}
.snk-intro-ready .brand-copy,
.snk-intro-ready .hero h1 > span,
.snk-intro-ready .hero-lead,
.snk-intro-ready .hero-illustration { will-change:transform,opacity; }
@keyframes snk-word-arrive {
  from { opacity: 0; transform: translate3d(0,10px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes snk-bar-arrive {
  from { opacity: 0; transform: translate3d(0,5px,0) scaleY(.7); }
  to { opacity: 1; transform: translate3d(0,0,0) scaleY(1); }
}
@keyframes snk-slogan-arrive {
  from { opacity: 0; transform: translate3d(-18px,8px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes snk-picture-arrive {
  from { opacity: 0; transform: translate3d(68px,5px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@media (max-width:1024px) {
  .brand > .snk-intro-mark { width:52px; height:52px; }
}
@media (max-width:760px) {
  .brand > .snk-intro-mark { width:42px; height:42px; }
  @keyframes snk-picture-arrive {
    from { opacity:0; transform:translate3d(38px,7px,0); }
    to { opacity:1; transform:translate3d(0,0,0); }
  }
}
@media (prefers-reduced-motion:reduce) {
  .snk-intro-ready .brand-copy,
  .snk-intro-ready .snk-intro-mark rect,
  .snk-intro-ready .hero h1 > span,
  .snk-intro-ready .hero-lead,
  .snk-intro-ready .hero-illustration {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}