/* Northfell – kirjautumissivu. YKSI tiedosto kaikille kirjautumissivuille:
   Ohjaamo (index.html: /myyja ja omistajan salainen polku) ja asiakas (kirjaudu.html: /asiakas/kirjaudu).
   Malli: AI-vastaaja/Brandi/ulkoasu-mallit/kirjautuminen-malli.html (sama CSS kopioituna sinne).
   Jos muutat tätä, muuta mallia samalla – testi kirjautumissivu.test.mjs kaatuu muuten.

   Hetki (Roni 8.11.2026: "isompi tunturi, ylellisyys, voima ja arvokkuus", "yhdistä A ja B"):
   tunturi NOUSEE maan alta hitaasti tummana ja kääntyy samalla valoa kohti. Valoisa puoli on
   aluksi varjossa ja valo saapuu sille kuin aamuaurinko; pitkä varjo vetäytyy tunturin alle.
   Kun valo on lähes perillä, hidas himmeä kiilto kulkee kerran kiven yli. Harjanne piirtyy,
   kirjaimet asettuvat. Sitten kaikki paikallaan. Ei hehkua, ei kultaa.
   Ei jatkuvaa liikettä (päätös 7.11.2026). Kesto 4,1 s, lomake käytettävissä ~1 s:ssa.
   Hitaus on tarkoituksellista: raskas asia liikkuu hitaasti ja pysähtyy pehmeästi.

   PERUSTILA = LOPPUTILA. Animaatiot tuovat vain alkutilan (fill-mode both), joten
   prefers-reduced-motion (animation:none) näyttää heti valmiin sivun. */

.kj{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;place-items:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px))}
.kj-kehys{width:100%;max-width:400px}

/* ---- vaakuna: tunturi + nimi ---- */
.kj-vaakuna{display:grid;justify-items:center;perspective:900px}
/* Koko: Roni 8.11. "pyramidi isommaksi". Leveys kasvaa näytön mukaan, mutta korkeus pysyy alle ~25 % näkyvästä
   korkeudesta (36svh), jotta lomake mahtuu puhelimessa ensinäkymään. Tunturi = 64 % SVG:n leveydestä. */
.kj-tunturi{display:block;width:clamp(184px,min(78vw,36vh),360px);width:clamp(184px,min(78vw,36svh),360px);height:auto;overflow:visible;transform-style:preserve-3d;
  animation:kj-kaanny 2.4s cubic-bezier(.16,.8,.2,1) both}
@keyframes kj-kaanny{from{transform:rotateY(-30deg) rotateX(9deg) scale(.9)}to{transform:none}}

