/*
 * REALMS.CSS — Wing-specific atmosphere overrides
 * Each wing of the cathedral has its own visual gravity.
 * These override tokens.css custom properties via [data-realm].
 * tokens.css remains SACRED and UNTOUCHED.
 */

/* ── THE CRYPT (Archive / SCP) ── */
[data-realm="crypt"] {
  --vx-base: #0a0a0a;
  --vx-surface: #0f100f;
  --vx-phosphor: #00ff41;
  --vx-phosphor-2: #00cc33;
  --vx-ghost: #c8d0c0;
  --vx-ghost-dim: rgba(200, 208, 192, 0.7);
  --vx-hairline: rgba(0, 255, 65, 0.12);
  --vx-hairline-strong: rgba(0, 255, 65, 0.25);
  --vx-glow-phosphor: 0 0 12px rgba(0, 255, 65, 0.3);
}

/* ── THE HIGH TOWER (Institute / Geopolitics) ── */
/* DARK academic — never white. White backgrounds are disrespectful to eyes. */
[data-realm="tower"] {
  --vx-base: #0d0e14;
  --vx-surface: #14161e;
  --vx-phosphor: #c9a84c;
  --vx-phosphor-2: #a08838;
  --vx-ghost: #e0dcd4;
  --vx-ghost-dim: rgba(224, 220, 212, 0.7);
  --vx-hairline: rgba(201, 168, 76, 0.15);
  --vx-hairline-strong: rgba(201, 168, 76, 0.3);
  --vx-glow-phosphor: 0 0 12px rgba(201, 168, 76, 0.15);
  --vx-font-display: 'Crimson Pro', Georgia, serif;
}

/* ── THE ARCHIVES (Library / Books) ── */
[data-realm="archives"] {
  --vx-base: #0c0d12;
  --vx-surface: #13141c;
  --vx-phosphor: #e8c468;
  --vx-phosphor-2: #c9a84c;
  --vx-hairline: rgba(232, 196, 104, 0.12);
  --vx-hairline-strong: rgba(232, 196, 104, 0.25);
  --vx-glow-phosphor: 0 0 12px rgba(232, 196, 104, 0.2);
}

/* ── THE LABORATORY (Experiences) ── */
[data-realm="lab"] {
  --vx-base: #000000;
  --vx-surface: #080808;
  --vx-phosphor: #ff3366;
  --vx-phosphor-2: #cc2952;
  --vx-hairline: rgba(255, 51, 102, 0.12);
  --vx-hairline-strong: rgba(255, 51, 102, 0.25);
  --vx-glow-phosphor: 0 0 16px rgba(255, 51, 102, 0.3);
}

/* ── THE CONSTELLATION (Kin / Team) ── */
[data-realm="kin"] {
  --vx-base: #0c0d12;
  --vx-surface: #11131a;
  --vx-phosphor: #7ad7ff;
  --vx-hairline: rgba(122, 215, 255, 0.12);
}

/* ── THE TRANSMISSIONS (Blog) ── */
[data-realm="transmissions"] {
  --vx-base: #08080c;
  --vx-surface: #0e0f14;
}

/* ── THE PORTAL (Homepage) ── */
[data-realm="portal"] {
  /* Uses default tokens.css values */
}

/* ── Wing Door Cards (Homepage Portal) ── */
.wing-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 64px 0;
}

@media (max-width: 768px) {
  .wing-doors { grid-template-columns: 1fr; }
}

.wing-door {
  position: relative;
  padding: 32px 28px;
  border: 1px solid var(--vx-hairline);
  border-radius: 6px;
  background: var(--vx-surface);
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.wing-door::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--door-color, var(--vx-phosphor));
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.wing-door:hover {
  border-color: var(--door-color, var(--vx-phosphor));
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.wing-door:hover::before {
  opacity: 1;
}

.wing-door__icon {
  font-size: 28px;
  line-height: 1;
  color: var(--door-color, var(--vx-phosphor));
}

.wing-door__name {
  font-family: var(--vx-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--vx-ghost);
  letter-spacing: -0.01em;
}

.wing-door__subtitle {
  font-family: var(--vx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--door-color, var(--vx-phosphor));
}

.wing-door__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vx-ghost-dim);
  flex: 1;
}

.wing-door__count {
  font-family: var(--vx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--vx-muted-2);
}

.wing-door__enter {
  font-family: var(--vx-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--door-color, var(--vx-phosphor));
  padding-top: 12px;
  border-top: 1px dashed var(--vx-hairline);
}

/* ── Rotating Relic (Homepage) ── */
.relic {
  text-align: center;
  padding: 80px 32px;
  border-bottom: 1px solid var(--vx-hairline);
}

.relic__quote {
  font-family: var(--vx-font-display);
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--vx-ghost);
  max-width: 800px;
  margin: 0 auto 24px;
  text-wrap: balance;
}

.relic__source {
  font-family: var(--vx-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--vx-muted-2);
}

/* ── Content Type Badge ── */
.content-badge {
  display: inline-block;
  font-family: var(--vx-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--vx-hairline);
  color: var(--vx-muted-2);
}

.content-badge[data-type="fiction"]    { border-color: rgba(232, 196, 104, 0.3); color: #e8c468; }
.content-badge[data-type="analysis"]   { border-color: rgba(122, 215, 255, 0.3); color: #7ad7ff; }
.content-badge[data-type="archive"]    { border-color: rgba(0, 255, 65, 0.3); color: #00ff41; }
.content-badge[data-type="experiment"] { border-color: rgba(255, 51, 102, 0.3); color: #ff3366; }
.content-badge[data-type="testimony"]  { border-color: rgba(255, 184, 107, 0.3); color: #ffb86b; }