/* Shisha (glassmorphism) va 3D effektlar. style.css ustidan yuklanadi; harakat fx.js da. */
:root {
  --glass: rgba(255, 250, 246, .56);
  --glass-strong: rgba(255, 250, 246, .78);
  --glass-line: rgba(255, 255, 255, .7);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --blur: blur(22px) saturate(170%);
}

/* ---------- Jonli fon: suzuvchi rangli dog'lar va 3D yuraklar ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 800px; }
.blob { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; opacity: .75; will-change: transform; }
.b1 { left: -30vmax; top: -30vmax; background: radial-gradient(circle, rgba(201, 151, 63, .55), transparent 62%); animation: drift1 26s ease-in-out infinite alternate; }
.b2 { right: -35vmax; top: 10vh; background: radial-gradient(circle, rgba(194, 24, 91, .32), transparent 62%); animation: drift2 32s ease-in-out infinite alternate; }
.b3 { left: -20vmax; bottom: -40vmax; background: radial-gradient(circle, rgba(122, 22, 38, .38), transparent 62%); animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 22vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-20vmax, 18vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(14vmax, -24vmax) scale(1.1); } }
/* Telefonda dog'lar qimirlamaydi: shisha ortidagi fon har kadrda qayta xiralashtirilmasin (batareya, tezlik) */
@media (hover: none) { .blob { animation: none; } }

