/* Главная: две двери — Сева (финансы) и Топливо (калории). Каждая половина в цветах своего модуля. */
:root {
  --void: #080b1f;
  --petrol: #061215;
  --ink: #eef1ff;
  --s-dim: #8a93c2;
  --f-ink: #effff8;
  --f-dim: #9cbcb3;
  --gold: #ffc46b;
  --cyan: #6ef2ff;
  --lime: #c6ff4f;
  --mint: #5cffc9;
  --line-hi: rgb(170 255 225 / .24);
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: linear-gradient(var(--void) 50%, var(--petrol) 50%);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.doors { min-height: 100dvh; display: flex; flex-direction: column; }

.door {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1 1 0; min-height: 320px;
  display: flex; align-items: flex-end;
  padding: 28px 24px 30px;
  color: inherit; text-decoration: none; outline: none;
  transition: flex-grow .7s var(--ease);
}
.door:focus-visible { outline: 2px solid rgb(255 255 255 / .55); outline-offset: -12px; border-radius: 28px; }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.txt { position: relative; z-index: 1; display: flex; flex-direction: column; animation: rise .9s var(--ease) both; transition: scale .25s var(--ease); }
.door:active .txt { scale: .98; }
.tag { font-size: 12px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px; }
.what { font-size: 18px; line-height: 1.35; margin-top: 10px; }
.live { font-size: 18px; line-height: 1.35; min-height: 1.35em; margin-top: 4px; opacity: 0; translate: 0 6px; transition: opacity .6s, translate .6s var(--ease); }
.live.on { opacity: 1; translate: none; }
.live b { font-weight: 600; }

/* ---------- Сева ---------- */
.seva {
  padding-top: calc(env(safe-area-inset-top) + 28px);
  font-family: "Space Grotesk", system-ui, sans-serif;
  background:
    radial-gradient(55% 65% at 82% 42%, rgb(120 90 255 / .26), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgb(110 242 255 / .08), transparent 70%),
    var(--void);
}
/* звёзды */
.seva::before {
  background-image:
    radial-gradient(1.2px 1.2px at 9% 18%, #fff, transparent),
    radial-gradient(1px 1px at 27% 41%, rgb(255 255 255 / .7), transparent),
    radial-gradient(1.4px 1.4px at 44% 12%, rgb(255 230 190 / .9), transparent),
    radial-gradient(1px 1px at 58% 72%, rgb(255 255 255 / .6), transparent),
    radial-gradient(1.2px 1.2px at 71% 9%, rgb(200 220 255 / .9), transparent),
    radial-gradient(1px 1px at 90% 78%, rgb(255 255 255 / .55), transparent),
    radial-gradient(1px 1px at 16% 66%, rgb(200 220 255 / .5), transparent),
    radial-gradient(1.3px 1.3px at 95% 24%, #fff, transparent),
    radial-gradient(1px 1px at 36% 88%, rgb(255 255 255 / .45), transparent);
  animation: twinkle 5s ease-in-out infinite alternate;
}
.seva .tag { font-family: var(--mono); font-weight: 500; color: var(--s-dim); }
.seva .name {
  font-weight: 600; font-size: clamp(56px, 16vw, 104px); line-height: .9; letter-spacing: -.04em;
  background: linear-gradient(100deg, #fff 35%, #dccbff 70%, #a6f1ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.seva .what, .seva .live { color: var(--s-dim); }
.seva .live b { color: var(--gold); }

.orb {
  position: absolute; z-index: 0; top: calc(50% + env(safe-area-inset-top) / 2); right: max(-7vw, -44px);
  width: min(60vw, 44vh, 360px); aspect-ratio: 1; translate: 0 -55%;
  display: grid; place-items: center;
  animation: appear 1.3s var(--ease) both;
}
.sphere {
  position: relative; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff7e6 0 3%, rgb(255 205 130 / .95) 11%, transparent 44%),
    radial-gradient(circle at 72% 76%, rgb(110 242 255 / .55), transparent 48%),
    radial-gradient(circle at 50% 50%, #9a7bff 0, #5a3ed6 52%, #1b165e 100%);
  box-shadow:
    0 0 60px 8px rgb(150 110 255 / .38),
    0 0 150px 40px rgb(110 242 255 / .10),
    inset -14px -20px 40px rgb(8 11 31 / .55);
  animation: breathe 6s ease-in-out infinite;
}
/* медленный перелив по поверхности */
.sphere::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0 18%, rgb(255 196 107 / .4) 30%, transparent 44% 62%, rgb(110 242 255 / .4) 76%, transparent 90%);
  mix-blend-mode: screen; filter: blur(8px);
  animation: spin 16s linear infinite;
}
.ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.ring circle { fill: none; }
.ring .track { stroke: rgb(160 180 255 / .14); stroke-width: .8; }
.ring .prog {
  stroke: url(#rg); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 603.2; stroke-dashoffset: 603.2;
  filter: drop-shadow(0 0 4px rgb(110 242 255 / .8));
  transition: stroke-dashoffset 1.8s var(--ease) .2s;
}

/* ---------- Топливо ---------- */
.fuel {
  padding-bottom: calc(env(safe-area-inset-bottom) + 30px);
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--f-ink);
  border-top: 1px solid rgb(170 255 225 / .1);
  background:
    radial-gradient(70% 70% at 92% 100%, rgb(150 220 60 / .14), transparent 65%),
    radial-gradient(60% 60% at 8% 0%, rgb(40 150 125 / .24), transparent 70%),
    var(--petrol);
}
/* сетка приборной панели, как в «Топливе» */
.fuel::before {
  background-image:
    linear-gradient(rgb(170 255 225 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(170 255 225 / .05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 10%, transparent 75%);
}
.fuel .tag { font-weight: 700; color: var(--f-dim); }
.fuel .name {
  font: 600 clamp(38px, 10.6vw, 78px)/1 "Unbounded", system-ui, sans-serif; letter-spacing: -.03em;
  text-shadow: 0 0 32px rgb(198 255 79 / .22);
}
.fuel .what, .fuel .live { color: var(--f-dim); }
.fuel .live b { color: var(--lime); }
.fuel .txt { animation-delay: .1s; }

.tank {
  position: absolute; z-index: 0; right: 26px; top: 30px; bottom: calc(env(safe-area-inset-bottom) + 30px);
  width: min(23vw, 104px); border-radius: 30px; overflow: hidden;
  background:
    radial-gradient(120% 40% at 50% 105%, rgb(198 255 79 / .16), transparent 70%),
    linear-gradient(180deg, rgb(18 44 50 / .9), rgb(7 22 26 / .95));
  border: 1px solid var(--line-hi);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 -40px 60px rgb(0 0 0 / .35), 0 24px 60px rgb(0 0 0 / .45);
  animation: appear 1.3s var(--ease) .1s both;
}
/* стеклянный блик поверх жидкости */
.tank::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgb(255 255 255 / .11) 0, rgb(255 255 255 / .03) 14%, transparent 30%, transparent 80%, rgb(255 255 255 / .06) 100%);
}
.fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(180deg, var(--lime), #8dff8a 45%, var(--mint));
  box-shadow: 0 0 40px rgb(198 255 79 / .45);
  transition: height 1.8s var(--ease) .25s;
}
/* две волны на поверхности: дальняя бледнее и бежит навстречу */
.fill::before, .fill::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 9'%3E%3Cpath d='M0 5c4.5 0 4.5-4 9-4s4.5 4 9 4 4.5-4 9-4 4.5 4 9 4v4H0z' fill='%23c6ff4f'/%3E%3C/svg%3E") repeat-x 0 100%;
}
.fill::before { height: 12px; background-size: 52px 12px; opacity: .4; animation: wave-back 3.6s linear infinite; }
.fill::after { height: 9px; background-size: 36px 9px; animation: wave 2.4s linear infinite; }
.goal {
  position: absolute; left: 0; right: 0; bottom: 86.96%; z-index: 1;
  border-top: 1.5px dashed rgb(239 255 248 / .45);
  transition: bottom 1.8s var(--ease) .25s;
}

/* ---------- Широкий экран: двери рядом ---------- */
@media (min-width: 820px) and (min-aspect-ratio: 1/1) {
  .doors { flex-direction: row; }
  .door, .seva, .fuel { padding: 56px; }
  .fuel { border-top: 0; border-left: 1px solid rgb(170 255 225 / .1); }
  .orb { top: 40%; right: 50%; translate: 50% -50%; width: min(32vw, 50vh, 440px); }
  .tank { top: 12vh; bottom: auto; right: 50%; translate: 50% 0; height: 48vh; width: 116px; }
}
@media (hover: hover) and (pointer: fine) {
  .door:hover { flex-grow: 1.22; }
}

@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes appear { from { opacity: 0; scale: .92; } }
@keyframes breathe { 50% { scale: 1.04; box-shadow: 0 0 80px 14px rgb(150 110 255 / .45), 0 0 170px 50px rgb(110 242 255 / .13), inset -14px -20px 40px rgb(8 11 31 / .55); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes twinkle { to { opacity: .45; } }
@keyframes wave { to { background-position-x: 36px; } }
@keyframes wave-back { to { background-position-x: -52px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}