/* =========================
   THEME TOKENS (v2 + grid)
   ========================= */
:root {
    --surface-bg-1: #0b0e12;
    --surface-bg-2: #101624;
    --accent: #00b4ff;
    --accent-2: #3399ff;
    --accent-dim: rgba(0,180,255,.25);
    /* from v1, used by the faint grid + some bands */
    --grid-line: rgba(255,255,255,.06);
}

/* =========================
   ACCESSIBILITY
   ========================= */
@media (prefers-reduced-motion: reduce) {
    .surface-module,
    .surface-module::before,
    .surface-module::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================
   BASE SURFACE (v2)
   ========================= */
.surface-module {
    position: relative;
    background: radial-gradient(120% 120% at 100% 0%, var(--surface-bg-2), var(--surface-bg-1));
    border-radius: 2px;
    overflow: hidden;
    isolation: isolate;
    --b: 2px;
    box-shadow: 0 0 0 var(--b) rgba(255,255,255,.03) inset, 0 0 12px rgba(0,0,0,.5);
    transform: none !important;
    transition: none !important;
    min-height: 200px;
}

@media (min-width:768px) {
    .surface-module {
        min-height: 300px;
    }
}

.surface-module:hover,
.surface-module:focus,
.surface-module:active,
.surface-module.mud-card:hover,
.surface-module.mud-paper:hover,
.surface-module[class*="mud-elevation-"],
.surface-module[class*="mud-elevation-"]:hover {
    box-shadow: 0 0 0 var(--b) rgba(255,255,255,.03) inset, 0 0 12px rgba(0,0,0,.5) !important;
    transform: none !important;
    transition: none !important;
}

.surface-inner {
    position: relative;
    z-index: 4;
}

/* -------------------------
   CORNER ACCENTS (v2)
   ------------------------- */
.surface-module::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, var(--accent-dim), transparent) 0 0 / 60px 2px no-repeat, linear-gradient(180deg, var(--accent-dim), transparent) 0 0 / 2px 60px no-repeat, linear-gradient(270deg, var(--accent-dim), transparent) 100% 0 / 60px 2px no-repeat, linear-gradient(180deg, var(--accent-dim), transparent) 100% 0 / 2px 60px no-repeat, linear-gradient(90deg, var(--accent-dim), transparent) 0 100% / 60px 2px no-repeat, linear-gradient(0deg, var(--accent-dim), transparent) 0 100% / 2px 60px no-repeat, linear-gradient(270deg, var(--accent-dim), transparent) 100% 100% / 60px 2px no-repeat, linear-gradient(0deg, var(--accent-dim), transparent) 100% 100% / 2px 60px no-repeat;
}

/* -------------------------
   V1 FAINT MOVING GRID
   (this is the “cross-talk” you liked)
   ------------------------- */
.surface-module::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: repeating-linear-gradient(0deg, transparent 0 22px, var(--grid-line) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, var(--grid-line) 22px 23px);
    opacity: .22;
    animation: gridShift 12s linear infinite;
}

@keyframes gridShift {
    to {
        transform: translate3d(-22px,-22px,0);
    }
}

/* =========================
   STATIC BLUE TITLE BAND (v2)
   ========================= */
.surface-module .surface-inner > .mud-typography:first-child,
.surface-module .surface-inner > h1:first-child,
.surface-module .surface-inner > h2:first-child,
.surface-module .surface-inner > h3:first-child,
.surface-module .surface-inner > h4:first-child,
.surface-module .surface-inner > h5:first-child {
    position: relative;
    display: inline-block;
    z-index: 5;
}

    .surface-module .surface-inner > .mud-typography:first-child::before,
    .surface-module .surface-inner > h1:first-child::before,
    .surface-module .surface-inner > h2:first-child::before,
    .surface-module .surface-inner > h3:first-child::before,
    .surface-module .surface-inner > h4:first-child::before,
    .surface-module .surface-inner > h5:first-child::before {
        content: "";
        position: absolute;
        left: -0.6ch;
        right: -0.6ch;
        top: 50%;
        height: 2em;
        transform: translateY(-50%);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(0,180,255,.22), rgba(0,180,255,.12));
        box-shadow: 0 0 16px rgba(0,180,255,.18);
        z-index: -1;
    }

/* =========================
   VARIANT 1: INGEST (v2)
   ========================= */
.surface--ingest::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, transparent 0%, rgba(0,180,255,.18) 35%, transparent 40% 60%, rgba(0,140,255,.16) 75%, transparent 100%),
    /* subtle grid underlay (keeps visual parity with base) */
    repeating-linear-gradient(0deg, transparent 0 22px, var(--grid-line) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, var(--grid-line) 22px 23px);
    mix-blend-mode: screen;
    animation: ingestSweep 3.5s linear infinite;
}

@keyframes ingestSweep {
    0% {
        transform: translateX(-30%);
        opacity: .35;
    }

    50% {
        opacity: .6;
    }

    100% {
        transform: translateX(30%);
        opacity: .35;
    }
}

/* =========================
   VARIANT 2: ORBIT (v2, circular fix)
   ========================= */
