/* ════════════════════════════════════════════════════════════════════════════
   archive.css — blueprint constellation, scoped to #archive-view
   Load this AFTER artifacts.css
   ════════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300;1,500&display=swap");

/* ── tokens on archive-view ── */
#archive-view {
  --a-bg:     #0a1628;
  --a-grid:   rgba(100,160,230,0.07);
  --a-rule:   rgba(100,160,230,0.14);
  --a-ink:    rgba(180,215,255,0.90);
  --a-mid:    rgba(150,195,245,0.65);
  --a-soft:   rgba(110,165,228,0.40);
  --a-faint:  rgba(80,130,200,0.12);
  --a-accent: #4fa3e8;
  --a-glow:   rgba(79,163,232,0.25);
  --a-cream:  #e8f2ff;
  --a-mono:   "Space Mono", monospace;
  --a-serif:  "Cormorant Garamond", Georgia, serif;
}

/* ── archive-view: visual shell ──
   display is controlled by script.js (none / block).
   We only set the visual properties here, not display.        */
#archive-view {
  position:       relative  !important;
  overflow:       hidden    !important;
  min-height:     340px;
  background:     var(--a-bg)              !important;
  border:         1px solid var(--a-rule)  !important;
  border-radius:  3px                      !important;
  margin:         0                        !important;
  padding:        0                        !important;
  /* flex layout when visible — script.js sets display:block,
     we upgrade it to flex here via a more specific rule below */
}

/* when script.js sets display:block, we override to flex */
#archive-view[style*="display: block"],
#archive-view[style*="display:block"] {
  display: flex         !important;
  flex-direction: column !important;
}

/* blueprint grid */
#archive-view::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--a-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--a-grid) 1px, transparent 1px),
    linear-gradient(var(--a-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--a-grid) 1px, transparent 1px);
  background-size:     80px 80px, 80px 80px, 20px 20px, 20px 20px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px;
  pointer-events: none;
  z-index: 0;
}

/* ── desc line ── */
.archive-desc {
  display:        block         !important;
  font-family:    var(--a-mono) !important;
  font-size:      9px           !important;
  letter-spacing: 3px           !important;
  color:          var(--a-soft) !important;
  font-style:     italic        !important;
  text-transform: lowercase     !important;
  text-align:     center        !important;
  padding:        6px 0 10px   !important;
  margin:         0             !important;
}

/* ── constellation container ── */
#constellation-container {
  position:   relative  !important;
  flex:       1         !important;
  width:      100%      !important;
  min-height: 300px     !important;
  overflow:   hidden    !important;
  z-index:    1         !important;
}

/* ── corner ticks ── */
.arc-corner {
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
  z-index: 5;
}
.arc-corner::before, .arc-corner::after {
  content: "";
  position: absolute;
  background: var(--a-accent);
  opacity: 0.38;
}
.arc-corner::before { width:100%;  height:1px; top:0; left:0; }
.arc-corner::after  { width:1px; height:100%;  top:0; left:0; }
.arc-corner.tl { top:12px;    left:12px;  }
.arc-corner.tr { top:12px;    right:12px; transform:scaleX(-1); }
.arc-corner.bl { bottom:12px; left:12px;  transform:scaleY(-1); }
.arc-corner.br { bottom:12px; right:12px; transform:scale(-1);  }

/* ── SVG line layer ── */
.archive-line-svg {
  position: absolute; inset:0;
  width:100%; height:100%;
  pointer-events: none;
  z-index: 2; overflow: visible;
}
.archive-line-svg line {
  stroke: var(--a-rule);
  stroke-width: 0.6;
  opacity: 0;
  animation: aLineIn 0.8s ease forwards;
  transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s;
}
.archive-line-svg line.lit {
  stroke: var(--a-accent) !important;
  stroke-width: 1.4 !important;
  opacity: 0.85 !important;
}
@keyframes aLineIn { to { opacity: 0.45; } }

/* ── doodles ── */
.archive-doodle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  color: var(--a-accent);
  opacity: 0;
  animation: aDoodleIn 1.2s ease forwards;
}
@keyframes aDoodleIn { to { opacity: 1; } }

/* ── hint ── */
.archive-hint {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--a-mono);
  font-size: 7px; letter-spacing: 3px;
  color: var(--a-soft);
  text-transform: lowercase;
  pointer-events: none; white-space: nowrap;
  z-index: 5; opacity: 0;
  animation: aHint 10s ease 2.2s forwards;
}
@keyframes aHint {
  0%  { opacity:0; } 10% { opacity:1; }
  80% { opacity:1; } 100%{ opacity:0.4; }
}

/* ── star nodes ── */
.star-node {
  position: absolute;
  transform: translate(-50%,-50%);
  cursor: pointer; z-index: 10;
  opacity: 0;
  animation: aNodeIn 0.5s ease forwards;
}
@keyframes aNodeIn {
  from { opacity:0; transform:translate(-50%,-50%) scale(0.3); }
  to   { opacity:1; transform:translate(-50%,-50%); }
}