/* maanpinta: ohut horisontti avautuu keskeltä sivuille */
.kj-horisontti{transform-box:fill-box;transform-origin:center;animation:kj-horisontti 1.1s cubic-bezier(.3,.7,.2,1) both}
@keyframes kj-horisontti{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

/* pinnat nousevat maasta raskaasti, varjopuoli pikkuisen perässä – kuin kivilohkot liukuisivat paikalleen */
.kj-pinta{animation:kj-nouse 1.4s cubic-bezier(.16,.84,.2,1) both}
.kj-pinta-valo{animation-delay:.1s}
.kj-pinta-varjo{animation-delay:.24s}
@keyframes kj-nouse{from{transform:translateY(150px)}to{transform:none}}

/* valo saapuu valoisalle puolelle: aluksi lähes yhtä tumma kuin varjopuoli, sitten kivi saa muotonsa */
.kj-sarastus{opacity:0;animation:kj-sarastus 2.1s .5s cubic-bezier(.45,.05,.3,1) both}
@keyframes kj-sarastus{from{opacity:.62}to{opacity:0}}

/* harjanne piirtyy huipulta alas kun pinnat ovat paikallaan */
.kj-harja{stroke-dasharray:1;animation:kj-harja .9s 1.25s cubic-bezier(.4,.1,.2,1) both}
@keyframes kj-harja{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* kun valo on lähes perillä, hidas ja himmeä kiilto kulkee kerran kiven yli valon suuntaan ja häviää
   (Roni 8.11.: "yhdistä A ja B") */
.kj-kiilto{opacity:0;animation:kj-kiilto 2.6s 1.5s cubic-bezier(.45,.05,.3,1) both}
@keyframes kj-kiilto{from{opacity:0;transform:translateX(0)}40%{opacity:.3}to{opacity:0;transform:translateX(300px)}}

/* himmeä kiilto valoisalla puolella syttyy vasta kun valo on perillä */
.kj-hohto{opacity:.16;animation:kj-hohto .9s 2s ease-out both}
@keyframes kj-hohto{from{opacity:0}to{opacity:.16}}

/* pitkä varjo (matala aurinko vasemmalta) vetäytyy tunturin alle kun valo nousee */
.kj-varjo{transform-box:fill-box;transform-origin:center;animation:kj-varjo 2.6s .15s cubic-bezier(.3,.6,.2,1) both}
@keyframes kj-varjo{from{transform:translateX(70px) scaleX(2.3);opacity:0}18%{opacity:1}to{transform:none;opacity:1}}

/* nimi: kirjaimet asettuvat harvasta tiiviiksi. Bodoni vasta 22 px:stä (hiusviivat). */
.kj-nimi{margin:20px 0 0;text-align:center;font:500 22px/1 var(--display);letter-spacing:.32em;text-indent:.32em;color:var(--ink);
  animation:kj-nimi 1.6s .7s cubic-bezier(.2,.75,.2,1) both}
@keyframes kj-nimi{from{opacity:0;letter-spacing:.85em;text-indent:.85em}to{opacity:1;letter-spacing:.32em;text-indent:.32em}}
.kj-ala{margin:9px 0 0;text-align:center;font:500 11px/1 var(--font);letter-spacing:.24em;text-indent:.24em;color:var(--muted);
  animation:kj-esiin .8s 1.4s ease-out both}
@keyframes kj-esiin{from{opacity:0}to{opacity:1}}

/* ---- kortti ---- */
.kj-kortti{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;display:grid;gap:16px;
  box-shadow:0 2px 2px rgba(26,23,20,.035),0 18px 40px -22px rgba(26,23,20,.28);
  animation:kj-kortti 1s .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes kj-kortti{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kj-kortti h1{font:700 20px/1.2 var(--font);letter-spacing:-.01em;margin:0}
.kj-selite{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.kj-lomake{display:grid;gap:14px}
.kj-lomake label{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--ink-2)}
.kj-lomake input{min-height:50px;background:#fff}
.kj-lomake .btn{width:100%;min-height:50px}

/* roolivalinta: kaksi välilehteä kortin ylälaidassa. Valittu = muste + 2 px viiva (ei pelkkä väri). */
.kj-roolit{display:grid;grid-template-columns:1fr 1fr;margin:-16px -22px 0;border-bottom:1px solid var(--line)} /* välilehdet kortin yläreunaan; piilossa kortilla on täysi 22 px */
.kj-roolit>*{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  min-height:50px;display:grid;place-items:center;font:600 15px var(--font);color:var(--muted);
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kj-roolit>*:hover{color:var(--ink)}
.kj-roolit>[aria-pressed="true"],.kj-roolit>[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.kj-roolit>*:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}

.kj-vaihda{display:block;margin:14px auto 0;background:none;border:0;color:var(--muted);font:500 13px var(--font);
  cursor:pointer;min-height:44px;padding:0 12px;text-decoration:underline;text-underline-offset:3px}
.kj-kortti .err{margin:0}
.kj-kortti .err:empty{position:absolute;min-height:0} /* tyhjä virherivi ei vie gridin riviä, mutta pysyy ruudunlukijan kuulolla (ei display:none) */
.kj-alatunniste{margin:10px 0 0;text-align:center;font-size:11px;color:var(--muted);letter-spacing:.04em}

/* matala näyttö (pieni puhelin, vaaka-asento): välit tiiviimmiksi */
@media (max-height:720px){.kj-nimi{margin-top:14px}.kj-kortti{margin-top:18px}}

@media (prefers-reduced-motion:reduce){
  .kj-tunturi,.kj-horisontti,.kj-pinta,.kj-sarastus,.kj-harja,.kj-kiilto,.kj-hohto,.kj-varjo,.kj-nimi,.kj-ala,.kj-kortti{animation:none!important}
}