/* ANIMATED ICONS CSS */
.loop-icon-anim { width: 100%; height: 100%; position: relative; }

/* Annotate */
.icon-anno-box { position: absolute; inset: 10px; border: 1px solid rgba(0,255,204,0.3); }
.icon-anno-corner { position: absolute; width: 6px; height: 6px; border-color: #00FFCC; border-style: solid; transition: all 0.3s; }
.tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; }
.br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }
.icon-anno-scan { position: absolute; top: 12px; left: 12px; right: 12px; height: 2px; background: #00FFCC; box-shadow: 0 0 5px #00FFCC; animation: scanIcon 2s ease-in-out infinite; }
@keyframes scanIcon { 0%, 100% { top: 12px; opacity: 0; } 50% { top: 80%; opacity: 1; } }

/* Intel */
.icon-intel-core { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: #8A2BE2; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px #8A2BE2; animation: pulseIcon 2s infinite; }
.icon-intel-ring { position: absolute; inset: 8px; border: 1px dashed rgba(138,43,226,0.4); border-radius: 50%; animation: spinIcon 4s linear infinite; }
.icon-intel-sat { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translateX(-50%); }
@keyframes spinIcon { 100% { transform: rotate(360deg); } }
@keyframes pulseIcon { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } }

/* Operate */
.icon-ops-radar { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255,69,0,0.2); overflow: hidden; }
.icon-ops-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0%, rgba(255,69,0,0.5) 100%); animation: spinIcon 2s linear infinite; border-radius: 50%; }
.icon-ops-blip { position: absolute; top: 20%; right: 20%; width: 4px; height: 4px; background: #FF4500; border-radius: 50%; animation: blipIcon 2s infinite; }
@keyframes blipIcon { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }

/* Stats Context Styling Update */
.loop-stat-context { font-size: 11px !important; color: #666 !important; margin-top: 8px; line-height: 1.4; font-weight: 400; opacity: 1 !important; }

@media (min-width: 769px) {
    .timeline-step, .scale-item { scroll-margin-top: 140px; }
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 10001;
}
.skip-link:focus {
    top: 0;
}