/* ============================================================
   Motion layer — shared, tasteful, GPU-cheap, a11y-safe.
   Loaded AFTER styles.css, BEFORE each page's inline <style>.
   Opt-in via classes: .tilt .glow .bezel .uline .shimmer
   ============================================================ */

@property --bza{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---- cursor gold glow (desktop only; element injected by motion.js) ---- */
#cursorGlow{
  position:fixed;top:0;left:0;width:320px;height:320px;border-radius:50%;
  pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(201,169,97,.22),rgba(201,169,97,.06) 42%,transparent 66%);
  mix-blend-mode:screen;transition:opacity .3s ease;will-change:transform,opacity}
#cursorGlow.on{opacity:1}

/* ---- 3D tilt + pop (JS sets the transform on desktop) ---- */
.tilt{transition:transform .4s cubic-bezier(.19,1,.22,1),box-shadow .4s ease;
  transform-style:preserve-3d;will-change:transform}
@media (hover:hover) and (pointer:fine){
  .tilt:hover{box-shadow:0 36px 70px -28px rgba(0,0,0,.72)}
  .tilt:hover .wc-bg{opacity:.76!important;filter:brightness(1.13) saturate(1.07);transform:scale(1.05)}
  .tilt .wc-bg{transition:opacity .4s ease,filter .4s ease,transform .6s cubic-bezier(.19,1,.22,1)}
}

/* ---- rotating brass bezel around a card/image (desktop hover) ---- */
.bezel{position:relative}
.bezel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;z-index:6;
  background:conic-gradient(from var(--bza),
    transparent 0deg,transparent 52deg,
    rgba(201,169,97,.85) 108deg,#F4E7C2 134deg,rgba(201,169,97,.85) 160deg,
    transparent 216deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .45s ease}
@media (hover:hover) and (pointer:fine){
  .bezel:hover::after{opacity:1;animation:bezelspin 2.6s linear infinite}
}
@keyframes bezelspin{from{--bza:0deg}to{--bza:360deg}}

/* ---- animated underline that draws on scroll-in (all devices) ---- */
.uline{position:relative;display:inline-block}
.uline::after{content:"";position:absolute;left:0;bottom:-.14em;height:2px;width:100%;
  background:linear-gradient(90deg,var(--brass),rgba(201,169,97,.15));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.19,1,.22,1) .1s}
.uline.drawn::after{transform:scaleX(1)}

/* ---- one-time gold glow bloom over brass words on reveal ---- */
.shimmer.lit{animation:goldbloom 1.5s ease .15s 1}
@keyframes goldbloom{
  0%{text-shadow:0 0 0 rgba(246,234,198,0)}
  35%{text-shadow:0 0 20px rgba(246,234,198,.6)}
  100%{text-shadow:0 0 0 rgba(246,234,198,0)}}

/* ---- mobile press feedback (no hover) ---- */
@media (hover:none){
  .tilt:active{transform:scale(.985)!important;transition:transform .12s ease}
}

/* ---- reduced-motion: strip all of it ---- */
@media (prefers-reduced-motion:reduce){
  #cursorGlow{display:none!important}
  .tilt,.tilt:hover{transform:none!important;box-shadow:none!important}
  .tilt:hover .wc-bg{transform:none!important;filter:none!important}
  .bezel::after{display:none!important}
  .uline::after{transition:none;transform:scaleX(1)}
  .shimmer.lit{animation:none}
}