/**
 * barabd — Homepage hero animated data-center background
 * Revert: remove this file + link in homepage.tpl + .barabd-hero-ambient block
 *         restore background-image on .barabd-hero-section in homepage.tpl
 */

.barabd-hero-section {
    background-color: #04101c;
    background-image: none;
}

.barabd-hero-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Base depth gradient */
.barabd-hero-ambient__base {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        128deg,
        #030a12 0%,
        #061424 28%,
        #0a1f35 52%,
        #0f2847 78%,
        #061424 100%
    );
}

/* Slow aurora blobs */
.barabd-hero-ambient__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.45;
    will-change: transform, opacity;
}

.barabd-hero-ambient__blob--1 {
    width: min(55vw, 520px);
    height: min(55vw, 520px);
    top: -12%;
    right: -8%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.55) 0%, transparent 68%);
    animation: barabdHeroBlob1 22s ease-in-out infinite;
}

.barabd-hero-ambient__blob--2 {
    width: min(48vw, 440px);
    height: min(48vw, 440px);
    bottom: -18%;
    right: 18%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.45) 0%, transparent 70%);
    animation: barabdHeroBlob2 26s ease-in-out infinite;
}

.barabd-hero-ambient__blob--3 {
    width: min(42vw, 380px);
    height: min(42vw, 380px);
    top: 35%;
    left: 42%;
    background: radial-gradient(circle, rgba(57, 211, 83, 0.22) 0%, transparent 72%);
    animation: barabdHeroBlob3 19s ease-in-out infinite;
}

/* Perspective floor grid */
.barabd-hero-ambient__grid {
    position: absolute;
    left: -20%;
    right: -20%;
    bottom: -5%;
    height: 62%;
    transform-origin: 50% 100%;
    transform: perspective(420px) rotateX(68deg);
    background-image:
        linear-gradient(rgba(57, 211, 83, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 211, 83, 0.1) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
    animation: barabdHeroGridMove 28s linear infinite;
    opacity: 0.55;
}

/* Server rack silhouettes + LED pulses */
.barabd-hero-ambient__racks {
    position: absolute;
    inset: 8% 0 0 28%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2%;
    padding: 0 4% 0 2%;
    opacity: 0.22;
}

.barabd-hero-ambient__rack {
    flex: 1;
    max-width: 52px;
    height: 72%;
    min-height: 200px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, rgba(15, 40, 71, 0.15) 0%, rgba(6, 20, 36, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.barabd-hero-ambient__rack::before {
    content: "";
    position: absolute;
    inset: 8px 6px;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 10px,
        transparent 10px,
        transparent 18px
    );
}

.barabd-hero-ambient__rack-leds {
    position: absolute;
    inset: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.barabd-hero-ambient__rack-leds span {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(57, 211, 83, 0.25);
    animation: barabdHeroLedPulse 2.4s ease-in-out infinite;
}

.barabd-hero-ambient__rack:nth-child(odd) .barabd-hero-ambient__rack-leds span:nth-child(3n) {
    background: rgba(56, 189, 248, 0.35);
    animation-duration: 1.8s;
}

.barabd-hero-ambient__rack:nth-child(even) .barabd-hero-ambient__rack-leds span:nth-child(2n) {
    background: rgba(250, 204, 21, 0.3);
    animation-duration: 2.1s;
}

.barabd-hero-ambient__rack:nth-child(1) .barabd-hero-ambient__rack-leds span { animation-delay: 0s; }
.barabd-hero-ambient__rack:nth-child(2) .barabd-hero-ambient__rack-leds span { animation-delay: 0.35s; }
.barabd-hero-ambient__rack:nth-child(3) .barabd-hero-ambient__rack-leds span { animation-delay: 0.7s; }
.barabd-hero-ambient__rack:nth-child(4) .barabd-hero-ambient__rack-leds span { animation-delay: 0.15s; }
.barabd-hero-ambient__rack:nth-child(5) .barabd-hero-ambient__rack-leds span { animation-delay: 0.55s; }
.barabd-hero-ambient__rack:nth-child(6) .barabd-hero-ambient__rack-leds span { animation-delay: 0.9s; }
.barabd-hero-ambient__rack:nth-child(7) .barabd-hero-ambient__rack-leds span { animation-delay: 0.25s; }
.barabd-hero-ambient__rack:nth-child(8) .barabd-hero-ambient__rack-leds span { animation-delay: 0.65s; }

/* Vertical data streams */
.barabd-hero-ambient__streams {
    position: absolute;
    inset: 0;
}

.barabd-hero-ambient__stream {
    position: absolute;
    top: -20%;
    width: 2px;
    height: 45%;
    background: linear-gradient(180deg, transparent, rgba(57, 211, 83, 0.7), transparent);
    border-radius: 2px;
    opacity: 0;
    animation: barabdHeroStream 4.5s linear infinite;
}

.barabd-hero-ambient__stream:nth-child(1) { left: 38%; animation-delay: 0s; }
.barabd-hero-ambient__stream:nth-child(2) { left: 52%; animation-delay: 1.2s; height: 38%; }
.barabd-hero-ambient__stream:nth-child(3) { left: 66%; animation-delay: 2.4s; }
.barabd-hero-ambient__stream:nth-child(4) { left: 78%; animation-delay: 0.8s; height: 52%; }
.barabd-hero-ambient__stream:nth-child(5) { left: 88%; animation-delay: 3.1s; height: 35%; }

/* Horizontal scan */
.barabd-hero-ambient__scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(57, 211, 83, 0.5), rgba(56, 189, 248, 0.4), transparent);
    box-shadow: 0 0 24px rgba(57, 211, 83, 0.35);
    opacity: 0.6;
    animation: barabdHeroScan 7s ease-in-out infinite;
}

/* Floating particles */
.barabd-hero-ambient__particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(57, 211, 83, 0.65);
    box-shadow: 0 0 10px rgba(57, 211, 83, 0.5);
    animation: barabdHeroParticle 12s linear infinite;
}

