/* ============================================================================
   Orvyn360 canonical UI kit — orvyn-motion.css (v2, 2026-07-20)
   ----------------------------------------------------------------------------
   Micro-interaction kit. Composited properties only (transform / opacity).
   EVERY rule lives inside @media (prefers-reduced-motion: no-preference) and
   is additionally gated off when <html data-orvyn-motion="reduced">.
   JS helpers (reveal, countup, ripple) live in orvyn-motion.js.
   ============================================================================ */

/* Base states outside the gate: everything is visible and static, so content
   never depends on JS or motion preferences to appear. */
.om-sheen { position: relative; overflow: hidden; }
.om-ripple { position: relative; overflow: hidden; }
.om-pulse-dot { position: relative; }
.om-shimmer {
  background: linear-gradient(100deg,
    var(--orvyn-raised, #FBFCFD) 40%,
    var(--orvyn-border, #E3E8ED) 50%,
    var(--orvyn-raised, #FBFCFD) 60%);
  background-size: 240% 100%;
  border-radius: 8px;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  /* —— hover lift —— */
  html:not([data-orvyn-motion="reduced"]) .om-lift {
    transition: transform .18s ease, box-shadow .22s ease;
  }
  html:not([data-orvyn-motion="reduced"]) .om-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--orvyn-shadow-2);
  }

  /* —— gradient sweep on hover —— */
  html:not([data-orvyn-motion="reduced"]) .om-sheen::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
    transform: translateX(-130%) skewX(-14deg);
    opacity: 0;
    transition: transform .01s step-end, opacity .01s step-end;
  }
  html[data-orvyn-mode="dark"]:not([data-orvyn-motion="reduced"]) .om-sheen::after {
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .07) 50%, transparent 62%);
  }
  html:not([data-orvyn-motion="reduced"]) .om-sheen:hover::after {
    transform: translateX(130%) skewX(-14deg);
    opacity: 1;
    transition: transform .8s ease, opacity .2s ease;
  }

  /* —— press —— */
  html:not([data-orvyn-motion="reduced"]) .om-press { transition: transform .1s ease; }
  html:not([data-orvyn-motion="reduced"]) .om-press:active { transform: scale(.985); }

  /* —— entrance —— */
  html:not([data-orvyn-motion="reduced"]) .om-pop-in {
    animation: om-pop-in .34s cubic-bezier(.2, .8, .3, 1) both;
  }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > * {
    animation: om-pop-in .38s cubic-bezier(.2, .8, .3, 1) both;
  }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(1) { animation-delay: 0ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(2) { animation-delay: 45ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(3) { animation-delay: 90ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(4) { animation-delay: 135ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(5) { animation-delay: 180ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(6) { animation-delay: 225ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(7) { animation-delay: 270ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(8) { animation-delay: 315ms; }
  html:not([data-orvyn-motion="reduced"]) .om-stagger > *:nth-child(n+9) { animation-delay: 360ms; }

  /* —— scroll reveal (IntersectionObserver adds .om-in once) ——
     Hidden start state only applies once OrvynMotion.init has run
     (html.om-ready), so content never disappears without JS. */
  html.om-ready:not([data-orvyn-motion="reduced"]) [data-om-reveal]:not(.om-in) {
    opacity: 0;
    transform: translateY(14px);
  }
  html.om-ready:not([data-orvyn-motion="reduced"]) [data-om-reveal].om-in {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .3, 1);
  }

  /* —— pointerdown ripple (waves spawned by orvyn-motion.js) —— */
  html:not([data-orvyn-motion="reduced"]) .om-ripple__wave {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    pointer-events: none;
    background: currentColor;
    opacity: .22;
    transform: translate(-50%, -50%) scale(1);
    animation: om-ripple .5s ease-out forwards;
  }

  /* —— live dot pulse —— */
  html:not([data-orvyn-motion="reduced"]) .om-pulse-dot::after {
    content: "";
    position: absolute; inset: -3px;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: 0;
    animation: om-pulse 2.2s ease-out infinite;
  }

  /* —— skeleton shimmer —— */
  html:not([data-orvyn-motion="reduced"]) .om-shimmer {
    animation: om-shimmer 1.4s linear infinite;
  }

  @keyframes om-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
  @keyframes om-ripple {
    to { transform: translate(-50%, -50%) scale(22); opacity: 0; }
  }
  @keyframes om-pulse {
    0% { opacity: .5; transform: scale(.6); }
    70% { opacity: 0; transform: scale(1.6); }
    100% { opacity: 0; transform: scale(1.6); }
  }
  @keyframes om-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
  }
}