/* ════════════════════════════════════════════════════════════
   TERAN ILDIZ — motion.css  (v14.0)
   PREMIUM MOTION DIZAYN TIZIMI
   • Har bir karta, kategoriya, element uchun chuqur animatsiya
   • Staggered reveal, magnetic hover, 3D tilt, particle FX
   • Scroll-driven animations, page transitions, morph effects
   • prefers-reduced-motion to'liq hurmat qilinadi
════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   1) GLOBAL MOTION TOKENS
════════════════════════════════════════════ */
:root {
  --mo-fast:   .15s;
  --mo-base:   .28s;
  --mo-slow:   .5s;
  --mo-slug:   .75s;
  --mo-elastic: cubic-bezier(.34,1.56,.64,1);
  --mo-smooth:  cubic-bezier(.16,1,.3,1);
  --mo-snappy:  cubic-bezier(.22,.61,.36,1);
  --mo-bounce:  cubic-bezier(.68,-0.55,.27,1.55);
  --mo-expo:    cubic-bezier(.87,0,.13,1);
}

/* ════════════════════════════════════════════
   2) KARTA REVEAL ANIMATSIYALARI — STAGGERED
   Har karta ketma-ket chiqadi (kaskad effekti)
════════════════════════════════════════════ */
@keyframes ti-card-reveal {
  0%   { opacity:0; transform:translateY(22px) scale(.94) rotateX(8deg); filter:blur(3px); }
  60%  { filter:blur(0); }
  100% { opacity:1; transform:translateY(0) scale(1) rotateX(0); filter:blur(0); }
}
@keyframes ti-card-reveal-left {
  from { opacity:0; transform:translateX(-24px) scale(.95); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes ti-card-reveal-right {
  from { opacity:0; transform:translateX(24px) scale(.95); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}

/* Asosiy kartalar — stagger delay */
#grid .card {
  animation: ti-card-reveal var(--mo-slow) var(--mo-smooth) both;
  perspective: 800px;
  transform-style: preserve-3d;
}
#grid .card:nth-child(1)  { animation-delay: .03s; }
#grid .card:nth-child(2)  { animation-delay: .07s; }
#grid .card:nth-child(3)  { animation-delay: .11s; }
#grid .card:nth-child(4)  { animation-delay: .15s; }
#grid .card:nth-child(5)  { animation-delay: .19s; }
#grid .card:nth-child(6)  { animation-delay: .23s; }
#grid .card:nth-child(7)  { animation-delay: .27s; }
#grid .card:nth-child(8)  { animation-delay: .30s; }
#grid .card:nth-child(9)  { animation-delay: .33s; }
#grid .card:nth-child(10) { animation-delay: .36s; }
#grid .card:nth-child(n+11) { animation-delay: .38s; }

/* ════════════════════════════════════════════
   3) KARTA HOVER — 3D TILT + MAGNETIC LIFT
════════════════════════════════════════════ */
@media (hover: hover) {
  #grid .card {
    transition:
      transform .36s var(--mo-smooth),
      box-shadow .36s ease,
      border-color .28s ease !important;
    transform-origin: center bottom;
  }

  /* Hoverda chuqur 3D ko'tarilish */
  #grid .card:hover {
    transform: translateY(-8px) scale(1.018) rotateX(2deg) !important;
    border-color: var(--cc, var(--gold)) !important;
    box-shadow:
      0 28px 56px -20px rgba(0,0,0,.65),
      0 8px 24px rgba(0,0,0,.22),
      0 0 0 1px color-mix(in srgb, var(--cc, var(--gold)) 30%, transparent) inset,
      0 0 60px -30px var(--cg, rgba(201,169,106,.4)) !important;
  }

  /* Karta cover — muqova kattaroq zoom + nurlanish */
  #grid .card:hover .cov-ic {
    transform: scale(1.22) translateY(-4px) rotate(-3deg) !important;
    filter: drop-shadow(0 4px 20px var(--cat, var(--gold))) !important;
  }

  /* Sarlavha — hoverda engil ko'tarilish */
  #grid .card:hover .cttl {
    color: var(--ink) !important;
    letter-spacing: .01em;
    transition: all .28s var(--mo-smooth);
  }

  /* Kategoriya badge nuri */
  #grid .card:hover .cbadge {
    opacity: 1 !important;
    color: var(--cc, var(--gold)) !important;
    transition: all .22s ease;
  }

  /* Audio disk hover — tezroq aylanish */
  #grid .card:hover .spin-slow {
    animation-duration: 5s !important;
  }

  /* Ekvalayzer — hoverda tezroq */
  #grid .card:hover .cov-eq span {
    animation-duration: .6s !important;
  }

  /* Cover glow — kuchayadi */
  #grid .card:hover .cov-glow {
    opacity: .7 !important;
    transform: scale(1.3);
    filter: blur(22px);
    transition: all .4s ease;
  }
}