.barabd-hero-ambient__particles span:nth-child(1) { left: 32%; top: 22%; animation-delay: 0s; }
.barabd-hero-ambient__particles span:nth-child(2) { left: 48%; top: 38%; animation-delay: 2s; width: 3px; height: 3px; }
.barabd-hero-ambient__particles span:nth-child(3) { left: 62%; top: 18%; animation-delay: 4s; }
.barabd-hero-ambient__particles span:nth-child(4) { left: 74%; top: 45%; animation-delay: 1s; background: rgba(56, 189, 248, 0.7); }
.barabd-hero-ambient__particles span:nth-child(5) { left: 85%; top: 28%; animation-delay: 3s; }
.barabd-hero-ambient__particles span:nth-child(6) { left: 55%; top: 55%; animation-delay: 5s; width: 5px; height: 5px; }

/* Readability overlay — stronger on text (left) */
.barabd-hero-ambient__vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            102deg,
            rgba(3, 10, 18, 0.94) 0%,
            rgba(3, 10, 18, 0.78) 38%,
            rgba(3, 10, 18, 0.28) 58%,
            rgba(3, 10, 18, 0.08) 100%
        ),
        linear-gradient(180deg, rgba(3, 10, 18, 0.35) 0%, transparent 30%, transparent 72%, rgba(3, 10, 18, 0.55) 100%);
}

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

.barabd-hero-content {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.barabd-hero-title {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.barabd-hero-desc {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

@keyframes barabdHeroBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50% { transform: translate(-4%, 6%) scale(1.08); opacity: 0.55; }
}

@keyframes barabdHeroBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, -4%) scale(1.06); }
}

@keyframes barabdHeroBlob3 {
    0%, 100% { transform: translate(0, 0); opacity: 0.2; }
    50% { transform: translate(-6%, 3%); opacity: 0.35; }
}

@keyframes barabdHeroGridMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 56px; }
}

@keyframes barabdHeroLedPulse {
    0%, 100% { opacity: 0.2; transform: scaleX(0.85); }
    50% { opacity: 1; transform: scaleX(1); }
}

@keyframes barabdHeroStream {
    0% { top: -25%; opacity: 0; }
    8% { opacity: 0.85; }
    92% { opacity: 0.85; }
    100% { top: 105%; opacity: 0; }
}

@keyframes barabdHeroScan {
    0%, 100% { top: 12%; opacity: 0; }
    8% { opacity: 0.65; }
    50% { top: 78%; opacity: 0.65; }
    58% { opacity: 0; }
}

@keyframes barabdHeroParticle {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% { transform: translateY(-80px) translateX(12px); opacity: 0; }
}

@media (max-width: 991px) {
    .barabd-hero-ambient__racks {
        inset: 12% 0 0 0;
        opacity: 0.5;
    }

    .barabd-hero-ambient__rack {
        max-width: 36px;
        height: 55%;
    }

    .barabd-hero-ambient__vignette {
        background:
            linear-gradient(180deg, rgba(3, 10, 18, 0.92) 0%, rgba(3, 10, 18, 0.78) 45%, rgba(3, 10, 18, 0.65) 100%);
    }
}

/* ---- Hero wireframe globe (right column) ---- */
.barabd-hero-globe-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 32px 20px 8px;
    min-height: 560px;
    position: relative;
    z-index: 3;
}

