/* =====================================================================
   RezSoulution motion layer
   ===================================================================== */

/* ---------- Living aurora behind every page ---------- */
.aurora-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora-bg i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(80px);opacity:.22;mix-blend-mode:screen;animation:float 26s ease-in-out infinite alternate}
.aurora-bg i:nth-child(1){left:-20vmax;top:-30vmax;background:radial-gradient(circle,#1e8bff,transparent 65%)}
.aurora-bg i:nth-child(2){right:-25vmax;top:-10vmax;background:radial-gradient(circle,#46d1c8,transparent 65%);animation-duration:32s;animation-delay:-8s}
.aurora-bg i:nth-child(3){left:20vmax;bottom:-45vmax;background:radial-gradient(circle,#7b5cff,transparent 65%);opacity:.14;animation-duration:38s}
@keyframes float{50%{transform:translate(6vmax,4vmax) scale(1.1)}100%{transform:translate(-4vmax,8vmax) scale(.95)}}

/* ---------- Scroll reveal ---------- */
.js-motion .reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.js-motion .reveal.is-in{opacity:1;transform:none}

/* ---------- Shimmering headline text ---------- */
.shine{background:linear-gradient(100deg,#fff 0%,#5fb0ff 30%,#ffc400 50%,#5fb0ff 70%,#fff 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
.map-intro h1 span{background-size:220% 100%;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.kicker{display:inline-block;font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2);margin:0 0 10px;
  padding:5px 12px;border-radius:999px;background:rgba(30,139,255,.14);border:1px solid rgba(30,139,255,.35)}

/* ---------- Beadwork that moves ---------- */
.beadline{animation:beadslide 18s linear infinite}
@keyframes beadslide{to{background-position:220px 0, 231px 0, 330px 0, 363px 0}}

/* ---------- Card tilt with a light that follows the pointer ---------- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .25s ease, border-color .3s;transform-style:preserve-3d;position:relative}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.12), transparent 40%)}
.tilt:hover::before{opacity:1}
.js-motion .reveal.is-in.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}

/* ---------- Buttons ---------- */
.btn{transition:transform .2s, background .2s, box-shadow .2s, translate .25s cubic-bezier(.2,.8,.2,1)}
.btn-big{position:relative;overflow:hidden}
.btn-big::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 4.5s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(120%)}}
.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.18);color:var(--yellow)}}

/* ---------- Page fade between pages ---------- */
body{transition:opacity .25s ease}
body.is-leaving main{opacity:.35;transform:translateY(6px);transition:opacity .25s, transform .25s}

/* ---------- Map glow pulse ---------- */
.map-stage::after{content:"";position:absolute;inset:10% 15%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side, rgba(30,139,255,.25), transparent);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.6}}

/* ---------- Wizard step slides ---------- */
.step.in-right{animation:inR .5s cubic-bezier(.16,1,.3,1)}
.step.in-left{animation:inL .5s cubic-bezier(.16,1,.3,1)}
@keyframes inR{from{opacity:0;transform:translateX(40px)}}
@keyframes inL{from{opacity:0;transform:translateX(-40px)}}
.step.shake{animation:shake .4s}

@media (prefers-reduced-motion:reduce){
  .aurora-bg i,.shine,.beadline,.btn-big::after,.map-stage::after,.map-intro h1 span{animation:none!important}
  .js-motion .reveal{opacity:1;transform:none}
}