/* AI-tutkan oma avausanimaatio (ai-tutka.js: scan). Vain AI-tutkassa; muu Business ei käytä näitä tyylejä.
   Kerros peittää koko näytön, ei ota vastaan osoitinta (AI-tutkaa voi käyttää animaation aikana)
   ja liikkuu vain transform- ja opacity-ominaisuuksilla. Kun käyttäjä haluaa vähemmän liikettä, animaatiota ei ajeta. */
:root {
  --scan: #00ff88;          /* skannerin pääväri */
  --scan-core: #b5ffe0;     /* kirkas keskiosa */
  --scan-glow: rgba(0, 255, 136, .35);
  --scan-soft: rgba(0, 255, 136, .10);
}

.ai-scan { position: fixed; z-index: 40; pointer-events: none; overflow: hidden; contain: strict; }
.ai-scan > * { position: absolute; left: 0; right: 0; }

/* Kevyt tummennus ja hienovarainen teknologinen ruudukko */
.ai-scan-dim { inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(5, 5, 9, .38), rgba(5, 5, 9, .58)); opacity: 0; transition: opacity .35s ease; }
.ai-scan-grid { inset: 0; opacity: 0; transition: opacity .45s ease;
  background-image: linear-gradient(rgba(0, 255, 136, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, .07) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(130% 100% at 50% 40%, #000 30%, transparent 85%); }
.ai-scan.on .ai-scan-dim { opacity: 1; }
.ai-scan.on .ai-scan-grid { opacity: .55; }

/* Skanneri: ohut kirkas viiva, pehmeä hehku ja liikesuunnan taakse jäävä häipyvä valokeila.
   Säde on 0-korkuinen ankkuri, jota siirretään translateY:llä; viiva ja jäljet piirretään sen ympärille. */
.ai-scan-beam { top: 0; height: 0; will-change: transform; opacity: 0; transition: opacity .3s ease; }
.ai-scan.on .ai-scan-beam { opacity: 1; }
.ai-scan-line { position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--scan) 12%, var(--scan-core) 50%, var(--scan) 88%, transparent);
  box-shadow: 0 0 6px 1px var(--scan-glow), 0 0 22px 4px rgba(0, 255, 136, .22), 0 0 60px 12px rgba(0, 255, 136, .08); }
.ai-scan-halo { position: absolute; left: 10%; right: 10%; top: -18px; height: 36px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(181, 255, 224, .28), rgba(0, 255, 136, .08) 55%, transparent 75%); }
/* Valojälki: kirkkain viivan vieressä, häipyy kauemmas. Jäljen ruudukko näkyy hetkellisesti vahvempana. */
.ai-scan-trail { position: absolute; left: 0; right: 0; height: 190px; opacity: 0; will-change: opacity; }
.ai-scan-trail::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(181, 255, 224, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(181, 255, 224, .12) 1px, transparent 1px);
  background-size: 32px 32px; }
.ai-scan-trail.up { bottom: 0; background: linear-gradient(0deg, rgba(0, 255, 136, .30), rgba(0, 255, 136, .12) 22%, rgba(0, 255, 136, .04) 60%, transparent); }
.ai-scan-trail.up::after { -webkit-mask-image: linear-gradient(0deg, #000, transparent 70%); mask-image: linear-gradient(0deg, #000, transparent 70%); }
.ai-scan-trail.down { top: 0; background: linear-gradient(180deg, rgba(0, 255, 136, .30), rgba(0, 255, 136, .12) 22%, rgba(0, 255, 136, .04) 60%, transparent); }
.ai-scan-trail.down::after { -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }

/* Elementtien hetkellinen reaktio: kehys piirretään skannauskerrokseen (vain opacity), sisältö kirkastuu luokalla. */
.ai-scan-frame { border-radius: var(--r, 12px); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, .7), 0 0 18px rgba(0, 255, 136, .22), inset 0 0 24px rgba(0, 255, 136, .06);
  opacity: 0; transition: opacity .45s ease; right: auto; }
.ai-scan-frame.hit { opacity: 1; transition-duration: .12s; }
.ai-scan-lit { transition: color .45s ease, filter .45s ease, text-shadow .45s ease; }
.ai-scan-lit.hit :is(h1, h2, h3, .value, .label) { color: var(--scan-core); text-shadow: 0 0 12px rgba(0, 255, 136, .35); transition-duration: .12s; }
.ai-scan-lit.hit :is(.ico, svg) { filter: brightness(1.6) drop-shadow(0 0 6px rgba(0, 255, 136, .55)); color: var(--scan); transition-duration: .12s; }

/* Järjestelmäviestit */
.ai-scan-hud { position: fixed; z-index: 41; display: flex; align-items: center; gap: 12px; pointer-events: none;
  font: 600 .74rem/1.2 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--scan-core);
  padding: 8px 12px; border: 1px solid rgba(0, 255, 136, .35); border-radius: 8px; background: rgba(5, 12, 9, .78);
  box-shadow: 0 0 24px rgba(0, 255, 136, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; max-width: calc(100vw - 32px);
  margin-bottom: env(safe-area-inset-bottom, 0px); }
.ai-scan-hud.on { opacity: 1; transform: none; }
.ai-scan-hud .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--scan); box-shadow: 0 0 8px var(--scan); flex: none; animation: aiBlink 1s steps(2, start) infinite; }
.ai-scan-hud .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ai-scan-hud .msg::after { content: "▍"; margin-left: 2px; color: var(--scan); animation: aiBlink .9s steps(2, start) infinite; }
.ai-scan-hud.done .msg::after, .ai-scan-hud.done .dot { animation: none; content: none; }
.ai-scan-hud.done .msg { color: var(--scan); }
.ai-scan-hud .sub { color: rgba(181, 255, 224, .7); letter-spacing: .06em; text-transform: none; font-weight: 500; white-space: nowrap; }
.ai-scan-skip { pointer-events: auto; font: inherit; letter-spacing: .1em; color: rgba(181, 255, 224, .75); background: none; border: 0; border-left: 1px solid rgba(0, 255, 136, .3);
  padding: 2px 0 2px 12px; cursor: pointer; text-transform: uppercase; }
.ai-scan-skip:hover, .ai-scan-skip:focus-visible { color: var(--scan); }
@keyframes aiBlink { to { visibility: hidden; } }

/* Paljastus: kortit ilmestyvät kevyesti skannauksen päätyttyä */
@keyframes aiReveal { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ai-revealing :is(.kpi, .card, .ai-tabs, .ai-profile-line) { animation: aiReveal .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--ai-i, 0) * 45ms); }

@media (max-width: 560px) {
  .ai-scan-hud { font-size: .66rem; gap: 8px; padding: 7px 10px; }
  .ai-scan-hud .sub { display: none; }
  .ai-scan-trail { height: 130px; }
}
@media (prefers-reduced-motion: reduce) { .ai-scan, .ai-scan-hud { display: none !important; } .ai-revealing * { animation: none !important; } }