.barabd-hero-globe {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: min(72vh, 620px);
    min-height: 440px;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.35));
}

/* Soft ambient only — no visible green ring */
.barabd-hero-globe__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 0;
    background: transparent;
    filter: none;
    animation: none;
}

.barabd-hero-globe__glow::before,
.barabd-hero-globe__glow::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
}

.barabd-hero-globe__glow::before {
    width: 42%;
    height: 38%;
    left: 28%;
    top: 32%;
    background: rgba(37, 99, 235, 0.14);
}

.barabd-hero-globe__glow::after {
    width: 38%;
    height: 36%;
    right: 22%;
    bottom: 28%;
    background: rgba(57, 211, 83, 0.1);
}

#barabd-hero-globe-canvas {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 991px) {
    .barabd-hero-globe-col {
        display: none !important;
    }
}

/* ---- Cyber / datacenter overlay ---- */
.barabd-hero-cyber {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.barabd-hero-cyber__mesh {
    position: absolute;
    inset: -20%;
    opacity: 0.14;
    background-image:
        radial-gradient(circle at center, rgba(56, 189, 248, 0.12) 1px, transparent 1px),
        linear-gradient(rgba(57, 211, 83, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 211, 83, 0.05) 1px, transparent 1px);
    background-size: 28px 28px, 64px 64px, 64px 64px;
    animation: barabdCyberMeshDrift 40s linear infinite;
    mask-image: radial-gradient(ellipse 80% 70% at 58% 45%, #000 15%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 58% 45%, #000 15%, transparent 72%);
}

.barabd-hero-cyber__orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    top: 50%;
    left: 62%;
    transform: translate(-50%, -50%);
}

.barabd-hero-cyber__orbit--1 {
    width: min(52vw, 480px);
    height: min(52vw, 480px);
    border-color: rgba(56, 189, 248, 0.12);
    animation: barabdCyberOrbitSpin 48s linear infinite;
}

.barabd-hero-cyber__orbit--2 {
    width: min(38vw, 340px);
    height: min(38vw, 340px);
    border-style: dashed;
    border-color: rgba(57, 211, 83, 0.1);
    animation: barabdCyberOrbitSpin 32s linear infinite reverse;
}

.barabd-hero-cyber__packets span {
    position: absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(186, 230, 253, 0.55);
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    white-space: nowrap;
    animation: barabdCyberPacketFloat 14s linear infinite;
}

.barabd-hero-cyber__packets span:nth-child(1) { left: 42%; top: 18%; animation-delay: 0s; }
.barabd-hero-cyber__packets span:nth-child(2) { left: 58%; top: 26%; animation-delay: 1.2s; color: rgba(57, 211, 83, 0.5); }
.barabd-hero-cyber__packets span:nth-child(3) { left: 72%; top: 14%; animation-delay: 2.4s; }
.barabd-hero-cyber__packets span:nth-child(4) { left: 48%; top: 42%; animation-delay: 0.6s; }
.barabd-hero-cyber__packets span:nth-child(5) { left: 66%; top: 48%; animation-delay: 3s; }
.barabd-hero-cyber__packets span:nth-child(6) { left: 78%; top: 36%; animation-delay: 1.8s; }
.barabd-hero-cyber__packets span:nth-child(7) { left: 54%; top: 58%; animation-delay: 4.2s; color: rgba(57, 211, 83, 0.45); }
.barabd-hero-cyber__packets span:nth-child(8) { left: 82%; top: 52%; animation-delay: 2s; }
.barabd-hero-cyber__packets span:nth-child(9) { left: 38%; top: 32%; animation-delay: 5s; }
.barabd-hero-cyber__packets span:nth-child(10) { left: 70%; top: 62%; animation-delay: 3.6s; }
.barabd-hero-cyber__packets span:nth-child(11) { left: 86%; top: 24%; animation-delay: 0.9s; color: rgba(250, 204, 21, 0.4); }
.barabd-hero-cyber__packets span:nth-child(12) { left: 60%; top: 72%; animation-delay: 4.8s; }

.barabd-hero-cyber__lanes span {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(57, 211, 83, 0.55), rgba(56, 189, 248, 0.45), transparent);
    opacity: 0;
    animation: barabdCyberLanePulse 5s ease-in-out infinite;
}

