/* ===========================================================================
   Sisselogimisleht
   ---------------------------------------------------------------------------
   Ehitus on üks mehhanism, mis annab kaks ilmet:

     .lg-stage  on ALATI terve akna suurune taust (fixed) — värviline udu +
                brändimärgi vesimärk.
     .lg-panel  on sisu kandev tulp. Telefonis on ta läbipaistev, seega udu
                paistab läbi ja kaart hõljub sellel. Laual saab ta läbipaistmatu
                tausta ja katab vasaku poole ära, nii et udu jääb paistma ainult
                paremale — klassikaline kaheks jaotatud login.

   Kogu palett tuleb teemast: udu ja paneel pöörduvad koos ülejäänud
   rakendusega. Siin ei ole ühtegi kõva värvi, mis teemat ignoreeriks.
   =========================================================================== */

:root {
  --lg-stage: #F2F8F7;
  --lg-panel: #FFFFFF;
  --lg-edge: rgba(var(--ink-rgb), 0.10);
  --lg-bloom-a: rgba(21, 132, 146, 0.38);   /* teal   */
  --lg-bloom-b: rgba(255, 219, 74, 0.62);   /* sidrun */
  --lg-bloom-c: rgba(38, 186, 136, 0.34);   /* mint   */
  --lg-mark: rgba(var(--ink-rgb), 0.085);
  --lg-vignette: rgba(var(--ink-rgb), 0.07);
  --lg-card: transparent;
  --lg-card-edge: transparent;
}

:root[data-theme="dark"] {
  --lg-stage: #081316;
  --lg-panel: var(--bg);
  --lg-edge: rgba(var(--ink-rgb), 0.14);
  --lg-bloom-a: rgba(56, 170, 190, 0.30);
  --lg-bloom-b: rgba(255, 230, 109, 0.17);
  --lg-bloom-c: rgba(45, 190, 140, 0.30);
  --lg-mark: rgba(var(--ink-rgb), 0.07);
  --lg-vignette: rgba(0, 0, 0, 0.42);
}

/* --------------------------------------------------------------- karkass -- */

.lg {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

.lg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--lg-stage);
}

/* Vinjett servades — ilma selleta on laval ainult lame gradient. */
.lg-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 65% 45%, transparent 40%, var(--lg-vignette) 100%);
}

/* Udupallid. Igaüks on pehme radiaalne laik, mis liigub aeglaselt omas
   tempos — erinevad kestused hoiavad mustri kordumatuna. */
.lg-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform;
}
.lg-bloom-a {
  width: 62vmax; height: 62vmax;
  right: -14vmax; top: -22vmax;
  background: radial-gradient(circle at center, var(--lg-bloom-a) 0%, transparent 68%);
  animation: lg-drift-a 34s ease-in-out infinite alternate;
}
.lg-bloom-b {
  width: 44vmax; height: 44vmax;
  right: 6vmax; bottom: -16vmax;
  background: radial-gradient(circle at center, var(--lg-bloom-b) 0%, transparent 66%);
  animation: lg-drift-b 41s ease-in-out infinite alternate;
}
.lg-bloom-c {
  width: 52vmax; height: 52vmax;
  right: 24vmax; top: 16vmax;
  background: radial-gradient(circle at center, var(--lg-bloom-c) 0%, transparent 70%);
  animation: lg-drift-c 28s ease-in-out infinite alternate;
}

@keyframes lg-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6vmax, 5vmax, 0) scale(1.12); }
}
@keyframes lg-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(5vmax, -6vmax, 0) scale(0.94); }
}
@keyframes lg-drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to   { transform: translate3d(-4vmax, -7vmax, 0) scale(1.14); }
}

/* Brändimärk vesimärgina. Mask, mitte <img>, sest SVG-l on kõva fill ja
   maskiga saab ta teemast värvi võtta. */
