/* Red Grove Health — motion layer. Loaded after the page's own styles and mobile.css.
   Effects are opt-in per element via data-mo-* attributes set by motion.js. */

@keyframes moWord { from { transform: translateY(105%) rotate(2deg); } to { transform: none; } }
@keyframes moRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes moPop { 0% { transform: scale(.86); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: none; opacity: 1; } }
@keyframes moSheenSweep { from { transform: translateX(-120%) skewX(-16deg); } to { transform: translateX(320%) skewX(-16deg); } }
@keyframes moFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes moRingSpin { to { transform: rotate(360deg); } }

/* ---------- headline word reveal ---------- */
[data-mo-line] { display: block; overflow: hidden; }
[data-mo-word] { display: inline-block; will-change: transform; }
[data-mo-armed]:not([data-mo-in]) [data-mo-word] { transform: translateY(105%); }
[data-mo-line] { padding-bottom: 0.06em; }
[data-mo-in] [data-mo-word] { animation: moWord 820ms cubic-bezier(.19,.9,.28,1) both; }

/* ---------- image wipe + parallax ---------- */
[data-mo-wipe] { transition: clip-path 1000ms cubic-bezier(.22,.61,.36,1); }
[data-mo-wipe][data-mo-armed]:not([data-mo-in]) { clip-path: inset(0 0 100% 0); }
[data-mo-wipe][data-mo-in] { clip-path: inset(0 0 0 0); }
[data-mo-par] { will-change: transform; }

/* ---------- buttons: quiet hover ---------- */
[data-mo-btn] { transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease; }
[data-mo-btn]:hover { opacity: 0.92; }
[data-mo-btn]:active { opacity: 1; }

/* ---------- cards: cursor sheen + edge lift ---------- */
[data-mo-card] { position: relative; }
[data-mo-card]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(149,171,129,0.20), rgba(149,171,129,0) 66%);
  opacity: 0; transition: opacity 320ms ease; overflow: hidden;
}
[data-mo-card]:hover::before { opacity: 1; }

/* ---------- link underline ---------- */
[data-mo-link] { position: relative; }
[data-mo-link]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: 0.5;
  transform: scaleX(0); transform-origin: left; transition: transform 200ms ease;
}
[data-mo-link]:hover::after { transform: scaleX(1); }

/* ---------- rules that draw themselves ---------- */
[data-mo-rule] { transform-origin: left; }
[data-mo-rule][data-mo-in] { animation: moRule 700ms cubic-bezier(.22,.61,.36,1) both; }

/* ---------- counters + badges ---------- */
[data-mo-count] { font-variant-numeric: tabular-nums; }
[data-mo-pop][data-mo-in] { animation: moPop 620ms cubic-bezier(.2,1.3,.4,1) both; }
[data-mo-float] { animation: moFloat 6s ease-in-out infinite; }

/* ---------- stat/price card sheen sweep on hover ---------- */
[data-mo-sheen] > [data-mo-sheen-bar] {
  content: ''; position: absolute; top: 0; bottom: 0; width: 55%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-16deg); opacity: 0;
}
[data-mo-sheen]:hover > [data-mo-sheen-bar] { opacity: 1; animation: moSheenSweep 900ms cubic-bezier(.3,.7,.3,1) 1; }

/* ---------- images: slow drift zoom while in view ---------- */
[data-mo-zoomin] image-slot, [data-mo-zoomin] img { transition: transform 1400ms cubic-bezier(.22,.61,.36,1); }
[data-mo-zoomin][data-mo-in] image-slot, [data-mo-zoomin][data-mo-in] img { transform: scale(1.03); }
[data-mo-zoomin]:hover image-slot, [data-mo-zoomin]:hover img { transform: scale(1.07); }

/* ---------- mobile chrome motion ---------- */
#rg-m-cta { transition: transform 320ms cubic-bezier(.22,.61,.36,1); }
#rg-m-cta[data-hide] { transform: translateY(120%); }
#rg-m-burger { transition: transform 260ms cubic-bezier(.19,.9,.28,1), box-shadow 260ms ease; }
#rg-m-burger:active { transform: scale(.94); }
#rg-m-menu a { opacity: 0; transform: translateY(14px); }
#rg-m-menu[data-mo-open] a { animation: moWordIn 520ms cubic-bezier(.19,.9,.28,1) both; }
@keyframes moWordIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#rg-m-menu[data-mo-open] a:nth-child(1) { animation-delay: 40ms; }
#rg-m-menu[data-mo-open] a:nth-child(2) { animation-delay: 80ms; }
#rg-m-menu[data-mo-open] a:nth-child(3) { animation-delay: 120ms; }
#rg-m-menu[data-mo-open] a:nth-child(4) { animation-delay: 160ms; }
#rg-m-menu[data-mo-open] a:nth-child(5) { animation-delay: 200ms; }
#rg-m-menu[data-mo-open] a:nth-child(6) { animation-delay: 240ms; }
#rg-m-menu[data-mo-open] a:nth-child(7) { animation-delay: 280ms; }
#rg-m-menu[data-mo-open] > nav > div a { animation-delay: 320ms; }


@media (hover: none) {
  [data-mo-btn]:hover { opacity: 1; }
  [data-mo-card]:hover::before { opacity: 0; }
  [data-mo-btn]:active { opacity: 0.9; }
}

@media print { [data-mo-word], [data-mo-wipe] { transform: none !important; clip-path: none !important; animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
  [data-mo-word] { transform: none !important; animation: none !important; }
  [data-mo-wipe] { clip-path: none !important; }
  [data-mo-par] { transform: none !important; }
  [data-mo-float], [data-mo-pop], [data-mo-rule] { animation: none !important; }
  [data-mo-zoomin][data-mo-in] image-slot, [data-mo-zoomin][data-mo-in] img { transform: none !important; }
  #rg-m-menu a { opacity: 1 !important; transform: none !important; }
}
