/* ══ Harakat qatlami ══════════════════════════════════════════════════════
   Faqat animatsiyaga tegishli uslublar. Layout va rang yo'q — shu sababli
   `prefers-reduced-motion` bilan deyarli butunlay o'chirib qo'yish mumkin.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Lenis ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Sahifa o'tish paneli ── */
.transition {
  position: fixed; inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(160deg, var(--indigo), var(--turquoise-deep));
}
.transition__mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 7vw, 4.5rem); letter-spacing: -0.05em;
  color: rgb(255 255 255 / 0.16);
}

/* ── SplitText qatorlari ──
   Plagin har qatorga `.line` beradi; `mask: "lines"` esa uning ustiga
   `overflow: hidden` bo'lgan o'rovchi qo'yadi. Descender'lar (g, y, q)
   kesilmasligi uchun ozgina joy qoldiramiz. */
[data-split] .line {
  display: block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  will-change: transform;
}

/* ── Parallaks ── */
[data-parallax] { overflow: hidden; }
[data-parallax] img { will-change: transform; }

/* ── O'qish progressi ── */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 80;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--turquoise), var(--indigo));
  will-change: transform;
}

/* ── Marquee — cheksiz aylanuvchi lenta ──
   Ikki nusxa yonma-yon; birinchisi to'liq siljigach ikkinchisi aynan
   o'sha joyda turadi, shuning uchun uzilish sezilmaydi. */
.marquee {
  --marquee-duration: 42s;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center; gap: 2.5rem;
  padding-right: 2.5rem;
  flex: none;
}
.marquee__item {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.marquee__item:hover { color: var(--text); }
.marquee__dot { color: var(--brass); font-size: 7px; }

@keyframes marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* ── Magnit tugmalar ── */
[data-magnetic] { will-change: transform; }

/* ── Havola tagidagi chiziq chapdan o'ngga ── */
.link-underline { position: relative; text-decoration: none; }
.link-underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 460ms var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ── Animatsiya yo'q holati ──
   GSAP yuklanmasa yoki foydalanuvchi harakatni o'chirgan bo'lsa,
   hech narsa yashirin qolmasligi kerak. */
:root.no-anim [data-reveal],
:root.no-anim [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
:root.no-anim .transition { display: none; }

@media (prefers-reduced-motion: reduce) {
  .transition, .progress { display: none !important; }
  .marquee__track { animation: none; }
  [data-parallax] img { transform: none !important; }
}
/* ══ Tema almashishi: doira kengayadi ════════════════════════════════════
   Brauzerning standart cross-fade'ini o'chiramiz — o'rniga theme.js
   `::view-transition-new(root)` ni clip-path bilan animatsiya qiladi. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* O'tish paytida fon blob'lari qayta chizilmasin — aks holda titraydi */
:root[data-theme-switching] .field__blob { animation-play-state: paused; }

/* ══ Header ══════════════════════════════════════════════════════════════
   Doim joyida turadi. Skrollda faqat fon va chegara zichlashadi. */
.header {
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: 0 1px 0 var(--border);
}
/* ══ Nav havolalar: matn aylanib almashadi ═══════════════════════════════
   HTML tuzilishi:
     <a class="nav-link">
       <span class="nav-link__mask">      ← kesuvchi qatlam
         <span data-text="Work">Work</span>  ← siljiydigan matn
       </span>
     </a>

   Ichki span'ning ::after'ida aynan o'sha matn — u mask ostida yashirin
   turadi. Hover'da span bir qator yuqoriga suriladi: birinchi nusxa
   chiqib ketadi, ikkinchisi o'rniga ko'tariladi.

   Butun blok `min-width` ichida. Mobil ekran bu qoidalarni umuman
   ko'rmaydi — shuning uchun u yerda hech narsani bekor qilish kerak emas.
   Ilgari teskarisi edi va bitta bekor qilish qoidasi yetmagani uchun
   matn ikki marta chiqib qolgandi. */
@media (min-width: 781px) {
  .nav-link {
    display: inline-block;
    vertical-align: middle;
  }
  .nav-link__mask {
    display: block;
    overflow: hidden;
    height: 1.5em;
    line-height: 1.5em;
  }
  .nav-link__mask > span {
    display: block;
    position: relative;
    line-height: 1.5em;
    transition: transform 460ms var(--ease-out);
  }
  .nav-link__mask > span::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    line-height: 1.5em;
    color: var(--text);
  }
  .nav-link:hover .nav-link__mask > span { transform: translateY(-100%); }
}

/* ══ Tugmalar: pastdan to'ldiriladi ══════════════════════════════════════ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 520ms var(--ease-out);
}
.btn:hover::before { transform: scaleY(1); }

.btn--ghost::before { background: var(--text); }
.btn--ghost:hover { color: var(--bg); border-color: var(--text); }

.btn--primary::before {
  background: linear-gradient(120deg, var(--indigo), var(--turquoise-deep));
}

/* ══ Tema tugmasi ikonkasi ═══════════════════════════════════════════════ */
.icon-btn--theme svg {
  grid-area: 1 / 1;
  transition: transform 520ms var(--ease-back), opacity 320ms var(--ease);
}
.icon-btn--theme { display: grid; place-items: center; }
:root[data-theme="light"] .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
:root[data-theme="dark"] .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* ══ Footer parda ════════════════════════════════════════════════════════ */
.footer__reveal { overflow: hidden; }
.footer__inner { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .footer__inner { transform: none !important; }
  .btn::before { display: none; }
}
/* -- Project cards: pointer light and glowing edge ---------------------
   --mx / --my are set by anim.js from the cursor position. */
.card__img img { transition: none; will-change: transform; }

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--turquoise) 12%, transparent),
              transparent 60%);
  opacity: 0;
  transition: opacity 450ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card {
    transition: transform 600ms var(--ease-out),
                border-color var(--dur) var(--ease),
                box-shadow 600ms var(--ease-out);
  }
  .card:hover { transform: translateY(-6px); }

  /* The gradient border only lights up around the cursor */
  .card::before {
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
                var(--turquoise), var(--indigo) 45%, transparent 75%);
  }
  .card:hover::before,
  .card:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

/* Hide split targets until fonts load and the split is ready,
   otherwise the text flashes once before animating. */
:root.is-ready [data-split]:not(.is-split):not(.is-revealed) { visibility: hidden; }
:root.no-anim [data-split] { visibility: visible !important; }