/* =========================================================
   KUN VAQTI — html[data-time="night|dawn|sunrise|day|evening"] (js/daytime.js)
   Sahna tonlari canvas ichida (scene/render.js, config.TINT, THEME_FADE);
   bu yerda — DOM qatlamlari: yulduzlar, soya, matn, karta, menyu.
   Qorong'i fazalar (och matn): night, dawn. Yorug' fazalar: sunrise, day, evening.
   Hamma o'tishlar --t-fade bilan — canvas bilan bir vaqtda.
   ========================================================= */
:root { --t-fade: 3s; }

/* yulduzlar — tunda to'liq, rassvetda so'nmoqda */
.stage__stars {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-fade) ease-in-out;
  background:
    radial-gradient(1.4px 1.4px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 17% 31%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 26% 8%, #fff, transparent), radial-gradient(1px 1px at 35% 22%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 44% 14%, #fff, transparent), radial-gradient(1px 1px at 53% 6%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 61% 27%, #fff, transparent), radial-gradient(1px 1px at 69% 11%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 77% 19%, #fff, transparent), radial-gradient(1px 1px at 84% 7%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 91% 24%, #fff, transparent), radial-gradient(1px 1px at 96% 13%, #fff, transparent),
    radial-gradient(1px 1px at 12% 44%, #fff, transparent), radial-gradient(1.2px 1.2px at 57% 38%, #fff, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { from { filter: brightness(.6); } to { filter: brightness(1.4); } }
html[data-time="night"] .stage__stars { opacity: 1; }
html[data-time="dawn"] .stage__stars { opacity: .45; }

/* tepadagi soya — ranglar @property orqali silliq o'tadi (stage.css) */
.stage__shade { transition: --sh-top var(--t-fade) ease-in-out, --sh-mid var(--t-fade) ease-in-out, --sh-side var(--t-fade) ease-in-out, --sh-side2 var(--t-fade) ease-in-out; }
html[data-time="evening"] { --sh-top: rgba(255, 226, 205, .55); --sh-mid: rgba(255, 226, 205, .4); --sh-side: rgba(255, 238, 226, .7); --sh-side2: rgba(255, 238, 226, .42); }
html[data-time="sunrise"] { --sh-top: rgba(236, 232, 255, .6); --sh-mid: rgba(236, 232, 255, .42); --sh-side: rgba(255, 240, 236, .72); --sh-side2: rgba(255, 240, 236, .44); }
html[data-time="dawn"] { --sh-top: rgba(22, 18, 56, .62); --sh-mid: rgba(22, 18, 56, .38); --sh-side: rgba(30, 22, 64, .66); --sh-side2: rgba(30, 22, 64, .38); }
html[data-time="night"] { --sh-top: rgba(6, 9, 30, .7); --sh-mid: rgba(6, 9, 30, .42); --sh-side: rgba(8, 11, 36, .72); --sh-side2: rgba(8, 11, 36, .42); }

/* o'tishlar — rang o'zgaradigan hamma elementlar */
.hero__title, .summit__title, .hero__lead, .summit__lead, .eyebrow, .summit__lead strong,
.card__title, .card__desc, .card__list li, .card__peers, .card__peers b, .card__cabin, .card .chip, .card__label,
.nav__links a, .nav__burger span { transition: color var(--t-fade) ease-in-out, background-color var(--t-fade) ease-in-out, border-color var(--t-fade) ease-in-out; }
.card { transition: background-color var(--t-fade) ease-in-out, box-shadow var(--t-fade) ease-in-out; }
.card__progress i { transition: background-color var(--t-fade) ease-in-out; }
.logo--day, .logo--night { transition-duration: var(--t-fade); }

/* --- qorong'i fazalar: och matn, qorong'i karta, och menyu --- */
html:is([data-time="night"], [data-time="dawn"]) .hero__title,
html:is([data-time="night"], [data-time="dawn"]) .summit__title { color: #fff; }
html:is([data-time="night"], [data-time="dawn"]) .hero__lead,
html:is([data-time="night"], [data-time="dawn"]) .summit__lead,
html:is([data-time="night"], [data-time="dawn"]) .eyebrow { color: rgba(236, 238, 255, .86); }
html:is([data-time="night"], [data-time="dawn"]) .summit__lead strong { color: #A9ACFF; }
html:is([data-time="night"], [data-time="dawn"]) .card { background: rgba(16, 20, 54, .82); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(138, 142, 255, .22) inset; }
html:is([data-time="night"], [data-time="dawn"]) .card__title { color: #fff; }
html:is([data-time="night"], [data-time="dawn"]) .card__desc,
html:is([data-time="night"], [data-time="dawn"]) .card__list li,
html:is([data-time="night"], [data-time="dawn"]) .card__peers b { color: rgba(226, 229, 255, .84); }
html:is([data-time="night"], [data-time="dawn"]) .card__peers,
html:is([data-time="night"], [data-time="dawn"]) .card__cabin { color: rgba(190, 194, 235, .75); }
html:is([data-time="night"], [data-time="dawn"]) .card .chip { background: rgba(138, 142, 255, .2); color: #C6C8FF; }
/* ixcham karta (telefon/kichik ekran): bosqich pillari och matnga mos qorong'i fon */
html:is([data-time="night"], [data-time="dawn"]) .card--left .card__list li { background: rgba(138, 142, 255, .16); }
html:is([data-time="night"], [data-time="dawn"]) .card__label { border-top-color: rgba(255, 255, 255, .12); }
html:is([data-time="night"], [data-time="dawn"]) .card__progress i { background: rgba(255, 255, 255, .14); }

/* menyu sahna ustida (oq fon bo'lmaganda): och matn va och logo */
html:is([data-time="night"], [data-time="dawn"]) .nav:not(.is-solid):not(.is-open) .nav__links a { color: rgba(236, 238, 255, .88); }
html:is([data-time="night"], [data-time="dawn"]) .nav:not(.is-solid):not(.is-open) .nav__links a:hover { color: #fff; }
html:is([data-time="night"], [data-time="dawn"]) .nav:not(.is-solid):not(.is-open) .nav__burger span { background: #fff; }
html:is([data-time="night"], [data-time="dawn"]) .nav:not(.is-solid):not(.is-open) .logo--day { opacity: 0; }
html:is([data-time="night"], [data-time="dawn"]) .nav:not(.is-solid):not(.is-open) .logo--night { opacity: 1; }

@media (max-width: 960px) {
  /* telefonda cho'qqi matni oq kartada — qorong'i fazalarda karta ham qorong'i */
  .summit { transition: background-color var(--t-fade) ease-in-out, box-shadow var(--t-fade) ease-in-out; }
  html:is([data-time="night"], [data-time="dawn"]) .summit { background: rgba(16, 20, 54, .88); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); }
}
@media (max-height: 520px) and (orientation: landscape) {
  html:is([data-time="night"], [data-time="dawn"]) .summit { background: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__stars { animation: none; }
}

/* dev: ?time=lapse / ?time=<soat> — joriy faza belgisi (js/daytime.js) */
.dev-time {
  position: fixed; left: 12px; bottom: 12px; z-index: 99; padding: 6px 10px; border-radius: 999px;
  background: rgba(11, 12, 22, .78); color: #fff; font: 600 12px/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: .02em;
  pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}