/* Shared AI experience feature animations. */

@keyframes aid-btn {
  0%,38.000% {
    background-color: #7d6ca3;
    transform: scale(1);
  }

  39.000% {
    background-color: #c000ff;
    transform: scale(.94);
  }

  40.667%,100% {
    background-color: #c000ff;
    transform: scale(1);
  }
}

@keyframes aid-btn2 {
  0%,51.333% {
    background-color: #f6eeff;
    color: #5b00c2;
    transform: scale(1);
  }

  52.333% {
    background-color: #5b00c2;
    color: #fff;
    transform: scale(.97);
  }

  54.000%,100% {
    background-color: #5b00c2;
    color: #fff;
    transform: scale(1);
  }
}

@keyframes aid-cur {
  0%,14.000% {
    left: calc(422 * var(--u));
    top: calc(248 * var(--u));
    opacity: 0;
    transform: scale(1);
    animation-timing-function: cubic-bezier(.3,.6,.3,1);
  }

  16.000% {
    left: calc(437 * var(--u));
    top: calc(205 * var(--u));
    opacity: 1;
  }

  18.667% {
    left: calc(472 * var(--u));
    top: calc(179 * var(--u));
    opacity: 1;
    animation-timing-function: linear;
  }

  20.000% {
    left: calc(474 * var(--u));
    top: calc(181 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.2,1);
  }

  24.667% {
    left: calc(492 * var(--u));
    top: calc(192 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  29.333% {
    left: calc(518 * var(--u));
    top: calc(198 * var(--u));
    opacity: 1;
    animation-timing-function: ease-in-out;
  }

  32.000%,34.333% {
    left: calc(525 * var(--u));
    top: calc(201 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  38.000% {
    left: calc(448 * var(--u));
    top: calc(271 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }

  39.000% {
    left: calc(448 * var(--u));
    top: calc(272 * var(--u));
    opacity: 1;
    transform: scale(.86);
    animation-timing-function: ease-out;
  }

  40.000% {
    left: calc(449 * var(--u));
    top: calc(272 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  45.333%,48.000% {
    left: calc(489 * var(--u));
    top: calc(273 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  51.333% {
    left: calc(419 * var(--u));
    top: calc(281 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }

  52.333% {
    left: calc(419 * var(--u));
    top: calc(282 * var(--u));
    opacity: 1;
    transform: scale(.86);
    animation-timing-function: ease-out;
  }

  53.333% {
    left: calc(420 * var(--u));
    top: calc(282 * var(--u));
    opacity: 1;
    transform: scale(1);
    animation-timing-function: cubic-bezier(.4,0,.2,1);
  }

  58.667%,77.000% {
    left: calc(489 * var(--u));
    top: calc(273 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    left: calc(553 * var(--u));
    top: calc(100 * var(--u));
    opacity: 0;
  }
}

@keyframes aid-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes aid-h0 {
  0%,22.000% {
    opacity: 1;
    transform: translateY(0);
  }

  25.000%,77.500% {
    opacity: 0;
    transform: translateY(-10px);
  }

  77.510% {
    opacity: 0;
    transform: translateY(10px);
  }

  86.000%,100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aid-hd {
  0%,21.333% {
    opacity: 0;
  }

  24.000%,25.333% {
    opacity: 1;
  }

  27.667%,100% {
    opacity: 0;
  }
}

@keyframes aid-hero {
  0%,19.967% {
    opacity: 0;
    left: calc(290 * var(--u));
    top: calc(122 * var(--u));
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
    animation-timing-function: linear;
  }

  20.000% {
    opacity: 1;
    left: calc(290 * var(--u));
    top: calc(122 * var(--u));
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
    animation-timing-function: cubic-bezier(.55,0,.2,1);
  }

  24.667% {
    opacity: 1;
    left: calc(287 * var(--u));
    top: calc(88 * var(--u));
    width: calc(211 * var(--u));
    height: calc(214 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: rgba(44,14,90,.9);
    border-color: rgba(18,192,255,.5);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
  }

  25.333% {
    opacity: 1;
    left: calc(287 * var(--u));
    top: calc(88 * var(--u));
    width: calc(211 * var(--u));
    height: calc(214 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: rgba(44,14,90,.9);
    border-color: rgba(18,192,255,.5);
    box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(192,0,255,0);
    animation-timing-function: cubic-bezier(.55,0,.15,1);
  }

  29.333% {
    opacity: 1;
    left: calc(312 * var(--u));
    top: calc(35 * var(--u));
    width: calc(202 * var(--u));
    height: calc(290 * var(--u));
    border-radius: calc(18 * var(--u));
    background-color: #fbf8ff;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  32.000%,40.667% {
    opacity: 1;
    left: calc(316 * var(--u));
    top: calc(25 * var(--u));
    width: calc(203 * var(--u));
    height: calc(276 * var(--u));
    border-radius: calc(18 * var(--u));
    background-color: #fbf8ff;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  45.333%,77.000% {
    opacity: 1;
    left: calc(319 * var(--u));
    top: calc(28 * var(--u));
    width: calc(197 * var(--u));
    height: calc(276 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: #ece1fb;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    opacity: 0;
    left: calc(319 * var(--u));
    top: calc(-270 * var(--u));
    width: calc(197 * var(--u));
    height: calc(276 * var(--u));
    border-radius: calc(16 * var(--u));
    background-color: #ece1fb;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) 0 rgba(0,0,0,.45),0 0 calc(44 * var(--u)) 0 rgba(192,0,255,.3);
  }
}

@keyframes aid-hero-icon {
  0%,20.000% {
    top: calc(24 * var(--u));
  }

  24.667%,100% {
    top: calc(35 * var(--u));
  }
}

@keyframes aid-hl {
  0%,25.333% {
    opacity: 1;
  }

  27.667%,100% {
    opacity: 0;
  }
}

@keyframes aid-last-hover {
  0%,16.000% {
    width: calc(205 * var(--u));
    height: calc(46 * var(--u));
    margin-left: 0;
    border-radius: calc(23 * var(--u));
    background-color: rgba(255,255,255,.07);
    border-color: rgba(18,192,255,.42);
    opacity: 1;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
  }

  18.667%,19.967% {
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    margin-left: calc(-10 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    opacity: 1;
  }

  20.000%,77.000% {
    width: calc(225 * var(--u));
    height: calc(70 * var(--u));
    margin-left: calc(-10 * var(--u));
    border-radius: calc(30 * var(--u));
    background-color: rgba(18,192,255,.14);
    border-color: rgba(18,192,255,.8);
    opacity: 0;
  }

  77.100%,100% {
    width: calc(205 * var(--u));
    height: calc(46 * var(--u));
    margin-left: 0;
    border-radius: calc(23 * var(--u));
    background-color: rgba(255,255,255,.07);
    border-color: rgba(18,192,255,.42);
    opacity: 1;
  }
}

@keyframes aid-n1 {
  0%,23.500% {
    opacity: 0;
    transform: translateY(10px);
  }

  27.000%,40.000% {
    opacity: 1;
    transform: translateY(0);
  }

  42.500%,100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes aid-n2 {
  0%,41.500% {
    opacity: 0;
    transform: translateY(10px);
  }

  45.000%,53.000% {
    opacity: 1;
    transform: translateY(0);
  }

  55.500%,100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes aid-n3 {
  0%,54.500% {
    opacity: 0;
    transform: translateY(10px);
  }

  58.000%,76.000% {
    opacity: 1;
    transform: translateY(0);
  }

  79.000%,100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes aid-pulse {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(192,0,255,.5);
  }

  50% {
    box-shadow: 0 0 0 calc(3.5 * var(--u)) rgba(192,0,255,0);
  }
}

@keyframes aid-result2 {
  0%,40.667% {
    top: calc(335 * var(--u));
    left: calc(321 * var(--u));
    width: calc(203 * var(--u));
    background-color: #fdfbff;
    opacity: 1;
    animation-timing-function: cubic-bezier(.16,.84,.3,1);
  }

  45.333%,54.000% {
    top: calc(57 * var(--u));
    left: calc(321 * var(--u));
    width: calc(203 * var(--u));
    background-color: #fdfbff;
    opacity: 1;
    animation-timing-function: cubic-bezier(.3,.7,.3,1);
  }

  58.667%,77.000% {
    top: calc(43 * var(--u));
    left: calc(323 * var(--u));
    width: calc(197 * var(--u));
    background-color: #f1e8fc;
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    top: calc(-290 * var(--u));
    left: calc(323 * var(--u));
    width: calc(197 * var(--u));
    background-color: #f1e8fc;
    opacity: 0;
  }
}

@keyframes aid-result3 {
  0%,54.000% {
    top: calc(335 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.16,.84,.3,1);
  }

  58.667%,77.000% {
    top: calc(57 * var(--u));
    opacity: 1;
    animation-timing-function: cubic-bezier(.5,0,.8,.4);
  }

  82.000%,100% {
    top: calc(-290 * var(--u));
    opacity: 0;
  }
}

@keyframes aid-reveal {
  0%,59.333% {
    clip-path: inset(0 100% 0 0);
  }

  67.333%,100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes aid-scroll {
  0% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: linear;
  }

  2.667% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(.45,.05,.3,1);
  }

  20.000% {
    transform: translateY(calc(-309 * var(--u)));
    opacity: 1;
    animation-timing-function: cubic-bezier(.4,0,.5,1);
  }

  24.667% {
    transform: translateY(calc(-375 * var(--u)));
    opacity: .9;
    animation-timing-function: cubic-bezier(.4,0,.8,1);
  }

  28.667%,77.000% {
    transform: translateY(calc(-464 * var(--u)));
    opacity: 0;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
  }

  77.100% {
    transform: translateY(calc(26 * var(--u)));
    opacity: 0;
    animation-timing-function: cubic-bezier(.35,0,.25,1);
  }

  92.000%,100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes aid-sheen-hero {
  0%,24.667% {
    opacity: 1;
  }

  28.667%,100% {
    opacity: 0;
  }
}

@keyframes aid-sheen-last {
  0%,16.000% {
    opacity: 0;
  }

  18.667%,77.000% {
    opacity: 1;
  }

  77.100%,100% {
    opacity: 0;
  }
}

@keyframes aid-wfade {
  0%,28.000% {
    opacity: 0;
    transform: translateY(calc(22 * var(--u)));
  }

  31.333%,100% {
    opacity: 1;
    transform: translateY(0);
  }
}