/* Motion: scroll reveals, keyframes and micro-interactions. Everything here is decoration; with
   prefers-reduced-motion the page is fully usable and nothing moves. */

/* Animatable number for the second-look score ring. */
@property --score {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ------------------------------------------------------------------ scroll reveal */

/* Only hide content when JS is running (html.js-motion is set by landing.js), so the page never
   stays blank if scripts fail. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 700ms var(--ease-out) var(--reveal-delay, 0ms);
}

.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Children of a revealed list come in one after another (--i is set in the HTML). */
.js-motion .steps[data-reveal] > *,
.js-motion .rules[data-reveal] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out),
    background-color 240ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 150ms), calc(var(--i, 0) * 90ms + 150ms), 0ms;
}

.js-motion .steps[data-reveal].is-visible > *,
.js-motion .rules[data-reveal].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Eyebrow corner dots spread out a little when the label appears. */
.js-motion .is-visible .eyebrow.corners::after,
.js-motion .eyebrow.corners.is-visible::after {
  animation: corners-in 700ms var(--ease-out) both;
}

/* ------------------------------------------------------------------ hero entrance */

.js-motion .preview__window {
  animation: preview-in 1100ms var(--ease-out) 300ms backwards;
}

.js-motion .preview__row {
  animation: row-in 600ms var(--ease-out) both;
  animation-delay: calc(900ms + var(--i, 0) * 140ms);
}

.js-motion .preview__row .verdict {
  animation: badge-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(1200ms + var(--i, 0) * 140ms);
}

.js-motion .digest__list li {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms + 300ms);
}

.js-motion .digest.is-visible .digest__list li {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ micro-interactions */

/* Buttons: lift on hover, arrow nudges, press sinks. */
.button {
  transition:
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.button--primary:hover {
  box-shadow: 0 8px 20px -8px rgba(18, 56, 240, 0.6);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(1px) scale(0.98);
}

.button__arrow {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}

.button:hover .button__arrow {
  transform: translateX(3px);
}

/* Nav links: underline grows from the left. */
.nav-link {
  position: relative;
  transition: color 160ms var(--ease-out);
}

.nav-link::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}

.nav-link:hover {
  color: var(--color-ink);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* The logo blinks now and then, and on hover. */
.brand__lids {
  transform-box: fill-box;
  transform-origin: top;
  animation: blink 6s ease-in-out infinite;
}

.brand:hover .brand__lids {
  animation: blink-once 360ms ease-in-out;
}

/* Error shake for the hero form. */
.is-shaking {
  animation: shake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Cards lift slightly on hover. */
.look-demo__card,
.watch-demo,
.receipt-demo {
  transition:
    transform 300ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}

/* ------------------------------------------------------------------ keyframes */

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(17, 163, 127, 0.5);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(17, 163, 127, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(17, 163, 127, 0);
  }
}

@keyframes dot-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes preview-in {
  from {
    opacity: 0;
    transform: translateY(40px) rotateX(12deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes badge-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes corners-in {
  from {
    inset: 3px;
    opacity: 0;
  }

  to {
    inset: -3px;
    opacity: 1;
  }
}

@keyframes card-swap {
  from {
    opacity: 0.4;
    transform: translateY(8px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes value-bump {
  50% {
    transform: scale(1.06);
  }
}

@keyframes line-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

@keyframes clock-hand {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-8px) rotate(-2deg);
  }
}

@keyframes blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(2.1);
  }
}

@keyframes blink-once {
  50% {
    transform: scaleY(2.1);
  }
}

@keyframes shake {
  20%,
  80% {
    transform: translateX(-2px);
  }

  40%,
  60% {
    transform: translateX(4px);
  }

  50% {
    transform: translateX(-4px);
  }
}

/* ------------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion .steps[data-reveal] > *,
  .js-motion .rules[data-reveal] > *,
  .js-motion .digest__list li {
    opacity: 1 !important;
    transform: none !important;
  }

  .brand__lids,
  .cta__art,
  .hero__caret,
  .night__stars::before,
  .night__stars::after,
  .preview__live,
  .digest__clock::after {
    animation: none !important;
  }

  .preview__window {
    transform: none !important;
  }
}