/*
 * SI (Super Intelligence) terminology trigger + explanation.
 * Opt-in: loaded only by Home and Mission. The dialog reuses the Origin
 * surface classes from ad-astra-chrome.css; this file only adds the trigger,
 * the custom asterisk mark and the few SI-specific copy details.
 */

/* Unitless so the registration is valid; consumers multiply by 1em. */
@property --aa-si-sweep {
  syntax: "<number>";
  inherits: true;
  initial-value: -2.4;
}

.aa-si {
  /* Original six-spoke rounded asterisk; inline so no request is made. */
  --aa-si-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cpath id='a' d='M10.85 11C10.55 8.6 9.7 6.3 9.7 4.4A2.3 2.3 0 0 1 14.3 4.4C14.3 6.3 13.45 8.6 13.15 11Z'/%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Cuse href='%23a' transform='rotate(8 12 12)'/%3E%3Cuse href='%23a' transform='rotate(71 12 12) translate(12 12) scale(0.95) translate(-12 -12)'/%3E%3Cuse href='%23a' transform='rotate(126 12 12) translate(12 12) scale(1.02) translate(-12 -12)'/%3E%3Cuse href='%23a' transform='rotate(189 12 12) translate(12 12) scale(0.97) translate(-12 -12)'/%3E%3Cuse href='%23a' transform='rotate(245 12 12)'/%3E%3Cuse href='%23a' transform='rotate(310 12 12) translate(12 12) scale(0.96) translate(-12 -12)'/%3E%3C/svg%3E");
  --aa-si-mark-size: 0.4em;
  --aa-si-mark-lift: -0.54em;
  --aa-si-mark-trail: 0em;
  --aa-si-mark-x: 0.98em;
  --aa-si-band: rgba(172, 226, 255, 0.95);
  --aa-si-band-core: rgba(255, 255, 255, 1);
  --aa-si-glow: none;
  --aa-si-focus: rgba(120, 188, 255, 0.7);
  --aa-si-hover: var(--aa-accent-hi, #8fd0ff);

  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  margin: -0.06em -0.05em;
  padding: 0.06em 0.05em;
  border: 0;
  border-radius: 0.14em;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  text-shadow: inherit;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.aa-si__text {
  position: relative;
  display: inline;
}

.aa-si__mark {
  position: relative;
  top: var(--aa-si-mark-lift);
  display: inline-block;
  width: var(--aa-si-mark-size);
  height: var(--aa-si-mark-size);
  margin-left: 0.03em;
  margin-right: var(--aa-si-mark-trail);
  vertical-align: baseline;
  filter: var(--aa-si-glow);
}

.aa-si__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--aa-si-mark) center / contain no-repeat;
  mask: var(--aa-si-mark) center / contain no-repeat;
}

/* Headline instance: one slow highlight travels across SI and the mark. */
.aa-si--headline {
  animation: aa-si-sweep 9s ease-in-out 1.2s infinite;
}

/* The sheen is a second copy of "SI" laid exactly over the real glyphs:
   line-height normal makes its line box match the inline span's content
   area, so the baselines coincide; left alignment keeps the x origin. */
.aa-si--headline .aa-si__text::after {
  content: "SI";
  content: "SI" / "";
  position: absolute;
  inset: 0;
  line-height: normal;
  text-align: left;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 22%,
    var(--aa-si-band) 42%,
    var(--aa-si-band-core) 50%,
    var(--aa-si-band) 58%,
    transparent 78%
  );
  background-repeat: no-repeat;
  background-size: 2em 100%;
  background-position: calc(var(--aa-si-sweep, -2.4) * 1em) 0;
  -webkit-background-clip: text;
  background-clip: text;
}

.aa-si--headline .aa-si__mark::before {
  background-image: linear-gradient(
    100deg,
    transparent 22%,
    var(--aa-si-band) 42%,
    var(--aa-si-band-core) 50%,
    var(--aa-si-band) 58%,
    transparent 78%
  );
  background-repeat: no-repeat;
  background-size: 2em 100%;
  background-position: calc(var(--aa-si-sweep, -2.4) * 1em - var(--aa-si-mark-x)) 0;
}

@keyframes aa-si-sweep {
  0% {
    --aa-si-sweep: -2.4;
  }
  34% {
    --aa-si-sweep: 1.9;
  }
  100% {
    --aa-si-sweep: 1.9;
  }
}

