:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-duration: 820ms;
    --motion-distance: 28px;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

body::after {
    content: "";
    position: fixed;
    top: 10%;
    right: -12vw;
    width: 34vw;
    height: 34vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.12), transparent 68%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -2;
    animation: ambientFloat 18s ease-in-out infinite;
}

nav {
    animation: navEnter 820ms var(--motion-ease) both;
}

.hero,
article,
main {
    position: relative;
}

.hero::before,
article::before,
main::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: min(36vw, 420px);
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.55), rgba(212, 175, 55, 0));
    transform-origin: left center;
    animation: beamSweep 1.4s var(--motion-ease) 180ms both;
    pointer-events: none;
}

.badge,
.eyebrow {
    position: relative;
    overflow: hidden;
}

.badge::after,
.eyebrow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.72) 50%, transparent 100%);
    transform: translateX(-140%);
    animation: badgeSheen 4.8s ease-in-out infinite;
}

.feature-card,
.contact-card,
.broker-card,
.post-card,
.panel,
.table-wrap,
.step,
.logic-step,
.hero-stats .stat-item {
    will-change: transform, opacity;
}

.feature-card:hover,
.contact-card:hover,
.broker-card:hover,
.post-card:hover,
.panel:hover,
.table-wrap:hover {
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.hero-stats .stat-item {
    transition: transform 300ms ease, opacity 300ms ease;
}

.hero-stats .stat-item:hover {
    transform: translateY(-6px);
}

[data-animate] {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, var(--motion-distance), 0) scale(0.985);
    transition:
        opacity var(--motion-duration) var(--motion-ease),
        transform var(--motion-duration) var(--motion-ease),
        filter var(--motion-duration) var(--motion-ease);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-animate="left"] {
    transform: translate3d(calc(var(--motion-distance) * -1), 0, 0);
}

[data-animate="right"] {
    transform: translate3d(var(--motion-distance), 0, 0);
}

[data-animate="scale"] {
    transform: scale(0.94);
}

[data-animate].is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

@keyframes navEnter {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes beamSweep {
    from {
        opacity: 0;
        transform: scaleX(0.2);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes ambientFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-4vw, 3vh, 0) scale(1.08);
    }
}

@keyframes badgeSheen {
    0%,
    75%,
    100% {
        transform: translateX(-140%);
    }
    30%,
    45% {
        transform: translateX(140%);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    [data-animate] {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    [data-animate] {
        opacity: 1;
        filter: none;
        transform: none;
        transition-delay: 0ms;
    }
}