.surface--orbit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140%;
    aspect-ratio: 1/1;
    transform: translate(-50%,-50%);
    z-index: 1;
    background: radial-gradient(circle at 50% 50%, rgba(0,180,255,.10) 0, transparent 60%), conic-gradient(from 0deg, transparent 0deg 40deg, rgba(0,180,255,.25) 40deg 55deg, transparent 55deg 140deg, rgba(0,140,255,.28) 140deg 155deg, transparent 155deg 240deg, rgba(0,180,255,.22) 240deg 255deg, transparent 255deg 360deg);
    mix-blend-mode: screen;
    border-radius: 50%;
    animation: orbitSpinCentered 10s linear infinite;
}

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

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

.surface--orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64%;
    aspect-ratio: 1/1;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 20px rgba(0,180,255,.25);
    z-index: 2;
    pointer-events: none;
    animation: captureBlink 2.8s ease-in-out infinite;
}

@keyframes captureBlink {
    0%,90% {
        opacity: .25;
        filter: none;
    }

    95% {
        opacity: .9;
        filter: drop-shadow(0 0 12px var(--accent));
    }

    100% {
        opacity: .25;
    }
}

/* =========================
   VARIANT 3: ANALYTICS (from v1)
   ========================= */
.surface--analytics::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
    /* spectral scan bands */
    repeating-linear-gradient(0deg, rgba(109,247,217,.00) 0 14px, rgba(109,247,217,.10) 14px 16px, rgba(0,200,255,.12) 16px 18px, rgba(109,247,217,.00) 18px 36px),
    /* faint diagonal energy */
    linear-gradient(135deg, rgba(0,200,255,.12), transparent 60%),
    /* base grid (subtle) */
    repeating-linear-gradient(0deg, transparent 0 22px, var(--grid-line) 22px 23px), repeating-linear-gradient(90deg, transparent 0 22px, var(--grid-line) 22px 23px);
    mix-blend-mode: screen;
    animation: spectralDrift 6s ease-in-out infinite;
}

@keyframes spectralDrift {
    0% {
        transform: translateY(0);
        opacity: .35;
    }

    50% {
        transform: translateY(-6px);
        opacity: .55;
    }

    100% {
        transform: translateY(0);
        opacity: .35;
    }
}

.surface--analytics::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(transparent 49.5%, rgba(0,200,255,.18) 50%, transparent 50.5%) center/100% 100% no-repeat, linear-gradient(90deg, transparent 49.5%, rgba(0,200,255,.18) 50%, transparent 50.5%) center/100% 100% no-repeat;
    opacity: .25;
}

/* =========================
   DOT-RAIN (your v2 analysis-3)
   ========================= */
.surface-analysis-3 {
    position: relative;
    background: linear-gradient(180deg,#0c0f17,#0b1322);
}

.dotrain3 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    display: grid;
    grid-template-columns: repeat(var(--cols),1fr);
    grid-auto-rows: 1fr;
    column-gap: 14px;
    padding-inline: var(--dotrain-inline-pad);
}

.d-col {
    display: grid;
    grid-template-rows: repeat(var(--rows),1fr);
    align-items: center;
    justify-items: center;
    --baseDur: 2.2s;
    --delayStep: .06s;
}

.d-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(12,52,110,.22);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    animation: dotFall linear infinite;
    animation-duration: calc(var(--baseDur) + (var(--col) * .025s) + (var(--rand) * 1.2s));
    animation-delay: calc((var(--r) * var(--delayStep)) + (var(--rand) * .6s));
}

@keyframes dotFall {
    0% {
        background: rgba(12,52,110,.22);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }

    25% {
        background: #bfe1ff;
        box-shadow: 0 0 6px rgba(0,180,255,.55);
    }

    40% {
        background: #00b4ff;
        box-shadow: 0 0 12px rgba(0,180,255,.85);
    }

    55% {
        background: #148dff;
        box-shadow: 0 0 6px rgba(0,140,255,.6);
    }

    100% {
        background: rgba(12,52,110,.22);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
}

.dotrain3::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(0,10,20,.8);
}

/* =========================
   ARROWS (v2)
   ========================= */
.arrow-pulse {
    display: inline-block;
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
    animation: glowPulse 1.8s ease-in-out infinite;
}

@keyframes glowPulse {
    0%,100% {
        filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
    }

    50% {
        filter: drop-shadow(0 0 18px rgba(255,255,255,1));
    }
}

.arrow-1 {
    animation-delay: 0.00s;
}

.arrow-2 {
    animation-delay: 0.15s;
}

.arrow-3 {
    animation-delay: 0.30s;
}

.arrow-4 {
    animation-delay: 0.45s;
}

/* Remove corner accents on Card 1 (ingest) to match Card 2 */
.surface--ingest::after {
    content: none !important; /* suppresses the base .surface-module::after corner accents */
}

/* Remove corner accents on Card 3 (analysis) to match Card 2 */
.surface-analysis-3::after {
    content: none !important;
}

/* Pull Dot-Rain dots away from the left/right edges */
.surface-analysis-3 { --dotrain-inline-pad: 6px; } /* tweak as needed */

.dotrain3 {
    padding-inline: var(--dotrain-inline-pad);
}

/* Optional: slightly smaller inset on narrow screens */
@media (max-width: 600px) {
    .surface-analysis-3 { --dotrain-inline-pad: 8px; }
}