.lg-mark {
  position: absolute;
  right: -6vw;
  bottom: -10vh;
  width: min(56vw, 640px);
  aspect-ratio: 13.06 / 8.66;
  background: var(--lg-mark);
  -webkit-mask-image: url(/assets/img/modena-mark.svg);
          mask-image: url(/assets/img/modena-mark.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* ----------------------------------------------------------------- tulp -- */

.lg-panel {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 28px;
  box-sizing: border-box;
}

.lg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lg-wordmark { height: 24px; width: auto; display: block; }
:root[data-theme="dark"] .lg-wordmark { filter: brightness(0) invert(0.93); }

.lg-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Segmentlüliti — sama keel nii keele- kui teemavalikul. */
.lg-seg {
  display: inline-flex;
  border: 1px solid var(--lg-edge);
  border-radius: 999px;
  background: var(--surface-raised);
  padding: 2px;
  gap: 2px;
}
.lg-seg > * {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lg-seg > *:hover { color: var(--text-primary); background: rgba(var(--ink-rgb), 0.05); }
.lg-seg > .active,
.lg-seg > [aria-pressed="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
}
.lg-seg > *:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ----------------------------------------------------------------- kaart -- */

.lg-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

.lg-card {
  width: 100%;
  max-width: 380px;
  background: var(--lg-card);
  border: 1px solid var(--lg-card-edge);
  border-radius: 20px;
  box-sizing: border-box;
}

.lg-title {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 10px;
  color: var(--text-primary);
}

/* Peenike sidrunivöönd pealkirja all — üks aktsent, mis annab lehele hoo,
   ilma et tekst ise kirevaks läheks. */
.lg-rule {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--modena-accent);
  margin: 0 0 18px;
}

.lg-lead {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 26px;
}

.lg-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
}
.lg-sso:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), 0.20);
}
.lg-sso:active { transform: translateY(0); }
.lg-sso:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.lg-sso svg { flex: 0 0 auto; }

.lg-note {
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  margin: 0 0 18px;
}
.lg-note p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.lg-note-warn  { background: var(--tint-warn-bg);  border: 1px solid var(--tint-warn-line);  color: var(--tint-warn-fg); }
.lg-note-error { background: var(--tint-error-bg); border: 1px solid var(--tint-error-line); color: var(--tint-error-fg); }

.lg-terms {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-tertiary);
  margin: 28px 0 0;
}
.lg-terms a { color: inherit; text-decoration: underline; }
.lg-terms a:hover { color: var(--text-primary); }

/* ------------------------------------------------------------ laiad ekraanid */

@media (min-width: 900px) {
  /* Paneel muutub läbipaistmatuks ja katab vasaku poole — udu jääb paremale. */
  .lg-panel {
    width: clamp(420px, 46%, 620px);
    background: var(--lg-panel);
    border-right: 1px solid var(--lg-edge);
    padding: 30px 48px 34px;
  }
  .lg-center { padding: 40px 0; }
}

@media (min-width: 1400px) {
  .lg-panel { padding-left: 72px; padding-right: 72px; }
}

/* ------------------------------------------------------------------ telefon */

@media (max-width: 899px) {
  /* Udu paistab läbi, seega kaart vajab enda alla pinda, et tekst püsiks
     loetav ka kirkama laigu peal. */
  .lg-card {
    --lg-card: var(--surface-raised);
    --lg-card-edge: var(--lg-edge);
    padding: 28px 24px 26px;
    box-shadow: var(--shadow-lg);
    max-width: 440px;
  }
  .lg-mark { width: min(94vw, 440px); right: -14vw; bottom: -6vh; }
  .lg-panel { padding: 18px 16px 24px; }
  .lg-center { padding: 24px 0; }
}

@media (max-width: 420px) {
  .lg-controls { gap: 8px; }
  .lg-seg > * { padding: 6px 10px; }
}

/* ------------------------------------------------------------------ liikumine */

@media (prefers-reduced-motion: reduce) {
  .lg-bloom { animation: none; }
  .lg-sso { transition: none; }
  .lg-sso:hover { transform: none; }
}