/* ============================================================
   ABOTRIX V23.1 — HERO AND COMMAND CENTER
   ============================================================ */

:root {
    --hero-command-cyan: #4cddf7;
    --hero-command-blue: #3895ff;
    --hero-command-green: #43efb2;
}

/* HERO BACKGROUND */

.hero-section {
    isolation: isolate;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 78% 23%,
            rgba(44, 151, 221, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 14% 77%,
            rgba(40, 215, 242, 0.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(2, 18, 32, 0.98),
            rgba(5, 34, 53, 0.97)
        );
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(97, 184, 225, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(97, 184, 225, 0.08) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 72%,
            transparent
        );
}

/* HERO TEXT */

.hero-content {
    position: relative;
}

.hero-content h1 {
    text-shadow:
        0 18px 45px rgba(0, 5, 18, 0.28);
}

.hero-content h1 span {
    background-size: 180% 180%;

    animation:
        abotrixHeroGradient 8s ease-in-out infinite;
}

@keyframes abotrixHeroGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-content .eyebrow {
    position: relative;
    overflow: hidden;
}

.hero-content .eyebrow::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);

    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255, 255, 255, 0.14) 48%,
        transparent 72%
    );

    animation:
        abotrixEyebrowSweep 5.5s ease-in-out infinite;
}

@keyframes abotrixEyebrowSweep {
    0%,
    68% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

/* HERO BUTTONS */

.hero-actions .button-primary {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #61e6fa,
            #43caef 55%,
            #3999f7
        );

    box-shadow:
        0 17px 42px rgba(52, 191, 235, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.hero-actions .button-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);

    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.34) 48%,
        transparent 72%
    );

    transition: transform 550ms ease;
}

.hero-actions .button-primary:hover::before {
    transform: translateX(120%);
}

/* DASHBOARD WRAPPER */

.hero-dashboard-wrapper {
    --abotrix-parallax-x: 0px;
    --abotrix-parallax-y: 0px;

    transform:
        translate3d(
            var(--abotrix-parallax-x),
            var(--abotrix-parallax-y),
            0
        );

    will-change: transform;

    animation:
        abotrixDashboardFloat 7s ease-in-out infinite;
}

@keyframes abotrixDashboardFloat {
    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -7px;
    }
}

.dashboard-glow {
    position: absolute;
    inset: 7% 4% -4%;
    z-index: -1;

    border-radius: 36px;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(55, 202, 241, 0.27),
            rgba(21, 105, 164, 0.12) 45%,
            transparent 74%
        );

    filter: blur(54px);

    animation:
        abotrixDashboardGlow 6s ease-in-out infinite;
}

@keyframes abotrixDashboardGlow {
    0%,
    100% {
        opacity: 0.58;
        transform: scale(0.98);
    }

    50% {
        opacity: 0.86;
        transform: scale(1.03);
    }
}

.dashboard-window {
    position: relative;
    transform: translateZ(0);

    box-shadow:
        0 42px 120px rgba(0, 5, 20, 0.46),
        0 18px 50px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dashboard-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.05),
            transparent 18%,
            transparent 78%,
            rgba(59, 196, 239, 0.035)
        );
}

/* LIVE INDICATOR */

.live-status {
    position: relative;
}

.live-status > span {
    position: relative;
}

.live-status > span::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 1px solid rgba(67, 239, 178, 0.55);
    border-radius: 50%;

    animation:
        abotrixLivePulse 1.8s ease-out infinite;
}

@keyframes abotrixLivePulse {
    0% {
        opacity: 0.9;
        transform: scale(0.6);
    }

    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

/* KPI CARDS */

.metric-card {
    position: relative;
    overflow: hidden;
}

.metric-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -75px;
    bottom: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(50, 194, 236, 0.13),
            transparent 70%
        );

    pointer-events: none;
}

.metric-card strong {
    display: inline-block;

    font-variant-numeric: tabular-nums;
}

.metric-card.metric-animated strong {
    animation:
        abotrixMetricArrive 550ms
        cubic-bezier(0.2, 0.72, 0.25, 1);
}

@keyframes abotrixMetricArrive {
    0% {
        opacity: 0.25;
        transform: translateY(8px);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* REVENUE CHART */

.revenue-chart {
    overflow: visible;
}

.revenue-chart path,
.revenue-chart polyline,
.revenue-chart line {
    vector-effect: non-scaling-stroke;
}

.revenue-chart .abotrix-chart-line {
    fill: none;

    stroke:
        url(#abotrixRevenueGradient);

    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 7px 12px rgba(51, 202, 241, 0.27)
        );
}

.revenue-chart .abotrix-chart-area {
    opacity: 0.36;
}

.revenue-chart .abotrix-chart-point {
    fill: #64e6fa;
    stroke: rgba(4, 35, 56, 0.96);
    stroke-width: 4;

    filter:
        drop-shadow(
            0 3px 7px rgba(52, 205, 241, 0.45)
        );
}

.revenue-chart.chart-ready .abotrix-chart-point {
    animation:
        abotrixChartPoint 500ms ease backwards;
}

.revenue-chart.chart-ready
.abotrix-chart-point:nth-of-type(1) {
    animation-delay: 400ms;
}

.revenue-chart.chart-ready
.abotrix-chart-point:nth-of-type(2) {
    animation-delay: 480ms;
}

.revenue-chart.chart-ready
.abotrix-chart-point:nth-of-type(3) {
    animation-delay: 560ms;
}

.revenue-chart.chart-ready
.abotrix-chart-point:nth-of-type(4) {
    animation-delay: 640ms;
}

.revenue-chart.chart-ready
.abotrix-chart-point:nth-of-type(5) {
    animation-delay: 720ms;
}

.revenue-chart.chart-ready
.abotrix-chart-point:nth-of-type(6) {
    animation-delay: 800ms;
}

.revenue-chart.chart-ready
.abotrix-chart-point:nth-of-type(7) {
    animation-delay: 880ms;
}

@keyframes abotrixChartPoint {
    from {
        opacity: 0;
        transform: scale(0);
        transform-origin: center;
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* DASHBOARD ACTIVITY */

.activity-card {
    position: relative;
}

.activity-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(31, 145, 196, 0.035)
        );
}

/* RESPONSIVE */

@media (max-width: 1080px) {
    .hero-dashboard-wrapper {
        animation-duration: 8.5s;
    }
}

@media (max-width: 768px) {
    .hero-dashboard-wrapper {
        animation: none;

        transform: none !important;
    }

    .dashboard-glow {
        animation: none;
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-content h1 span,
    .hero-content .eyebrow::after,
    .hero-dashboard-wrapper,
    .dashboard-glow,
    .live-status > span::after,
    .metric-card.metric-animated strong,
    .revenue-chart.chart-ready
    .abotrix-chart-point {
        animation: none !important;
    }

    .hero-dashboard-wrapper {
        transform: none !important;
    }
}