/* Narrow phones: the raised mark sits over part of the following word space
   so line 1 keeps the same line count as the original "we build AI systems". */
@media (max-width: 520px) {
  .aa-si--headline {
    --aa-si-mark-trail: -0.22em;
  }
}

/* Body-copy instance: static, with hover/focus feedback only. */
.aa-si--inline {
  --aa-si-mark-size: 0.46em;
  --aa-si-mark-lift: -0.5em;
  transition: color 0.2s ease;
}

.aa-si:hover,
.aa-si[aria-expanded="true"] {
  color: var(--aa-si-hover);
}

.aa-si:focus {
  outline: none;
}

.aa-si:focus-visible {
  outline: 2px solid var(--aa-si-focus);
  outline-offset: 0.08em;
}

/* Theme treatments, using the current public theme tokens. */
html[data-theme="stellar"] .aa-si {
  --aa-si-band: rgba(150, 215, 255, 0.95);
  --aa-si-band-core: rgba(255, 255, 255, 1);
  --aa-si-glow: drop-shadow(0 0 0.08em rgba(124, 206, 255, 0.55));
  --aa-si-hover: #bfe7ff;
}

html[data-theme="dark"] .aa-si {
  --aa-si-band: rgba(186, 204, 226, 0.9);
  --aa-si-band-core: rgba(255, 255, 255, 1);
  --aa-si-hover: #c9dcef;
}

html[data-theme="light"] .aa-si {
  --aa-si-band: rgba(44, 125, 153, 0.85);
  --aa-si-band-core: rgba(31, 95, 115, 1);
  --aa-si-focus: rgba(23, 74, 90, 0.95);
  --aa-si-hover: #1f5f73;
}

@media (prefers-reduced-motion: reduce) {
  .aa-si--headline {
    animation: none;
  }

  .aa-si--headline .aa-si__text::after {
    content: none;
  }

  .aa-si--headline .aa-si__mark::before {
    background-image: none;
  }

  .aa-si--inline {
    transition: none;
  }
}

@media (forced-colors: active) {
  .aa-si__mark::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .aa-si:hover .aa-si__mark::before,
  .aa-si:focus-visible .aa-si__mark::before {
    background: Highlight;
  }
}

/* ---- SI explanation: Origin surface, SI copy details ---- */

.aa-chrome-page .aa-si-panel .aa-artifact-modal__hero--translation {
  margin-top: 0;
}

.aa-chrome-page .aa-si-panel .aa-si-panel__body,
.aa-chrome-page .aa-si-panel .aa-artifact-modal__landing {
  text-wrap: pretty;
}

.aa-chrome-page .aa-si-panel .aa-si-panel__body {
  max-width: 34ch;
}

.aa-chrome-page .aa-si-panel .aa-artifact-modal__landing {
  max-width: 30ch;
}

.aa-chrome-page .aa-si-panel .aa-si-panel__source {
  margin: clamp(18px, 3vw, 24px) 0 0;
}

.aa-chrome-page .aa-si-panel .aa-si-panel__source a {
  color: var(--aa-accent-hi);
  font-size: clamp(0.78rem, 1.3vw, 0.86rem);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

.aa-chrome-page .aa-si-panel .aa-si-panel__source a:hover,
.aa-chrome-page .aa-si-panel .aa-si-panel__source a:focus-visible {
  color: var(--aa-ink-strong);
}

.aa-chrome-page .aa-si-panel .aa-si-panel__source a:focus-visible {
  outline: 1.5px solid rgba(120, 188, 255, 0.55);
  outline-offset: 3px;
}

.aa-chrome-page .aa-si-panel:focus {
  outline: none;
}

html[data-theme="stellar"] .aa-chrome-page .aa-si-panel .aa-si-panel__source a {
  color: rgba(150, 220, 255, 0.92);
}

html[data-theme="light"] .aa-chrome-page .aa-si-panel .aa-si-panel__source a {
  color: #174a5a;
}

html[data-theme="light"] .aa-chrome-page .aa-si-panel .aa-si-panel__body {
  color: #3a414c;
}

html[data-theme="light"] .aa-chrome-page .aa-si-panel .aa-artifact-modal__label {
  color: #174a5a;
}