/* =========================
   KOSMOS UI CORE PALETTE
   ========================= */

body {
  margin: 0;
  font-family: "Courier New", monospace;
  background: radial-gradient(circle at top, #0a0a0f, #000000);
  color: #d1d1d1;
}

body.locked {
  overflow: hidden;
  height: 100vh;
}


#bootOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 5, 10, 0.98);
  z-index: 99999;
  pointer-events: all;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  animation: glitchFlicker 2.5s infinite;
}

/* ARTEMIS LOGO (electric violet) */
.artemis-logo {
  color: #7c3cff; /* electric violet */
  font-size: 12px;
  line-height: 1.1;
  text-shadow:
    0 0 8px rgba(124, 60, 255, 0.7),
    0 0 20px rgba(124, 60, 255, 0.4);
  margin-bottom: 20px;
}

/* WARNING TEXT (radio red) */
.boot-text {
  color: #ff2e5f;
  font-family: "Courier New", monospace;
  letter-spacing: 2px;
  font-size: 14px;
  line-height: 1.6;
  text-shadow: 0 0 10px rgba(255, 46, 95, 0.6);
  margin-bottom: 30px;
}

/* hint */
.boot-hint {
  color: #666;
  font-size: 11px;
  letter-spacing: 3px;
  opacity: 0.7;
}

/* glitch effect */
@keyframes glitchFlicker {
  0%   { opacity: 1; transform: translate(0,0); }
  20%  { opacity: 0.95; transform: translate(-1px,1px); }
  40%  { opacity: 0.9; transform: translate(1px,-1px); }
  60%  { opacity: 0.98; transform: translate(-2px,0px); }
  80%  { opacity: 0.92; transform: translate(2px,1px); }
  100% { opacity: 1; transform: translate(0,0); }
}

/* optional: faint scanline feel */
#bootOverlay::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}
/* =========================
   HEADER BANNER
   ========================= */

.banner {
  position: relative;
  text-align: center;
  padding: 60px 20px;
  border-bottom: 2px solid #2b2b2b;
  background: linear-gradient(90deg, #050507, #0e0e14);
  overflow: hidden;
}

.banner-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,0,60,0.15), transparent 60%);
  top: 0;
  left: 0;
  animation: pulse 6s infinite;
}

.banner h1 {
  font-size: 32px;
  letter-spacing: 6px;
  color: #ff2e5f;
  text-shadow: 0 0 10px rgba(255, 0, 80, 0.6);
}

.subtitle {
  font-size: 12px;
  color: #7a7a7a;
  letter-spacing: 3px;
}

/* =========================
   NAVIGATION
   ========================= */

.nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 12px;
  background: #0b0b10;
  border-bottom: 1px solid #222;
}

.nav a {
  color: #aaa;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  transition: 0.3s;
}

.nav a:hover {
  color: #ff2e5f;
  text-shadow: 0 0 5px #ff2e5f;
}
.news-ticker {
    background: #050507;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    overflow: hidden;
    white-space: nowrap;
    height: 30px;

    display: flex;
    align-items: center;
}

.news-track {
    color: #ff2e5f;
    padding-left: 100%;
    animation: ticker 35s linear infinite;
    text-shadow: 0 0 8px rgba(255,46,95,.6);
    letter-spacing: 1px;
}

@keyframes ticker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
/* =========================
   MAIN LAYOUT
   ========================= */

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 20px;
}

/* =========================
   PANELS
   ========================= */

