/* =====================================================
   ANLESTO.ID - FUTURISTIC HERO ANIMATION
   Holographic Tech Scene
   ===================================================== */

/* ---- Hero override for animation scene ---- */
.hero {
    background: #020b18 !important;
    overflow: hidden;
}

/* ---- Main animation stage ---- */
.tech-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ===== GRID FLOOR ===== */
.grid-floor {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 60%;
    background-image:
        linear-gradient(rgba(0,150,255,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,150,255,0.15) 1px, transparent 1px);
    background-size: 60px 60px;
    transform-origin: bottom center;
    transform: translateX(-50%) perspective(600px) rotateX(65deg);
    animation: gridPulse 4s ease-in-out infinite alternate;
}

@keyframes gridPulse {
    0%  { opacity: 0.4; background-size: 60px 60px; }
    100%{ opacity: 0.9; background-size: 62px 62px; }
}

/* Grid fade overlay */
.grid-floor::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, transparent 0%, #020b18 75%);
}

/* ===== HOLOGRAPHIC GLOBE ===== */
.holo-globe-wrap {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .holo-globe-wrap { right: -60px; opacity: 0.4; width: 280px; height: 280px; }
}
@media (max-width: 768px) {
    .holo-globe-wrap { display: none; }
}

.holo-globe {
    position: relative;
    width: 240px;
    height: 240px;
}

/* Core globe sphere */
.globe-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        rgba(0,160,255,0.25) 0%,
        rgba(0,80,200,0.15) 40%,
        rgba(0,20,80,0.3) 100%
    );
    border: 1px solid rgba(0,180,255,0.4);
    box-shadow:
        0 0 40px rgba(0,150,255,0.3),
        inset 0 0 60px rgba(0,100,255,0.15);
    animation: globePulse 3s ease-in-out infinite alternate;
}

@keyframes globePulse {
    0%  { box-shadow: 0 0 40px rgba(0,150,255,0.3), inset 0 0 60px rgba(0,100,255,0.15); }
    100%{ box-shadow: 0 0 80px rgba(0,200,255,0.5), inset 0 0 80px rgba(0,160,255,0.25); }
}

/* Globe latitude lines */
.globe-lat {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0,200,255,0.2);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    animation: globeRotate 8s linear infinite;
}
.globe-lat:nth-child(1) { width: 100%; height: 30%; }
.globe-lat:nth-child(2) { width: 100%; height: 60%; }
.globe-lat:nth-child(3) { width: 100%; height: 85%; }
.globe-lat:nth-child(4) { width: 100%; height: 100%; }

/* Globe longitude lines */
.globe-lon {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(0,180,255,0.15);
    animation: globeRotate 12s linear infinite reverse;
}
.globe-lon:nth-child(5) { transform: rotateY(30deg); }
.globe-lon:nth-child(6) { transform: rotateY(60deg); }
.globe-lon:nth-child(7) { transform: rotateY(90deg); }
.globe-lon:nth-child(8) { transform: rotateY(120deg); }
.globe-lon:nth-child(9) { transform: rotateY(150deg); }

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

/* Globe glow dot nodes */
.globe-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px rgba(0,212,255,0.8);
    animation: dotBlink 2s ease-in-out infinite alternate;
}
.globe-dot:nth-child(10) { top: 20%; left: 30%; animation-delay: 0s; }
.globe-dot:nth-child(11) { top: 50%; left: 70%; animation-delay: 0.4s; }
.globe-dot:nth-child(12) { top: 70%; left: 40%; animation-delay: 0.8s; }
.globe-dot:nth-child(13) { top: 35%; left: 60%; animation-delay: 1.2s; }
.globe-dot:nth-child(14) { top: 65%; left: 20%; animation-delay: 0.6s; }

@keyframes dotBlink {
    0%  { opacity: 0.3; transform: scale(0.8); }
    100%{ opacity: 1;   transform: scale(1.3); }
}