/* Active press — 3D bosilish hissi */
#grid .card:active {
  transform: translateY(-2px) scale(.99) rotateX(1deg) !important;
  transition-duration: .12s !important;
}

/* ════════════════════════════════════════════
   4) COVER SHIMMER — MetaIL YORUG'LIQ O'TISHI
════════════════════════════════════════════ */
@keyframes ti-shimmer {
  0%   { transform: translateX(-150%) skewX(-18deg); opacity:0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(180%) skewX(-18deg); opacity:0; }
}
.card .cov {
  overflow: hidden;
}
.card .cov::after {
  content: '';
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255,255,255,.22) 42%,
    rgba(255,255,255,.10) 50%,
    transparent 65%
  );
  transform: translateX(-150%) skewX(-18deg);
  transition: none;
}
@media (hover: hover) {
  .card:hover .cov::after {
    animation: ti-shimmer .75s var(--mo-smooth) forwards;
  }
}

/* Cover ustki rangli chiziq — kategoriya rangida kengayadi */
.cov::before {
  transition: opacity .3s, transform .5s var(--mo-smooth) !important;
}
.card:hover .cov::before {
  opacity: 1 !important;
  transform: scaleX(1.08);
}

/* ════════════════════════════════════════════
   5) KATEGORIYA CHIPLARI — PREMIUM MOTION
════════════════════════════════════════════ */
#catbar .nc {
  position: relative;
  overflow: hidden;
  transition:
    transform .28s var(--mo-elastic),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    color .22s ease !important;
}

/* Hoverda kategoriyanin o'z rangida ko'tarilish */
@media (hover: hover) {
  #catbar .nc:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 8px 24px -6px var(--cg, rgba(201,169,106,.5)) !important;
  }
  #catbar .nc:hover i {
    transform: scale(1.2) !important;
    transition: transform .26s var(--mo-elastic);
  }
}
#catbar .nc:active {
  transform: translateY(0) scale(.96) !important;
  transition-duration: .1s !important;
}

/* Faol kategoriya — pulsiruvchi soya */
@keyframes ti-cat-pulse {
  0%, 100% { box-shadow: 0 6px 22px -6px var(--cg, rgba(201,169,106,.5)); }
  50%       { box-shadow: 0 10px 32px -6px var(--cg, rgba(201,169,106,.7)); }
}
#catbar .nc.on {
  animation: ti-cat-pulse 3s ease-in-out infinite;
}

/* Ripple effekti — bosganda to'lqin */
@keyframes ti-ripple {
  from { transform: scale(0); opacity: .45; }
  to   { transform: scale(3.5); opacity: 0; }
}
#catbar .nc::before {
  content: '';
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cc, var(--gold));
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
#catbar .nc.ti-ripple-active::before {
  animation: ti-ripple .55s var(--mo-smooth) forwards;
}

/* Kategoriya o'zgarganda grid — chapdan siljib kiradi */
@keyframes ti-grid-switch {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
#grid.ti-cat-switching {
  animation: ti-grid-switch .32s var(--mo-smooth) both;
}

/* ════════════════════════════════════════════
   6) YON MENYU — PREMIUM KIRISH/CHIQISH
════════════════════════════════════════════ */
@keyframes ti-side-item-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
#side:not([hidden]) .side-item {
  animation: ti-side-item-in .4s var(--mo-smooth) both;
}
#side .side-item:nth-child(1) { animation-delay: .04s; }
#side .side-item:nth-child(2) { animation-delay: .08s; }
#side .side-item:nth-child(3) { animation-delay: .12s; }
#side .side-item:nth-child(4) { animation-delay: .16s; }
#side .side-item:nth-child(5) { animation-delay: .20s; }
#side .side-item:nth-child(6) { animation-delay: .24s; }
#side .side-item:nth-child(7) { animation-delay: .28s; }
#side .side-item:nth-child(8) { animation-delay: .32s; }
#side .side-item:nth-child(9) { animation-delay: .36s; }

