@layer motion {
  @supports (view-transition-name: none) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  }
  .reveal-up { opacity: 1; transform: none; }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .js .reveal-up { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
    .js .reveal-up.is-visible { opacity: 1; transform: translateY(0); }
  }
  @media (pointer: fine) {
    .feature-card:hover { transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-4px); border-color: var(--line-strong); }
    .magnetic { will-change: transform; }
  }
  .upload-zone.is-dragging { border-color: var(--teal); box-shadow: 0 0 0 5px rgba(94,199,183,.12), var(--shadow); }
  .is-loading { position: relative; overflow: hidden; }
  .is-loading::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: shimmer 1.2s infinite; }
  @keyframes shimmer { to { transform: translateX(100%); } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
    .reveal-up, .js .reveal-up { opacity: 1; transform: none; }
  }
}