/* Animación del hero: dispositivos -> cables -> rack. Solo se carga en index.html */
.rack-net { width: 100%; max-width: 640px; height: auto; justify-self: center; }

.rack-net .dr { stroke-dasharray: 1; }
.rack-net .dr:not(.dev) { animation: rk-draw var(--t, .8s) ease-out var(--s, 0s) backwards; }
.rack-net .frame { fill: rgba(255, 255, 255, .02); stroke: rgba(207, 227, 255, .5); stroke-width: 1.6; --t: 1.4s; --s: .2s; }

.rack-net .ep { animation: rk-fade .5s ease-out var(--e) backwards; }
.rack-net .ep * { fill: none; stroke: #cfe3ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rack-net .ep .f { fill: rgba(207, 227, 255, .3); stroke: none; }
.rack-net .ep text { fill: rgba(207, 227, 255, .8); stroke: none; font: 500 11px 'Courier New', monospace; letter-spacing: .08em; }

.rack-net .cab { fill: none; stroke: var(--cian); stroke-opacity: .8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; animation: rk-draw 1.6s linear var(--s) backwards; }
.rack-net .sig, .rack-net .flow, .rack-net .up { opacity: 0; }
.rack-net .sig { animation: rk-travel 1.6s linear var(--s) backwards; }
.rack-net .flow { animation: rk-travel 3.4s linear var(--l) infinite; }
.rack-net .upflow { animation: rk-travel 2.6s linear 7.3s infinite; }

.rack-net .vl { font: 500 11px 'Courier New', monospace; letter-spacing: .06em; animation: rk-fade .4s ease-out var(--s) backwards; }
.rack-net .lbl { font: 500 12px 'Courier New', monospace; letter-spacing: .08em; fill: var(--cian); opacity: .9; animation: rk-fade .4s ease-out var(--s) backwards; }
.rack-net .dev { fill: rgba(255, 255, 255, .05); stroke: #cfe3ff; stroke-width: 1.6;
  animation: rk-draw .8s ease-out var(--s) backwards, rk-fade .8s ease-out var(--s) backwards; }
.rack-net .det { fill: none; stroke: rgba(207, 227, 255, .75); stroke-width: 1.3; stroke-linecap: round; animation: rk-fade .5s ease-out calc(var(--s) + .6s) backwards; }
.rack-net .det.fill { fill: rgba(207, 227, 255, .25); }
.rack-net .led { fill: var(--verde); animation: rk-fade .3s ease-out calc(var(--s) + .7s) backwards, rk-blink 2.4s steps(1) calc(var(--s) + 1.4s) infinite; }
.rack-net .led.c { fill: var(--cian); }
.rack-net .red { fill: var(--naranja); animation: rk-fade .5s ease-out calc(var(--s) + .6s) backwards; }
.rack-net .shield { fill: none; stroke: var(--naranja); stroke-width: 1.8; stroke-linejoin: round; animation: rk-fade .5s ease-out calc(var(--s) + .6s) backwards; }
.rack-net .bat { fill: var(--verde); fill-opacity: .55; stroke: none; animation: rk-fade .5s ease-out calc(var(--s) + .6s) backwards; }
.rack-net .cloud { fill: rgba(255, 255, 255, .06); stroke: #cfe3ff; stroke-width: 1.6; stroke-linejoin: round; animation: rk-fade .6s ease-out 5.7s backwards; }
.rack-net .upl { fill: none; stroke: var(--cian); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; --s: 5.9s; --t: .7s; }
.rack-net .online { font: 500 12px 'Courier New', monospace; letter-spacing: .12em; fill: var(--verde); animation: rk-fade .6s ease-out 6.9s backwards; }

@keyframes rk-draw { from { stroke-dashoffset: 1; } }
@keyframes rk-fade { from { opacity: 0; } }
@keyframes rk-blink { 50% { opacity: .25; } }
@keyframes rk-travel {
  0% { offset-distance: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (max-width: 980px) { .rack-net { max-width: 520px; } }
@media (max-width: 520px) { .rack-net .lbl, .rack-net .vl, .rack-net .ep text { display: none; } }
@media (prefers-reduced-motion: reduce) { .rack-net * { animation: none !important; } }