/* JamTyme motion layer — loaded after site.css on the homepage.
   Everything here is additive and only active when motion.js adds .mo to <html>
   (skipped for visitors who prefer reduced motion). Delete the two include
   lines in index.html to remove it entirely. */

/* ---------- hero: ambient glow + pointer spotlight ---------- */
.hero-stage .wrap{position:relative;z-index:1}
.mo-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mo-glow i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.mo-glow .g1{width:46vw;height:46vw;max-width:640px;max-height:640px;left:-8%;top:-30%;background:radial-gradient(circle,rgba(194,243,58,.38),transparent 65%);animation:mo-drift-a 16s ease-in-out infinite alternate}
.mo-glow .g2{width:38vw;height:38vw;max-width:520px;max-height:520px;right:-6%;top:-10%;background:radial-gradient(circle,rgba(238,124,142,.28),transparent 65%);animation:mo-drift-b 20s ease-in-out infinite alternate}
.mo-glow .spot{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(194,243,58,.13),transparent 60%);opacity:0;transition:opacity .5s}
.hero-stage:hover .mo-glow .spot{opacity:1}
@keyframes mo-drift-a{to{transform:translate3d(14vw,8%,0) scale(1.15)}}
@keyframes mo-drift-b{to{transform:translate3d(-12vw,14%,0) scale(1.1)}}

/* ---------- hero: headline mask-reveal ---------- */
.mo .mo-line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mo .mo-line>span{display:inline-block;transform:translate3d(0,110%,0);animation:mo-rise .95s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(180ms + var(--d,0ms))}
@keyframes mo-rise{to{transform:translate3d(0,0,0)}}
.mo .mo-fade{opacity:0;translate:0 14px;animation:mo-fade .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes mo-fade{to{opacity:1;translate:0 0}}

/* ---------- marquee ---------- */
.mo-marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);padding:18px 0;margin:6px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mo-track{display:flex;width:max-content;animation:mo-scroll 46s linear infinite;will-change:transform}
.mo-marquee:hover .mo-track{animation-play-state:paused}
.mo-track span{font-family:"Anton",sans-serif;font-size:clamp(34px,5vw,58px);line-height:1;text-transform:uppercase;letter-spacing:.02em;padding:0 22px;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.2px rgba(237,241,230,.38);transition:color .3s,-webkit-text-stroke-color .3s}
.mo-track span:nth-child(3n+1){color:var(--text);-webkit-text-stroke:0}
.mo-track span:nth-child(3n+2){color:var(--amber);-webkit-text-stroke:0}
.mo-track span:hover{color:var(--amber);-webkit-text-stroke-color:var(--amber)}
.mo-track em{align-self:center;width:9px;height:9px;border-radius:50%;background:var(--amber);opacity:.7;flex:none;font-style:normal}
@keyframes mo-scroll{to{transform:translate3d(-50%,0,0)}}

/* ---------- scroll reveal (uses individual transform props so the
   existing .card:hover lift keeps working) ---------- */
.mo .mo-r{opacity:0;translate:0 30px;scale:.985;
  transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms),translate .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms),scale .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms),
             transform .25s,border-color .25s,box-shadow .25s}
.mo .mo-r.in{opacity:1;translate:0 0;scale:1}

/* ---------- cards: slow zoom + pointer spotlight ---------- */
.mo .card .ph img{transition:scale 1.1s cubic-bezier(.2,.8,.2,1)}
.mo .card:hover .ph img{scale:1.07}
.mo-spot{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(194,243,58,.20),transparent 62%)}
.mo .card:hover .mo-spot{opacity:1}

/* ---------- header, logo, progress ---------- */
.mo header.site{transition:box-shadow .3s,border-color .3s}
.mo header.site.mo-scrolled{box-shadow:0 14px 34px -20px rgba(0,0,0,.95);border-bottom-color:var(--line-strong,rgba(237,241,230,.18))}
.mo .brandmark{transition:rotate .5s cubic-bezier(.2,.8,.2,1),scale .5s cubic-bezier(.2,.8,.2,1)}
.mo .logo:hover .brandmark{rotate:-8deg;scale:1.08}
.mo .btn-primary{transition:filter .2s,box-shadow .25s,translate .2s}
.mo .btn-primary:hover{box-shadow:0 0 0 5px rgba(194,243,58,.18),0 10px 28px -10px rgba(194,243,58,.6)}
.mo .btn-primary:active{translate:0 1px}
.mo-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:60;pointer-events:none;opacity:.9}

@media (prefers-reduced-motion:reduce){
  .mo-glow i,.mo-track{animation:none!important}
}
@media (max-width:640px){
  .mo-glow i{filter:blur(50px)}
  .mo-marquee{padding:12px 0}
}

/* ---------- nearby-musicians ticker (logged-in members) ---------- */
.mo-people{padding:12px 0 16px}
.mo-cap{padding:0 clamp(16px,4vw,48px) 10px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mo-thumb{display:flex;flex-direction:column;width:128px;margin:0 9px;flex:none;color:inherit;text-decoration:none}
.mo-ph{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface-2,#171a14);border:1px solid var(--line);transition:border-color .25s,transform .25s}
.mo-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mo-ph b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Anton",sans-serif;font-size:44px;color:var(--amber);font-weight:400}
.mo-thumb:hover .mo-ph{border-color:var(--amber);transform:translateY(-3px)}
.mo-nm{margin-top:8px;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.mo-thumb{width:104px;margin:0 7px}}
/* the word-marquee rules target every span in the track; reset them for thumbnails */
.mo-track .mo-thumb span{font-family:"Instrument Sans",system-ui,sans-serif;font-size:14px;text-transform:none;letter-spacing:0;padding:0;line-height:1.3;-webkit-text-stroke:0;color:var(--text);display:block}
.mo-track .mo-thumb .mo-ph{display:block;color:inherit}
.mo-track .mo-thumb .mo-sub{font-size:12.5px;color:var(--muted)}
.mo-track .mo-thumb .mo-nm{font-weight:600;margin-top:8px}
.mo-track .mo-thumb:hover span{-webkit-text-stroke:0}