/* ===========================================================================
   PAGRINDAI — spalvos, tipografika, atmosfera, ekranų kaita, mygtukai.
   Kryptis: skaitmeninė meditacijos studija. Prieblanda, šiluma, lėtumas.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* ── Bazė ────────────────────────────────────────────────────────────
     `--ground` yra fonas, `--paper` — tekstas ant jo. Šviesioje temoje jie
     susikeičia reikšmėmis, o ne vietomis: visos taisyklės rašomos kaip
     „tekstas ant fono" ir veikia abiejose temose be atskirų variantų. */
  --ink: #0b0a0e;
  --ground: 11 10 14;
  --paper: 244 239 233;
  --raised: 28 26 32;
  --scrim: 5 4 7;
  --shadow: 0 0 0;
  --shadow-strength: 0.9;

  /* Atmosferos charakteris: tamsoje spalva švyti, šviesoje — dažo popierių. */
  --blob-blend: normal;
  --blob-power: 1;
  --veil-core: 0.2;
  --veil-edge: 0.76;
  --grain-blend: overlay;
  --grain-alpha: 0.05;

  /* Šviesos rutuliai. Tamsoje jų centras yra šviesos šaltinis, todėl
     šviesus; ant popieriaus tai pigmento lašas — centras sodrus, o šviesus
     lieka tik atspindys. */
  --orb-hi: 244 239 233;
  --orb-hi-alpha: 0.9;
  --orb-density: 1;

  /* Pasirinkimo tankis. Tamsoje pakanka švytėjimo, ant popieriaus reikia
     pigmento: tos pačios taisyklės, kitos reikšmės. */
  --sel-fill: 0.17;
  --sel-edge: 0.55;
  --zone-fill: 0.3;
  --zone-edge: 0.72;
  --halo-wide: 0.075;
  --halo-tight: 0.17;
  --btn-fill: 0.2;
  --btn-edge: 0.5;
  --zone-mult: 1;

  /* Juslinės asociacijos pojūčių žodyne — po atspalvį kiekvienai temai. */
  --vibe-warm: 240 194 140;
  --vibe-cool: 174 206 228;
  --vibe-press: 230 182 174;
  --vibe-pulse: 230 198 222;
  --vibe-flow: 176 216 212;
  --vibe-rise: 222 218 172;
  --vibe-fall: 186 198 224;
  --vibe-open: 198 222 196;
  --vibe-heavy: 196 192 202;
  --vibe-light: 230 224 212;
  --vibe-void: 188 186 196;
  --vibe-sharp: 238 180 164;
  --vibe-numb: 186 188 194;

  /* Nuotaika — perrašoma iš JS (žr. app.js). Formatas: „r g b". */
  --mood: 108 159 132;
  --accent: 231 226 220;
  --w-audra: 0.24;
  --w-sviesa: 0.3;
  --w-gelme: 0.24;
  --w-tyla: 0.32;

  /* Šriftai su pilna lietuviška diakritika (ą č ę ė į š ų ū ž) */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Noto Serif", "Liberation Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;

  /* Judesys — sąmoningai lėtesnis nei įprasta */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0.05, 0.25, 1);
  --slow: 620ms;
  --calm: 950ms;

  --gutter: 1.375rem;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --measure: 30rem;
  /* Viršutinės juostos aukštis — tas pats ekranų viršaus tarpui, viršutiniam
     šešėliui ir lipnioms juostoms, kad niekur neliktų plyšio. */
  --chrome-h: calc(var(--safe-t) + 3.4rem);
}

