/* insight.css — "AI five-layer cake": 3D illustration + hover hotspots. */

.insight { padding: 96px 24px; position: relative; background: #121214; }
.insight-inner { max-width: 1100px; margin: 0 auto; }
.insight-attr {
  text-align: center; color: var(--paper-muted); font-size: 14px; line-height: 1.65;
  max-width: 640px; margin: 14px auto 0;
}

/* hero illustration + overlays */
.ai-stack { position: relative; max-width: 1120px; margin: 36px auto 0; }
.ai-stage { position: relative; }
.ai-stack-img { display: block; width: 100%; height: auto; }

/* transparent hover zone over each layer */
.ai-hit {
  position: absolute; left: 31%; width: 36%;
  cursor: pointer; z-index: 4;
}

/* golden indicator dot at each layer's centre */
.ai-dot {
  position: absolute; left: 50.5%; width: 13px; height: 13px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, #f6e0ad 0%, #cba869 58%, rgba(203, 168, 105, 0) 72%);
  opacity: 0.5;
  transition: opacity 220ms var(--ease-fluid), transform 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid);
}
.ai-dot.on {
  opacity: 1; transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 20px 5px rgba(212, 182, 138, 0.6);
}
.ai-dot.on::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(212, 182, 138, 0.65);
  animation: aiPulse 1.5s ease-out infinite;
}
@keyframes aiPulse {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* side label, aligned to each layer */
.ai-tag {
  position: absolute; right: 1.5%; width: 25%; transform: translateY(-50%);
  cursor: pointer; z-index: 3; padding-left: 14px;
  border-left: 2px solid transparent;
  transition: border-color 200ms var(--ease-fluid);
}
.ai-tag-name {
  display: block; font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  color: #E7CB95; opacity: 0.55; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  transition: opacity 200ms var(--ease-fluid);
}
.ai-tag-desc {
  display: block; font-size: 12px; line-height: 1.5; color: var(--paper-muted);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 260ms var(--ease-fluid), opacity 220ms var(--ease-fluid), margin-top 260ms var(--ease-fluid);
}
.ai-tag.on { border-left-color: var(--bronze); }
.ai-tag.on .ai-tag-name { opacity: 1; }
.ai-tag.on .ai-tag-desc { max-height: 90px; opacity: 1; margin-top: 6px; }
/* fade the non-selected labels */
.ai-stack.has-active .ai-tag .ai-tag-name { opacity: 0.32; }
.ai-stack.has-active .ai-tag.on .ai-tag-name { opacity: 1; }

/* left panel: companies for the hovered layer */
.ai-panel {
  position: absolute; left: 1%; top: 50%; width: 30%; max-width: 320px;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity 240ms var(--ease-fluid), transform 240ms var(--ease-fluid);
}
.ai-panel.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
/* re-plays whenever the hovered layer changes → silky content swap */
.ai-panel-body { animation: aiPanelIn 460ms var(--ease-fluid); }
@keyframes aiPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-panel-h { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: #E7CB95; }
.ai-panel-d { font-size: 12px; color: var(--paper-muted); line-height: 1.5; margin-top: 5px; }
.ai-grp-t {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze);
  margin: 13px 0 7px;
}
.co {
  display: flex; align-items: center; gap: 9px; padding: 3px 6px; margin: 0 -6px;
  border-radius: 8px; cursor: pointer;
  transition: background 140ms var(--ease-fluid);
}
.ai-grp-t { margin: 10px 0 5px; }
.co:hover { background: rgba(255, 255, 255, 0.05); }
.co:hover .co-logo { box-shadow: 0 0 0 1.5px rgba(212, 182, 138, 0.5); }
.co.static { cursor: default; }
.co.static:hover { background: transparent; }
.co.static:hover .co-logo { box-shadow: none; }
.co.static.port:hover .co-logo { box-shadow: 0 0 0 1.5px var(--bronze); }
.co-logo {
  position: relative; width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; overflow: hidden;
}
.co-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 3px; box-sizing: border-box; background: #fff;
}
.co-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(197, 168, 128, 0.16); color: #E7CB95;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
}
.co-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.co-tx b { font-size: 13px; font-weight: 600; color: var(--paper-high); }
.co-tx i { font-style: normal; font-size: 11px; color: var(--paper-muted); margin-top: 1px; }
.co.port .co-logo { box-shadow: 0 0 0 1.5px var(--bronze); }
.co.port .co-tx b::after { content: '•'; color: var(--bronze); margin-left: 6px; }

/* narrow screens: keep the labels/dots on the image; tap a layer → companies
   appear in a panel BELOW the image (no room for the left panel) */
@media (max-width: 1024px) {
  .ai-tag { cursor: pointer; }
  .ai-panel {
    position: static; transform: none; width: auto; max-width: 560px;
    margin: 24px auto 0; opacity: 1; pointer-events: auto; display: none;
  }
  .ai-panel.on { display: block; transform: none; }
}
@media (max-width: 560px) {
  /* keep the cake centered (near full-bleed for a touch more size); labels sit in
     the right margin with a gap, not over the cake */
  .insight { padding-left: 3px; padding-right: 3px; }
  .ai-tag { right: 1%; width: 27%; }
  .ai-tag-name { font-size: 11px; }
}