.barabd-hero-cyber__lanes span:nth-child(1) { top: 22%; left: 30%; width: 28%; animation-delay: 0s; }
.barabd-hero-cyber__lanes span:nth-child(2) { top: 34%; left: 45%; width: 35%; animation-delay: 1.1s; }
.barabd-hero-cyber__lanes span:nth-child(3) { top: 48%; left: 38%; width: 42%; animation-delay: 2.2s; }
.barabd-hero-cyber__lanes span:nth-child(4) { top: 58%; left: 50%; width: 30%; animation-delay: 0.7s; }
.barabd-hero-cyber__lanes span:nth-child(5) { top: 68%; left: 42%; width: 38%; animation-delay: 3.1s; }
.barabd-hero-cyber__lanes span:nth-child(6) { top: 78%; left: 55%; width: 25%; animation-delay: 1.9s; }

.barabd-hero-cyber__nodes span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(57, 211, 83, 0.85);
    box-shadow: 0 0 0 4px rgba(57, 211, 83, 0.12), 0 0 16px rgba(57, 211, 83, 0.35);
    animation: barabdCyberNodePulse 3.2s ease-in-out infinite;
}

.barabd-hero-cyber__nodes span::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 50%;
    animation: barabdCyberNodeRing 3.2s ease-out infinite;
}

.barabd-hero-cyber__nodes span:nth-child(1) { left: 44%; top: 28%; animation-delay: 0s; }
.barabd-hero-cyber__nodes span:nth-child(2) { left: 68%; top: 22%; animation-delay: 0.5s; background: rgba(56, 189, 248, 0.9); }
.barabd-hero-cyber__nodes span:nth-child(3) { left: 82%; top: 38%; animation-delay: 1s; }
.barabd-hero-cyber__nodes span:nth-child(4) { left: 52%; top: 52%; animation-delay: 1.5s; }
.barabd-hero-cyber__nodes span:nth-child(5) { left: 74%; top: 55%; animation-delay: 0.3s; background: rgba(56, 189, 248, 0.85); }
.barabd-hero-cyber__nodes span:nth-child(6) { left: 58%; top: 68%; animation-delay: 0.8s; }
.barabd-hero-cyber__nodes span:nth-child(7) { left: 86%; top: 62%; animation-delay: 1.2s; }
.barabd-hero-cyber__nodes span:nth-child(8) { left: 46%; top: 38%; animation-delay: 1.7s; background: rgba(250, 204, 21, 0.85); }

.barabd-hero-cyber__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.35;
}

.barabd-hero-cyber__path {
    fill: none;
    stroke: rgba(57, 211, 83, 0.35);
    stroke-width: 1.2;
    stroke-dasharray: 8 14;
    animation: barabdCyberPathFlow 12s linear infinite;
}

.barabd-hero-cyber__path--cyan {
    stroke: rgba(56, 189, 248, 0.4);
    animation-duration: 9s;
    animation-direction: reverse;
}

/* Feature cards — subtle cyber shimmer */
.barabd-hero-feature {
    position: relative;
    overflow: hidden;
}

.barabd-hero-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, transparent 30%, rgba(57, 211, 83, 0.35) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.barabd-hero-feature:hover::before {
    opacity: 1;
    animation: barabdFeatureShimmer 2.2s linear infinite;
}

@keyframes barabdCyberMeshDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(64px, 64px); }
}

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

@keyframes barabdCyberPacketFloat {
    0% { transform: translateY(12px); opacity: 0; }
    12% { opacity: 0.85; }
    88% { opacity: 0.85; }
    100% { transform: translateY(-28px); opacity: 0; }
}

@keyframes barabdCyberLanePulse {
    0%, 100% { opacity: 0; transform: scaleX(0.6); }
    45% { opacity: 0.75; transform: scaleX(1); }
}

@keyframes barabdCyberNodePulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}

@keyframes barabdCyberNodeRing {
    0% { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes barabdCyberPathFlow {
    to { stroke-dashoffset: -120; }
}

@keyframes barabdFeatureShimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@media (max-width: 991px) {
    .barabd-hero-cyber__orbit,
    .barabd-hero-cyber__packets span:nth-child(n+7) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .barabd-hero-globe__glow,
    .barabd-hero-cyber__mesh,
    .barabd-hero-cyber__orbit,
    .barabd-hero-cyber__packets span,
    .barabd-hero-cyber__lanes span,
    .barabd-hero-cyber__nodes span,
    .barabd-hero-cyber__path,
    .barabd-hero-feature::before {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .barabd-hero-ambient__blob,
    .barabd-hero-ambient__grid,
    .barabd-hero-ambient__rack-leds span,
    .barabd-hero-ambient__stream,
    .barabd-hero-ambient__scan,
    .barabd-hero-ambient__particles span {
        animation: none !important;
    }

    .barabd-hero-ambient__stream {
        opacity: 0.25;
        top: 30%;
    }

    .barabd-hero-ambient__scan {
        top: 50%;
        opacity: 0.3;
    }
}