/* ── Šviesi tema ──────────────────────────────────────────────────────
   Ne inversija: popierius su pigmentu. Dėmės dedamos `multiply` režimu,
   šydas nebe tamsina, o baltina, grūdas tampa popieriaus tekstūra.
   `auto` — įrenginio nuostata; `data-theme` ją perrašo rankiniu būdu. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --ink: #f6f2ec;
    --ground: 246 242 236;
    --paper: 26 22 20;
    --raised: 255 253 249;
    --scrim: 66 56 48;
    --shadow: 92 74 58;
    --shadow-strength: 0.24;
    --blob-blend: multiply;
    --blob-power: 0.38;
    --veil-core: 0.04;
    --veil-edge: 0.42;
    --grain-blend: multiply;
    --grain-alpha: 0.035;
    --orb-hi: 255 253 250;
    --orb-hi-alpha: 0.55;
    --orb-density: 1.45;
    --sel-fill: 0.26;
    --sel-edge: 0.78;
    --zone-fill: 0.5;
    --zone-edge: 0.92;
    --halo-wide: 0.1;
    --halo-tight: 0.26;
    --btn-fill: 0.26;
    --btn-edge: 0.75;
    --zone-mult: 1.8;
    --vibe-warm: 154 90 20;
    --vibe-cool: 47 95 128;
    --vibe-press: 147 69 58;
    --vibe-pulse: 125 68 112;
    --vibe-flow: 33 103 96;
    --vibe-rise: 107 100 21;
    --vibe-fall: 58 77 128;
    --vibe-open: 47 106 58;
    --vibe-heavy: 77 74 88;
    --vibe-light: 90 83 72;
    --vibe-void: 74 72 86;
    --vibe-sharp: 151 64 44;
    --vibe-numb: 79 82 87;
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --ink: #f6f2ec;
  --ground: 246 242 236;
  --paper: 26 22 20;
  --raised: 255 253 249;
  --scrim: 66 56 48;
  --shadow: 92 74 58;
  --shadow-strength: 0.24;
  --blob-blend: multiply;
  --blob-power: 0.38;
  --veil-core: 0.04;
  --veil-edge: 0.42;
  --grain-blend: multiply;
  --grain-alpha: 0.035;
  --orb-hi: 255 253 250;
  --orb-hi-alpha: 0.55;
  --orb-density: 1.45;
  --sel-fill: 0.26;
  --sel-edge: 0.78;
  --zone-fill: 0.5;
  --zone-edge: 0.92;
  --halo-wide: 0.1;
  --halo-tight: 0.26;
  --btn-fill: 0.26;
  --btn-edge: 0.75;
  --zone-mult: 1.8;
  --vibe-warm: 154 90 20;
  --vibe-cool: 47 95 128;
  --vibe-press: 147 69 58;
  --vibe-pulse: 125 68 112;
  --vibe-flow: 33 103 96;
  --vibe-rise: 107 100 21;
  --vibe-fall: 58 77 128;
  --vibe-open: 47 106 58;
  --vibe-heavy: 77 74 88;
  --vibe-light: 90 83 72;
  --vibe-void: 74 72 86;
  --vibe-sharp: 151 64 44;
  --vibe-numb: 79 82 87;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  background: var(--ink);
  color: rgb(var(--paper));
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgb(var(--paper) / 0.75);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Atmosfera ───────────────────────────────────────────────────────── */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Dėmės maišosi su šiuo fonu; be jo `multiply` neturėtų su kuo dirbti,
     nes sluoksnis sukuria savo dėliojimo kontekstą. */
  background: var(--ink);
}

.blob {
  position: absolute;
  inset: -10%;
  mix-blend-mode: var(--blob-blend);
  transition: opacity var(--calm) var(--ease);
}

.atmosphere.is-live .blob {
  transition: none;
}

.blob--audra {
  background: radial-gradient(62% 58% at 16% 12%, #d4593d 0%, rgb(212 89 61 / 0) 70%);
  opacity: calc(var(--w-audra) * 0.62 * var(--blob-power));
}

.blob--sviesa {
  background: radial-gradient(62% 58% at 84% 12%, #dda048 0%, rgb(221 160 72 / 0) 70%);
  opacity: calc(var(--w-sviesa) * 0.58 * var(--blob-power));
}

.blob--gelme {
  background: radial-gradient(66% 60% at 14% 88%, #4e76a4 0%, rgb(78 118 164 / 0) 70%);
  opacity: calc(var(--w-gelme) * 0.7 * var(--blob-power));
}

.blob--tyla {
  background: radial-gradient(66% 60% at 86% 88%, #6c9f84 0%, rgb(108 159 132 / 0) 70%);
  opacity: calc(var(--w-tyla) * 0.66 * var(--blob-power));
}

/* Vinjetė — kad tekstas visada liktų skaitomas. */
.veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
        120% 90% at 50% 42%,
        rgb(var(--ground) / var(--veil-core)) 0%,
        rgb(var(--ground) / var(--veil-edge)) 100%
      ),
    linear-gradient(
      180deg,
      rgb(var(--ground) / calc(var(--veil-edge) * 0.72)) 0%,
      rgb(var(--ground) / 0) 22%,
      rgb(var(--ground) / calc(var(--veil-edge) * 0.79)) 100%
    );
}

/* Smulkus grūdas — nuima skaitmeninį plokštumą. */
.grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-alpha);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ── Progresas ir grįžimas ───────────────────────────────────────────── */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 30;
  background: rgb(var(--paper) / 0.07);
  opacity: 1;
  transition: opacity var(--slow) var(--ease);
}

