:root {
  --night: #060d1c;
  --night-2: #0b1a38;
  --pitch: #0d3a29;
  --pitch-2: #124a35;
  --jersey: #2147d9;
  --chalk: #f2f6ff;
  --glow: #7b9bff;
  --mx: 0;
  --my: 0;
  --circle: clamp(76px, 12vw, 150px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--night);
  color: var(--chalk);
  font-family: "Figtree", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, var(--night-2) 0%, var(--night) 70%);
  isolation: isolate;
}

.lights {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(38% 42% at 14% -6%, rgba(123,155,255,.38), transparent 70%),
    radial-gradient(38% 42% at 86% -6%, rgba(123,155,255,.38), transparent 70%),
    radial-gradient(40% 30% at 50% 58%, rgba(33,71,217,.35), transparent 70%);
}

/* Orqadagi DEVELOPER yozuvi */
.bg-word {
  position: absolute;
  left: 50%;
  top: 14svh;
  z-index: 0;
  margin: 0;
  display: flex;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(4.5rem, 14vw, 15rem);
  line-height: .9;
  letter-spacing: .01em;
  white-space: nowrap;
  user-select: none;
  transform: translate(calc(-50% + var(--mx) * -16px), calc(var(--my) * -8px));
}
.bg-word span {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px rgba(123,155,255,.7);
  text-shadow: 0 0 40px rgba(33,71,217,.55);
  animation: letter .7s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay: calc(.5s + var(--i) * .08s);
}

/* Bola */
.boy-link {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  display: block;
  height: min(86svh, 800px);
  transform: translateX(calc(-50% + var(--mx) * 10px));
  animation: rise 1s cubic-bezier(.2,.8,.2,1) backwards;
}
.boy {
  display: block;
  height: 100%;
  width: auto;
  max-width: 92vw;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 0 40px rgba(33,71,217,.45));
  transition: filter .25s ease;
}
.boy-link:hover .boy { filter: drop-shadow(0 0 54px rgba(123,155,255,.7)); }

/* Maydon */
.pitch {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 0;
  height: 26svh;
  z-index: 2;
  background:
    linear-gradient(to top, var(--pitch) 0%, rgba(13,58,41,0) 100%),
    repeating-linear-gradient(90deg, var(--pitch) 0 9%, var(--pitch-2) 9% 18%);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
          mask-image: linear-gradient(to top, #000 55%, transparent 100%);
  pointer-events: none;
}
.pitch::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 38%;
  height: 3px;
  background: rgba(242,246,255,.55);
}

/* Loyihalar: bittadan, ikki yondan */
.projects { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.proj {
  position: absolute;
  width: var(--circle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--chalk);
  text-decoration: none;
  pointer-events: auto;
  animation: pop-l .9s cubic-bezier(.2,.9,.25,1.15) backwards;
  animation-delay: var(--d);
}
.proj.right { animation-name: pop-r; }

/* tushganda halqa to'lqini */
.proj::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  border: 3px solid var(--glow);
  opacity: 0;
  pointer-events: none;
  animation: ring .9s ease-out backwards;
  animation-delay: calc(var(--d) + .6s);
}

.proj img {
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(242,246,255,.85);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(33,71,217,.25);
  background: var(--night-2);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: float 3.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--d) + 1.4s);
}
.proj:hover img, .proj:focus-visible img {
  transform: scale(1.1);
  box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 0 8px rgba(123,155,255,.4);
}
.proj span {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  animation: fade-up .5s ease backwards;
  animation-delay: calc(var(--d) + .7s);
}

/* Joylashuv */
.left  { left: clamp(1rem, 9vw, 9rem); }
.right { right: clamp(1rem, 9vw, 9rem); }
.l1, .r1 { top: 17svh; }
.l2, .r2 { top: 47svh; }

/* Navbat: bitta-bitta */
.l1 { --d: 1.8s; }
.r1 { --d: 2.7s; }
.l2 { --d: 3.6s; }
.r2 { --d: 4.5s; }

.tag {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1rem, 3.5svh, 2rem);
  z-index: 4;
  margin: 0;
  text-align: center;
  font-weight: 600;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}

a:focus-visible {
  outline: 3px solid var(--chalk);
  outline-offset: 4px;
  border-radius: 12px;
}

@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 60px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes pop-l {
  0%   { opacity: 0; transform: translateX(-200px) rotate(-240deg) scale(.2); filter: blur(10px); }
  60%  { opacity: 1; transform: translateX(14px) rotate(14deg) scale(1.12); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes pop-r {
  0%   { opacity: 0; transform: translateX(200px) rotate(240deg) scale(.2); filter: blur(10px); }
  60%  { opacity: 1; transform: translateX(-14px) rotate(-14deg) scale(1.12); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes ring {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}
@keyframes float {
  from { translate: 0 0; }
  to   { translate: 0 -8px; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes letter {
  from { opacity: 0; transform: translateY(40px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  :root { --circle: 68px; }
  .boy-link { height: min(60svh, 520px); }
  .left  { left: .75rem; }
  .right { right: .75rem; }
  .bg-word { top: 17svh; font-size: 15vw; }
  .bg-word span { -webkit-text-stroke-width: 1.5px; }
  .l1, .r1 { top: 20svh; }
  .l2, .r2 { top: 44svh; }
  .proj span { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .boy-link, .proj, .proj img, .proj span, .bg-word span { animation: none; }
  .proj::before { display: none; }
  .proj img { transition: none; }
}