/*
 * AETHER — Design-system utilities (single source of truth)
 * ---------------------------------------------------------
 * Consolidated from the four page prototypes so surface treatments
 * (glass, holo-borders, scanlines, chamfers, HUD scrollbars) can only
 * be defined once. Page-specific one-off animations stay inline in
 * their own page. See DESIGN.md for the rationale behind each treatment.
 */

/* ---- Keyframes -------------------------------------------------------- */
@keyframes aether-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.5; }
}
@keyframes aether-pulse-scale {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}
/* Powers `animate-[shimmer_2s_infinite]` — previously referenced but never
   defined, so the Data Streamer traffic bar never actually moved. */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(150%); }
}

.glow-pulse   { animation: aether-pulse 3s infinite ease-in-out; }
.neural-pulse { animation: aether-pulse-scale 4s infinite ease-in-out; }

/* ---- Surfaces & borders --------------------------------------------- */
.glass-card {
  background: rgba(16, 20, 26, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 229, 255, 0.2);
  position: relative;
  overflow: hidden;
}
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 3px;
  pointer-events: none;
}
.glass-panel {
  background: rgba(16, 20, 26, 0.6);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(132, 147, 150, 0.2);
}
.hologram-glow { box-shadow: 0 0 15px rgba(0, 229, 255, 0.15); }

.glow-border {
  border: 1px solid rgba(0, 229, 255, 0.3);
  transition: all 0.3s ease;
}
.glow-border:hover {
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}
.holo-border {
  border: 1px solid rgba(0, 229, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.holo-border:hover {
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
  background: rgba(0, 229, 255, 0.05);
}
.holographic-border {
  border: 1px solid rgba(0, 229, 255, 0.3);
  box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1);
  transition: all 0.3s ease;
}
.holographic-border:hover {
  border-color: rgba(0, 229, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 15px rgba(0, 229, 255, 0.2);
}

/* ---- Scanline overlays ----------------------------------------------- */
.scanline {
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 229, 255, 0.05) 50%);
  background-size: 100% 4px;
}
.scanline-overlay {
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 229, 255, 0.05) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(0, 255, 0, 0), rgba(0, 0, 255, 0));
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.scanline-animation {
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 229, 255, 0.05) 50.5%,
    transparent 51%
  );
  background-size: 100% 4px;
  pointer-events: none;
}

/* ---- Shapes ---------------------------------------------------------- */
/* 45° chamfered corners — the "action module" accent from DESIGN.md */
.chamfer {
  clip-path: polygon(
    0% 8px, 8px 0%,
    calc(100% - 8px) 0%, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 0% calc(100% - 8px)
  );
}
/* Asymmetric "data crystal" clip used by archive cards */
.data-crystal {
  clip-path: polygon(
    10px 0%, 100% 0%,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    0% 100%, 0% 10px
  );
}

/* ---- HUD affordances ------------------------------------------------- */
.coordinate-label {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 8px;
  color: rgba(0, 229, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
}

/* ---- Scrollbars ------------------------------------------------------ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.5); }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.2); border-radius: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.5); }

/* Hide scrollbar on horizontal tool rails while keeping scroll behaviour */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }