/* Shisha (glass) ko'rinish: xira xona foni ustida shaffof paneller, videodagi animatsiyalar.
   glass.js <html> ga "gl" klassini qo'shadi — JS bo'lmasa sayt eski holicha qoladi. */

html.gl {
  --bg: transparent;
  --bg2: rgba(255, 255, 255, 0.34);
  --card: rgba(255, 255, 255, 0.56);
  --line: rgba(255, 255, 255, 0.72);
  --nav: rgba(255, 255, 255, 0.5);
  --soft: rgba(255, 255, 255, 0.22);
  --field: rgba(255, 255, 255, 0.6);
  --track: rgba(255, 255, 255, 0.55);
  --text: #1c1814;
  --muted: #5f564d;
  --gl-hi: rgba(255, 255, 255, 0.75);
  --gl-a: rgba(255, 255, 255, 0.7);
  --gl-b: rgba(255, 255, 255, 0.42);
  --gl-shadow: 0 10px 34px rgba(58, 42, 26, 0.12);
}
html.gl[data-theme="dark"] {
  --bg: transparent;
  --bg2: rgba(255, 255, 255, 0.06);
  --card: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.16);
  --nav: rgba(28, 22, 18, 0.45);
  --soft: rgba(255, 255, 255, 0.04);
  --field: rgba(0, 0, 0, 0.25);
  --track: rgba(255, 255, 255, 0.14);
  --text: #faf7f4;
  --muted: #b9afa6;
  --gl-hi: rgba(255, 255, 255, 0.2);
  --gl-a: rgba(255, 255, 255, 0.15);
  --gl-b: rgba(255, 255, 255, 0.05);
  --gl-shadow: 0 12px 38px rgba(0, 0, 0, 0.35);
}

html.gl body { background: transparent; }

/* ---------- fon: aniq xona + xira nusxasi (shaffofligi bilan «nafas oladi») ---------- */
.gl-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #efe7dd; }
.gl-bg i { position: absolute; inset: 0; background: center / cover no-repeat; }
.gl-bg .gl-s { background-image: url(/assets/glass/light_s.jpg); transform: scale(1.04); }
.gl-bg .gl-b { background-image: url(/assets/glass/light.jpg); opacity: 0; transition: opacity 1.1s cubic-bezier(.65, 0, .35, 1); }
.gl-bg .gl-t { background: linear-gradient(180deg, rgba(251, 248, 244, .30), rgba(247, 241, 234, .18) 50%, rgba(251, 248, 244, .40)); opacity: .45; transition: opacity 1.1s cubic-bezier(.65, 0, .35, 1); }
html[data-theme="dark"] .gl-bg { background: #14110f; }
html[data-theme="dark"] .gl-bg .gl-s { background-image: url(/assets/glass/dark_s.jpg); }
html[data-theme="dark"] .gl-bg .gl-b { background-image: url(/assets/glass/dark.jpg); }
html[data-theme="dark"] .gl-bg .gl-t { background: linear-gradient(180deg, rgba(14, 11, 9, .62), rgba(18, 13, 10, .54), rgba(11, 9, 7, .70)); }
.gl-bg.on .gl-b { opacity: 1; }
.gl-bg.on .gl-t { opacity: 1; }
/* bo'lim almashganda: bir zum aniq xona */
.gl-bg.on.pulse .gl-b { opacity: .12; transition-duration: .26s; }
.gl-bg.on.pulse .gl-t { opacity: .5; transition-duration: .26s; }

/* ---------- suzuvchi shisha menyu ---------- */
html.gl .nav {
  top: 10px; margin: 10px 12px 0; border-radius: 20px;
  background: var(--nav);
  border: 1px solid var(--line);
  box-shadow: var(--gl-shadow), inset 0 1px 0 var(--gl-hi);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
html.gl .nav-links { position: relative; }
html.gl .nav-links a { position: relative; z-index: 1; }
.gl-pill {
  position: absolute; z-index: 0; top: 0; left: 0; height: 0; width: 0; border-radius: 12px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--gl-a), var(--gl-b));
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08), inset 0 1px 0 var(--gl-hi);
  transition: transform .38s cubic-bezier(.34, 1.4, .64, 1), width .38s cubic-bezier(.34, 1.4, .64, 1), height .3s, opacity .2s;
}
.gl-pill.on { opacity: 1; }

/* ---------- shisha paneller ---------- */
html.gl .card, html.gl .cs-panel, html.gl .lp-mock, html.gl .wk-plan, html.gl .f5-ig, html.gl .f5-igbox,
html.gl .f5-card, html.gl .f5-met, html.gl .f5-grow, html.gl .f5-tw, html.gl .fact, html.gl .cs-tab, html.gl .wk-day, html.gl .wk-mini {
  background: linear-gradient(180deg, var(--gl-a), var(--gl-b));
  border-color: var(--line);
  box-shadow: var(--gl-shadow), inset 0 1px 0 var(--gl-hi);
}
html.gl .alt { background: transparent; border-color: transparent; }
html.gl .btn-ghost { background: linear-gradient(180deg, var(--gl-a), var(--gl-b)); border-color: var(--line); box-shadow: inset 0 1px 0 var(--gl-hi); }
html.gl .btn-primary { box-shadow: 0 8px 24px rgba(232, 80, 31, .32), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* sichqoncha ustida ko'tariladi (whileHover y:-5) */
html.gl .card, html.gl .cs-panel, html.gl .f5-card, html.gl .f5-ig, html.gl .f5-met, html.gl .btn {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s, background .2s, border-color .2s;
}
@media (hover: hover) {
  html.gl .card:hover, html.gl .cs-panel:hover, html.gl .f5-card:hover, html.gl .f5-ig:hover, html.gl .f5-met:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(58, 42, 26, .18), inset 0 1px 0 var(--gl-hi);
  }
  html.gl .btn:hover { transform: translateY(-2px); }
}

/* ---------- paydo bo'lish: xiralikdan, pastdan, ketma-ket ---------- */
html.gl .gl-r {
  opacity: 0;
  transform: translateY(26px) scale(.96);
  filter: blur(16px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--gl-d, 0ms);
}
html.gl .gl-r.in { opacity: 1; transform: none; filter: none; }
/* paydo bo'lgach glass.js gl-r/in klasslarini olib tashlaydi — hover o'z transition'i bilan ishlaydi */

@media (prefers-reduced-motion: reduce) {
  html.gl .gl-r { opacity: 1; transform: none; filter: none; transition: none; }
  .gl-bg .gl-b, .gl-bg .gl-t { transition: none; }
  .gl-pill { transition: opacity .2s; }
}

/* til menyusi — shisha */
html.gl .lang-dd .lang-cur { background: linear-gradient(180deg, var(--gl-a), var(--gl-b)); box-shadow: inset 0 1px 0 var(--gl-hi); }
html.gl .lang-menu {
  background: linear-gradient(180deg, rgba(255, 252, 248, .94), rgba(250, 244, 238, .88));
  border-color: var(--line); box-shadow: var(--gl-shadow), inset 0 1px 0 var(--gl-hi);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
html.gl[data-theme="dark"] .lang-menu { background: linear-gradient(180deg, rgba(40, 34, 30, .94), rgba(26, 22, 20, .9)); }