@media (hover: hover) {
  #side .side-item:hover {
    transform: translateX(6px) !important;
    padding-left: 20px !important;
    transition: all .22s var(--mo-smooth) !important;
  }
}

/* Faol yon menyu elementi — rangli chap chiziq animatsiyasi */
@keyframes ti-side-active-line {
  from { height: 0; }
  to   { height: 60%; }
}
#side .side-item.on::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; border-radius: 3px;
  background: #fff;
  animation: ti-side-active-line .3s var(--mo-smooth) forwards;
}
#side .side-item { position: relative; }

/* ════════════════════════════════════════════
   7) NAVBAR — SCROLL REVEAL + PREMIUM EFEKTLAR
════════════════════════════════════════════ */
@keyframes ti-nav-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
#nav {
  animation: ti-nav-in .45s var(--mo-smooth) both;
}

/* Logo — hoverda yuqoriga sakraydi */
@media (hover: hover) {
  .logo:hover {
    transform: translateY(-1px) scale(1.02) !important;
    transition: transform .25s var(--mo-elastic) !important;
  }
}

/* Nav tugmalari — hoverda ko'tarilish + rangli soya */
@media (hover: hover) {
  #nav .nb:hover {
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow: 0 6px 18px -4px rgba(201,169,106,.35) !important;
  }
}

/* Qidiruv inputi — focus animatsiyasi */
@keyframes ti-srch-focus {
  from { box-shadow: 0 0 0 0 var(--gold-dim); }
  to   { box-shadow: 0 0 0 4px var(--gold-dim); }
}
.srch input:focus {
  animation: ti-srch-focus .25s var(--mo-smooth) forwards;
}

/* ════════════════════════════════════════════
   8) AUDIO PLEYER — PREMIUM ANIMATSIYALAR
════════════════════════════════════════════ */

/* Audio panel kirish — pastdan yuqoriga */
@keyframes ti-audio-panel-in {
  from { opacity: 0; transform: translateY(30px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#audPanel:not([hidden]) {
  animation: ti-audio-panel-in .45s var(--mo-smooth) both !important;
}

/* Track sarlavhasi — almashganda flip animatsiya */
@keyframes ti-track-flip {
  0%   { opacity: 1; transform: translateY(0); }
  40%  { opacity: 0; transform: translateY(-10px); }
  60%  { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ap-track-title.ti-track-change {
  animation: ti-track-flip .4s var(--mo-smooth);
}

/* Wave — pulsiruvchi dalgalanma */
@keyframes ti-wave-pulse {
  0%, 100% { transform: scaleY(.5); opacity: .5; }
  50%      { transform: scaleY(1);  opacity: 1; }
}
#apWave.playing .ap-wave-bar {
  animation: ti-wave-pulse 1.2s ease-in-out infinite;
}

/* Play tugmasi — bosganda siqilish + portlash */
@keyframes ti-play-burst {
  0%   { transform: scale(1); }
  30%  { transform: scale(.88); }
  65%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
#apPlayBtn:active, #miniPlayBtn:active {
  animation: ti-play-burst .35s var(--mo-elastic) !important;
}

/* Progress bar — silliq dolg'a */
.ap-bar-fill {
  transition: width .25s linear !important;
}
#miniProg {
  transition: width .3s linear !important;
}

/* Mini player kirishi */
@keyframes ti-mini-in {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#mini:not([hidden]) {
  animation: ti-mini-in .4s var(--mo-elastic) both;
}

/* Playlist elementi — hover */
@media (hover: hover) {
  .ap-pl-item:hover {
    transform: translateX(4px);
    transition: transform .2s var(--mo-smooth);
  }
}

/* Faol trек — pulsiruvchi */
@keyframes ti-pl-active {
  0%, 100% { background: rgba(201,169,106,.14); }
  50%      { background: rgba(201,169,106,.24); }
}
.ap-pl-item.on {
  animation: ti-pl-active 2.5s ease-in-out infinite;
}

/* Tezlik tugmasi */
@media (hover: hover) {
  .ap-speed:hover {
    transform: scale(1.08) !important;
    transition: transform .2s var(--mo-elastic) !important;
  }
}

/* ════════════════════════════════════════════
   9) PDF READER — SAHIFA ANIMATSIYALARI
════════════════════════════════════════════ */
@keyframes ti-pdf-in {
  from { opacity: 0; transform: scale(.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#rdr:not([hidden]) {
  animation: ti-pdf-in .38s var(--mo-smooth) both !important;
}

@keyframes ti-pdf-page {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
#pdfCanvasWrap canvas {
  animation: ti-pdf-page .32s var(--mo-smooth);
}

/* PDF yopish tugmasi */
@media (hover: hover) {
  .rdr-back:hover {
    transform: translateX(-3px) !important;
    transition: transform .2s var(--mo-smooth) !important;
  }
}

/* ════════════════════════════════════════════
   10) TOAST — PREMIUM PAYDO/KETISH
════════════════════════════════════════════ */
@keyframes ti-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ti-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(.94); }
}
#toast.on {
  animation: ti-toast-in .3s var(--mo-elastic) both;
}
#toast:not(.on) {
  animation: ti-toast-out .25s var(--mo-smooth) both;
}

