/* ============================================================
   STELLA-ANIM.CSS — Stella animatsiya tizimi (lug'at)
   Barcha sahifalar uchun umumiy animatsiya klasslari.
   Prefiks: .sa-*  |  JS hooklar: data-tilt, data-magnetic,
   data-parallax, data-counter
   ============================================================ */

:root{
  --sa-gold:#EBD163;
  --sa-gold2:#F7E08A;
  --sa-gold-deep:#C9A227;
  --sa-blue:#5B9DFF;
  --sa-amber:#FF9F45;
  --sa-green:#34D399;
  --sa-ease:cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   1. REVEAL — scrollda paydo bo'lish (IntersectionObserver)
   JS yuklanmasa ham kontent ko'rinib turishi uchun html.sa-ready
   bilan gate qilingan.
   ============================================================ */
html.sa-ready .sa-reveal{
  opacity:0;
  transform:translateY(42px);
  transition:opacity .9s var(--sa-ease), transform .9s var(--sa-ease), filter .9s var(--sa-ease);
  will-change:opacity, transform;
}
html.sa-ready .sa-reveal.up   { transform:translateY(42px); }
html.sa-ready .sa-reveal.down { transform:translateY(-42px); }
html.sa-ready .sa-reveal.left { transform:translateX(-52px); }
html.sa-ready .sa-reveal.right{ transform:translateX(52px); }
html.sa-ready .sa-reveal.scale{ transform:scale(.9); }
html.sa-ready .sa-reveal.blur { filter:blur(14px); transform:translateY(20px); }
html.sa-ready .sa-reveal.zoom { transform:scale(1.08); }
html.sa-ready .sa-reveal.flip { transform:perspective(900px) rotateX(-28deg); transform-origin:top; }

.sa-reveal.is-in{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

/* Stagger — bola elementlar ketma-ket chiqadi */
html.sa-ready .sa-stagger > *{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .75s var(--sa-ease), transform .75s var(--sa-ease);
}
.sa-stagger.is-in > *{ opacity:1 !important; transform:none !important; }
.sa-stagger.is-in > *:nth-child(1){ transition-delay:.05s }
.sa-stagger.is-in > *:nth-child(2){ transition-delay:.13s }
.sa-stagger.is-in > *:nth-child(3){ transition-delay:.21s }
.sa-stagger.is-in > *:nth-child(4){ transition-delay:.29s }
.sa-stagger.is-in > *:nth-child(5){ transition-delay:.37s }
.sa-stagger.is-in > *:nth-child(6){ transition-delay:.45s }
.sa-stagger.is-in > *:nth-child(7){ transition-delay:.53s }
.sa-stagger.is-in > *:nth-child(8){ transition-delay:.61s }
.sa-stagger.is-in > *:nth-child(9){ transition-delay:.69s }
.sa-stagger.is-in > *:nth-child(n+10){ transition-delay:.77s }

/* Qo'lda kechikish utilitalari */
.sa-d1{transition-delay:.1s!important}.sa-d2{transition-delay:.2s!important}
.sa-d3{transition-delay:.3s!important}.sa-d4{transition-delay:.4s!important}
.sa-d5{transition-delay:.5s!important}.sa-d6{transition-delay:.6s!important}

/* ============================================================
   2. AMBIENT FON — gradient bloblar, grain, perspektiv to'r
   ============================================================ */
.sa-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sa-blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.4;animation:sa-float 22s ease-in-out infinite}
.sa-blob.b1{width:520px;height:520px;background:radial-gradient(circle,#EBD16355,transparent 70%);top:-160px;left:-120px}
.sa-blob.b2{width:560px;height:560px;background:radial-gradient(circle,#5B9DFF40,transparent 70%);bottom:-180px;right:-160px;animation-delay:-7s}
.sa-blob.b3{width:440px;height:440px;background:radial-gradient(circle,#FF9F4533,transparent 70%);top:40%;left:40%;animation-delay:-13s}
@keyframes sa-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-50px) scale(1.1)}66%{transform:translate(-40px,40px) scale(.95)}}

.sa-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.sa-grid-fx{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(235,209,99,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(235,209,99,.06) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 40%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 75% 60% at 50% 40%,#000 30%,transparent 75%)}

/* Sektor ichidagi kontent bloblardan ustun bo'lsin */
.sa-fx-host{position:relative}
.sa-fx-host > .container,.sa-fx-host > .container-fluid,.sa-fx-host > .container-xl{position:relative;z-index:2}

/* ============================================================
   3. KURSOR GLOW (global, base.html ga qo'shiladi)
   ============================================================ */
.sa-cursor{position:fixed;top:0;left:0;width:460px;height:460px;border-radius:50%;pointer-events:none;z-index:3;
  background:radial-gradient(circle,rgba(235,209,99,.10),transparent 62%);
  transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;mix-blend-mode:screen}

/* ============================================================
   4. SCROLL PROGRESS + BACK TO TOP
   ============================================================ */
.sa-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--sa-gold-deep),var(--sa-gold2),var(--sa-gold));
  box-shadow:0 0 12px rgba(235,209,99,.6);transition:width .1s linear}
.sa-totop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:14px;z-index:900;
  display:grid;place-items:center;cursor:pointer;border:1px solid rgba(235,209,99,.3);
  background:rgba(20,20,20,.8);backdrop-filter:blur(10px);color:var(--sa-gold);font-size:16px;
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .35s var(--sa-ease),transform .35s var(--sa-ease),background .25s}
.sa-totop.show{opacity:1;transform:none;pointer-events:auto}
.sa-totop:hover{background:var(--sa-gold);color:#111;transform:translateY(-3px)}

/* ============================================================
   5. MATN EFFEKTLARI
   ============================================================ */
.sa-gradient-text{
  background:linear-gradient(120deg,var(--sa-gold) 0%,var(--sa-gold2) 35%,#fff 70%,var(--sa-gold) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:sa-shimmer 6s linear infinite}
@keyframes sa-shimmer{to{background-position:220% center}}

/* Hero sarlavha so'z/harf reveal (JS bilan .sa-word/.sa-char yaratiladi) */
.sa-split .sa-word{display:inline-block;overflow:hidden;vertical-align:top}
.sa-split .sa-char{display:inline-block;transform:translateY(110%);opacity:0}
.sa-split.is-in .sa-char{animation:sa-charUp .7s var(--sa-ease) forwards}
@keyframes sa-charUp{to{transform:translateY(0);opacity:1}}

/* ============================================================
   6. INTERAKTIV — tilt, magnetic, shine, glow border
   ============================================================ */
.sa-tilt{transform-style:preserve-3d;transition:transform .25s var(--sa-ease)}
.sa-tilt-inner{transform:translateZ(40px)}

.sa-magnetic{transition:transform .25s var(--sa-ease)}

/* Shine — hover paytida yorug'lik o'tishi */
.sa-shine{position:relative;overflow:hidden}
.sa-shine::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg);transition:left .7s var(--sa-ease);pointer-events:none}
.sa-shine:hover::after{left:140%}

/* Glow border — hoverda animatsion gradient ramka */
.sa-glow{position:relative}
.sa-glow::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(235,209,99,.7),transparent 55%,rgba(91,157,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.sa-glow:hover::before{opacity:1}

/* Hover lift (umumiy) */
.sa-lift{transition:transform .35s var(--sa-ease),box-shadow .35s var(--sa-ease)}
.sa-lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(0,0,0,.8)}

/* ============================================================
   7. DEKORATIV ANIMATSIYALAR
   ============================================================ */
/* Float (yuqori-past tebranish) */
.sa-float{animation:sa-floaty 5s ease-in-out infinite}
.sa-float.slow{animation-duration:7s}
@keyframes sa-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Sekin aylanish */
.sa-spin{animation:sa-spin 18s linear infinite}
@keyframes sa-spin{to{transform:rotate(360deg)}}

/* Pulslanuvchi nuqta */
.sa-pulse-dot{position:relative}
.sa-pulse-dot::after{content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(235,209,99,.6);animation:sa-pulse 2s infinite}
@keyframes sa-pulse{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* LED ekvalayzer */
.sa-led-bars{display:inline-flex;align-items:flex-end;gap:4px;height:38px}
.sa-led-bars span{width:5px;border-radius:2px;background:var(--sa-blue);animation:sa-eq 1.2s ease-in-out infinite}
.sa-led-bars span:nth-child(2){animation-delay:.2s}.sa-led-bars span:nth-child(3){animation-delay:.4s}
.sa-led-bars span:nth-child(4){animation-delay:.1s}.sa-led-bars span:nth-child(5){animation-delay:.3s}
@keyframes sa-eq{0%,100%{height:12px}50%{height:36px}}

/* LED rang oqimi (hue) ekran */
.sa-led-screen{background:linear-gradient(90deg,#5B9DFF,#a06bff,#FF6B8A,#FF9F45,#34D399,#5B9DFF);
  background-size:300% 100%;animation:sa-hue 5s linear infinite}
@keyframes sa-hue{to{background-position:300% 0}}

/* Xarita pin — tomchi tushishi + ripple */
.sa-pin{animation:sa-drop .6s var(--sa-ease) backwards}
@keyframes sa-drop{from{opacity:0;transform:translateY(-30px)}}
.sa-ripple{position:relative}
.sa-ripple::before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;
  animation:sa-rippleA 2.4s ease-out infinite;opacity:.6}
@keyframes sa-rippleA{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}

/* Ken Burns — fon rasm sekin zumlanishi */
.sa-kenburns{animation:sa-kb 20s ease-in-out infinite alternate}
@keyframes sa-kb{0%{transform:scale(1)}100%{transform:scale(1.12)}}

/* Underline o'sishi */
.sa-uline{position:relative}
.sa-uline::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--sa-gold);transition:width .35s var(--sa-ease)}
.sa-uline:hover::after,.sa-uline.is-in::after{width:100%}

/* Scroll indikator ko'rsatkichi (hero) */
.sa-scroll-hint{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--sa-gold)}
.sa-scroll-hint .mouse{width:24px;height:38px;border:2px solid currentColor;border-radius:14px;position:relative}
.sa-scroll-hint .mouse::after{content:'';position:absolute;top:7px;left:50%;width:4px;height:7px;border-radius:2px;
  background:currentColor;transform:translateX(-50%);animation:sa-wheel 1.6s infinite}
@keyframes sa-wheel{0%{opacity:1;top:7px}100%{opacity:0;top:18px}}

/* Count up raqami uchun (data-counter) */
.sa-counter{font-variant-numeric:tabular-nums}

/* Badge "tirik" nuqta */
.sa-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sa-green);
  box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:sa-pulse 2s infinite}