.star-glyph {
  position: relative; width:30px; height:30px;
}
.star-glyph::before, .star-glyph::after {
  content:""; position:absolute;
  background: var(--a-mid); opacity:0.7;
  transition: background 0.2s, opacity 0.2s;
}
.star-glyph::before { width:1px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.star-glyph::after  { height:1px; width:100%; top:50%; left:0; transform:translateY(-50%); }

.node-dot {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:5px; height:5px; border-radius:50%;
  border:1px solid var(--a-mid);
  background: var(--a-bg);
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.star-label {
  position:absolute; top:50%;
  transform:translateY(-50%);
  white-space:nowrap; pointer-events:none;
}
.label-right { left:  calc(100% + 10px); }
.label-left  { right: calc(100% + 10px); text-align:right; }

.star-name {
  font-family: var(--a-mono);
  font-size:9px; letter-spacing:2px;
  color: var(--a-mid); text-transform:lowercase;
  transition:color 0.2s; line-height:1;
}
.star-year {
  font-family: var(--a-mono);
  font-size:7px; letter-spacing:1.5px;
  color: var(--a-soft); margin-top:3px;
}

.star-node:hover .node-dot         { background:var(--a-accent); border-color:var(--a-accent); width:9px; height:9px; box-shadow:0 0 10px var(--a-glow); }
.star-node:hover .star-glyph::before,
.star-node:hover .star-glyph::after { background:var(--a-accent); opacity:0.8; }
.star-node:hover .star-name          { color:var(--a-ink); }

.star-node.active .node-dot          { background:var(--a-accent); border-color:var(--a-accent); width:11px; height:11px; box-shadow:0 0 18px var(--a-glow); }
.star-node.active .star-glyph::before,
.star-node.active .star-glyph::after { background:var(--a-accent); opacity:0.95; }
.star-node.active .star-name          { color:var(--a-cream); }

.star-node.dim { opacity:0.18; transition:opacity 0.2s; }

/* ── project panel ── */
#project-panel {
  position:   absolute  !important;
  bottom:0; left:0; right:0;
  min-height: 160px;
  height:     auto      !important;
  z-index:    30        !important;
  background: rgba(5,12,26,0.97) !important;
  border-top: 1px solid var(--a-rule) !important;
  transform:  translateY(100%)    !important;
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1) !important;
  overflow:   hidden    !important;
  display:    block     !important;
}
#project-panel::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--a-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--a-faint) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none; z-index:0;
}
#project-panel::after {
  content:""; position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(to bottom, var(--a-accent), transparent);
  opacity:0.55; z-index:1;
}
#project-panel.show { transform: translateY(0) !important; }

#panel-inner {
  position:relative; z-index:2; width:100%;
  padding: 22px 52px 22px 28px;
  display:flex; align-items:flex-start; gap:40px;
  box-sizing:border-box;
}
#panel-left  { flex:1; min-width:0; }
#panel-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink:0; min-width:100px; }

#panel-ref   { font-family:var(--a-mono); font-size:7px; letter-spacing:4px; color:var(--a-soft); text-transform:uppercase; margin:0 0 8px; display:block; }
#panel-title { font-family:var(--a-serif) !important; font-size:26px !important; font-style:italic !important; font-weight:300 !important; color:var(--a-cream) !important; line-height:1.1 !important; margin:0 0 8px !important; display:block; }
#panel-note  { font-family:var(--a-mono); font-size:9px; font-style:italic; color:var(--a-mid); line-height:1.7; max-width:500px; margin:0; display:block; }
#panel-year  { font-family:var(--a-serif); font-size:36px; font-style:italic; font-weight:300; color:var(--a-soft); line-height:1; letter-spacing:-1px; display:block; }
#panel-tags  { font-family:var(--a-mono); font-size:7px; letter-spacing:2px; color:var(--a-soft); text-transform:lowercase; display:block; }
#panel-link  { font-family:var(--a-mono); font-size:8px; letter-spacing:3px; color:var(--a-accent) !important; text-decoration:none !important; text-transform:lowercase; border-bottom:1px solid var(--a-soft); padding-bottom:2px; transition:border-color 0.2s; display:inline-block; }
#panel-link:hover { border-color:var(--a-accent); }

#panel-close {
  position:absolute !important; top:14px !important; right:16px !important;
  background:transparent !important; border:1px solid var(--a-soft) !important;
  color:var(--a-mid) !important; font-family:var(--a-mono) !important;
  font-size:8px !important; letter-spacing:2px !important; cursor:pointer !important;
  padding:5px 10px !important; border-radius:1px !important; transition:all 0.2s !important; z-index:3 !important;
}
#panel-close:hover { border-color:var(--a-accent) !important; color:var(--a-cream) !important; }

/* ── socials ── */
.archive-socials {
  position:absolute; bottom:18px; left:20px;
  z-index:6; display:flex !important;
  flex-direction:column; gap:6px; pointer-events:auto;
}
.archive-socials a {
  font-family:var(--a-mono) !important; font-size:7px !important;
  letter-spacing:2.5px !important; color:var(--a-soft) !important;
  text-decoration:none !important; text-transform:lowercase !important;
  text-shadow:none !important; transition:color 0.2s !important; display:block !important;
}
.archive-socials a:hover { color:var(--a-ink) !important; }
.archive-socials .soc-dot { display:none !important; }