/* Home page animations. Everything is scoped to html.motion, which
   home-motion.js adds only when the visitor hasn't asked for reduced motion.
   To turn them off, remove this file's <link> and home-motion.js from index.html. */

@keyframes hm-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hm-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes hm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hm-grow-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: none;
  }
}
@keyframes hm-grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}
@keyframes hm-slide-in {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hm-shimmer {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
@keyframes hm-grid-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 48px 48px;
  }
}
@keyframes hm-float {
  0%,
  100% {
    transform: rotate(-2deg) translateY(-2px);
  }
  50% {
    transform: rotate(-1deg) translateY(-8px);
  }
}
@keyframes hm-glow {
  0%,
  100% {
    box-shadow: 0 1px 1px rgba(17, 26, 46, 0.04);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(18, 128, 92, 0.18),
      0 6px 16px -6px rgba(18, 128, 92, 0.35);
  }
}
@keyframes hm-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}
@keyframes hm-gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ------------------------------------------------------------ hero, on load */
.motion .hero-copy > * {
  animation: hm-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.motion .hero-copy > :nth-child(1) {
  animation-delay: 0.05s;
}
.motion .hero-copy > :nth-child(2) {
  animation-delay: 0.15s;
}
.motion .hero-copy > :nth-child(3) {
  animation-delay: 0.3s;
}
.motion .hero-copy > :nth-child(4) {
  animation-delay: 0.42s;
}
.motion .hero-copy > :nth-child(5) {
  animation-delay: 0.52s;
}

/* the gradient words drift slowly through their colors */
.motion .hero-copy h1 .grad {
  background-size: 200% 100%;
  animation: hm-shimmer 6s ease-in-out 1s infinite alternate;
}

/* background grid moves very slowly; the glow breathes */
.motion .hero::after {
  animation: hm-grid-drift 18s linear infinite;
}
.motion .hero::before {
  animation: hm-breathe 9s ease-in-out infinite;
}

/* the app window rises in after the headline */
.motion .hero-shot.reveal {
  opacity: 1;
  transform: none;
  transition: none;
  animation: hm-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
}
.motion .hero-shot .deal {
  animation: hm-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.95s + var(--i, 0) * 0.07s);
}
.motion .hero-shot .col-bar {
  transform-origin: left;
  animation: hm-grow-x 0.7s ease-out 0.9s both;
}
/* the card being dragged keeps floating; the paid deal glows now and then */
.motion .hero-shot .deal.lift {
  animation:
    hm-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 1s both,
    hm-float 4.5s ease-in-out 1.6s infinite;
}
.motion .hero-shot .col:last-child .deal:first-of-type {
  animation:
    hm-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s both,
    hm-glow 3.2s ease-in-out 2.2s infinite;
}
.motion .kpi em {
  animation: hm-fade 0.5s ease 2.2s both;
}

/* ------------------------------------------------------------ strip */
.motion .strip li {
  animation: hm-rise 0.6s ease both;
  animation-delay: calc(0.9s + var(--i, 0) * 0.08s);
}

/* ------------------------------------------------------------ journey: line draws, dots pop */
.motion .journey.reveal::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.motion .journey.reveal.in::before {
  transform: none;
}
.motion .journey.reveal li {
  opacity: 0;
}
.motion .journey.reveal.in li {
  animation: hm-rise 0.6s ease both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.25s);
}
.motion .journey.reveal.in .dot {
  animation: hm-pop 0.6s cubic-bezier(0.3, 0.7, 0.3, 1.2) both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.25s);
}

/* ------------------------------------------------------------ feature visuals come to life */
.motion .fr-visual .bars div,
.motion .fr-visual .meter i,
.motion .fr-visual .funnel div,
.motion .fr-visual .row,
.motion .fr-visual .flow > *,
.motion .fr-visual .ai-card {
  opacity: 0;
}
.motion .fr-visual.in .bars div {
  opacity: 1;
  transform-origin: bottom;
  animation: hm-grow-y 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.08s);
}
.motion .fr-visual.in .meter i {
  opacity: 1;
  transform-origin: left;
  animation: hm-grow-x 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.5s + var(--i, 0) * 0.15s);
}
.motion .fr-visual.in .funnel div {
  opacity: 1;
  transform-origin: left;
  animation: hm-grow-x 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.15s);
}
.motion .fr-visual.in .row {
  animation: hm-slide-in 0.5s ease both;
  animation-delay: calc(0.35s + var(--i, 0) * 0.12s);
}
.motion .fr-visual.in .flow > * {
  animation: hm-fade 0.45s ease both;
  animation-delay: calc(0.8s + var(--i, 0) * 0.18s);
}
.motion .fr-visual.in .ai-card {
  animation: hm-rise 0.6s ease 1.1s both;
}
.motion .fr-visual .backdrop {
  transition: transform 0.6s ease;
}
.motion .fr-visual:hover .backdrop {
  transform: rotate(-1.5deg) scale(1.02);
}

/* ------------------------------------------------------------ card grids appear one by one */
.motion .grid.reveal,
.motion .from-list.reveal {
  opacity: 1;
  transform: none;
}
.motion .grid.reveal > *,
.motion .from-list.reveal > * {
  opacity: 0;
}
.motion .grid.reveal.in > *,
.motion .from-list.reveal.in > * {
  animation: hm-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.07s);
}
.motion .from-list.reveal.in > *::before {
  animation: hm-pop 0.5s ease both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.07s);
}

/* icons nudge on hover */
.motion .card .icon,
.motion .industry .icon {
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1.4);
}
.motion .card:hover .icon,
.motion .industry:hover .icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
}
.motion .industry {
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.motion .industry:hover {
  transform: translateY(-3px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------ final call to action */
.motion .cta {
  background-size: 160% 160%;
  animation: hm-gradient 14s ease-in-out infinite;
}