/* Motion. Everything here runs only when the visitor allows motion;
   reduced-motion visitors get the final state immediately. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Header and hero entrance -------------------------------------------- */

  .site-header {
    animation: fade 0.8s ease both;
  }

  .hero::before {
    animation: glow-drift 18s ease-in-out infinite alternate;
  }

  .hero-copy > * {
    animation: rise 0.9s var(--ease-out) both;
  }

  .hero-copy > .hero-title {
    animation: none;
  }

  .hero-title span {
    animation: line-up 1.1s var(--ease-out) 0.12s both;
  }

  .hero-title span + span {
    animation-delay: 0.24s;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 0.34s;
  }

  .hero-copy > :nth-child(4) {
    animation-delay: 0.44s;
  }

  .hero-copy > :nth-child(5) {
    animation-delay: 0.54s;
  }

  .hero-visual,
  .device-stage {
    will-change: transform;
  }

  .device {
    animation: device-in 1.4s var(--ease-out) 0.15s both;
  }

  .device-sheen {
    animation: sheen 1.8s ease-in-out 1.1s backwards;
  }

  .visual-caption {
    animation: fade 1s ease 1.4s both;
  }

  /* Callouts: dot pops, line draws, label slides in --------------------- */

  .callout-original {
    --callout-delay: 1.15s;
  }

  .callout-support {
    --callout-delay: 1.3s;
  }

  .callout-answer {
    --callout-delay: 1.45s;
  }

  .callout-explain {
    --callout-delay: 1.6s;
  }

  .callout::before {
    animation:
      pop 0.5s var(--ease-out) var(--callout-delay) both,
      ping 2.4s ease-out calc(var(--callout-delay) + 0.5s) 1;
  }

  .callout::after {
    transform-origin: left;
    animation: draw 0.7s var(--ease-out) calc(var(--callout-delay) + 0.15s) both;
  }

  .callout span {
    animation: label-in 0.7s var(--ease-out) calc(var(--callout-delay) + 0.35s) both;
  }

  /* Store buttons -------------------------------------------------------- */

  @media (hover: hover) {
    a.store-button[href]:hover::after {
      transform: translateX(120%);
      transition: transform 0.9s var(--ease-out);
    }
  }

  /* Scroll reveal -------------------------------------------------------- */

  .js .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .bento .reveal:nth-child(2),
  .bank-table .reveal:nth-child(2) {
    transition-delay: 0.08s;
  }

  .bento .reveal:nth-child(3),
  .bank-table .reveal:nth-child(3) {
    transition-delay: 0.16s;
  }

  .bento .reveal:nth-child(4) {
    transition-delay: 0.08s;
  }

  .bento .reveal:nth-child(5) {
    transition-delay: 0.16s;
  }

  .shots .reveal:nth-child(2) {
    transition-delay: 0.1s;
  }

  .shots .reveal:nth-child(3) {
    transition-delay: 0.2s;
  }

  .shots .reveal:nth-child(4) {
    transition-delay: 0.3s;
  }

  /* Section headings: each title line rises out of a mask */

  .js .section-head.reveal {
    opacity: 1;
    transform: none;
  }

  .js .section-head.reveal .eyebrow,
  .js .section-head.reveal .section-lede {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 0.9s var(--ease-out);
  }

  .js .section-head.reveal .section-lede {
    transition-delay: 0.3s;
  }

  .js .section-head.reveal.is-visible .eyebrow,
  .js .section-head.reveal.is-visible .section-lede {
    opacity: 1;
    transform: none;
  }

  .js .reveal .section-title span {
    clip-path: inset(-25% -10% 100% -10%);
    transform: translateY(100%);
    transition: transform 1.1s var(--ease-out), clip-path 1.1s var(--ease-out);
  }

  .js .reveal .section-title span + span {
    transition-delay: 0.1s;
  }

  .js .reveal.is-visible .section-title span {
    clip-path: inset(-25% -10% -25% -10%);
    transform: none;
  }

  /* Feature tiles: contents arrive in sequence -------------------------- */

  .js .tile .source-list li,
  .js .tile .check-list li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.7s var(--ease-out);
  }

  .js .tile .language-stack li {
    opacity: 0;
    translate: -18px 0;
    transition: opacity 0.6s ease, translate 0.8s var(--ease-out);
  }

  .js .tile .chip,
  .js .tile .sign-row li {
    opacity: 0;
    scale: 0.88;
    transition: opacity 0.5s ease, scale 0.6s var(--ease-out);
  }

  .js .tile.is-visible .source-list li,
  .js .tile.is-visible .check-list li,
  .js .tile.is-visible .language-stack li,
  .js .tile.is-visible .chip,
  .js .tile.is-visible .sign-row li {
    opacity: 1;
    transform: none;
    translate: 0 0;
    scale: 1;
  }

  .js .tile li:nth-child(1) {
    transition-delay: 0.25s;
  }

  .js .tile li:nth-child(2) {
    transition-delay: 0.33s;
  }

  .js .tile li:nth-child(3) {
    transition-delay: 0.41s;
  }

  .js .tile li:nth-child(4) {
    transition-delay: 0.49s;
  }

  .js .tile li:nth-child(5) {
    transition-delay: 0.57s;
  }

  @media (hover: hover) {
    .js .tile.reveal.is-visible {
      transition: opacity 0.9s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s ease;
    }

    .js .tile.reveal.is-visible:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-raised);
      transition-delay: 0s;
    }

    .sign-row img {
      transition: transform 0.5s var(--ease-out);
    }

    .sign-row li:hover img {
      transform: scale(1.08) rotate(-3deg);
    }
  }

  /* Language ticker ------------------------------------------------------ */

  .ticker-row-forward {
    animation: marquee 70s linear infinite;
  }

  .ticker-row-reverse {
    animation: marquee 76s linear infinite reverse;
  }

  .ticker:hover .ticker-row {
    animation-play-state: paused;
  }

  /* Demo ----------------------------------------------------------------- */

  .demo-collapse {
    transition:
      grid-template-rows 0.6s var(--ease-out),
      opacity 0.45s ease,
      margin-top 0.6s var(--ease-out),
      visibility 0s linear 0.6s;
  }

  .demo-card:not([data-mode="original"]) .demo-collapse-support,
  .demo-card[data-mode="explain"] .demo-collapse-explain {
    transition:
      grid-template-rows 0.6s var(--ease-out),
      opacity 0.5s ease 0.1s,
      margin-top 0.6s var(--ease-out),
      visibility 0s;
  }

  .demo-card[data-mode="explain"] .is-correct {
    animation: correct-ring 1.2s ease-out 0.2s;
  }

  .demo-step.is-running .demo-step-progress {
    animation: progress var(--demo-step-ms, 2800ms) linear forwards;
  }

  /* Banks: divider lines draw across as rows arrive */

  .js .bank-country.reveal {
    border-bottom-color: transparent;
  }

  .js .bank-country.reveal::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s var(--ease-out) 0.2s;
  }

  .js .bank-country.reveal.is-visible::after {
    transform: scaleX(1);
  }

  /* Download panel ------------------------------------------------------- */

  .download-panel::before {
    animation: glow-breathe 9s ease-in-out infinite alternate;
  }

  .js .download-panel.reveal .download-mark {
    opacity: 0;
    transform: scale(0.6) rotate(-10deg);
    transition: opacity 0.6s ease 0.15s, transform 0.9s var(--ease-out) 0.15s;
  }

  .js .download-panel.reveal.is-visible .download-mark {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes line-up {
  from {
    clip-path: inset(-25% -10% 100% -10%);
    transform: translateY(100%);
  }

  to {
    clip-path: inset(-25% -10% -25% -10%);
    transform: none;
  }
}

@keyframes device-in {
  from {
    opacity: 0;
    transform: perspective(1400px) translateY(72px) rotateX(16deg) scale(0.96);
  }
}

@keyframes sheen {
  0% {
    opacity: 0;
    transform: translateX(-130%);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(130%);
  }
}

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

@keyframes ping {
  0% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(18, 109, 204, 0.4);
  }

  100% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 14px rgba(18, 109, 204, 0);
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
}

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

@keyframes glow-drift {
  to {
    transform: translate(-5%, 4%) scale(1.1);
  }
}

@keyframes glow-breathe {
  from {
    opacity: 0.75;
    transform: translateX(-50%) scale(1);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes progress {
  to {
    transform: scaleX(1);
  }
}

@keyframes correct-ring {
  from {
    box-shadow: 0 0 0 0 rgba(19, 168, 116, 0.35);
  }

  to {
    box-shadow: 0 0 0 12px rgba(19, 168, 116, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* Accessibility override: remove authored motion. */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}