/* ═══════════════════════════════════════════════════════════════
   ALEX MARK — live hologram
   Extracted verbatim from:
     ALEX/alex-mvp/ALEX_IDENTITY_SYSTEM_v1.0/alex-hologram-extract/
       alex-hologram-live.html
   Geometry, timings and colours are unchanged. Per the identity system,
   the ALEX mark is canonical and is not re-tinted to the Veridom palette;
   Veridom's palette governs the surrounding chrome only.
   Only additions: a reduced-motion stop and responsive sizing.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --color-neural-blue: #1a365d;
  --color-neural-glow: rgba(26, 54, 93, 0.4);
  --color-consciousness-gold: #d69e2e;
  --color-consciousness-glow: rgba(214, 158, 46, 0.4);
  --glass-surface: rgba(255, 255, 255, 0.05);
  --gradient-consciousness: linear-gradient(135deg, var(--color-neural-blue) 0%, var(--color-consciousness-gold) 100%);
}

.alex-consciousness-avatar {
  width: 350px;
  height: 350px;
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
}

.consciousness-field {
  width: 100%;
  height: 100%;
  position: relative;
  animation: consciousnessRotate 25s linear infinite;
}

.neural-rings { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.neural-rings .ring {
  position: absolute;
  border: 2px solid var(--color-neural-blue);
  border-radius: 50%;
  animation: ringPulse 4s ease-in-out infinite;
  box-shadow: 0 0 30px var(--color-neural-glow);
}
.neural-rings .ring:nth-child(1) { width: 100%; height: 100%; top: 0; left: 0; animation-delay: 0s; }
.neural-rings .ring:nth-child(2) { width: 75%; height: 75%; top: 12.5%; left: 12.5%; animation-delay: -1.3s; border-color: var(--color-consciousness-gold); }
.neural-rings .ring:nth-child(3) { width: 50%; height: 50%; top: 25%; left: 25%; animation-delay: -2.6s; border-color: var(--color-neural-blue); }

.consciousness-core {
  position: absolute;
  width: 30%;
  height: 30%;
  top: 35%;
  left: 35%;
  background: var(--glass-surface);
  border: 3px solid var(--color-consciousness-gold);
  border-radius: 50%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-pulse {
  width: 70%;
  height: 70%;
  background: var(--gradient-consciousness);
  border-radius: 50%;
  animation: corePulse 2s ease-in-out infinite;
  box-shadow: 0 0 40px var(--color-consciousness-glow);
}

.intelligence-nodes { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.intelligence-nodes .node {
  position: absolute;
  top: calc(50% - 7.5px);
  left: calc(50% - 7.5px);
  width: 15px;
  height: 15px;
  background: var(--color-consciousness-gold);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--color-consciousness-glow);
  animation: nodeOrbit 12s linear infinite;
}
.intelligence-nodes .node:nth-child(1) { animation-delay: 0s; }
.intelligence-nodes .node:nth-child(2) { animation-delay: -3s; }
.intelligence-nodes .node:nth-child(3) { animation-delay: -6s; }
.intelligence-nodes .node:nth-child(4) { animation-delay: -9s; }

.thought-particles { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.thought-particles::before,
.thought-particles::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-consciousness-gold);
  border-radius: 50%;
  animation: thoughtFloat 8s ease-in-out infinite;
  box-shadow: 0 0 10px var(--color-consciousness-glow);
}
.thought-particles::before { top: 20%; left: 60%; animation-delay: 0s; }
.thought-particles::after { bottom: 30%; right: 20%; animation-delay: -4s; }

@keyframes consciousnessRotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes corePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px var(--color-consciousness-glow); }
  50% { transform: scale(1.2); box-shadow: 0 0 60px var(--color-consciousness-glow); }
}
@keyframes nodeOrbit {
  from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}
@keyframes thoughtFloat {
  0%, 100% { transform: translateY(0px) scale(.8); opacity: .6; }
  50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
}

/* ── hero placement (Veridom chrome) ─────────────────────────── */
.alex-hero { text-align: center; padding: clamp(120px,16vh,168px) 0 clamp(64px,8vw,100px); position: relative; overflow: hidden; }
/* No ambient wash behind the mark. The identity system specifies a quiet field;
   a tinted halo is decoration the mark did not ask for. */
.alex-hero .wrap { position: relative; }
.alex-hero .display { margin: clamp(30px,4vw,48px) auto 0; max-width: none; }

/* ── ALEX wordmark ────────────────────────────────────────────
   Jost 600, uppercase, .12em tracking — per 04_LOCKUPS.
   Gold gradient runs faint at "Meet" to full weight at the X. */
.alex-title {
  font-family: var(--sans);
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1.02;
  display: inline-block;
}
.alex-title .mt {
  font-weight: 300;
  letter-spacing: .01em;
  text-transform: none;
}
.alex-title .wm {
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: .22em;
}
.alex-title .wm .dot { letter-spacing: 0; }
.alex-grad {
  background: linear-gradient(96deg,
    rgba(214,158,46,.26) 0%,
    rgba(214,158,46,.40) 26%,
    rgba(214,158,46,.66) 52%,
    #D69E2E 78%,
    #F0C566 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) { .alex-grad { color: #D69E2E; -webkit-text-fill-color: #D69E2E; } }

.alex-descriptor {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(10px, 1.1vw, 12.5px); letter-spacing: .176em; text-transform: uppercase;
  color: var(--color-consciousness-gold);
  margin: 20px auto 0; max-width: none; text-align: center;
}
.alex-hero .lede { margin: 26px auto 0; }
.alex-hero .btn-row { justify-content: center; }
.alex-hero .eyebrow { justify-content: center; }
.alex-hero .eyebrow::after { display: none; }

@media (max-width: 760px) {
  .alex-consciousness-avatar { width: 260px; height: 260px; }
  @keyframes nodeOrbit {
    from { transform: rotate(0deg) translateX(90px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(90px) rotate(-360deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .consciousness-field,
  .neural-rings .ring,
  .core-pulse,
  .intelligence-nodes .node,
  .thought-particles::before,
  .thought-particles::after { animation: none !important; }
  .intelligence-nodes .node:nth-child(1) { transform: translateX(120px); }
  .intelligence-nodes .node:nth-child(2) { transform: rotate(90deg) translateX(120px); }
  .intelligence-nodes .node:nth-child(3) { transform: rotate(180deg) translateX(120px); }
  .intelligence-nodes .node:nth-child(4) { transform: rotate(270deg) translateX(120px); }
}

/* ── the gates: proof table ──────────────────────────────────── */
.gates { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.gate { background: var(--card); padding: 26px 22px; }
.gate-n { font-family: var(--serif); font-size: clamp(2rem,4vw,3.1rem); line-height: 1; color: var(--established); }
.gate-n.neutral { color: var(--parchment); }
.gate-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--label); margin-top: 12px; }
.gate p { font-size: 13.5px; color: var(--silver); line-height: 1.55; margin-top: 10px; }

.surface { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.surface-cell { background: var(--surface); padding: 22px 18px; }
.surface-cell h4 { font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--parchment); margin-bottom: 8px; }
.surface-cell p { font-size: 13px; color: var(--silver); line-height: 1.55; }

@media (max-width: 1000px) { .gates { grid-template-columns: repeat(2,1fr); } .surface { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .gates, .surface { grid-template-columns: 1fr; } }