/* 
  Kynlo Akari — Personal System Stylesheet
  Hyper-Modern, Non-AI Industrial / Telemetry Design
  Host: kynloakari.com
*/

@keyframes radar-sweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes terminal-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

@keyframes float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Engineering Dot Grid Background */
.bg-tech-grid {
  background-color: #07080b;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 28px 28px, 112px 112px, 112px 112px;
}

/* Vignette Depth */
.bg-vignette {
  background: radial-gradient(circle at 50% 20%, transparent 40%, rgba(7, 8, 11, 0.92) 90%);
}

/* Technical Corner Brackets */
.corner-bracket {
  position: relative;
}
.corner-bracket::before,
.corner-bracket::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.corner-bracket::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid rgba(0, 240, 255, 0.6);
  border-left: 2px solid rgba(0, 240, 255, 0.6);
}
.corner-bracket::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid rgba(0, 240, 255, 0.6);
  border-right: 2px solid rgba(0, 240, 255, 0.6);
}
.corner-bracket:hover::before,
.corner-bracket:hover::after {
  width: 12px;
  height: 12px;
  border-color: #00f0ff;
}

/* Accent Variants */
.corner-bracket-amber::before,
.corner-bracket-amber::after {
  border-color: rgba(245, 158, 11, 0.6);
}
.corner-bracket-amber:hover::before,
.corner-bracket-amber:hover::after {
  border-color: #f59e0b;
}

.corner-bracket-purple::before,
.corner-bracket-purple::after {
  border-color: rgba(168, 85, 247, 0.6);
}
.corner-bracket-purple:hover::before,
.corner-bracket-purple:hover::after {
  border-color: #a855f7;
}

.corner-bracket-emerald::before,
.corner-bracket-emerald::after {
  border-color: rgba(16, 185, 129, 0.6);
}
.corner-bracket-emerald:hover::before,
.corner-bracket-emerald:hover::after {
  border-color: #10b981;
}

/* Custom Telemetry Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #07080b;
}
::-webkit-scrollbar-thumb {
  background: #1b202c;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00f0ff;
}

/* Terminal Cursor */
.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: #00f0ff;
  vertical-align: middle;
  animation: terminal-blink 1s infinite;
  margin-left: 3px;
}

/* Precision Surfaces */
.tech-border {
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tech-border:hover {
  border-color: rgba(0, 240, 255, 0.35);
}

.tech-surface {
  background: rgba(12, 14, 20, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Glow Accents */
.glow-cyan {
  box-shadow: 0 0 25px -5px rgba(0, 240, 255, 0.3);
}
.glow-amber {
  box-shadow: 0 0 25px -5px rgba(245, 158, 11, 0.3);
}
.glow-purple {
  box-shadow: 0 0 25px -5px rgba(168, 85, 247, 0.3);
}
.glow-emerald {
  box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.3);
}

/* Crosshair Decorator */
.crosshair-node {
  position: relative;
}
.crosshair-node::before {
  content: "+";
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}