/* GSAP motion layer: visual polish only; application layout and data flow stay authoritative. */
body.motion-ready {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.motion-ready .is-motion-active {
  will-change: transform, opacity;
}

body.motion-ready .topbar {
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

body.motion-ready .topbar.is-scrolled {
  border-bottom-color: rgba(18, 22, 32, .07);
  background: color-mix(in srgb, var(--ff-surface) 78%, transparent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--ff-shadow-ink) 5.5%, transparent);
  backdrop-filter: blur(22px) saturate(1.25);
}

:root[data-theme="dark"] body.motion-ready .topbar.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--ff-line) 8%, transparent);
  background: rgba(15, 17, 21, .78);
}

body.motion-ready .login-bg,
body.motion-ready .hero-bg {
  transform-origin: 50% 0;
}

body.motion-ready .login-card {
  transform-style: preserve-3d;
  box-shadow: 0 32px 100px color-mix(in srgb, var(--ff-shadow-ink) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ff-shadow-ink) 72%, transparent);
}

body.motion-ready .hero-title h1 {
  overflow: hidden;
  perspective: 900px;
}

body.motion-ready .motion-char {
  display: inline-block;
}

body.motion-ready .composer {
  transition: border-color .24s ease, box-shadow .32s ease, background-color .24s ease;
}

body.motion-ready .composer:focus-within {
  border-color: color-mix(in srgb, var(--ff-line-strong) 18%, transparent);
  box-shadow: 0 32px 86px color-mix(in srgb, var(--ff-shadow-ink) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--ff-shadow-ink) 68%, transparent);
}

body.motion-ready .showcase-track {
  scroll-snap-type: x proximity;
  scroll-padding-inline: clamp(18px, 4vw, 70px);
}

body.motion-ready .showcase-track.dragging {
  scroll-snap-type: none;
}

body.motion-ready .showcase-card {
  scroll-snap-align: center;
  transform: translate3d(0, var(--motion-y, 0), 0) rotateY(var(--tilt, 0deg)) scale(var(--scale, .92));
  opacity: var(--motion-opacity, var(--opacity, .72));
  box-shadow: 0 20px 50px color-mix(in srgb, var(--ff-shadow-ink) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ff-shadow-ink) 16%, transparent);
}

body.motion-ready .showcase-card:hover,
body.motion-ready .showcase-card:focus-visible {
  transform: translate3d(0, calc(var(--motion-y, 0px) - 4px), 0) rotateY(var(--tilt, 0deg)) scale(calc(var(--scale, .92) + .035));
}

body.motion-ready .showcase-arrow {
  border: 1px solid color-mix(in srgb, var(--ff-line) 22%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ff-shadow-ink) 14%, transparent);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.motion-ready .showcase-arrow:hover,
body.motion-ready .showcase-arrow:focus-visible {
  border-color: color-mix(in srgb, var(--ff-line) 50%, transparent);
  background: color-mix(in srgb, var(--ff-surface) 24%, transparent);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--ff-shadow-ink) 20%, transparent);
}

body.motion-ready .template-library {
  box-shadow: 0 24px 56px color-mix(in srgb, var(--ff-shadow-ink) 7.5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ff-shadow-ink) 72%, transparent);
}

body.motion-ready .template-card {
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease, background-color .2s ease;
}

body.motion-ready .template-card:hover,
body.motion-ready .template-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--ff-shadow-ink) 11%, transparent);
}

body.motion-ready .creator-thumb {
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), box-shadow .42s cubic-bezier(.2, .8, .2, 1);
}

body.motion-ready .creator-card:hover .creator-thumb,
body.motion-ready .creator-card:focus-visible .creator-thumb {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--ff-shadow-ink) 16%, transparent);
}

body.motion-ready .nav button,
body.motion-ready .history-card,
body.motion-ready .chip,
body.motion-ready .round,
body.motion-ready .primary,
body.motion-ready .ghost {
  transition-duration: .22s;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}

body.motion-ready button:focus-visible,
body.motion-ready [role="button"]:focus-visible {
  outline: 2px solid rgba(28, 103, 255, .76);
  outline-offset: 3px;
}

body.motion-ready .menu-dialog.anchored {
  animation: none;
}

body.motion-ready .video-dialog::backdrop {
  animation: motionBackdropIn .3s ease-out both;
}

@keyframes motionBackdropIn {
  from { background: transparent; }
  to { background: rgba(8, 9, 12, .86); }
}

@media (max-width: 960px) {
  body.motion-ready .topbar.is-scrolled {
    backdrop-filter: blur(16px) saturate(1.15);
  }

  body.motion-ready .showcase-card,
  body.motion-ready .showcase-card:hover,
  body.motion-ready .showcase-card:focus-visible {
    transform: translate3d(0, var(--motion-y, 0), 0) scale(var(--scale, .96));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.motion-ready .topbar,
  body.motion-ready .composer,
  body.motion-ready .showcase-card,
  body.motion-ready .showcase-arrow,
  body.motion-ready .template-card,
  body.motion-ready .creator-thumb,
  body.motion-ready .nav button,
  body.motion-ready .history-card,
  body.motion-ready .chip,
  body.motion-ready .round,
  body.motion-ready .primary,
  body.motion-ready .ghost {
    transition-duration: .01ms !important;
  }

  body.motion-ready .video-dialog::backdrop {
    animation: none;
  }
}