/* Register animated custom properties used by glow effects */
@property --badge-glow {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

/* Hover effects are desktop-only. This prevents sticky hover states on touch devices. */
@media (hover: hover) and (pointer: fine) {
    .dark-btn:hover>span::before {
        opacity: 1;
    }

    .dark-btn:hover {
        transform: translateY(-2px) scale(1.035);
    }

    .premium-purple-btn:hover,
    #price-btn:hover,
    #pricing:hover {
        transform: translateY(-2px) scale(1.035);
        filter: brightness(1.09) saturate(1.18);
        box-shadow:
            0 18px 42px rgba(28, 17, 71, 0.46),
            0 0 36px rgba(164, 128, 222, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    #step-btn-about:hover {
        filter: brightness(1.09) saturate(1.18);
        box-shadow:
            0 18px 42px rgba(28, 17, 71, 0.46),
            0 0 36px rgba(164, 128, 222, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    .premium-purple-btn:hover::before,
    #price-btn:hover::before,
    #step-btn-about:hover::before,
    #pricing:hover::before {
        opacity: 1;
    }

    .premium-purple-btn:hover>span:first-child,
    #price-btn:hover>span:first-child,
    #step-btn-about:hover>span:first-child,
    #pricing:hover>span:first-child {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1.16);
        filter: saturate(1.2);
    }

    #about-btn:hover,
    .step-btn:hover,
    #message:hover {
        transform: translateY(-2px) scale(1.035);
        filter: brightness(1.09) saturate(1.18);
        box-shadow:
            0 0 12px rgba(255, 255, 255, 0.35),
            0 0 24px rgba(255, 255, 255, 0.25),
            0 0 40px rgba(255, 255, 255, 0.15);
    }
}

.premium-purple-btn:active,
#price-btn:active,
#pricing:active {
    transform: translateY(0) scale(0.98);
}

#step-btn-about:active {
    transform: translateX(-50%) scale(0.98);
}

@keyframes rotateAurora {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes levitateTag {
    0% {
        transform:
            translate3d(0, 0, 0) rotate(0deg);
    }

    20% {
        transform:
            translate3d(calc(var(--levitate-x) * 0.35),
                calc(var(--levitate-y) * 0.55),
                0) rotate(var(--levitate-rotate));
    }

    45% {
        transform:
            translate3d(var(--levitate-x),
                var(--levitate-y),
                0) rotate(calc(var(--levitate-rotate) * -0.5));
    }

    70% {
        transform:
            translate3d(calc(var(--levitate-x) * -0.25),
                calc(var(--levitate-y) * 0.35),
                0) rotate(calc(var(--levitate-rotate) * 0.4));
    }

    100% {
        transform:
            translate3d(0, 0, 0) rotate(0deg);
    }
}

/* Premium floating assets */
.premium-floating-asset {
    --asset-mask: none;
    --asset-w: 220px;
    --asset-h: 180px;
    --asset-base-transform: rotate(0deg);
    --asset-hover-transform: translate3d(0, 0, 0) scale(1);
    --asset-hover-x: 0px;
    --asset-hover-y: -6px;
    --asset-glow-1: rgba(164, 128, 222, 0.34);
    --asset-glow-2: rgba(95, 111, 175, 0.20);
    --asset-glow-3: rgba(255, 255, 255, 0.10);
    --asset-shadow: rgba(164, 128, 222, 0.24);
    --asset-hover-shadow: rgba(164, 128, 222, 0.38);
    --asset-float-duration: 9s;
    --asset-glow-duration: 8s;
    --asset-shine-duration: 10s;
    width: var(--asset-w);
    height: var(--asset-h);
    z-index: 2;
    pointer-events: none;
    overflow: visible;
    transform-style: preserve-3d;
    transform-origin: 50% 55%;
    animation-name: premiumAssetFloatA;
    animation-duration: var(--asset-float-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
}

.premium-floating-asset__img {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: auto;
    transform: var(--asset-base-transform) var(--asset-hover-transform);
    transform-origin: center;
    filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 18px var(--asset-shadow));
    transition:
        transform 520ms cubic-bezier(.2, .8, .2, 1),
        filter 520ms ease,
        opacity 520ms ease;
    will-change: transform, filter;
}

.premium-floating-asset::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 125%;
    height: 118%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center,
            var(--asset-glow-1) 0%,
            var(--asset-glow-2) 36%,
            rgba(95, 111, 175, 0.08) 62%,
            transparent 82%);
    filter: blur(28px);
    opacity: 0.68;
    transform: translate(-50%, -50%);
    animation: premiumAssetGlow var(--asset-glow-duration) ease-in-out infinite;
}

