/* Shared animated background styles for auth and presentation pages.
   Vertical data stream lines, horizon glow, and floating dashboard fragments
   inspired by splunk.com visual language. */

/* === Data stream lines (vertical, flowing) === */
.stream-line {
    position: absolute;
    top: -20%;
    width: 1px;
    height: 140%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(245,158,11,0.0) 10%,
        rgba(245,158,11,0.35) 30%,
        rgba(234,88,12,0.5) 50%,
        rgba(245,158,11,0.35) 70%,
        rgba(245,158,11,0.0) 90%,
        transparent 100%
    );
    animation: streamFlow linear infinite;
}
.stream-line::after {
    content: '';
    position: absolute;
    top: 45%;
    left: -1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(245,158,11,0.9);
    box-shadow: 0 0 6px rgba(245,158,11,0.6);
    animation: particlePulse 3s ease-in-out infinite;
}
@keyframes streamFlow {
    0%   { transform: translateY(-15%); }
    100% { transform: translateY(15%); }
}
@keyframes particlePulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

/* Stream line positions */
.s1  { left: 4%;   opacity: 0.15; animation-duration: 18s; }
.s2  { left: 8%;   opacity: 0.25; animation-duration: 14s; animation-delay: -3s; }
.s3  { left: 12%;  opacity: 0.10; animation-duration: 20s; animation-delay: -7s; }
.s4  { left: 18%;  opacity: 0.20; animation-duration: 16s; animation-delay: -2s; }
.s5  { left: 25%;  opacity: 0.30; animation-duration: 12s; animation-delay: -5s; }
.s6  { left: 33%;  opacity: 0.12; animation-duration: 22s; animation-delay: -8s; }
.s7  { left: 40%;  opacity: 0.08; animation-duration: 19s; animation-delay: -4s; }
.s8  { left: 55%;  opacity: 0.10; animation-duration: 21s; animation-delay: -6s; }
.s9  { left: 62%;  opacity: 0.22; animation-duration: 15s; animation-delay: -1s; }
.s10 { left: 70%;  opacity: 0.35; animation-duration: 13s; animation-delay: -4s; }
.s11 { left: 75%;  opacity: 0.28; animation-duration: 14s; animation-delay: -9s; }
.s12 { left: 80%;  opacity: 0.18; animation-duration: 17s; animation-delay: -3s; }
.s13 { left: 86%;  opacity: 0.12; animation-duration: 20s; animation-delay: -7s; }
.s14 { left: 92%;  opacity: 0.22; animation-duration: 16s; animation-delay: -2s; }
.s15 { left: 96%;  opacity: 0.08; animation-duration: 23s; animation-delay: -5s; }

/* Particle dot delays */
.s2::after  { animation-delay: -1s; }
.s5::after  { animation-delay: -2s; }
.s9::after  { animation-delay: -0.5s; }
.s10::after { animation-delay: -1.5s; }
.s11::after { animation-delay: -2.5s; }
.s14::after { animation-delay: -0.8s; }

/* === Horizon glow === */
.horizon-glow {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    top: 38%;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(245,158,11,0.06) 20%,
        rgba(234,88,12,0.12) 40%,
        rgba(206,0,112,0.08) 60%,
        rgba(245,158,11,0.06) 80%,
        transparent 95%
    );
    box-shadow: 0 0 30px rgba(245,158,11,0.04);
    animation: horizonPulse 8s ease-in-out infinite;
}
@keyframes horizonPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.9; }
}

/* === Floating dashboard fragments === */
.dash-fragment {
    position: absolute;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    backdrop-filter: blur(4px);
    animation: fragmentFloat 20s ease-in-out infinite;
}
@keyframes fragmentFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Mini metric bars inside fragments */
.metric-bar {
    border-radius: 1px;
    animation: barGrow 4s ease-in-out infinite;
}
@keyframes barGrow {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.6); }
}

/* === Signal trace line (SVG) === */
.trace-path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.trace-draw {
    stroke-dasharray: 200;
    animation: traceDraw 6s ease-in-out infinite;
}
@keyframes traceDraw {
    0%   { stroke-dashoffset: 200; opacity: 0; }
    10%  { opacity: 0.6; }
    50%  { stroke-dashoffset: 0; opacity: 0.6; }
    60%  { opacity: 0; }
    100% { stroke-dashoffset: -200; opacity: 0; }
}

/* === Accessibility: reduce motion === */
@media (prefers-reduced-motion: reduce) {
    .stream-line, .stream-line::after, .horizon-glow,
    .dash-fragment, .metric-bar, .trace-draw { animation: none; }
    .stream-line { opacity: 0.1; }
}