/* BEAM premium motion layer. Loaded after styles.css; changes motion only, not layout/colour.
   Uses transform/opacity and the individual `translate`/`scale` properties so reveal, hover and tilt never fight. */
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* ---- layered scroll reveal (keeps the existing .rv / .in system) ---- */
.rv,.rv.in{transform:none}
.rv{opacity:0;translate:0 28px;scale:.98;
 transition:opacity 1s var(--ease) var(--d,0ms),translate 1s var(--ease) var(--d,0ms),scale 1s var(--ease) var(--d,0ms),transform .45s var(--ease),box-shadow .4s ease}
.rv.in{opacity:1;translate:none;scale:1}
.card.rv.in:hover{transform:translate3d(0,-4px,0)}

/* text + remaining blocks (class added by motion.js) */
.mv{opacity:0;translate:0 20px;transition:opacity .9s var(--ease) var(--d,0ms),translate .9s var(--ease) var(--d,0ms)}
.mv.in{opacity:1;translate:none}
.mv.card{transition:opacity .9s var(--ease) var(--d,0ms),translate .9s var(--ease) var(--d,0ms),transform .45s var(--ease),box-shadow .4s ease}

/* ---- hero: staggered entrance + depth layers ---- */
.cover{position:relative;overflow:hidden}
.cover::before{content:"";position:absolute;inset:-18%;pointer-events:none;translate:var(--bx,0px) var(--by,0px);will-change:transform;
 background:radial-gradient(circle at 24% 62%,rgba(52,72,210,.20),transparent 44%),radial-gradient(circle at 76% 30%,rgba(190,96,124,.13),transparent 44%),radial-gradient(circle at 52% 46%,rgba(110,40,170,.13),transparent 40%);
 animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(2.5%,-2%,0) scale(1.06)}}
.cover>.wrap{position:relative;z-index:1;will-change:transform}
.cover>.wrap>*,.cover>.wrap>*:nth-child(n+3),.cover>.wrap>*:nth-child(n+6){animation:heroIn 1.2s var(--ease) both;animation-delay:calc(var(--i,0)*110ms + 140ms)}
@keyframes heroIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

/* ---- buttons: lift + soft highlight sweep ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .25s,color .25s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translate3d(-130%,0,0);
 background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);transition:transform .9s var(--ease)}
.btn:hover::after{transform:translate3d(130%,0,0)}
.btn.pressed,.btn:active{transform:scale(.975)}
.card.pressed{transform:scale(.985) translate3d(0,1px,0)}

/* ---- touch ring ---- */
.touch-ring{position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;z-index:200;
 border:1.5px solid rgba(242,82,0,.5);background:rgba(251,178,0,.1);opacity:0;animation:ring .85s var(--ease) forwards}
@keyframes ring{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.55)}}

/* ---- reduced motion: everything visible, no decorative motion ---- */
@media (prefers-reduced-motion:reduce){
 .rv,.mv{opacity:1;translate:none;scale:1;transition:none}
 .cover>.wrap>*{animation:none}.cover::before{animation:none}.btn::after,.touch-ring{display:none}
}

/* ---- first page colour theme: matched to the BEAM reference artwork ----
   base navy #0c1a4b -> #030c2b, blue glow bottom-left, violet glow behind the logo, warm mauve/brown glow on the right */
.cover{background:
 radial-gradient(ellipse 42% 46% at 100% 4%,rgba(78,60,76,.95),transparent 72%),
 radial-gradient(ellipse 34% 26% at 100% 64%,rgba(84,58,50,.85),transparent 72%),
 radial-gradient(ellipse 44% 38% at 0% 70%,rgba(30,56,142,.95),transparent 72%),
 radial-gradient(ellipse 46% 26% at 45% 40%,rgba(66,24,98,.8),transparent 72%),
 linear-gradient(180deg,#0c1a4b 0%,#0a1745 38%,#050f33 72%,#030c2b 100%)}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;animation:fxIn 2.4s ease .3s both}
@keyframes fxIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-fx{display:none}}