/* ════════════════════════════════════════════
   11) HERO INTRO — SINEMA EFFEKTI
════════════════════════════════════════════ */
@keyframes ti-hero-bg-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero badge — chapdan kiradi */
@keyframes ti-hero-badge {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-badge {
  animation: ti-hero-badge .5s var(--mo-smooth) .1s both;
}

/* Hero title — pastdan katta chiqadi */
@keyframes ti-hero-title {
  from { opacity: 0; transform: translateY(30px) scale(.92); letter-spacing: .5em; }
  to   { opacity: 1; transform: translateY(0) scale(1); letter-spacing: inherit; }
}
.hero-title {
  animation: ti-hero-title .75s var(--mo-smooth) .2s both !important;
}

/* Hero sub — yuqoridan tushadi */
@keyframes ti-hero-sub {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-sub {
  animation: ti-hero-sub .45s var(--mo-smooth) .35s both !important;
}

/* Hero divider — kengayadi */
@keyframes ti-hero-divider {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.hero-divider {
  animation: ti-hero-divider .6s var(--mo-smooth) .4s both;
  transform-origin: left center;
}

/* Hero desc — yumshoq fade */
@keyframes ti-hero-desc {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-desc {
  animation: ti-hero-desc .45s var(--mo-smooth) .5s both;
}

/* Hero quote — kitob ochilgandek */
@keyframes ti-hero-quote {
  from { opacity: 0; transform: skewX(-4deg) translateY(6px); }
  to   { opacity: 1; transform: skewX(0) translateY(0); }
}
.hero-quote {
  animation: ti-hero-quote .5s var(--mo-smooth) .55s both !important;
}

/* CTA tugmasi — sakrab chiqadi */
@keyframes ti-hero-cta {
  from { opacity: 0; transform: translateY(12px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-cta {
  animation: ti-hero-cta .55s var(--mo-elastic) .65s both !important;
}

/* Features chiplari — to'lqin bilan */
.hero-features span {
  animation: ti-card-reveal .45s var(--mo-smooth) both;
}
.hero-features span:nth-child(1) { animation-delay: .70s; }
.hero-features span:nth-child(2) { animation-delay: .77s; }
.hero-features span:nth-child(3) { animation-delay: .84s; }
.hero-features span:nth-child(4) { animation-delay: .91s; }

/* Hero chiqish animatsiyasi */
@keyframes ti-hero-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); }
}
.hero-exit {
  animation: ti-hero-exit .5s var(--mo-smooth) forwards !important;
}

/* Hero fon — yumshoq harakatlanuvchi gradient */
.hero-bg-fx {
  animation: tiAmbient 26s ease-in-out infinite alternate;
}

/* ════════════════════════════════════════════
   12) CAB BAR TUGMALARI — PREMIUM MICRO
════════════════════════════════════════════ */
@keyframes ti-save-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(.82) rotate(-8deg); }
  65%  { transform: scale(1.18) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.cab-btn.cab-save.ti-saved {
  animation: ti-save-bounce .45s var(--mo-elastic);
}

@keyframes ti-copy-check {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.cab-btn.cab-copy.ti-copied {
  animation: ti-copy-check .35s var(--mo-elastic);
}

@keyframes ti-share-spin {
  from { transform: rotate(-15deg) scale(.9); opacity: .6; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}
.cab-btn.cab-share:active i {
  animation: ti-share-spin .3s var(--mo-elastic);
}

/* Cab bar hoverda tugmalar */
@media (hover: hover) {
  .cab-btn:hover {
    transform: translateY(-2px) scale(1.04) !important;
    transition: all .2s var(--mo-elastic) !important;
  }
}
.cab-btn:active {
  transform: scale(.93) !important;
  transition-duration: .1s !important;
}

/* ════════════════════════════════════════════
   13) KICHIK KARTOCHKALAR — NEWS / TASHQI
════════════════════════════════════════════ */
@keyframes ti-news-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ti-news-card {
  animation: ti-news-card-in .4s var(--mo-smooth) both !important;
  transition:
    transform .32s var(--mo-smooth),
    box-shadow .32s ease,
    border-color .28s ease !important;
}
.ti-news-card:nth-child(1) { animation-delay: .04s !important; }
.ti-news-card:nth-child(2) { animation-delay: .09s !important; }
.ti-news-card:nth-child(3) { animation-delay: .14s !important; }
.ti-news-card:nth-child(4) { animation-delay: .18s !important; }
.ti-news-card:nth-child(n+5) { animation-delay: .22s !important; }

@media (hover: hover) {
  .ti-news-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--cc, var(--gold)) !important;
    box-shadow:
      0 22px 48px -20px rgba(0,0,0,.6),
      0 0 0 1px color-mix(in srgb, var(--cc, var(--gold)) 25%, transparent) inset !important;
  }
  .ti-news-card:hover .ti-news-thumb,
  .ti-news-card:hover img {
    transform: scale(1.06) !important;
    transition: transform .5s var(--mo-smooth) !important;
  }
}

/* ════════════════════════════════════════════
   14) SAHIFA SARLAVHASI (PHD) — REVEAL
════════════════════════════════════════════ */
@keyframes ti-phd-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.phd {
  animation: ti-phd-in .4s var(--mo-smooth) both !important;
}
.phd .pttl {
  background: linear-gradient(135deg, var(--ink), var(--gold-hi));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all .3s ease;
}

/* Kategoriya o'zgarganda sarlavha almashishi */
@keyframes ti-title-change {
  0%  { opacity: 1; transform: translateY(0); }
  40% { opacity: 0; transform: translateY(-6px); }
  60% { opacity: 0; transform: translateY(6px); }
  100%{ opacity: 1; transform: translateY(0); }
}
.pttl.ti-title-anim {
  animation: ti-title-change .35s var(--mo-smooth);
}

/* Kitob soni badge */
@keyframes ti-count-pop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
#pcnt {
  animation: ti-count-pop .3s var(--mo-elastic) both;
}
#pcnt.ti-count-update {
  animation: ti-count-pop .25s var(--mo-elastic);
}

/* ════════════════════════════════════════════
   15) DATELINE — PREMIUM HAJMLI ANIMATSIYA
════════════════════════════════════════════ */
@keyframes ti-dateline-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ti-dateline {
  animation: ti-dateline-in .5s var(--mo-smooth) .1s both;
}
/* Hijriy sana — oltin renk puls */
@keyframes ti-hijri-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 12px var(--gold-dim); }
}
.ti-dateline .tdl-hijri {
  animation: ti-hijri-glow 4s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   16) SCROLLBAR — SILLIQ GRADYAN
