/* ============================================================
   LASI — ELÄVÄ TAUSTA  (3.9.2026, preview, EI tuotantoon vielä)

   Portti komponentista components-backgrounds-bubble.tsx (motion/react)
   vanilla-CSS:ksi. Sama rakenne: kuusi valopalloa, joista kolme kiertää
   omaa keskipistettään (20 s / 40 s / 20 s, linear), yksi heiluu pysty-
   (30 s) ja yksi vaakasuunnassa (40 s), ja kuudes seuraa hiirtä jousella
   (lasi-tausta.js). Kestot ovat komponentin omat.

   Mitä EI portattu ja miksi:
   - filter: url(#goo) blur(40px) koko kerrokselle. Suodatin lasketaan
     joka ruudulla uudelleen koko näytön kokoisena, ja se on juuri se
     "lagaava sivu" jonka CLAUDE.md kieltää. Pehmeys tehdään gradientilla:
     pallo on radial-gradient joka häipyy nollaan 62 %:ssa säteestä, eli se
     on jo sumea ilman suodatinta.
   - mix-blend-mode: hard-light. Pyörivät kääreet luovat oman
     pinoamiskontekstin, joten sekoitus ei ulottuisi pohjaan asti. Alfa
     riittää: pohja on niin tumma että läpikuultava väri lukee valona.
   - Violetti→sininen pohjagradientti (from-violet-900 to-blue-900).
     AI-tunnusmerkki #1 ja väärä maailma. Pohja on landingin lämmin tumma.

   Värit: landingin --violet / --rose / --teal / --amber / --grad-lila ja
   orbin nyt-viivan teal-hehku. Ei uusia värejä (DESIGN.md § 3).

   Vain transform animoituu. Jokainen pallo on oma komposiittikerroksensa.
   ============================================================ */

/* 2.1 (3.9. Simon kolmas palaute): "Tausta on tosi mutaisen värinen. Emme
   halua mitään ruskeahkoa taustahohtoa." Muta syntyi kun amber ja kulta
   sekoittuivat lämpimään ruskeanmustaan pohjaan ja roseen. Nyt pohja on
   neutraali, hieman viileä lähes musta, ja valo on orbin viileä puoli:
   violetti, rose, sininen, lila. Ei amberia, ei kultaa, ei ruskeaa. */
.lasi-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(135deg, #12101A 0%, #0E0C12 55%, #0B0A0E 100%);
}
.lasi-bg-layer { position: absolute; inset: 0; }

/* ⚠ Luokkanimi on .lasi-pallo, EI .lasi-b. Ensimmäinen versio käytti
   .lasi-b:tä, ja body:n varianttiluokka on lasi-b: koko sivu sai pallon
   säännöt (position absolute, leveys 80vmax = 675 px 390 px:n ruudulla)
   ja B "vuoti" 143 px oikealle. Mitattu 3.9.2026 _probe.mjs:llä: .app oli
   675 px vaikka .side ja .main piilotettiin. Varianttiluokat ovat
   lasi-a / lasi-b / lasi-c, joten pallojen nimet eivät saa alkaa lasi-b. */
.lasi-pallo {
  --s: 80vmax;            /* halkaisija: ympyrä, ei ellipsi (komponentin 80 % olisi ellipsi ilman blurria) */
  --a: 0.36;              /* huippualfa; DESIGN.md: ≤ 0,45 jotta pohja lukee hämäränä eikä sateenkaarena */
  position: absolute; left: 50%; top: 50%;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(var(--c), var(--a)) 0%,
    rgba(var(--c), calc(var(--a) * 0.55)) 26%,
    rgba(var(--c), calc(var(--a) * 0.18)) 46%,
    rgba(var(--c), 0) 62%);
  will-change: transform;
}
.lasi-rot {
  position: absolute; inset: 0;
  will-change: transform;
}

/* 1. first — violetti, ilmapiiri. y: -50 → 50 → -50, 30 s. */
/* Alfat nostettu kierroksella 2 (0.40/0.32/0.36/0.28/0.20/0.24 →
   0.44/0.36/0.42/0.32/0.24/0.28). Kierroksen 1 kaappauksessa valo näkyi
   vain levyn ulkopuolella; SIMON_MAKU 9.8.: "lisää värien opacitya",
   hienovaraisuudella on alaraja. Katto 0,45 pysyy. */
.lasi-p1 { --c: 155,124,240; --a: 0.42; --s: 80vmax; animation: lasiY 30s ease-in-out infinite; }

/* 2. second — rose (landingin --rose). Kiertää pistettä 400 px keskipisteen vasemmalla puolella, 20 s. */
.lasi-r2 { transform-origin: calc(50% - 400px) 50%; animation: lasiRot 20s linear infinite; }
.lasi-p2 { --c: 236,111,160; --a: 0.30; --s: 70vmax; }

/* 3. third — orbin sininen. Kiertää 400 px oikealla, 40 s. Pallo itse on
      siirretty alas-vasemmalle kuten komponentissa.
      Historia: 1.0 teal (Simo: yliedustettu) → 2.0 kulta (Simo: mutainen)
      → 2.1 sininen. Sininen ja violetti eivät muodosta ruskeaa roseen kanssa. */
.lasi-r3 { transform-origin: calc(50% + 400px) 50%; animation: lasiRot 40s linear infinite; }
.lasi-p3 { --c: 112,104,236; --a: 0.34; --s: 76vmax;
  margin-top: calc(var(--s) / -2 + 200px); margin-left: calc(var(--s) / -2 - 100px); }

/* 4. fourth — lila (landingin --grad #B98BE6). x: -50 → 50 → -50, 40 s. 2.1: oli amber. */
.lasi-p4 { --c: 185,139,230; --a: 0.28; --s: 80vmax; animation: lasiX 40s ease-in-out infinite; }

/* 5. fifth — syvä violetinsininen, suuri pehmeä peruskajo (komponentissa 160 %). Kiertää kaukaista pistettä, 20 s. */
.lasi-r5 { transform-origin: calc(50% - 800px) calc(50% + 200px); animation: lasiRot 20s linear infinite; }
.lasi-p5 { --c: 96,82,210; --a: 0.22; --s: 120vmax; }

/* 6. sixth — rose, seuraa hiirtä (lasi-tausta.js). */
.lasi-p6 { --c: 236,127,162; --a: 0.24; --s: 90vmax; }

@keyframes lasiY   { 0%, 100% { transform: translate3d(0, -50px, 0); } 50% { transform: translate3d(0, 50px, 0); } }
@keyframes lasiX   { 0%, 100% { transform: translate3d(-50px, 0, 0); } 50% { transform: translate3d(50px, 0, 0); } }
@keyframes lasiRot { to { transform: rotate(360deg); } }

/* Sivu piilossa → liike seis (lasi-tausta.js lisää luokan). */
.lasi-paused .lasi-pallo, .lasi-paused .lasi-rot { animation-play-state: paused; }

/* Liikkeen vähentäjälle pallot seisovat alkuasennoissaan; hiiripallo pois. */
@media (prefers-reduced-motion: reduce) {
  .lasi-pallo, .lasi-rot { animation: none !important; }
  .lasi-p6 { display: none; }
}

/* Kapea näyttö: kolme palloa riittää, ja kosketusnäytöllä ei ole hiirtä. */
@media (max-width: 720px) {
  .lasi-p4, .lasi-r5, .lasi-p6 { display: none; }
}