/* Motion enhancement layer — intentionally isolated from the original compiled styles. */
:root {
  --motion-pink: rgba(255, 72, 208, 0.55);
  --motion-violet: rgba(118, 92, 255, 0.42);
}

.motion-refresh {
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

a.primary-cta,
a.sticky-download {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.motion-refresh:focus-visible,
.motion-card:focus-within .motion-card-surface {
  outline: 2px solid #ffb2e9;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .launch-top {
    animation: motion-header-enter 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.motion-ready .download-panel {
    animation: motion-panel-enter 720ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.motion-ready .quota-panel {
    animation: motion-panel-enter 720ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.motion-ready .primary-cta,
  html.motion-ready .sticky-download {
    animation: motion-cta-glow 3.6s ease-in-out infinite;
  }

  html.motion-ready .motion-card {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.982);
    animation: motion-card-enter 420ms var(--motion-delay, 100ms) cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.motion-ready:not(.motion-entered) .motion-thumbnail {
    animation: motion-image-arrive 420ms var(--motion-image-delay, 80ms) cubic-bezier(0.2, 0.85, 0.25, 1) both;
  }

  html.motion-entered .motion-card {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html.motion-ready .motion-card-surface {
    position: relative;
    isolation: isolate;
    transform: translateZ(0);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.025), 0 12px 26px rgba(0, 0, 0, 0.18);
  }

  html.motion-ready .motion-card-surface::before {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: -58%;
    width: 42%;
    content: "";
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-18deg);
    transition: left 620ms ease, opacity 240ms ease;
  }

  html.motion-entered .motion-card:nth-child(3n + 2) .motion-card-surface {
    animation: motion-card-breathe 1.8s 180ms ease-in-out infinite;
  }

  html.motion-entered .motion-thumbnail {
    animation: motion-image-quick-drift 860ms linear infinite alternate;
  }

  html.motion-entered .motion-card:nth-child(2n) .motion-thumbnail {
    animation-delay: -430ms;
    animation-direction: alternate-reverse;
  }

  html.motion-entered .motion-card:nth-child(3n) .motion-thumbnail {
    animation-duration: 700ms;
    animation-delay: -300ms;
  }

  html.motion-ready .motion-card.is-spotlight .motion-card-surface {
    box-shadow: 0 0 0 1px rgba(255, 158, 228, 0.2), 0 14px 34px var(--motion-pink);
  }

  html.motion-ready .motion-card.is-spotlight .motion-card-surface::before {
    left: 128%;
    opacity: 1;
  }

  html.motion-entered .video-grid.is-refreshing .motion-card {
    animation: motion-card-refresh 720ms var(--motion-refresh-delay, 0ms) cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }

  .motion-refresh:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 72, 208, 0.2);
  }

  .motion-refresh.is-refreshing {
    animation: motion-button-working 780ms ease-in-out infinite;
  }

  @media (hover: hover) {
    .motion-card:hover .motion-card-surface,
    .motion-card:focus-within .motion-card-surface {
      z-index: 3;
      transform: translate3d(0, -7px, 0) scale(1.018);
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 172, 233, 0.17);
    }

    .motion-card:hover .motion-thumbnail,
    .motion-card:focus-within .motion-thumbnail {
      transform: scale(1.075);
    }

    .motion-card:hover .motion-card-surface::before,
    .motion-card:focus-within .motion-card-surface::before {
      left: 128%;
      opacity: 1;
    }
  }
}

.motion-thumbnail {
  transform: scale(1.001);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
  will-change: transform;
}

@keyframes motion-header-enter {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-panel-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motion-card-enter {
  0% { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.982); filter: brightness(0.82); }
  68% { opacity: 1; filter: brightness(1.03); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

@keyframes motion-card-refresh {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  34% { opacity: 0.15; transform: translate3d(0, 12px, 0) scale(0.955); filter: blur(2px); }
  62% { opacity: 0.45; transform: translate3d(0, -8px, 0) scale(1.01); filter: blur(1px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes motion-image-arrive {
  0% { transform: scale(1.26) translate3d(-9%, 6%, 0); filter: saturate(0.78) brightness(0.72); }
  56% { transform: scale(1.1) translate3d(4%, -3%, 0); filter: saturate(1.12) brightness(1.08); }
  100% { transform: scale(1.001) translate3d(0, 0, 0); filter: saturate(1) brightness(1); }
}

@keyframes motion-image-quick-drift {
  0% { transform: scale(1.02) translate3d(-3%, 2%, 0); filter: saturate(1) brightness(1); }
  42% { transform: scale(1.12) translate3d(4%, -3%, 0); filter: saturate(1.14) brightness(1.08); }
  100% { transform: scale(1.06) translate3d(-2%, -1%, 0); filter: saturate(1.04) brightness(1.02); }
}

@keyframes motion-card-breathe {
  0%, 100% { box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18); }
  50% { box-shadow: 0 16px 34px rgba(118, 92, 255, 0.18), 0 0 0 1px rgba(255, 153, 228, 0.09); }
}

@keyframes motion-image-breathe {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.08) brightness(1.05); }
}

@keyframes motion-cta-glow {
  0%, 100% { box-shadow: 0 14px 34px rgba(255, 72, 208, 0.26); }
  50% { box-shadow: 0 18px 42px rgba(255, 72, 208, 0.48), 0 0 20px rgba(118, 92, 255, 0.22); }
}

@keyframes motion-button-working {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-2px); opacity: 0.76; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card,
  .motion-card-surface,
  .motion-card-surface::before,
  .motion-thumbnail,
  .motion-refresh,
  .primary-cta,
  .sticky-download {
    animation: none !important;
    transition: none !important;
  }
}