.panel {
  background: linear-gradient(145deg, #0c0c12, #0a0a0f);
  border: 1px solid #222;
  padding: 15px;
  box-shadow: inset 0 0 20px rgba(255, 0, 80, 0.05);
}

.panel h2 {
  color: #ff2e5f;
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

/* =========================
   ARTICLES
   ========================= */

.articles article {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1f1f1f;
}

.articles h3 {
  font-size: 13px;
  color: #e0e0e0;
}

.articles p {
  font-size: 12px;
  color: #888;
}

/* =========================
   NEWS FEED
   ========================= */

.signal-feed {
    position: fixed;
    right: 20px;
    top: 150px;

    width: 280px;
    height: 400px;

    overflow: hidden;

    border: 1px solid #222;
    background: rgba(5,5,7,.95);
}

/* =========================
   RADIO
   ========================= */

.radio-frame {
  border: 1px solid #2a2a2a;
  padding: 10px;
  background: #07070a;
}

.radio-status {
  font-size: 11px;
  color: #ff2e5f;
  margin-bottom: 8px;
}

.radio-text {
  font-size: 11px;
  color: #777;
  margin-top: 8px;
}
#visualizer {
  width: 100%;
  height: 120px;
  margin-top: 10px;
  background: #050507;
  border: 1px solid #2a2a2a;
  display: block;
}
/* =========================
   ARCHIVES
   ========================= */

.archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.archive-grid a {
  padding: 8px;
  background: #0a0a0f;
  border: 1px solid #222;
  text-align: center;
  font-size: 11px;
  color: #aaa;
  text-decoration: none;
  transition: 0.3s;
}

.archive-grid a:hover {
  background: #ff2e5f;
  color: black;
  box-shadow: 0 0 10px #ff2e5f;
}
/*=============
ARTICLES
============= */

.classified-article {
    margin-top: 40px;
}

/* ─────────────────────────────
   BLUEPRINT FRAME (PDF FAKE UI)
──────────────────────────── */

.blueprint-frame {
    margin-top: 20px;

    border: 1px solid #ff2a2a; /* RADIO RED */
    background: rgba(255, 20, 20, 0.03);

    box-shadow:
        0 0 20px rgba(255, 0, 0, 0.15),
        inset 0 0 20px rgba(255, 0, 0, 0.05);

    font-family: "Courier New", monospace;
}

/* HEADER BAR (like PDF viewer top bar) */
.blueprint-header {
    background: rgba(255, 0, 0, 0.1);
    color: #ff4d4d;

    padding: 10px;

    font-size: 0.8rem;
    letter-spacing: 2px;

    border-bottom: 1px solid rgba(255, 42, 42, 0.4);
}

/* SCROLLABLE AREA */
.blueprint-scroll {
    max-height: 300px;
    overflow-y: auto;

    padding: 15px;
}

/* individual “pages” */
.sheet {
    margin-bottom: 20px;
    padding-bottom: 15px;

    border-bottom: 1px dashed rgba(255, 0, 0, 0.25);
}

.sheet h4 {
    color: #ff2a2a;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

/* diagram styling */
.diagram {
    color: #ff6666;
    font-size: 0.9rem;

    background: rgba(255, 0, 0, 0.05);
    padding: 10px;

    border: 1px solid rgba(255, 0, 0, 0.2);
}

/* warning block */
.warning {
    color: #ff9999;
    font-style: italic;
}

/* =======
comments panel
====== */
/* ─────────────────────────────
   RIGHT PANEL (ART3M1S FEED)
──────────────────────────── */
@keyframes artemisPulse {
    0% { text-shadow: 0 0 4px rgba(255, 42, 42, 0.2); }
    50% { text-shadow: 0 0 12px rgba(255, 42, 42, 0.5); }
    100% { text-shadow: 0 0 4px rgba(255, 42, 42, 0.2); }
}

.log {
    animation: artemisPulse 3s infinite;
}
.artemis-commentary {
    border-left: 1px solid rgba(255, 42, 42, 0.4);
}

/* thin audio strip */
.commentary-audio {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 42, 42, 0.3);

    background: rgba(255, 0, 0, 0.05);
}

.commentary-audio audio {
    width: 100%;
    height: 24px;
}

/* title */
.artemis-commentary h3 {
    font-family: "Courier New", monospace;
    color: #ff2a2a;
    letter-spacing: 2px;
    padding: 10px;
}

/* scrollable feed */
.commentary-scroll {
    max-height: 450px;
    overflow-y: auto;
    padding: 10px;
}

/* individual logs */
.log {
    margin-bottom: 15px;
    line-height: 1.4;
    color: #ff6666;
    font-size: 0.95rem;
}

/* ─────────────────────────────
   ART3M1S “PERSONAL FONT” EFFECT
──────────────────────────── */

/* this is your identity voice */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

.artemis-commentary {
    font-family: "Share Tech Mono", monospace;
}

/* =========================
   FOOTER
   ========================= */

footer {
  text-align: center;
  font-size: 10px;
  padding: 20px;
  color: #555;
  border-top: 1px solid #222;
}
/* =========
  HEX ARCHIVES LAYOUT
  ========== */
  

.network{
    position:relative;
    width:100vw;
    height:85vh;
}

/* SVG WIRES */

.wires{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}



.wires path{
    fill:none;
    stroke:#ff2d2d;
    stroke-width:3;

    filter:
        drop-shadow(0 0 3px #ff2d2d)
        drop-shadow(0 0 10px #ff2d2d);

    animation:pulse 4s infinite;
}

@keyframes pulse{
    0%,100%{
        opacity:.4;
    }
    50%{
        opacity:1;
    }
    
}


/* HEXES */

.hex{
    position:absolute;

    display:flex;
    justify-content:center;
    align-items:center;

    text-decoration:none;
    color:#ffdddd;

    background:#101010;

    border:4px solid #ff2d2d;

    clip-path:polygon(
        25% 5%,
        75% 5%,
        100% 50%,
        75% 95%,
        25% 95%,
        0% 50%
    );

    transition:.3s;
}

.hex:hover{
    transform:scale(1.08);

    box-shadow:
        0 0 10px #ff2d2d,
        0 0 40px #ff2d2d;

    color:white;
}

/* SIZES */

.tiny{
    width:70px;
    height:70px;
}

.small{
    width:90px;
    height:90px;
}

.medium{
    width:120px;
    height:120px;
}

.large{
    width:140px;
    height:140px;
}

.huge{
    width:180px;
    height:180px;
}

/* POSITIONING */

.center{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.left{
    left:22%;
    top:25%;
}

.top{
    left:47%;
    top:8%;
}

.pina{
    left:63%;
    top:25%;
}

.right{
    left:58%;
    top:52%;
}

.bottom{
    left:47%;
    top:75%;
}

.lowerleft{
    left:20%;
    top:56%;
}

/* PINA SUBTREE */

.high{
    left:72%;
    top:10%;
}

.exp{
    left:84%;
    top:7%;
}

.tech{
    left:75%;
    top:42%;
}
/* =========================
   ANIMATIONS
   ========================= */

@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { opacity: 0.4; }
}