/* ============================================================
   8. KIRISH ANIMATSIYALARI (page-loaded dan keyin)
   ============================================================ */
@keyframes sa-fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes sa-fadeIn{from{opacity:0}to{opacity:1}}

/* ============================================================
   9. ACCESSIBILITY — harakatni kamaytirish
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html.sa-ready .sa-reveal,
  html.sa-ready .sa-stagger > *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .sa-blob,.sa-float,.sa-spin,.sa-kenburns,.sa-led-bars span,.sa-led-screen,
  .sa-gradient-text,.sa-pulse-dot::after,.sa-ripple::before,.sa-live-dot{animation:none!important}
  .sa-cursor{display:none!important}
}

/* ============================================================
   11. HEADER SHRINK — scrollda ixchamlashadi
   ============================================================ */
.stella-header{transition:height .35s var(--sa-ease),background .35s,box-shadow .35s,border-color .35s}
.stella-header.sa-scrolled{
  height:64px;
  background:rgba(12,12,12,.92);
  box-shadow:0 10px 40px -20px rgba(0,0,0,.9);
}
.stella-header.sa-scrolled .stella-logo svg{height:40px;transition:height .35s var(--sa-ease)}
.stella-header .stella-logo svg{transition:height .35s var(--sa-ease)}
/* Logo yulduzcha hoverda jonlanadi */
.stella-logo{transition:transform .3s var(--sa-ease)}
.stella-logo:hover{transform:scale(1.03)}

/* ============================================================
   10. MOBIL moslamalar
   ============================================================ */
@media(max-width:768px){
  .sa-cursor{display:none}
  .sa-blob{filter:blur(80px);opacity:.3}
  .sa-totop{right:16px;bottom:16px;width:42px;height:42px}
}