/* ===== ORBIT RINGS ===== */
.orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(0,200,255,0.6);
    border-bottom-color: rgba(0,100,255,0.2);
    animation: orbitSpin var(--dur, 6s) linear infinite;
    transform-style: preserve-3d;
}
.orbit:nth-child(15) {
    --dur: 5s;
    width: 110%; height: 110%;
    top: -5%; left: -5%;
    transform: rotateX(70deg);
}
.orbit:nth-child(16) {
    --dur: 8s;
    width: 130%; height: 130%;
    top: -15%; left: -15%;
    transform: rotateX(70deg) rotateZ(40deg);
    border-top-color: rgba(120,80,255,0.5);
}
.orbit:nth-child(17) {
    --dur: 12s;
    width: 160%; height: 160%;
    top: -30%; left: -30%;
    transform: rotateX(70deg) rotateZ(80deg);
    border-top-color: rgba(0,255,200,0.3);
}

/* Orbit satellite dot */
.orbit::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 8px; height: 8px;
    margin-left: -4px; margin-top: -4px;
    background: rgba(0,220,255,0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px 3px rgba(0,220,255,0.7);
}

@keyframes orbitSpin {
    from { transform: rotateX(70deg) rotateZ(var(--z, 0deg)); }
    to   { transform: rotateX(70deg) rotateZ(calc(var(--z, 0deg) + 360deg)); }
}

/* ===== FLOATING UI PANELS ===== */
.ui-panel {
    position: absolute;
    background: rgba(0,20,60,0.7);
    border: 1px solid rgba(0,180,255,0.3);
    border-radius: 8px;
    padding: 12px 16px;
    backdrop-filter: blur(8px);
    animation: panelFloat var(--float-dur, 4s) ease-in-out infinite alternate;
    box-shadow: 0 0 20px rgba(0,100,255,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}

@keyframes panelFloat {
    0%  { transform: translateY(0); }
    100%{ transform: translateY(-12px); }
}

.ui-panel-1 {
    left: 3%;
    top: 18%;
    width: 180px;
    --float-dur: 4s;
}
.ui-panel-2 {
    left: 2%;
    bottom: 22%;
    width: 160px;
    --float-dur: 5.5s;
}
.ui-panel-3 {
    right: 45%;
    bottom: 28%;
    width: 150px;
    --float-dur: 3.5s;
}

@media (max-width: 768px) {
    .ui-panel-1, .ui-panel-2, .ui-panel-3 { display: none; }
}

/* Panel header bar */
.panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,180,255,0.2);
}
.panel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: dotBlink 1.5s ease-in-out infinite alternate;
}
.panel-dot-green { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
.panel-dot-blue  { background: #00d4ff; box-shadow: 0 0 6px #00d4ff; }
.panel-dot-amber { background: #ffbb00; box-shadow: 0 0 6px #ffbb00; }
.panel-title {
    font-size: 9px;
    color: rgba(100,200,255,0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: monospace;
}

/* Bar chart inside panel */
.panel-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 36px;
    margin-bottom: 6px;
}
.panel-bar {
    flex: 1;
    background: linear-gradient(to top, rgba(0,150,255,0.8), rgba(0,220,255,0.4));
    border-radius: 2px 2px 0 0;
    animation: barGrow 2s ease-in-out infinite alternate;
    animation-delay: var(--bar-delay, 0s);
    transform-origin: bottom;
}
@keyframes barGrow {
    0%  { transform: scaleY(0.6); opacity: 0.6; }
    100%{ transform: scaleY(1);   opacity: 1;   }
}

/* Panel text lines */
.panel-line {
    height: 4px;
    border-radius: 2px;
    background: rgba(0,180,255,0.25);
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}
.panel-line::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,220,255,0.7), transparent);
    animation: scanLine 2.5s linear infinite;
    animation-delay: var(--scan-delay, 0s);
}
@keyframes scanLine {
    from { left: -60%; }
    to   { left: 110%;  }
}
.panel-line-short { width: 60%; }

/* ===== DATA FLOW BEAMS ===== */
.beam-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.beam {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(0,200,255,0.8), rgba(0,100,255,0.4), transparent);
    animation: beamFall var(--beam-dur, 3s) linear infinite;
    animation-delay: var(--beam-delay, 0s);
    border-radius: 2px;
    filter: blur(0.5px);
}

