/* Motion layer, 12 Oct 2026. MagicUI style effects rebuilt in plain CSS and JS for this static site.
   Additive like the revamp layers: own prefix mx-, removes no rule, never touches .rv, .in, video or
   #hdr.scrolled. Rollback is deleting the two lines that reference motion.css and motion.js. */

/* 1. Page transitions. The browser cross fades between pages of this site (Chrome, Edge, Safari).
      Both the page left and the page opened must carry this rule; browsers without it ignore it. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mx-leave .2s ease both; }
::view-transition-new(root) { animation: mx-enter .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mx-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes mx-enter { from { opacity: 0; transform: translateY(16px); } }

/* 2. Shimmer button. A band of light crosses the gold buttons every few seconds. */
.mx-btn { position: relative; overflow: hidden; isolation: isolate; }
.mx-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: mx-shine 4.2s ease-in-out infinite;
}
.mx-btn:hover .mx-shine { animation-duration: 1.4s; }
@keyframes mx-shine { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn:active { transform: scale(.97); }

/* 3. Border beam. A point of gold light travels round the edge of a card. */
@property --mx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.mx-beam { position: relative; }
.mx-beam-ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--mx-angle), transparent 0 78%, #D4B98A 88%, #fff 92%, #D4B98A 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mx-turn 7s linear infinite;
}
@keyframes mx-turn { to { --mx-angle: 360deg; } }

/* 4. Spotlight card. A soft gold light follows the pointer across a card. */
.mx-card { position: relative; }
.mx-spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(240px circle at var(--mx-x, 50%) var(--mx-y, 50%), rgba(212, 185, 138, .20), transparent 70%);
  transition: opacity .35s ease;
}
.mx-lit:hover .mx-spot { opacity: 1; }

/* 5. Blur fade headings. Each word of a section heading settles in as it scrolls into view. */
.mx-word { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.35em); transition: opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--mx-i, 0) * 70ms); }
.mx-on .mx-word { opacity: 1; filter: none; transform: none; }

/* 6. Shiny text. A glint passes across the small gold labels above headings. */
.mx-shiny {
  background: linear-gradient(110deg, currentColor 40%, #fff 50%, currentColor 60%) 0 0 / 250% 100% no-repeat, currentColor;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: mx-glint 5s ease-in-out infinite;
}
@keyframes mx-glint { 0%, 55% { background-position: 130% 0, 0 0; } 100% { background-position: -130% 0, 0 0; } }

/* 7. Menu links. The underline draws in from the left on hover. */
.nav-links a:not(.home) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s ease; }
.nav-links a:not(.home):hover { background-size: 100% 1px; }

/* Anyone who asked their device for less motion gets a still page with everything visible. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .mx-shine, .mx-beam-ring { display: none; }
  .mx-shiny { animation: none; background: none; -webkit-text-fill-color: currentColor; }
  .mx-word { opacity: 1; filter: none; transform: none; transition: none; }
  .mx-spot { display: none; }
}