════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  transition: background .3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold) !important;
}

/* ════════════════════════════════════════════
   17) RATING / PROGRESS ELEMENTLARI
════════════════════════════════════════════ */
@keyframes ti-progress-fill {
  from { width: 0; }
}
.stat-badge {
  transition: all .3s var(--mo-smooth) !important;
}
.card:hover .stat-badge {
  transform: scale(1.06) !important;
  background: rgba(201,169,106,.18) !important;
}

/* ════════════════════════════════════════════
   18) PWA BANNER — PREMIUM KIRISH
════════════════════════════════════════════ */
@keyframes ti-pwa-in {
  from { opacity: 0; transform: translateY(24px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#pwaBanner:not([hidden]) {
  animation: ti-pwa-in .5s var(--mo-elastic) both;
}
/* PWA tugmalar */
@media (hover: hover) {
  #pwaBanner .pwa-btn:hover {
    transform: translateY(-2px) scale(1.04) !important;
    transition: transform .2s var(--mo-elastic) !important;
  }
}

/* ════════════════════════════════════════════
   19) IYMON XARITASI — YULDUZLAR ANIMATSIYASI
════════════════════════════════════════════ */
@keyframes ti-star-twinkle {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
.imap-node {
  animation: ti-star-twinkle 2.5s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   20) GLOBAL FOKUS ANIMATSIYASI
════════════════════════════════════════════ */
@keyframes ti-focus-ring {
  from { outline-offset: 2px; }
  to   { outline-offset: 4px; }
}
:focus-visible {
  animation: ti-focus-ring .2s var(--mo-smooth) alternate infinite;
}

/* ════════════════════════════════════════════
   21) TAVSIYA (SMART REC) KARTALAR
════════════════════════════════════════════ */
@keyframes ti-rec-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ti-rec-card, .reco-card {
  animation: ti-rec-card-in .38s var(--mo-smooth) both;
  transition:
    transform .28s var(--mo-smooth),
    box-shadow .28s ease,
    border-color .22s ease !important;
}
@media (hover: hover) {
  .ti-rec-card:hover, .reco-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 14px 32px -12px rgba(0,0,0,.5) !important;
  }
}

/* ════════════════════════════════════════════
   22) KATEGORIYA O'TISH ANIMATSIYASI
   (category switch transition)
════════════════════════════════════════════ */
@keyframes ti-cat-exit {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-12px) scale(.98); }
}
@keyframes ti-cat-enter {
  from { opacity: 0; transform: translateX(14px) scale(.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
#grid.ti-exit {
  animation: ti-cat-exit .22s var(--mo-snappy) both;
}
#grid.ti-enter {
  animation: ti-cat-enter .3s var(--mo-smooth) both;
}

/* ════════════════════════════════════════════
   23) DISK VA MUHIT ANIMATSIYALARI
════════════════════════════════════════════ */
/* Disk halkalar — kengayib-torayuvchi puls */
.disc-rings span:nth-child(1) {
  animation: ringPulse 3s ease-in-out infinite !important;
}
.disc-rings span:nth-child(2) {
  animation: ringPulse 3s ease-in-out .4s infinite !important;
}
.disc-rings span:nth-child(3) {
  animation: ringPulse 3s ease-in-out .8s infinite !important;
}

/* Audio disk — hoverda tezlashadi, to'xtatilganda sekinlashadi */
.spin-slow {
  transition: animation-duration .8s ease !important;
}
.card:hover .spin-slow {
  animation-duration: 5s !important;
}

/* ════════════════════════════════════════════
   23b) SICHQONCHA-IZ NURI — motion.js --mx/--my
   o'zgaruvchilariga asoslangan dinamik yorug'lik
════════════════════════════════════════════ */
@media (hover: hover) {
  #grid .card {
    position: relative;
  }
  #grid .card::after {
    content: '';
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--cc, var(--gold)) 14%, transparent),
      transparent 60%
    );
    opacity: 0;
    transition: opacity .35s ease;
  }
  #grid .card:hover::after {
    opacity: 1;
  }
}

/* ════════════════════════════════════════════
   24) GLOBAL SAHIFA YUKLASH ANIMATSIYASI
════════════════════════════════════════════ */
@keyframes ti-page-load {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: ti-page-load .4s ease both;
}

/* Header + catbar birga tushadi */
#catbar {
  animation: ti-nav-in .45s var(--mo-smooth) .08s both;
}

/* ════════════════════════════════════════════
   25) PREFERS REDUCED MOTION — TO'LIQ HURMAT
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #grid .card:hover {
    transform: translateY(-3px) !important;
  }
  .hero-title, .hero-sub, .hero-cta, .hero-badge,
  .hero-desc, .hero-quote, .hero-features span {
    animation: none !important;
    opacity: 1 !important;
  }
  #catbar .nc.on {
    animation: none !important;
  }
  .ti-dateline .tdl-hijri {
    animation: none !important;
  }
}