.progress.is-hidden {
  opacity: 0;
}

.progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(var(--mood) / 0.35), rgb(var(--mood) / 0.95));
  transition: transform var(--calm) var(--ease), background var(--calm) var(--ease);
}

/* Švelnus šešėlis po viršutine juosta — kad slenkantis turinys neužlįstų
   ant grįžimo mygtuko ir kad lipnios juostos turėtų kur atsiremti. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--chrome-h);
  z-index: 20;
  pointer-events: none;
  background: rgb(var(--ground) / 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Trumpas išnykimas žemiau juostos — kraštas lieka minkštas, o slenkantis
   turinys po juosta jau būna visiškai uždengtas. */
.topbar::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgb(var(--ground) / 0.93), rgb(var(--ground) / 0));
}

.back {
  position: fixed;
  top: calc(var(--safe-t) + 0.5rem);
  left: 0.4rem;
  z-index: 25;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: rgb(var(--paper) / 0.64);
  transition: color 260ms var(--ease), transform 260ms var(--ease);
}

.back:active {
  transform: translateX(-2px);
  color: rgb(var(--paper) / 0.9);
}

.back svg {
  width: 22px;
  height: 22px;
}

/* ── Ekranai ir jų kaita ─────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 1;
  transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.screen.is-entering {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
}

.screen.is-leaving {
  opacity: 0;
  transform: translate3d(0, -16px, 0) scale(0.99);
  pointer-events: none;
}

.stage.is-back .screen.is-entering {
  transform: translate3d(0, -22px, 0) scale(0.985);
}

.stage.is-back .screen.is-leaving {
  transform: translate3d(0, 18px, 0) scale(0.99);
}

.screen-body {
  position: relative;
  min-height: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding: var(--chrome-h) var(--gutter) calc(var(--safe-b) + 1.5rem);
}

/* ── Tipografika ─────────────────────────────────────────────────────── */

.head {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.head__step {
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgb(var(--paper) / 0.66);
  font-weight: 500;
}

.head__step--center {
  text-align: center;
}

.head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 7.4vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: rgb(var(--paper) / 0.96);
}

.head__body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgb(var(--paper) / 0.66);
  max-width: 26rem;
}

/* ── Mygtukai ────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-size: 0.975rem;
  letter-spacing: 0.005em;
  transition:
    background 320ms var(--ease),
    border-color 320ms var(--ease),
    opacity 320ms var(--ease),
    transform 220ms var(--ease);
}

.btn:active {
  transform: scale(0.982);
}

.btn--primary {
  background: rgb(var(--mood) / var(--btn-fill));
  border: 1px solid rgb(var(--mood) / var(--btn-edge));
  color: rgb(var(--paper) / 0.97);
  box-shadow: 0 0 26px -12px rgb(var(--mood) / 0.9), inset 0 1px 0 rgb(var(--paper) / 0.07);
}

.btn--primary:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
  background: rgb(var(--paper) / 0.04);
  border-color: rgb(var(--paper) / 0.14);
}

.btn--quiet {
  color: rgb(var(--paper) / 0.62);
  min-height: 46px;
  font-size: 0.9rem;
}

.btn--quiet:active {
  color: rgb(var(--paper) / 0.85);
}

.btn--wide {
  width: 100%;
}

.foot {
  margin-top: auto;
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* ── Atsarginis pranešimas ───────────────────────────────────────────── */

.fallback {
  position: relative;
  z-index: 20;
  max-width: 28rem;
  margin: 22vh auto 0;
  padding: 2rem var(--gutter);
  text-align: center;
}

.fallback h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.fallback p {
  color: rgb(var(--paper) / 0.66);
  font-size: 0.925rem;
  margin-bottom: 0.75rem;
}

.fallback pre {
  display: inline-block;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: rgb(var(--paper) / 0.07);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

/* ── Mažiau judesio ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}