/* MingBirXizmat — tozalangan asosiy qatlam (69-buyruq) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #ffcf1c; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.onboarding-shell { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #ffcf1c; overflow: hidden; }
.onboarding-shell[hidden] { display: none !important; }
#onboardingContent { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.ishga-tushdi { background: #ffffff; }
#bolimlar { max-width: 560px; margin: 0 auto; padding: 34px 20px 56px; color: #161616; }
#bolimlar h1 { font-size: 22px; font-weight: 800; margin: 0 0 22px; letter-spacing: -0.2px; }
#bolimlar h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6d6d6d; margin: 26px 0 6px; }
#bolimlar ul { list-style: none; margin: 0; padding: 0; }
#bolimlar li { font-size: 16px; line-height: 1.35; padding: 13px 2px; border-bottom: 1px solid #ededed; }
#bolimlar .eslatma { color: #8b8b8b; font-size: 13px; margin-top: 30px; }
@media (prefers-reduced-motion: reduce) {
  .onboarding-shell.is-launch-visual *, .onboarding-shell.is-launch-visual *::before, .onboarding-shell.is-launch-visual *::after { animation: none !important; }
}


/* === asl effekt qoidalari === */



/* Approved 3-second launch visual. This is the only customer surface that
   re-enables a visual asset; Home, Services, Orders, Messages and Profile
   remain under the static-clean purge contract. Phones keep the exact portrait
   composition; wider viewports use a full-screen warm canvas around the same
   proportional reference. */
.onboarding-shell.is-launch-visual {
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background: #f5d98e;
}



.onboarding-shell.is-launch-visual #onboardingContent {
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-items: center;
}



.launch-visual-screen {
  position: relative;
  display: grid;
  width: min(100%, calc(100svh * .5628), 941px);
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background: #f5d98e;
  isolation: isolate;
}



.launch-visual-screen::before,
.launch-visual-screen::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}



.launch-visual-screen::before {
  z-index: 1;
  background: linear-gradient(112deg, transparent 34%, rgb(255 255 255 / 0%) 43%, rgb(255 255 255 / 45%) 50%, rgb(255 255 255 / 0%) 57%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: launch-light-sweep 1200ms 1000ms cubic-bezier(.22, .7, .2, 1) both;
}



.launch-visual-screen::after {
  z-index: 2;
  border-radius: 2px;
  box-shadow: inset 0 0 80px rgb(255 220 112 / 22%);
  opacity: 0;
  animation: launch-soft-glow 1200ms 1000ms ease-out both;
}



.launch-visual-canvas {
  width: 100%;
  aspect-ratio: 941 / 1672;
  background: radial-gradient(circle at 50% 42%, #fff6df 0%, #ffe9ad 40%, #f5d98e 74%, #f5d98e 100%);
  opacity: 0;
  transform: scale(.985);
  animation: launch-reference-reveal 1000ms cubic-bezier(.22, .7, .2, 1) both;
}



@media (min-width: 600px) {
  .onboarding-shell.is-launch-visual,
  .onboarding-shell.is-launch-visual #onboardingContent,
  .launch-visual-screen {
    width: 100%;
    min-height: 100svh;
  }

  .launch-visual-screen {
    background:
      radial-gradient(circle at 50% 42%, rgb(255 248 206 / 90%) 0 18%, transparent 62%),
      linear-gradient(135deg, #f3cf72 0%, #ffe8a9 46%, #f1cf79 100%);
  }

  .launch-visual-canvas {
    width: auto;
    height: min(100svh, 1672px);
    max-width: 100%;
    max-height: 100svh;
  }
}



@media (prefers-reduced-motion: reduce) {
  .launch-visual-screen::before,
  .launch-visual-screen::after,
  .launch-visual-canvas {
    animation: none;
    opacity: 1;
    transform: none;
  }
}



/* ==========================================================================
   2026-10-03: Birinchi ochilish (3 sekundlik) vizual ekran
   Brend sariq fon (#FFCF1C) + MingBirXizmat logotipi (1001 XIZMAT badge + wordmark)
   Buyurtma: "3 sekundlik vizual ekran oynasini rangini shu sariq ranga
   almashtirib shu logotipni qo'yib ber"
   ========================================================================== */

.onboarding-shell.is-launch-visual,
.onboarding-shell.is-launch-visual #onboardingContent {
  background: #ffcf1c;
}



.launch-visual-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  width: 100%;
  min-height: 100svh;
  background: #ffcf1c;
}



.launch-visual-screen::before {
  content: none;
  animation: none;
  opacity: 0;
}



.launch-visual-screen::after {
  position: static;
  inset: auto;
  z-index: auto;
  border-radius: 0;
  box-shadow: none;
  content: "MingBirXizmat";
  color: #101418;
  font-size: clamp(30px, 8.6vw, 46px);
  font-weight: 820;
  letter-spacing: -.06em;
  line-height: 1;
  opacity: 1;
  animation: none;
}



.launch-visual-canvas {
  width: min(56vmin, 250px);
  height: auto;
  aspect-ratio: 1 / 1;
  background: url('/assets/brand/splash-logo.png?v=20261003.72') center / contain no-repeat;
  opacity: 1;
  transform: none;
  animation: launch-brand-in 720ms cubic-bezier(.22, .7, .2, 1) both;
}



@media (min-width: 600px) {
  .launch-visual-screen { background: #ffcf1c; }
  .launch-visual-canvas {
    width: min(46vmin, 300px);
    height: auto;
    max-width: 100%;
    max-height: none;
  }
}



@media (prefers-reduced-motion: reduce) {
  .launch-visual-canvas { animation: none; }
}


/* Tuzatish 2026-10-03: onboarding shell to'liq sariq (asosiy qoidadagi
   24px padding va oq gradientdan ustun turishi uchun bir xil spesifiklik + keyin). */
.onboarding-shell.is-launch-visual:not(.is-first-launch):not(.is-permissions-onboarding) {
  width: 100%;
  min-height: 100svh;
  padding: 0;
  background: #ffcf1c;
}



.onboarding-shell.is-launch-visual #onboardingContent {
  display: grid;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  place-items: center;
  background: #ffcf1c;
}



/* ==========================================================================
   2026-10-03 (66-buyruq): 3 sekundlik ochilish — to'liq vizual effekt
   Sariq brend fon + logo: nafas oluvchi nur, sekin aylanuvchi nurlar,
   prujinali kirish, suzish, echo halqa, yorug'lik yugurishi (sheen),
   wordmark blur-in, oxirida yumshoq chiqish fadi. Faqat transform/opacity/
   filter — yengil. Markup o'zgarmagan (app.js tegilmagan).
   ========================================================================== */

/* Sahna: 3.0 s da yumshoq chiqish fadi (JS 3000 ms da bosh ekranga o'tadi) */
.onboarding-shell.is-launch-visual .launch-visual-screen {
  position: relative;
  overflow: hidden;
  animation: lv-screen-out 300ms ease-in 2700ms both;
}



/* Fon qatlami: nafas oluvchi nur + sekin aylanuvchi quyosh nurlari */
.onboarding-shell.is-launch-visual .launch-visual-screen::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.16) 28%, rgba(255, 255, 255, 0) 58%),
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(255, 255, 255, 0.30) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 16deg);
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, rgba(0, 0, 0, 0.45) 36%, transparent 64%);
  mask-image: radial-gradient(circle at 50% 44%, #000 0%, rgba(0, 0, 0, 0.45) 36%, transparent 64%);
  opacity: 1;
  transform-origin: 50% 44%;
  animation: lv-rays 30s linear infinite, lv-breathe 3.6s ease-in-out 300ms infinite;
}



