/* ══════════════════════════════════════════════════════════════════════
   DTR Motion — vanilla-CSS/JS ports of Magic UI (Framer Motion) effects.
   Zero dependencies. No React. Drives liveliness site-wide via classes +
   data-attributes. Pairs with dtr-motion.js. Fully prefers-reduced-motion
   aware. Gold tokens mirror the site palette (--gold / --gold-light).
   Effects: Blur Fade · Number Ticker · Border Beam · Shimmer · Marquee · Grid BG
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --mui-gold:        var(--gold, #b88723);
  --mui-gold-light:  var(--gold-light, #e0b862);
  --mui-gold-bright: #f7d774;
}

/* ── Blur Fade (Magic UI: blur-fade) ─────────────────────────────────────
   Elements tagged .mui-reveal start hidden+blurred; dtr-motion.js adds
   .mui-in when they scroll into view. JS sets the hidden state so no-JS
   visitors still see everything (progressive enhancement). */
.mui-reveal{
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1),
              filter .8s ease;
  will-change: opacity, transform, filter;
}
.mui-reveal.mui-hidden{ opacity:0; transform: translateY(22px); filter: blur(8px); }
.mui-reveal.mui-in{ opacity:1; transform: none; filter: blur(0); }

/* ── Border Beam (Magic UI: border-beam) ─────────────────────────────────
   A gold light travels around a card's border. Pure CSS via @property +
   conic-gradient masked to a thin ring. On by default at low opacity;
   brightens on hover. */
@property --mui-beam-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.mui-beam{ position:relative; isolation:isolate; }
.mui-beam::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: conic-gradient(from var(--mui-beam-angle),
              transparent 0deg, transparent 300deg,
              var(--mui-gold) 330deg, var(--mui-gold-bright) 345deg, var(--mui-gold) 360deg);
  /* mask to the border ring only */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.55;
  animation: mui-beam-spin 6s linear infinite;
}
.mui-beam:hover::after{ opacity:1; animation-duration:3s; }
@keyframes mui-beam-spin{ to{ --mui-beam-angle:360deg; } }

/* ── Shimmer Button (Magic UI: shimmer/shiny-button) ─────────────────────
   A sheen sweeps across the element. Add .mui-shimmer to any button/CTA. */
.mui-shimmer{ position:relative; overflow:hidden; }
.mui-shimmer::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(110deg, transparent, rgba(255,243,176,.45), transparent);
  transform: skewX(-20deg); pointer-events:none;
  animation: mui-shimmer-sweep 4.5s ease-in-out infinite;
}
@keyframes mui-shimmer-sweep{ 0%{ left:-120%; } 45%,100%{ left:160%; } }

/* ── Marquee (Magic UI: marquee) ─────────────────────────────────────────
   Seamless infinite horizontal scroll. dtr-motion.js clones the children
   once so the loop is gapless. Pauses on hover. */
.mui-marquee{ overflow:hidden; width:100%; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mui-marquee-track{ display:flex; width:max-content; gap:var(--mui-marquee-gap,56px); animation: mui-marquee var(--mui-marquee-speed,32s) linear infinite; }
.mui-marquee:hover .mui-marquee-track{ animation-play-state: paused; }
@keyframes mui-marquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - var(--mui-marquee-gap,56px)/2)); } }

/* ── Animated Grid background (Magic UI: animated-grid-pattern) ───────────
   A faint gold grid drifting behind a hero/section. Add .mui-gridbg to an
   absolutely-positioned layer inside a position:relative parent. */
.mui-gridbg{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(184,135,35,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,135,35,.10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  animation: mui-grid-drift 22s linear infinite;
}
@keyframes mui-grid-drift{ from{ background-position:0 0,0 0; } to{ background-position:46px 46px,46px 46px; } }

/* ── Number Ticker has no base CSS (JS-driven text) ─────────────────────── */

/* ── Accessibility: honour reduced-motion across every effect ──────────── */
@media (prefers-reduced-motion: reduce){
  .mui-reveal, .mui-reveal.mui-hidden{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .mui-beam::after{ animation:none; opacity:.5; }
  .mui-shimmer::before{ animation:none; display:none; }
  .mui-marquee-track{ animation:none; }
  .mui-gridbg{ animation:none; }
}

/* ══ Home liveliness layer — richer reveals, parallax, ambient float ══════
   Makes the home page's existing .rev blocks animate in with more travel, a
   touch of scale, and a blur — so scrolling feels alive instead of static. */
#pg-home .rev{
  transform: translateY(44px) scale(.984);
  filter: blur(7px);
  transition: opacity .9s var(--ease, cubic-bezier(.16,1,.3,1)),
              transform .9s var(--ease, cubic-bezier(.16,1,.3,1)),
              filter .9s ease;
}
#pg-home .rev.on{ transform: none; filter: blur(0); }

/* Directional / scale reveal variants for .mui-reveal */
.mui-reveal[data-reveal="left"].mui-hidden{ transform: translateX(-46px); }
.mui-reveal[data-reveal="right"].mui-hidden{ transform: translateX(46px); }
.mui-reveal[data-reveal="scale"].mui-hidden{ transform: scale(.9); }
.mui-reveal[data-reveal="up-strong"].mui-hidden{ transform: translateY(50px); }

/* Parallax targets get a GPU hint; dtr-motion.js sets the transform on scroll. */
[data-parallax]{ will-change: transform; }

@media (prefers-reduced-motion: reduce){
  #pg-home .rev{ transform:none !important; filter:none !important; transition:none !important; }
  .mui-reveal[data-reveal].mui-hidden{ transform:none !important; }
  [data-parallax]{ transform:none !important; }
}