/* Mabon motion and polish: shared by every page. The page content stays in mabon.js and the page files;
   this adds page transitions, a sticky header, hover and press states, and the moving parts. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-tap-highlight-color: transparent; }
@media (max-width: 640px) { html { scroll-padding-top: 160px; } }
::selection { background: #7A2E25; color: #F2ECDF; }

/* the header stays in reach, and settles a shadow once the page moves */
[data-page] header, body > header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(232, 223, 204, 0.86);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.mb-scrolled [data-page] header, .mb-scrolled body > header { box-shadow: 0 10px 30px -18px rgba(42, 35, 28, 0.45); background: rgba(232, 223, 204, 0.94); }

/* hover and press */
[data-page] a, [data-page] button, body a, body button { transition: color 0.2s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease, transform 0.2s cubic-bezier(.2, .7, .2, 1), box-shadow 0.25s ease; }
[data-page] button:not([aria-pressed]):hover, [data-page] a[style*="min-height"]:hover, body button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(42, 35, 28, 0.6); }
[data-page] button:active, body button:active, [data-page] a[style*="min-height"]:active { transform: translateY(0) scale(0.98); box-shadow: none; }
[data-page] button[aria-pressed]:hover { transform: scale(1.06); }
[data-page] nav a:hover, footer a:hover { opacity: 0.7; }
[data-page] :focus-visible, body :focus-visible { outline: 2px solid #7A2E25; outline-offset: 3px; }
[data-page] section:first-of-type :focus-visible { outline-color: #F2ECDF; }
[data-page] input, [data-page] textarea, body input, body textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
[data-page] input:focus, [data-page] textarea:focus, body input:focus, body textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(122, 46, 37, 0.28); }

/* pictures lean in under the pointer */
[data-page] a img { transition: transform 0.9s cubic-bezier(.2, .7, .2, 1); }
[data-page] a:hover img { transform: scale(1.04); }

/* the hero watch: a slow breath, and it follows the pointer a little */
.mb-float { transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0) rotate(calc(var(--px, 0) * -1.2deg)); transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.mb-bob { animation: mb-bob 7s ease-in-out infinite; }
@keyframes mb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.mb-hero-img { transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1); }

/* things that appear on a click: messages, answers, the next step of registering */
[data-page] [role="status"], [data-page] [role="alert"], [data-page] #faq p, [data-page] form, [data-page] iframe { animation: mb-in 0.5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the 3D stage */
.mb-stage { position: relative; overflow: hidden; background: radial-gradient(130% 95% at 50% 28%, #FAF8F5 0%, #D6CFC5 100%); }
.mb-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .mb-float, .mb-bob { transform: none !important; animation: none !important; }
  [data-page] *, body * { animation: none !important; transition: none !important; }
}