/* Wordmark: blur + pastdan yumshoq chiqish */
.onboarding-shell.is-launch-visual .launch-visual-screen::after {
  position: relative;
  z-index: 2;
  animation: lv-word-in 780ms cubic-bezier(.2, .8, .2, 1) 460ms both;
}



/* Logo badge: prujinali kirish + keyin yumshoq suzish */
.onboarding-shell.is-launch-visual .launch-visual-canvas {
  position: relative;
  z-index: 1;
  animation:
    lv-logo-in 950ms cubic-bezier(.16, 1.2, .26, 1) 130ms both,
    lv-float 2.7s ease-in-out 1100ms infinite;
}



/* Echo halqa: badge orqasidan tarqalib so'nuvchi doiraviy ramka */
.onboarding-shell.is-launch-visual .launch-visual-canvas::before {
  content: "";
  position: absolute;
  inset: 1%;
  z-index: -1;
  border: 4px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  opacity: 0;
  animation: lv-ring 2s cubic-bezier(.25, .7, .35, 1) 1050ms infinite;
}



/* Sheen: badge doirasi ICHIDA bir marta yuguruvchi yorug'lik (tashqariga chiqmaydi) */
.onboarding-shell.is-launch-visual .launch-visual-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: circle(48% at 50% 50%);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 65%);
  background-size: 44% 100%;
  background-repeat: no-repeat;
  background-position: -90% 0;
  opacity: 0;
  animation: lv-sheen 950ms cubic-bezier(.3, .6, .3, 1) 1150ms 1 both;
}



@keyframes lv-screen-out {
  from { opacity: 1; }
  to { opacity: 0; }
}



@keyframes lv-rays {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



@keyframes lv-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}



@keyframes lv-word-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(9px); letter-spacing: -0.02em; }
  60% { opacity: 1; }
  to { opacity: 1; transform: translateY(0); filter: blur(0); letter-spacing: -0.06em; }
}



@keyframes lv-logo-in {
  0% { opacity: 0; transform: scale(0.55) rotate(-7deg); }
  62% { opacity: 1; transform: scale(1.05) rotate(1.2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}



@keyframes lv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}



@keyframes lv-ring {
  0% { opacity: 0.95; transform: scale(0.99); }
  60% { opacity: 0.28; }
  100% { opacity: 0; transform: scale(1.26); }
}



@keyframes lv-sheen {
  0% { background-position: -90% 0; opacity: 0; }
  12% { opacity: 0.95; }
  78% { opacity: 0.95; }
  100% { background-position: 190% 0; opacity: 0; }
}



@media (prefers-reduced-motion: reduce) {
  .onboarding-shell.is-launch-visual .launch-visual-screen,
  .onboarding-shell.is-launch-visual .launch-visual-screen::before,
  .onboarding-shell.is-launch-visual .launch-visual-screen::after,
  .onboarding-shell.is-launch-visual .launch-visual-canvas,
  .onboarding-shell.is-launch-visual .launch-visual-canvas::before,
  .onboarding-shell.is-launch-visual .launch-visual-canvas::after {
    animation: none !important;
  }
  .onboarding-shell.is-launch-visual .launch-visual-canvas::before,
  .onboarding-shell.is-launch-visual .launch-visual-canvas::after {
    opacity: 0 !important;
  }
}