.float { position: absolute; bottom: -10vh; font-style: normal; color: var(--c, #c9973f); opacity: 0; font-size: var(--s, 22px); text-shadow: 0 4px 10px rgba(122, 22, 38, .2); animation: rise var(--t, 18s) linear infinite; animation-delay: var(--d, 0s); }
.f1 { left: 8%; --s: 20px; --t: 19s; --d: -2s; }
.f2 { left: 26%; --s: 14px; --t: 23s; --d: -11s; --c: #c2185b; }
.f3 { left: 48%; --s: 26px; --t: 21s; --d: -6s; --c: #e9cf98; }
.f4 { left: 68%; --s: 16px; --t: 25s; --d: -15s; --c: #9c1f33; }
.f5 { left: 86%; --s: 22px; --t: 20s; --d: -9s; }
.f6 { left: 58%; --s: 12px; --t: 27s; --d: -19s; --c: #c2185b; }
@keyframes rise {
  0% { transform: translate3d(0, 0, -200px) rotateY(0) rotateZ(-10deg); opacity: 0; }
  10% { opacity: .55; }
  90% { opacity: .45; }
  100% { transform: translate3d(30px, -120vh, 120px) rotateY(720deg) rotateZ(15deg); opacity: 0; }
}

/* ---------- Shisha sirtlar ---------- */
.card, .q, .cmp-q, .features {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow), var(--glass-hi);
  position: relative;
}
.q, .cmp-q { border-top: 4px solid var(--t); }
.features { border: 1px solid var(--glass-line); }
.features .feature + .feature { border-left-color: rgba(122, 22, 38, .12); }
.tabs { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-hi); }
.tabs button[aria-selected='true'] { background: linear-gradient(135deg, var(--wine-2), var(--wine)); box-shadow: 0 6px 14px rgba(122, 22, 38, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.input { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 2px 4px rgba(122, 22, 38, .06); }
.input:focus { background: #fff; }
.role { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .9); transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.role[aria-checked='true'] { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, .1); }
.status { background: rgba(255, 255, 255, .55); border-color: var(--glass-line); }
.code-box { position: relative; background: rgba(255, 253, 248, .6); }
.opinion { box-shadow: var(--glass-hi); }
.opinion.er { background: rgba(234, 242, 253, .78); }
.opinion.xotin { background: rgba(253, 236, 242, .78); }
.discuss { background: rgba(255, 248, 236, .8); }
.bottom-bar {
  background: rgba(255, 247, 240, .5);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-top: 1px solid var(--glass-line);
  box-shadow: 0 -10px 30px rgba(122, 22, 38, .08);
}
.toast { background: rgba(61, 10, 18, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

/* Variantlar: tanlanganda 3D ko'tariladi */
.opt { background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(122, 22, 38, .05); transition: transform .18s ease, box-shadow .18s ease, background .18s, border-color .18s; }
.opt:active { transform: scale(.985); }
.opt[aria-checked='true'] {
  background: color-mix(in srgb, var(--t-bg) 80%, white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--t) 22%, transparent), inset 0 1px 0 #fff;
}
.opt[aria-checked='true'] .k { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 4px 10px color-mix(in srgb, var(--t) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
@keyframes pop { 0% { transform: scale(.6) rotateY(180deg); } 100% { transform: none; } }

/* ---------- 3D tugmalar ---------- */
.btn { position: relative; transition: transform .12s, box-shadow .12s, opacity .12s; }
.btn-primary { box-shadow: 0 4px 0 #4a0c17, 0 12px 24px rgba(122, 22, 38, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-gold { box-shadow: 0 4px 0 #8f6520, 0 12px 24px rgba(201, 151, 63, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-theme { background: linear-gradient(135deg, color-mix(in srgb, var(--t) 80%, white), var(--t)); box-shadow: 0 4px 0 color-mix(in srgb, var(--t) 60%, black), 0 12px 22px color-mix(in srgb, var(--t) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-ghost { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--glass-line); box-shadow: 0 3px 0 rgba(201, 151, 63, .45), 0 8px 18px rgba(122, 22, 38, .08); }
.btn-primary:active, .btn-gold:active, .btn-theme:active, .btn-ghost:active { transform: translateY(3px); }
.btn-primary:active { box-shadow: 0 1px 0 #4a0c17, 0 4px 10px rgba(122, 22, 38, .3); }
.btn-gold:active { box-shadow: 0 1px 0 #8f6520, 0 4px 10px rgba(201, 151, 63, .3); }
.btn-theme:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--t) 60%, black); }
.btn-ghost:active { box-shadow: 0 0 0 rgba(201, 151, 63, .45); }
.btn-primary::after, .btn-gold::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); background-size: 250% 100%; animation: sheen 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 70% { background-position: 130% 0; } 100% { background-position: -130% 0; } }

/* ---------- Bosh sahifa: 3D sarlavha va uzuklar ---------- */
.title .big { text-shadow: 0 1px 0 #6b1321, 0 2px 0 #5e101c, 0 3px 0 #520e19, 0 4px 0 #470c16, 0 5px 0 #3d0a12, 0 10px 18px rgba(61, 10, 18, .35); }
.title .script { text-shadow: 0 2px 0 rgba(201, 151, 63, .55), 0 6px 14px rgba(122, 22, 38, .25); }
.brand img { mix-blend-mode: normal; filter: drop-shadow(0 4px 6px rgba(61, 10, 18, .25)); }
.feature i { background: radial-gradient(circle at 32% 28%, #c8475a, var(--wine) 55%, #4a0c17); box-shadow: 0 6px 12px rgba(122, 22, 38, .35), inset 0 2px 3px rgba(255, 255, 255, .35); }


/* ---------- 3D egilish (tilt) va yaltiroq ---------- */
[data-tilt] {
  transform: perspective(900px) rotateX(calc(var(--rx, 0deg) + var(--grx, 0deg))) rotateY(calc(var(--ry, 0deg) + var(--gry, 0deg)));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
[data-tilt].tilting { transition: transform .08s linear; }
[data-tilt]::before {
  content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .42), transparent 55%);
  opacity: var(--glare, .55); mix-blend-mode: soft-light; transition: opacity .3s;
}
.hero { position: relative; }
.hero img { transform: scale(1.08) translate3d(calc(var(--tx, 0) * -1.2px), calc(var(--ty, 0) * 1.2px), 0); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.chapter-head .txt, .chapter-head .badge { transform: translateZ(30px); }
.chapter-head { transform-style: preserve-3d; }
.badge { animation: swing 5s ease-in-out infinite; transform-origin: top center; }
@keyframes swing { 0%, 100% { transform: translateZ(30px) rotateY(-12deg); } 50% { transform: translateZ(30px) rotateY(12deg); } }

/* ---------- Natija halqasi: 3D donut ---------- */
.ring { position: relative; box-shadow: 0 16px 34px rgba(122, 22, 38, .22), inset 0 -8px 14px rgba(0, 0, 0, .18), inset 0 8px 14px rgba(255, 255, 255, .55); animation: coin 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
.ring div { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 4px 10px rgba(122, 22, 38, .12), 0 1px 0 rgba(255, 255, 255, .9); }
/* Tab yoki filtr almashganda (sahifa qayta chizilganda) halqa qayta aylanmasin */
#app > div:not(.fade) .ring { animation: none; }
@keyframes coin { from { transform: perspective(600px) rotateY(-200deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.bar { box-shadow: inset 0 1px 3px rgba(122, 22, 38, .15); background: rgba(241, 227, 218, .7); }
.bar i { background: linear-gradient(180deg, color-mix(in srgb, var(--t) 70%, white), var(--t)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }

/* ---------- Kirish animatsiyasi: kartalar 3D ko'tariladi ---------- */
.fade { animation: none; }
.fx .pre { opacity: 0; }
/* backwards: animatsiya tugagach element o'z transform'iga qaytadi (tilt bilan to'qnashmaydi) */
.fx .rise { animation: rise3d .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes rise3d { from { opacity: 0; transform: perspective(900px) translateY(28px) rotateX(16deg) scale(.97); } }

/* backdrop-filter qo'llab-quvvatlanmasa — o'qilishi uchun zichroq fon */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .q, .cmp-q, .features, .bottom-bar, .tabs, .btn-ghost { background: rgba(255, 250, 245, .94); }
}
@media (prefers-reduced-motion: reduce) {
  .scene .float, .badge { animation: none !important; }
  [data-tilt] { transform: none !important; }
  .fx .pre { opacity: 1; }
}