/* =========================================================
   HorizonNode Global Motion & Visual Effects
   Lightweight, dependency-free, and reduced-motion aware.
   ========================================================= */

html{scroll-behavior:smooth}
body{position:relative;overflow-x:hidden}

/* fixed ambient background */
.hn-site-effects{
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    overflow:hidden;
    background:
      radial-gradient(circle at 16% 16%,rgba(62,193,243,.055),transparent 26%),
      radial-gradient(circle at 82% 28%,rgba(0,143,254,.06),transparent 30%);
}
.hn-site-effects::before{
    content:"";
    position:absolute;
    width:650px;height:650px;
    left:-280px;top:18vh;
    border-radius:50%;
    background:rgba(62,193,243,.055);
    filter:blur(80px);
    animation:hnFloatA 16s ease-in-out infinite alternate;
}
.hn-site-effects::after{
    content:"";
    position:absolute;
    width:740px;height:740px;
    right:-360px;top:44vh;
    border-radius:50%;
    background:rgba(0,143,254,.06);
    filter:blur(95px);
    animation:hnFloatB 19s ease-in-out infinite alternate;
}
.hn-cursor-glow{
    position:fixed;
    left:0;top:0;
    width:430px;height:430px;
    border-radius:50%;
    pointer-events:none;
    z-index:-1;
    opacity:.28;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(62,193,243,.14),rgba(0,143,254,.04) 38%,transparent 68%);
    filter:blur(12px);
    transition:opacity .25s ease;
}
@keyframes hnFloatA{to{transform:translate(120px,-55px) scale(1.08)}}
@keyframes hnFloatB{to{transform:translate(-120px,70px) scale(.92)}}

/* subtle animated grid */
.rn-hero::before,.px-hero::before,.hn-fivem-hero:before{
    animation:hnGridDrift 18s linear infinite;
}
@keyframes hnGridDrift{
    from{background-position:0 0,0 0}
    to{background-position:56px 56px,56px 56px}
}

/* reveal motion */
.hn-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:
      opacity .72s cubic-bezier(.2,.8,.2,1),
      transform .72s cubic-bezier(.2,.8,.2,1);
    transition-delay:var(--hn-delay,0ms);
}
.hn-reveal.hn-visible{opacity:1;transform:none}

/* glow border on cards */
.rn-plan,.rn-feature,.rn-trust-card,.rn-update,
.px-card,.px-step,.px-mini,.px-status-row,
.hn-fivem-plan,.hn-fivem-feature,.hn-fivem-manage-card,
.info-card{
    position:relative;
    isolation:isolate;
}
.rn-plan::before,.rn-feature::before,.rn-trust-card::before,.rn-update::before,
.px-card::before,.px-step::before,
.hn-fivem-plan::before,.hn-fivem-feature::before,.hn-fivem-manage-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;
    border-radius:inherit;
    opacity:0;
    background:linear-gradient(125deg,rgba(62,193,243,.55),transparent 35%,rgba(0,143,254,.35));
    transition:opacity .28s ease;
}
.rn-plan:hover::before,.rn-feature:hover::before,.rn-trust-card:hover::before,.rn-update:hover::before,
.px-card:hover::before,.px-step:hover::before,
.hn-fivem-plan:hover::before,.hn-fivem-feature:hover::before,.hn-fivem-manage-card:hover::before{
    opacity:.5;
}

/* mouse tilt targets */
.hn-tilt{
    transform-style:preserve-3d;
    will-change:transform;
    transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease;
}
.hn-tilt:hover{
    box-shadow:0 25px 70px rgba(0,0,0,.34),0 0 34px rgba(0,143,254,.07);
}

/* button sheen */
.rn-primary,.rn-secondary,.px-btn,.launch-btn,
.hn-fivem-primary,.hn-fivem-secondary,.hn-fivem-plan a{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.rn-primary::after,.px-btn.primary::after,.launch-btn::after,
.hn-fivem-primary::after,.hn-fivem-plan.featured a::after{
    content:"";
    position:absolute;
    top:-120%;left:-35%;
    width:28%;height:340%;
    transform:rotate(22deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.46),transparent);
    transition:left .62s ease;
    z-index:-1;
}
.rn-primary:hover::after,.px-btn.primary:hover::after,.launch-btn:hover::after,
.hn-fivem-primary:hover::after,.hn-fivem-plan.featured a:hover::after{left:120%}

/* header refinement */
.site-header{
    backdrop-filter:saturate(120%);
}
.nav-wrap{
    transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.site-header.hn-scrolled .nav-wrap{
    background:rgba(5,6,31,.88);
    backdrop-filter:blur(16px);
    box-shadow:0 14px 40px rgba(0,0,0,.22);
}
.main-nav a,.dropdown-toggle{
    position:relative;
}
.main-nav>a::after{
    content:"";
    position:absolute;
    left:12px;right:12px;bottom:5px;
    height:2px;
    transform:scaleX(0);
    transform-origin:center;
    background:linear-gradient(90deg,#3ec1f3,#008ffe);
    transition:transform .22s ease;
}
.main-nav>a:hover::after{transform:scaleX(1)}

/* mega menu entrance */
.small-menu,.mega-menu{
    transform-origin:top center;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.dropdown:not(.open) .small-menu,
.dropdown:not(.open) .mega-menu{
    opacity:0;
    transform:translateY(-7px) scale(.985);
    visibility:hidden;
}
.dropdown.open .small-menu,
.dropdown.open .mega-menu{
    opacity:1;
    transform:none;
    visibility:visible;
}

/* active FAQ motion */
.rn-faq-item p,.px-faq p,.hn-fivem-faq-item p{
    animation:hnFaqIn .2s ease both;
}
@keyframes hnFaqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* accessibility */
:focus-visible{
    outline:2px solid #3ec1f3!important;
    outline-offset:3px!important;
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .hn-reveal{opacity:1!important;transform:none!important}
    .hn-cursor-glow{display:none}
}
@media(max-width:800px){
    .hn-cursor-glow{display:none}
    .hn-site-effects::before,.hn-site-effects::after{filter:blur(120px);opacity:.6}
}