/* SOCETIFY V2 — asos: reset, tipografika, tartib, sahna qatlamlari.
 *
 * Bu fayl `tokens.css` dan keyin ulanadi va faqat tuzilma beradi.
 * Komponentlar (tugma, forma, jadval) — `components.css` da.
 *
 * Asosiy g'oya: sahifa ekranni to'ldiradi. Kontent kengligi `--content`
 * (ya'ni 100vw minus ikki tomondan 10% zaxira), o'rtada tor quti yo'q.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a) { color: inherit; text-decoration: none; }
:where(a:focus-visible, button:focus-visible, input:focus-visible,
       select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible) {
  outline: 2px solid var(--sky-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Klaviatura bilan yurganlar uchun: birinchi Tab da "kontentga o'tish" */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0;
  background: var(--sky-500); color: var(--text-on-accent); font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Faqat skrinrider uchun matn (ko'zga ko'rinmaydi, lekin o'qiladi). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ tipografika */

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 1em; color: var(--text-soft); max-width: 68ch; text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--sky-300);
}
.lead { font-size: var(--text-lg); color: var(--text-soft); max-width: 52ch; }
.muted { color: var(--text-soft); }
.dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------ tartub: kenglik */

/* Kontent chizig'i: chapdan va o'ngdan 10% zaxira. */
.wrap {
  width: var(--content);
  margin-inline: auto;
}

/* Ekranni to'liq egallaydigan blok (fon, rasm, jadval) */
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* 12 ustunli tarmoq */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.stack { display: grid; gap: var(--grid-gap); align-content: start; }
.stack-sm { display: grid; gap: .5rem; align-content: start; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------ sahna (scroll) */

/* 3D kanvas butun sahifa ortida turadi va scroll bilan harakatlanmaydi. */
#stage {
  position: fixed; inset: 0;
  z-index: var(--z-stage);
  pointer-events: none;
  background: radial-gradient(120vw 90vh at 20% -10%, rgba(63, 210, 255, .10), transparent 60%),
              radial-gradient(100vw 80vh at 100% 10%, rgba(123, 92, 255, .14), transparent 62%),
              var(--bg-void);
}

/* Kontent kanvas ustida. */
.content { position: relative; z-index: var(--z-content); }

/* Sahna-sahna scroll: snap brauzerning o'zi tomonidan bajariladi. */
.scenes {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100svh;
  scrollbar-width: none;
}
.scenes::-webkit-scrollbar { width: 0; }

.scene {
  position: relative;
  min-height: var(--scene-height);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  padding-block: clamp(3rem, 8vh, 7rem);
}

/* Sahna matni: 3D fonda o'qilishi uchun yumshoq qatlam */
.scene-copy {
  max-width: 46ch;
  padding: clamp(1rem, 2vw, 2rem);
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

/* Sahna raqami va yo'l ko'rsatkichi (o'ng chetda) */
.scene-rail {
  position: fixed; right: calc(var(--gutter) / 3); top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-header);
  display: grid; gap: .6rem;
}
.scene-rail a {
  width: .5rem; height: .5rem; border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.scene-rail a[aria-current='true'] {
  background: var(--sky-400);
  transform: scale(1.6);
  box-shadow: var(--glow-sky);
}

/* Pastga aylantirish ishorasi */
.scroll-hint {
  position: absolute; bottom: clamp(1rem, 4vh, 3rem); left: 50%;
  translate: -50% 0;
  display: grid; justify-items: center; gap: .4rem;
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-dim);
}
.scroll-hint::after {
  content: ''; width: 1px; height: 2.2rem;
  background: linear-gradient(var(--sky-400), transparent);
  animation: hint-drop 2.4s var(--ease) infinite;
}
@keyframes hint-drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  30%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* Juda keng ekran (21:9 va kengroq): sahna 16:9 nisbatida markazlashadi,
   shunda 3D kompozitsiya cho'zilib ketmaydi. */
@media (min-aspect-ratio: 2/1) {
  .scene > .wrap { max-width: calc(100svh * 16 / 9); margin-inline: auto; }
}

/* Harakatni kamaytirish: snap va animatsiyalar o'chadi. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scenes { scroll-snap-type: none; }
  .scroll-hint::after { animation: none; }
  *, *::before, *::after { transition-duration: .001s !important; animation-duration: .001s !important; }
}

/* ------------------------------------------------------------ mobil */

@media (max-width: 820px) {
  :root { --gutter: 5vw; }
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 6; }
  .scene { min-height: auto; padding-block: clamp(2.5rem, 10vh, 5rem); }
  .scenes { scroll-snap-type: none; height: auto; overflow: visible; }
  .scene-rail { display: none; }
}

/* Bosma: fon va 3D olib tashlanadi */
@media print {
  #stage, .scene-rail, .scroll-hint { display: none !important; }
  body { background: #fff; color: #000; }
}