/* ==================================================================
   Motion layer, small surfaces
   ------------------------------------------------------------------
   For the hub launcher and the PermaScribe gate. Same behaviour as the
   full layer, minus the chart and toast styles neither page uses, and
   with no dependence on any app's colour variables: the gold here is
   written out, so it cannot silently lose its colour.

   Patterns after KokonutUI (card lift, sheen, press). anime.js drives
   the entrances.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Movement goes, fades stay. */
  *, *::before, *::after {
    animation-name: none !important;
    transition-property: opacity, color, background-color, border-color,
                         box-shadow, fill, stroke !important;
    transition-duration: 140ms !important;
  }
  .motion-on [data-rise] { opacity: 1 !important; }
}

/* Hidden only once the layer is confirmed running. */
.motion-on [data-rise] {
  opacity: 0;
  will-change: transform, opacity;
}

/* Lift, with a faint gold sweep across the card on hover. */
.app-card, .admin-app-card, .card, .auth-card {
  position: relative;
  transition: transform 200ms cubic-bezier(.2,.7,.3,1),
              box-shadow 200ms cubic-bezier(.2,.7,.3,1);
}
.app-card::after, .admin-app-card::after, .card::after, .auth-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%,
    rgba(226, 175, 54, 0.10) 46%, rgba(226, 175, 54, 0.17) 50%,
    rgba(226, 175, 54, 0.10) 54%, transparent 68%);
  background-size: 250% 100%;
  background-position: 100% 0;
  transition: opacity 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .app-card:hover, .admin-app-card:hover, .card:hover, .auth-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(20, 48, 90, .05),
                0 6px 12px rgba(20, 48, 90, .06),
                0 12px 24px rgba(20, 48, 90, .05);
  }
  .app-card:hover::after, .admin-app-card:hover::after,
  .card:hover::after, .auth-card:hover::after {
    opacity: 1;
    animation: motion-sheen 760ms cubic-bezier(.23, 1, .32, 1) forwards;
  }
}

@keyframes motion-sheen {
  from { background-position: 100% 0; }
  to   { background-position: -40% 0; }
}

button, .btn, a.btn {
  transition: transform 90ms cubic-bezier(.2,.7,.3,1),
              box-shadow 150ms ease, background 150ms ease;
}
button:active, .btn:active { transform: scale(0.97); }

button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #E2AF36;
  outline-offset: 2px;
}