/* Scanline Aerials motion layer (Oct 27, 2026). Loaded on every public page.
   Everything here is switched off for visitors who ask for reduced motion. */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-accent:#2F6FED;--m-accent2:#4C86FF}

/* ---- Scroll progress bar ---- */
.m-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1000;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--m-accent),var(--m-accent2),#8FB4FF);box-shadow:0 0 12px rgba(76,134,255,.6);pointer-events:none}

/* ---- Hero: slow zoom + parallax photo layer, staggered entrance ---- */
.m-hero{position:relative;overflow:hidden;isolation:isolate}
.m-hero-bg{position:absolute;inset:-6% 0;background-size:cover;background-position:center;z-index:-1;
  transform:scale(1.14);animation:mKen 2.6s var(--m-ease) forwards;will-change:transform}
@keyframes mKen{from{transform:scale(1.14)}to{transform:scale(1.04)}}
.m-hero .scrim{z-index:0}
.m-hero > *:not(.m-hero-bg):not(.scrim):not(.m-scroll-cue){position:relative;z-index:1}
.m-enter{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--m-ease),transform .9s var(--m-ease),filter .9s var(--m-ease)}
.m-ready .m-enter{opacity:1;transform:none;filter:none}
.m-word{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);transition:opacity .7s var(--m-ease),transform .7s var(--m-ease)}
.m-ready .m-word,.m-in .m-word{opacity:1;transform:none}
.m-scroll-cue{position:absolute;left:50%;bottom:1.4rem;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(242,245,250,.6);border-radius:14px;z-index:2;opacity:0;transition:opacity .6s}
.m-ready .m-scroll-cue{opacity:1}
.m-scroll-cue::after{content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:mCue 1.8s ease-in-out infinite}
@keyframes mCue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}80%{opacity:0;transform:translateY(14px)}100%{opacity:0}}
.m-scrolled .m-scroll-cue{opacity:0}

/* ---- Reveal on scroll (area pages + extra elements) ---- */
.m-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--m-ease),transform .8s var(--m-ease);transition-delay:var(--m-d,0ms)}
.m-reveal.m-in{opacity:1;transform:none}
.reveal{transition-delay:var(--m-d,0ms)}
/* image wipe + settle */
.m-img{overflow:hidden}
.m-img img{transform:scale(1.12);transition:transform 1.4s var(--m-ease),filter 1.4s var(--m-ease);filter:saturate(.7) brightness(.85)}
.m-img.m-in img{transform:scale(1);filter:none}
/* kicker line */
.kicker{position:relative}
.m-kicker-line::after{content:'';display:block;height:1px;width:0;margin-top:.55rem;background:linear-gradient(90deg,var(--m-accent2),transparent);transition:width 1.1s var(--m-ease) .2s}
.m-kicker-line.m-in::after,.in .m-kicker-line::after,.m-kicker-line.in::after{width:3.2rem}

/* ---- Hover: cards, steps, prices, points ---- */
.step,.card,.price-card,.portfolio-item,.point{--mx:50%;--my:50%}
.step{transition:transform .45s var(--m-ease),border-color .45s var(--m-ease),box-shadow .45s var(--m-ease)}
.step:hover{transform:translateY(-6px);border-color:var(--m-accent);box-shadow:0 18px 40px -18px rgba(47,111,237,.55)}
.step-figure{overflow:hidden}
.step-figure img{transition:transform .9s var(--m-ease)}
.step:hover .step-figure img{transform:scale(1.07)}
.m-spot{position:relative;isolation:isolate}
.m-spot::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(76,134,255,.16),transparent 45%);z-index:-1}
.m-spot:hover::before{opacity:1}
.card:hover,.price-card:hover{box-shadow:0 18px 44px -20px rgba(47,111,237,.55)}
.card svg{transition:transform .5s var(--m-ease),color .3s}
.card:hover svg{transform:translateY(-3px) scale(1.12) rotate(-6deg);color:var(--m-accent2)}
.point{transition:transform .4s var(--m-ease),border-color .4s}
.point:hover{transform:translateX(6px);border-left-color:var(--m-accent2)}
.price-card .price{transition:transform .4s var(--m-ease)}
.price-card:hover .price{transform:scale(1.05);transform-origin:left center}
.price-card.featured{animation:mFloat 6s ease-in-out infinite}
@keyframes mFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.price-badge{background-size:220% 100%!important;background-image:linear-gradient(110deg,var(--m-accent) 40%,#9DBDFF 50%,var(--m-accent) 60%)!important;animation:mShine 3.2s linear infinite}
@keyframes mShine{from{background-position:120% 0}to{background-position:-120% 0}}
.portfolio-item img{transition:transform .8s var(--m-ease)}
.portfolio-item:hover img{transform:scale(1.06)}

/* ---- Buttons: shine sweep + press ---- */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .7s var(--m-ease);pointer-events:none}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(0) scale(.97)!important}
.btn-primary{box-shadow:0 0 0 0 rgba(47,111,237,.0);transition:background .25s,transform .25s,box-shadow .35s}
.btn-primary:hover{box-shadow:0 10px 28px -8px rgba(47,111,237,.75)}

/* ---- Nav links underline ---- */
.nav-links a{position:relative}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--m-accent2);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--m-ease)}
.nav-links a:hover::after,.nav-links a.m-active::after{transform:scaleX(1);transform-origin:left}
.nav-links a.m-active{color:var(--text-primary,#F2F5FA)}
.brand img{transition:transform .8s var(--m-ease)}
.brand:hover img{transform:rotate(-12deg) scale(1.08)}

/* ---- Chips, area links, social, FAQ ---- */
.area-links a,.chips li,.portfolio-tab,.slot-chip{transition:transform .3s var(--m-ease),border-color .3s,background .3s,color .3s}
.chips li:hover,.area-links a:hover{transform:translateY(-3px);background:rgba(76,134,255,.12)}
.faq-item,.faq-list details{transition:background .3s}
.faq-item:hover,.faq-list details:hover{background:rgba(76,134,255,.05)}
.faq-q .plus{transition:transform .45s var(--m-ease)}
.faq-item[data-open="true"] .plus{transform:rotate(135deg)}
.offer-note{animation:mGlow 3.5s ease-in-out infinite}
@keyframes mGlow{0%,100%{box-shadow:0 0 0 0 rgba(76,134,255,0)}50%{box-shadow:0 0 0 6px rgba(76,134,255,.12)}}
.social-follow svg{transition:transform .4s var(--m-ease)}
.social-follow:hover svg{transform:scale(1.2) rotate(-8deg)}
.footer-col a{transition:color .25s,padding-left .3s var(--m-ease)}
.footer-col a:hover{padding-left:4px}

/* ---- Back to top ---- */
.m-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:900;width:46px;height:46px;border-radius:50%;border:1px solid rgba(76,134,255,.5);
  background:rgba(10,21,38,.85);backdrop-filter:blur(8px);color:#F2F5FA;display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .4s var(--m-ease),transform .4s var(--m-ease),background .3s}
.m-top.m-show{opacity:1;transform:none;pointer-events:auto}
.m-top:hover{background:var(--m-accent)}
.m-top svg{width:18px;height:18px}

/* ---- Reduced motion: keep everything still and visible ---- */
@media (prefers-reduced-motion: reduce){
  .m-hero-bg{animation:none;transform:none}
  .m-enter,.m-word,.m-reveal,.m-img img{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .price-card.featured,.price-badge,.offer-note,.m-scroll-cue::after{animation:none!important}
  .m-progress{display:none}
  .btn::after{display:none}
  *{scroll-behavior:auto!important}
}
html{scroll-behavior:smooth}