.premium-floating-asset::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(115deg,
            transparent 0%,
            transparent 36%,
            rgba(255, 255, 255, 0.00) 43%,
            rgba(255, 255, 255, 0.34) 49%,
            var(--asset-glow-3) 54%,
            rgba(255, 255, 255, 0.00) 62%,
            transparent 100%);
    background-size: 280% 100%;
    background-position: 145% 50%;
    -webkit-mask-image: var(--asset-mask);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--asset-mask);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transform: var(--asset-base-transform) var(--asset-hover-transform);
    transform-origin: center;
    opacity: 0;
    filter: blur(0.45px);
    animation: premiumAssetMaskedShine var(--asset-shine-duration) ease-in-out infinite;
    transition:
        transform 520ms cubic-bezier(.2, .8, .2, 1),
        opacity 520ms ease;
    will-change: opacity, background-position, transform;
}

.premium-floating-asset.premium-no-float {
    animation: none !important;
}

@keyframes premiumAssetFloatA {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    38% {
        transform: translate3d(5px, -9px, 0) rotate(-0.8deg) scale(1.012);
    }

    72% {
        transform: translate3d(-4px, -4px, 0) rotate(0.55deg) scale(0.998);
    }
}

@keyframes premiumAssetFloatB {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    42% {
        transform: translate3d(-6px, -8px, 0) rotate(0.75deg) scale(1.014);
    }

    76% {
        transform: translate3d(4px, -3px, 0) rotate(-0.45deg) scale(0.998);
    }
}

@keyframes premiumAssetGlow {

    0%,
    100% {
        opacity: 0.56;
        transform: translate(-50%, -50%) scale(0.94);
    }

    50% {
        opacity: 0.84;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes premiumAssetMaskedShine {

    0%,
    64% {
        opacity: 0;
        background-position: 145% 50%;
    }

    70% {
        opacity: 0.36;
    }

    78% {
        opacity: 0.14;
    }

    88%,
    100% {
        opacity: 0;
        background-position: -70% 50%;
    }
}

/* Generic light beam effect */
.light {
    top: -200px;
    left: 50%;
    width: 1200px;
    height: 800px;
    transform: translateX(-50%) perspective(800px) rotateX(0deg);
    pointer-events: none;
    background: none;
    filter: blur(35px);
    opacity: 0;
    transition: opacity .25s ease, transform .5s ease;
    transform: translateX(-50%) scale(.9);
}

.light::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.22) 20%,
            rgba(255, 255, 255, 0.10) 48%,
            rgba(255, 255, 255, 0.04) 72%,
            transparent 100%);
    clip-path: polygon(48% 0%,
            52% 0%,
            100% 93%,
            0% 93%);
}

/* Scroll reveal system and reduced motion */
.scroll-reveal {
    --reveal-x: 0px;
    --reveal-y: 70px;
    --reveal-scale: 0.94;
    --reveal-rotate: 0deg;
    --reveal-delay: 0ms;
    --reveal-duration: 1150ms;

    opacity: 0;

    transform:
        translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale)) rotate(var(--reveal-rotate));

    transition:
        opacity var(--reveal-duration) cubic-bezier(.16, 1, .3, 1) var(--reveal-delay),
        transform var(--reveal-duration) cubic-bezier(.16, 1, .3, 1) var(--reveal-delay);

    backface-visibility: hidden;
    transform-origin: center;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform:
        translate3d(0, 0, 0) scale(1) rotate(0deg);
}

/* Tipuri generale */
.reveal-title {
    --reveal-y: 55px;
    --reveal-scale: 0.98;
    --reveal-duration: 1150ms;
}

.reveal-card {
    --reveal-y: 60px;
    --reveal-scale: 0.95;
    --reveal-duration: 1050ms;
}

.reveal-soft {
    --reveal-y: 30px;
    --reveal-scale: 0.99;
    --reveal-duration: 850ms;
}

.reveal-media {
    --reveal-y: 30px;
    --reveal-scale: 0.93;
    --reveal-duration: 1100ms;
}

/* Direcții */
.reveal-from-bottom {
    --reveal-x: 0px;
    --reveal-y: 65px;
    --reveal-rotate: 0deg;
}

.reveal-from-left {
    --reveal-x: -65px;
    --reveal-y: 15px;
    --reveal-rotate: -0.6deg;
}

.reveal-from-right {
    --reveal-x: 65px;
    --reveal-y: 15px;
    --reveal-rotate: 0.6deg;
}

.reveal-from-top {
    --reveal-x: 0px;
    --reveal-y: -45px;
    --reveal-rotate: 0deg;
}

.reveal-zoom {
    --reveal-x: 0px;
    --reveal-y: 15px;
    --reveal-scale: 0.9;
    --reveal-rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {

    .scroll-reveal,
    .scroll-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }

    .preloader-orb {
        animation: none;
    }

    .premium-floating-asset,
    .premium-floating-asset::before,
    .premium-floating-asset::after {
        animation: none !important;
    }

    .premium-floating-asset__img {
        transition: none !important;
    }
}