/* live.css - extra motion layer for the homepage. Everything is progressive:
   the page is fully usable without it, and prefers-reduced-motion switches it off. */

/* scroll progress bar */
.lv-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;background:var(--gold);transform:scaleX(0);transform-origin:left center;pointer-events:none;}
[dir="rtl"] .lv-progress{transform-origin:right center;}

/* header shrinks a little once you scroll */
.nav-wrap{transition:padding .3s ease;}
header.lv-scrolled .nav-wrap{padding-top:10px;padding-bottom:10px;}
header.lv-scrolled{box-shadow:0 8px 24px rgba(0,0,0,.28);}

/* hero: pointer glow + particles */
.lv-hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,70%) var(--my,35%), rgba(212,175,55,.13), transparent 65%);
  transition:background-position .2s ease;}
.lv-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
.globe-holder{transition:transform .25s ease-out;will-change:transform;}

/* rotating role line */
.lv-roles{margin-top:22px;font-size:14.5px;color:var(--muted);min-height:1.7em;}
.lv-roles b{font-family:'Fraunces',serif;font-weight:500;font-size:17px;color:var(--ink);}
.lv-caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-2px;background:var(--gold);animation:lvblink 1s steps(1) infinite;}
@keyframes lvblink{50%{opacity:0;}}
.lv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:9px;vertical-align:1px;box-shadow:0 0 0 0 rgba(124,163,126,.6);animation:lvping 2s infinite;}
@keyframes lvping{70%{box-shadow:0 0 0 9px rgba(124,163,126,0);}100%{box-shadow:0 0 0 0 rgba(124,163,126,0);}}

/* scroll reveal (class is added by JS, so no-JS visitors see everything) */
.lv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--lvd,0s);}
.lv.lv-in{opacity:1;transform:none;}

/* card spotlight that follows the pointer */
.choice,.cc-col{position:relative;}
.lv-spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(212,175,55,.10), transparent 70%);}
.lv-spot:hover::after{opacity:1;}

/* button sheen */
.btn:not(.ghost){position:relative;overflow:hidden;}
.btn:not(.ghost)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;}
.btn:not(.ghost):hover::after{left:130%;}

/* marquee pauses on hover */
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}

@media (prefers-reduced-motion:reduce){
  .lv{opacity:1;transform:none;transition:none;}
  .lv-caret,.lv-dot{animation:none;}
  .lv-canvas,.lv-hero-glow{display:none;}
  .btn:not(.ghost)::after{display:none;}
}