/* Milos control-network hero: the Controller sign-in illustration plus an animated SVG layer
   (data pulses, module halos, twinkling nodes) drawn in the illustration's own 1545 x 1018
   coordinate space. Labels and the live status stay HTML so they follow the page language. */
.hero-diagram {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 1545 / 1018;
}

.hero-diagram-stage {
    position: absolute;
    inset: 0;
    animation: hero-diagram-float 7s ease-in-out infinite;
}

.hero-diagram img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-diagram-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: none;
}

.hero-diagram-fx * {
    transform-box: fill-box;
    transform-origin: center;
}

.fx-beam {
    stroke: #CFFFE0;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 14 300;
    stroke-dashoffset: 16;
    animation: hero-diagram-beam var(--fx-duration, 2.6s) linear infinite;
    animation-delay: var(--fx-delay, 0s);
}

.fx-beam-core {
    stroke: #FFFFFF;
    stroke-width: 4;
}

.fx-halo {
    stroke: #99F0B3;
    stroke-width: 3;
    opacity: 0;
    animation: hero-diagram-halo 3.6s ease-out infinite;
    animation-delay: var(--fx-delay, 0s);
}

.fx-hub-ring {
    stroke: #B5E655;
    stroke-width: 2.5;
    opacity: 0;
    animation: hero-diagram-hub 4.8s ease-out infinite;
    animation-delay: var(--fx-delay, 0s);
}

.fx-spark {
    fill: #D9FFE6;
    opacity: 0.2;
    animation: hero-diagram-twinkle var(--fx-duration, 3s) ease-in-out infinite;
    animation-delay: var(--fx-delay, 0s);
}

.hero-diagram-label {
    position: absolute;
    z-index: 2;
    max-width: 9.5em;
    color: var(--band-ink-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 2px 10px rgba(3, 30, 27, 0.75);
    transform: translateX(-50%);
}

.hero-diagram-label.label-traffic { top: 0; left: 21%; }
.hero-diagram-label.label-agent { top: 4%; left: 78%; }
.hero-diagram-label.label-waf { top: 84%; left: 18%; }
.hero-diagram-label.label-insights { top: 84%; left: 80%; }

.hero-diagram-status {
    position: absolute;
    bottom: -6%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    color: var(--band-ink-soft);
    background: rgba(4, 24, 22, 0.62);
    border: 1px solid var(--band-line-strong);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-diagram-status::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--band-mint);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(153, 240, 179, 0.16);
    animation: hero-diagram-live 2s ease-in-out infinite;
}

.hero-diagram-status time {
    color: var(--band-ink-muted);
    font-variant-numeric: tabular-nums;
}

.hero-diagram.is-paused *,
.hero-diagram.is-paused *::before {
    animation-play-state: paused;
}

@keyframes hero-diagram-float {
    50% { transform: translateY(-8px); }
}

@keyframes hero-diagram-beam {
    0% { stroke-dashoffset: 16; opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes hero-diagram-halo {
    0% { opacity: 0; transform: scale(0.82); }
    25% { opacity: 0.75; }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes hero-diagram-hub {
    0% { opacity: 0; transform: scale(0.9); }
    20% { opacity: 0.55; }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes hero-diagram-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.25); }
}

@keyframes hero-diagram-live {
    50% { box-shadow: 0 0 0 7px rgba(153, 240, 179, 0); }
}

@media (max-width: 640px) {
    .hero-diagram-label {
        font-size: 11px;
    }

    .hero-diagram-status {
        bottom: -10%;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-diagram-stage,
    .hero-diagram-status::before {
        animation: none;
    }

    .hero-diagram-fx {
        display: none;
    }
}