/* AI Insights leaf — cockpit 3D + below-fold. Hero stays in main.css. */

[data-leaf="ain"] .ain-ticker {
  overflow: hidden;
  border: 0;
  border-top: 1px solid #00103812;
  border-bottom: 1px solid #00103812;
  background: linear-gradient(90deg, #f7faff, #eef4ff 50%, #f7faff);
}
[data-leaf="ain"] .ain-ticker .container { padding-block: 0; overflow: hidden; }
[data-leaf="ain"] .ain-ticker-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 0;
  animation: ain-scan 28s linear infinite;
}
[data-leaf="ain"] .ain-ticker ul {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  gap: 0;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}
[data-leaf="ain"] .ain-ticker li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px 0 0;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #00103899;
  white-space: nowrap;
}
[data-leaf="ain"] .ain-ticker li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-accent, #0060f8);
  box-shadow: 0 0 8px #0060f844;
}
@keyframes ain-scan {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

/* ── 3D Cockpit ── */
[data-leaf="ain"] .ain-vault-sec {
  position: relative;
  overflow: clip;
}
[data-leaf="ain"] .ain-vault-sec::before {
  content: "";
  position: absolute;
  inset: 8% -20% auto;
  height: 420px;
  background: radial-gradient(ellipse 60% 80% at 50% 0, #0060f814, transparent 70%);
  pointer-events: none;
}

[data-leaf="ain"] .ain-vault {
  position: relative;
  margin-top: 36px;
  border: 1px solid #00103814;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0, #0060f810, transparent 55%),
    linear-gradient(180deg, #000820, #000c28 42%, #001038);
  box-shadow:
    0 40px 100px #00082055,
    inset 0 1px 0 #ffffff12;
  overflow: hidden;
}
[data-leaf="ain"] .ain-vault-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #ffffff12;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffffd9;
}
[data-leaf="ain"] .ain-vault-bar em {
  margin-left: auto;
  font-style: normal;
  color: var(--ds-accent-hover, #4da3ff);
}
[data-leaf="ain"] .ain-vault-bar .live-dot {
  box-shadow: 0 0 10px #4da3ff88;
}

[data-leaf="ain"] .ain-vault-wrap {
  position: relative;
  padding: 12px 12px 0;
  min-height: 520px;
  overflow: visible;
}
[data-leaf="ain"] .ain-vault-stage {
  position: relative;
  height: min(62vh, 560px);
  min-height: 460px;
  margin: 0 auto;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
  touch-action: pan-y;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  [data-leaf="ain"] .ain-vault-stage {
    touch-action: none;
    cursor: crosshair;
  }
}
[data-leaf="ain"] .ain-vault-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
[data-leaf="ain"] .ain-vault-grid {
  position: absolute;
  inset: 6% 4%;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, #0060f822, transparent 68%),
    linear-gradient(#ffffff0a 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
  transform: translateZ(-120px) rotateX(62deg) scale(1.15);
  transform-origin: 50% 80%;
  opacity: .85;
  pointer-events: none;
}
[data-leaf="ain"] .ain-vault-beam {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 280px;
  height: 280px;
  margin-left: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, #4da3ff28 0%, transparent 68%);
  filter: blur(2px);
  transform: translateZ(-40px);
  pointer-events: none;
  animation: ain-beam 6s ease-in-out infinite;
}
@keyframes ain-beam {
  0%, 100% { opacity: .55; transform: translateZ(-40px) scale(1); }
  50% { opacity: .9; transform: translateZ(-20px) scale(1.08); }
}

[data-leaf="ain"] .ain-vault-card {
  --tx: 0%;
  --ty: 0%;
  --tz: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --float: 0s;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(220px, 42vw);
  padding: 14px 16px 16px;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  background: linear-gradient(145deg, #ffffff18, #ffffff08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 18px 40px #00000055,
    inset 0 1px 0 #ffffff22;
  transform:
    translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), var(--tz))
    rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  animation: ain-card-float 7s ease-in-out infinite;
  animation-delay: var(--float);
  transition: box-shadow .35s ease, border-color .35s ease;
}
[data-leaf="ain"] .ain-vault-card.is-lit {
  border-color: #4da3ff55;
  box-shadow:
    0 22px 50px #0060f844,
    0 0 0 1px #4da3ff33,
    inset 0 1px 0 #ffffff33;
}
@keyframes ain-card-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
[data-leaf="ain"] .ain-vault-card small {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ds-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff99;
}
[data-leaf="ain"] .ain-vault-card strong {
  display: block;
  font-family: var(--ds-font-display, "Fraunces", serif);
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
[data-leaf="ain"] .ain-vault-card p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #ffffffb8;
}
[data-leaf="ain"] .ain-vault-kpi {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
[data-leaf="ain"] .ain-vault-kpi b {
  font-family: var(--ds-font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: #fff;
  line-height: 1;
}
[data-leaf="ain"] .ain-vault-kpi em {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: #ff6b8a;
}
[data-leaf="ain"] .ain-vault-kpi.is-up em { color: #5dffb1; }

[data-leaf="ain"] .ain-vault-card.is-alert {
  --tx: -15vw;
  --ty: -6vh;
  --tz: 70px;
  --rx: 10deg;
  --ry: -18deg;
  --float: -.3s;
  width: min(200px, 34vw);
  z-index: 3;
}
[data-leaf="ain"] .ain-vault-card.is-chart {
  --tx: 15vw;
  --ty: -5vh;
  --tz: 55px;
  --rx: 8deg;
  --ry: 16deg;
  --float: -.8s;
  width: min(240px, 40vw);
  z-index: 2;
}
[data-leaf="ain"] .ain-vault-card.is-donut {
  --tx: -13vw;
  --ty: 9vh;
  --tz: 85px;
  --rx: -6deg;
  --ry: -12deg;
  --float: -1.2s;
  width: min(190px, 32vw);
  z-index: 3;
}
[data-leaf="ain"] .ain-vault-card.is-spark {
  --tx: 13vw;
  --ty: 10vh;
  --tz: 75px;
  --rx: -8deg;
  --ry: 14deg;
  --float: -1.6s;
  width: min(170px, 30vw);
  z-index: 3;
}
[data-leaf="ain"] .ain-vault-card.is-hero {
  --tx: 0vw;
  --ty: 0vh;
  --tz: 120px;
  --rx: 4deg;
  --ry: 0deg;
  --float: 0s;
  width: min(300px, 52vw);
  padding: 18px 20px 20px;
  border-color: #4da3ff44;
  background: linear-gradient(155deg, #ffffff22, #0060f818);
  z-index: 4;
}
[data-leaf="ain"] .ain-vault-card.is-lit { z-index: 6; }
[data-leaf="ain"] .ain-vault-card.is-hero span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #4da3ff44;
  background: #0060f822;
  font-family: var(--ds-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-accent-hover, #4da3ff);
}
[data-leaf="ain"] .ain-vault-card.is-hero strong {
  font-size: clamp(18px, 3vw, 24px);
}
[data-leaf="ain"] .ain-vault-card.is-hero footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5dffb1;
}
[data-leaf="ain"] .ain-vault-card.is-hero footer iconify-icon {
  font-size: 14px;
}

[data-leaf="ain"] .ain-vault-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
}
[data-leaf="ain"] .ain-vault-svg .ain-line {
  fill: none;
  stroke: url(#ainGradLine);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: ain-draw 2.8s ease forwards;
}
[data-leaf="ain"] .ain-vault-svg .ain-area {
  fill: url(#ainGradArea);
  opacity: 0;
  animation: ain-fade-area 1.2s ease .8s forwards;
}
[data-leaf="ain"] .ain-vault-svg .ain-bar {
  transform-origin: bottom center;
  transform: scaleY(0);
  animation: ain-grow-bar .7s cubic-bezier(.16, 1, .3, 1) forwards;
}
[data-leaf="ain"] .ain-vault-svg .ain-bar:nth-child(2) { animation-delay: .1s; }
[data-leaf="ain"] .ain-vault-svg .ain-bar:nth-child(3) { animation-delay: .2s; }
[data-leaf="ain"] .ain-vault-svg .ain-bar:nth-child(4) { animation-delay: .3s; }
[data-leaf="ain"] .ain-vault-svg .ain-bar:nth-child(5) { animation-delay: .4s; }
[data-leaf="ain"] .ain-vault-svg .ain-bar:nth-child(6) { animation-delay: .5s; }
[data-leaf="ain"] .ain-vault-svg .ain-bar:nth-child(7) { animation-delay: .6s; }
@keyframes ain-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ain-fade-area {
  to { opacity: 1; }
}
@keyframes ain-grow-bar {
  to { transform: scaleY(1); }
}
[data-leaf="ain"] .ain-vault-donut-ring {
  transform-origin: 50% 50%;
  stroke-dasharray: 120 200;
  stroke-dashoffset: 0;
  animation: ain-spin-donut 12s linear infinite;
}
@keyframes ain-spin-donut {
  to { transform: rotate(360deg); }
}

[data-leaf="ain"] .ain-vault-ask {
  --tx: 0vw;
  --ty: 16vh;
  --tz: 100px;
  --rx: 12deg;
  --ry: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(340px, 78vw);
  padding: 12px 14px;
  border: 1px solid #ffffff22;
  border-radius: 14px;
  background: #000c28cc;
  backdrop-filter: blur(12px);
  font-size: 13px;
  color: #ffffff88;
  transform:
    translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), var(--tz))
    rotateX(var(--rx));
  box-shadow: 0 16px 36px #00000066;
  animation: ain-card-float 8s ease-in-out infinite .5s;
}
[data-leaf="ain"] .ain-vault-ask iconify-icon {
  font-size: 18px;
  color: var(--ds-accent-hover, #4da3ff);
}

[data-leaf="ain"] .ain-vault-foot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #ffffff12;
  background: #000c24;
}
[data-leaf="ain"] .ain-vault-foot li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid #ffffff0f;
  list-style: none;
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #ffffff66;
  transition: background .3s ease, color .3s ease;
}
[data-leaf="ain"] .ain-vault-foot li span {
  display: block;
}
[data-leaf="ain"] .ain-vault-foot li:last-child { border-right: 0; }
[data-leaf="ain"] .ain-vault-foot li.is-on {
  background: #0060f818;
  color: #fff;
}
[data-leaf="ain"] .ain-vault-foot li b {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff44;
}
[data-leaf="ain"] .ain-vault-foot li.is-on b { color: var(--ds-accent-hover, #4da3ff); }

[data-leaf="ain"] .ain-channels {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
  [data-leaf="ain"] .ain-channels { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  [data-leaf="ain"] .ain-channels { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  [data-leaf="ain"] .ain-vault-wrap { min-height: 480px; }
  [data-leaf="ain"] .ain-vault-stage { min-height: 420px; height: 52vh; }
  [data-leaf="ain"] .ain-vault-card.is-alert { --tx: -12vw; --ty: -7vh; --tz: 50px; }
  [data-leaf="ain"] .ain-vault-card.is-chart { --tx: 12vw; --ty: -6vh; --tz: 40px; }
  [data-leaf="ain"] .ain-vault-card.is-donut { --tx: -11vw; --ty: 8vh; --tz: 60px; }
  [data-leaf="ain"] .ain-vault-card.is-spark { --tx: 11vw; --ty: 9vh; --tz: 55px; }
  [data-leaf="ain"] .ain-vault-card.is-hero { width: min(280px, 88vw); }
  [data-leaf="ain"] .ain-vault-foot { grid-template-columns: 1fr 1fr; }
  [data-leaf="ain"] .ain-vault-foot li:nth-child(2) { border-right: 0; }
}

@media (max-width: 640px) {
  [data-leaf="ain"] .ain-vault {
    border-radius: 20px;
  }
  [data-leaf="ain"] .ain-vault-bar {
    padding: 12px 14px;
    font-size: 10px;
    letter-spacing: .1em;
    flex-wrap: wrap;
    gap: 8px;
  }
  [data-leaf="ain"] .ain-vault-wrap {
    min-height: 0;
    padding: 12px 12px 4px;
  }
  [data-leaf="ain"] .ain-vault-stage {
    perspective: none;
    min-height: 0;
    height: auto;
    padding-bottom: 0;
    touch-action: pan-y;
    cursor: default;
  }
  [data-leaf="ain"] .ain-vault-rig {
    position: relative;
    inset: auto;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    transform: none !important;
    transform-style: flat;
  }
  [data-leaf="ain"] .ain-vault-card,
  [data-leaf="ain"] .ain-vault-ask {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none;
    margin: 0;
    animation: none;
    transform: none !important;
    translate: none !important;
    --tx: 0;
    --ty: 0;
    --tz: 0px;
    --rx: 0deg;
    --ry: 0deg;
  }
  [data-leaf="ain"] .ain-vault-card.is-hero {
    grid-column: 1 / -1;
    order: -2;
    width: 100% !important;
    z-index: 1;
  }
  [data-leaf="ain"] .ain-vault-card.is-alert {
    grid-column: 1 / -1;
    order: -1;
  }
  [data-leaf="ain"] .ain-vault-card.is-chart {
    grid-column: 1 / -1;
  }
  [data-leaf="ain"] .ain-vault-card.is-donut,
  [data-leaf="ain"] .ain-vault-card.is-spark {
    width: 100% !important;
  }
  [data-leaf="ain"] .ain-vault-ask {
    grid-column: 1 / -1;
    order: 10;
  }
  [data-leaf="ain"] .ain-vault-card.is-hero strong {
    font-size: clamp(18px, 5.2vw, 22px);
  }
  [data-leaf="ain"] .ain-vault-card.is-hero p {
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  [data-leaf="ain"] .ain-vault-card strong {
    font-size: 13px;
    line-height: 1.3;
  }
  [data-leaf="ain"] .ain-vault-grid,
  [data-leaf="ain"] .ain-vault-beam { display: none; }
  [data-leaf="ain"] .ain-vault-foot { grid-template-columns: 1fr; }
  [data-leaf="ain"] .ain-vault-foot li { border-right: 0; border-bottom: 1px solid #ffffff0f; }
  [data-leaf="ain"] .ain-vault-foot li:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-leaf="ain"] .ain-ticker-track,
  [data-leaf="ain"] .ain-vault-card,
  [data-leaf="ain"] .ain-vault-ask,
  [data-leaf="ain"] .ain-vault-beam,
  [data-leaf="ain"] .ain-vault-donut-ring,
  [data-leaf="ain"] .ain-vault-svg .ain-line,
  [data-leaf="ain"] .ain-vault-svg .ain-area,
  [data-leaf="ain"] .ain-vault-svg .ain-bar {
    animation: none !important;
  }
  [data-leaf="ain"] .ain-vault-svg .ain-line { stroke-dashoffset: 0; }
  [data-leaf="ain"] .ain-vault-svg .ain-area { opacity: 1; }
  [data-leaf="ain"] .ain-vault-svg .ain-bar { transform: scaleY(1); }
  [data-leaf="ain"] .ain-vault-rig { transition: none; }
}