@keyframes beamFall {
    0%  { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100%{ transform: translateY(100vh); opacity: 0; }
}

/* ===== SCANNING LINE ===== */
.scan-sweep {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,200,255,0.05) 10%,
        rgba(0,200,255,0.4) 50%,
        rgba(0,200,255,0.05) 90%,
        transparent 100%
    );
    animation: scanSweep 6s ease-in-out infinite;
    pointer-events: none;
    filter: blur(1px);
}
@keyframes scanSweep {
    0%   { top: -2px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ===== CIRCUIT LINES ===== */
.circuit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.circuit-path {
    fill: none;
    stroke: rgba(0,150,255,0.2);
    stroke-width: 1;
}

.circuit-path-anim {
    fill: none;
    stroke: rgba(0,220,255,0.7);
    stroke-width: 1.5;
    stroke-dasharray: 20 200;
    animation: circuitFlow 4s linear infinite;
}

@keyframes circuitFlow {
    from { stroke-dashoffset: 220; }
    to   { stroke-dashoffset: -220; }
}

.circuit-node {
    fill: rgba(0,220,255,0.8);
    animation: nodePulse 2s ease-in-out infinite alternate;
}

@keyframes nodePulse {
    0%  { r: 2; opacity: 0.5; }
    100%{ r: 4; opacity: 1; }
}

/* ===== CORNER HUD ELEMENTS ===== */
.hud-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
}
.hud-corner::before, .hud-corner::after {
    content: '';
    position: absolute;
    background: rgba(0,200,255,0.6);
}
.hud-corner::before { width: 2px; height: 100%; }
.hud-corner::after  { width: 100%; height: 2px; }

.hud-tl { top: 24px; left: 24px; }
.hud-tr { top: 24px; right: 24px; transform: scaleX(-1); }
.hud-bl { bottom: 30px; left: 24px; transform: scaleY(-1); }
.hud-br { bottom: 30px; right: 24px; transform: scale(-1); }

.hud-corner-ring {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,200,255,0.5);
    animation: hudBlink 3s ease-in-out infinite alternate;
}
.hud-tl .hud-corner-ring { top: -1px; left: -1px; }
.hud-tr .hud-corner-ring { top: -1px; right: -1px; }
.hud-bl .hud-corner-ring { bottom: -1px; left: -1px; }
.hud-br .hud-corner-ring { bottom: -1px; right: -1px; }

@keyframes hudBlink {
    0%  { opacity: 0.3; box-shadow: none; }
    100%{ opacity: 1;   box-shadow: 0 0 8px rgba(0,200,255,0.6); }
}

/* ===== PARTICLES ===== */
.p-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(0,220,255,0.7);
    box-shadow: 0 0 6px rgba(0,220,255,0.5);
    animation: floatDot var(--dot-dur, 8s) ease-in-out infinite alternate;
    animation-delay: var(--dot-delay, 0s);
}

@keyframes floatDot {
    0%  { transform: translate(0, 0); opacity: 0.3; }
    50% { opacity: 0.9; }
    100%{ transform: translate(var(--dot-tx, 20px), var(--dot-ty, -30px)); opacity: 0.3; }
}

/* ===== Hologram ring on left ===== */
.holo-ring {
    position: absolute;
    left: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(0,150,255,0.08);
    pointer-events: none;
    animation: ringPulse var(--ring-dur,5s) ease-in-out infinite alternate;
}
@keyframes ringPulse {
    0%  { transform: translateY(-50%) scale(1); opacity:0.08; }
    100%{ transform: translateY(-50%) scale(1.05); opacity:0.2; }
}
.holo-ring:nth-child(2) { width: 220px; height: 220px; left: -20px; animation-delay:0.8s; --ring-dur:4s; }
.holo-ring:nth-child(3) { width: 140px; height: 140px; left: 20px;  animation-delay:1.6s; --ring-dur:3s; }