/*
  Sticker homepage, part 2 of 2: every animation and the states home.js toggles.
  html.js hides the things that animate in (turns, printed sheet, dot). home.js removes it
  again if anything throws, and html.calm (reduced motion) always shows the final state.
  Motion uses transform and opacity only. Every loop stops under prefers-reduced-motion.
*/
.cyc {
  transition:
    transform 0.28s ease-in,
    opacity 0.28s ease-in;
}
.dot.active::after {
  animation: pulse 1.6s ease-out infinite;
}

.js:not(.calm) .dot {
  transform: scale(0);
}

.js:not(.calm) .dot.seen {
  animation: pop 0.6s cubic-bezier(0.3, 1.9, 0.5, 1) both;
}

.time .bump {
  animation: bump 0.45s ease-out;
}

.cyc.out {
  opacity: 0;
  transform: translateY(-70%);
}

.cyc.pre {
  opacity: 0;
  transform: translateY(70%);
  transition: none;
}

.dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.dots i:nth-child(3) {
  animation-delay: 0.3s;
}

.js:not(.calm) .turn {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    transform 0.25s;
}

.js:not(.calm) .turn.typing,
.js:not(.calm) .turn.on {
  opacity: 1;
  transform: none;
}

.js:not(.calm) .turn p {
  transition: opacity 0.2s;
}

.js:not(.calm) .turn:not(.on) p {
  opacity: 0;
}

.js:not(.calm) .turn.typing .dots {
  opacity: 1;
}

.js:not(.calm) .printer:not(.printed) .sheet {
  transform: translateY(-105%);
}

.js:not(.calm) .printer:not(.printed) .stamp.big {
  opacity: 0;
}

.printed .sheet {
  animation: print 1.6s steps(20, end) both;
}

.printed .stamp.big {
  animation: slam 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 1.8s both;
}

.featured::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -2;
  border: 3px solid var(--primary);
  border-radius: 30px;
  animation: outline 1.8s ease-out infinite;
}

.marq-track.rev {
  animation-direction: reverse;
}

.marquee:hover .marq-track {
  animation-play-state: paused;
}

.dots i {
  animation: hop 0.9s ease-in-out infinite;
}

.marq-track {
  animation: marq 45s linear infinite;
}

@keyframes bob {
  from {
    transform: translateY(-8px) rotate(calc(var(--r, 0deg) - 4deg));
  }
  to {
    transform: translateY(8px) rotate(calc(var(--r, 0deg) + 4deg));
  }
}
.bob {
  animation: bob 6s ease-in-out infinite alternate;
}
.f-hero2 .bob,
.f-q1 .bob,
.f-p1 .bob {
  animation-duration: 7.5s;
  animation-delay: -2s;
}
.f-r1 .bob {
  animation-duration: 5s;
  animation-delay: -1s;
}
@keyframes marq {
  to {
    transform: translateX(-50%);
  }
}
@keyframes pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
@keyframes bump {
  0% {
    transform: rotate(-3deg) scale(1);
  }
  40% {
    transform: rotate(-6deg) scale(1.12);
  }
  100% {
    transform: rotate(-3deg) scale(1);
  }
}
@keyframes hop {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}
@keyframes print {
  from {
    transform: translateY(-105%);
  }
  to {
    transform: none;
  }
}
@keyframes slam {
  from {
    opacity: 0;
    transform: scale(3.2) rotate(-28deg);
  }
  70% {
    opacity: 1;
    transform: scale(0.92) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-6deg);
  }
}
@keyframes outline {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.035, 1.08);
    opacity: 0;
  }
}

/* Without motion the marquee becomes a plain wrapped list of its highlights. */
.calm .marq-track,
.calm .marq-set {
  width: auto;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.calm .marq-set + .marq-set {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .marq-track,
  .marq-set {
    width: auto;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marq-set + .marq-set {
    display: none;
  }
}