/* polish-v8 — bosh sahifa redizayni (yuqori qism, kartalar, animatsiyalar).
   Faqat CSS qatlami: React build'iga tegmaydi. Animatsiyalar faqat transform/opacity —
   GPU'da, sahifani og'irlashtirmaydi. prefers-reduced-motion'da hammasi o'chadi. */

:root {
  --ix-radius-lg: 22px;
  --ix-ease: cubic-bezier(.22, .8, .24, 1);
  --ix-glow-1: color-mix(in srgb, var(--brand-1) 26%, transparent);
  --ix-glow-2: color-mix(in srgb, var(--brand-3) 24%, transparent);
  --ix-skel-a: var(--surface);
  --ix-skel-b: var(--surface-2);
}
:root[data-theme=light] {
  --ix-glow-1: color-mix(in srgb, var(--brand-1) 16%, transparent);
  --ix-glow-2: color-mix(in srgb, var(--brand-3) 14%, transparent);
  --ix-skel-a: #e9e9f1;
  --ix-skel-b: #f6f6fb;
}

/* ---------- Sarlavha: butun kenglik bo'ylab shisha panel ---------- */
.home-top {
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 82%, transparent);
  clip-path: inset(0 -100vmax);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid transparent;
}
.home-top .icon-btn {
  border-radius: 12px;
  transition: transform .2s var(--ix-ease), background-color .2s ease, border-color .2s ease;
}
.home-top .icon-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.home-top .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand-name {
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

/* ---------- Qidiruv: kino-uslubidagi hero karta ---------- */
.code-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 14px;
  padding: 20px;
  margin-top: 6px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--ix-radius-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--ix-glow-1), transparent 58%),
    radial-gradient(120% 160% at 100% 100%, var(--ix-glow-2), transparent 58%),
    var(--surface);
  box-shadow: 0 24px 50px -34px var(--shadow);
}
/* sekin suzuvchi yorug'lik dog'i — faqat transform, arzon */
.code-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  left: 45%;
  top: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 65%);
  animation: ix-float 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ix-float {
  from { transform: translate3d(-30%, 0, 0) scale(1); }
  to   { transform: translate3d(20%, 30%, 0) scale(1.15); }
}
.code-box-text b {
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: -.4px;
  line-height: 1.2;
}
.code-box-text span { font-size: 13px; margin-top: 4px; display: block; }
.code-box-row { gap: 10px; }
.code-box-row input {
  height: 50px;
  border-radius: 14px;
  padding-left: 46px;
  font-size: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aab' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 15px 50% / 20px no-repeat,
    var(--surface-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.code-box-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.code-box-row .btn {
  width: 54px;
  height: 50px;
  border-radius: 14px;
  background: var(--brand);
  background-size: 180% 100%;
  color: #fff;
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--brand-2) 80%, transparent);
  transition: transform .2s var(--ix-ease), background-position .5s ease, opacity .2s ease;
}
.code-box-row .btn:not(:disabled):hover { transform: translateY(-2px); background-position: 100% 0; }
.code-box-row .btn:not(:disabled):active { transform: scale(.95); }
.code-box-row .btn:disabled { opacity: .82; filter: saturate(.85); }

/* ---------- Janrlar: chetlari silliq xiralashadigan lenta ---------- */
.genre-chips {
  gap: 8px;
  padding-top: 2px;
  padding-bottom: 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.genre-chip {
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 6px;
  border-radius: 999px;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .2s var(--ix-ease), border-color .2s ease, box-shadow .2s ease;
}
.genre-chip span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  order: -1;
}
.genre-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: 0 10px 22px -16px var(--shadow);
}
.genre-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Treylerlar ---------- */
.stories-section-wrapper { padding: 0 0 26px; }
.stories-section-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stories-section-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b5c;
  box-shadow: 0 0 0 0 rgba(255, 59, 92, .6);
  animation: ix-live 1.8s ease-out infinite;
}
@keyframes ix-live {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 92, .55); }
  100% { box-shadow: 0 0 0 10px rgba(255, 59, 92, 0); }
}
/* lenta chetlari keng va silliq xiralashadi — keskin kesilish yo'q */
.stories-container.autoscroll {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
/* hammasi ekranga sig'sa (enhance.js belgilaydi): nusxalar yashiriladi, lenta to'xtaydi */
.stories-container.ix-static {
  -webkit-mask-image: none;
  mask-image: none;
  justify-content: flex-start;
  padding-left: var(--pad) !important;
}
.stories-container.ix-static > [aria-hidden=true] { display: none; }
.story-item { transition: transform .25s var(--ix-ease); }
.story-item:hover { transform: translateY(-3px); }
.story-item:focus-visible { outline: none; }
.story-item:focus-visible .story-image-wrapper { box-shadow: 0 0 0 3px var(--accent); }
.story-image-wrapper {
  position: relative;
  width: 74px;
  height: 74px;
  padding: 3px;
  border: 0;
  background: conic-gradient(from 0deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-1));
}
.story-image { border: 3px solid var(--bg); }
.story-title {
  width: 82px;
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
}

/* ---------- Bo'lim sarlavhalari ---------- */
.movie-section-header h2 { font-size: 19px; font-weight: 850; letter-spacing: -.3px; }
.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transition: background-color .2s ease, transform .2s var(--ix-ease);
}
.view-all-link::after { content: "→"; transition: transform .2s var(--ix-ease); }
.view-all-link:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.view-all-link:hover::after { transform: translateX(3px); }

/* ---------- Kino kartalari ---------- */
.mc { transition: transform .28s var(--ix-ease); }
.mc-poster {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(100deg, var(--ix-skel-a) 30%, var(--ix-skel-b) 50%, var(--ix-skel-a) 70%);
  background-size: 300%;
}
.mc-poster.is-loaded { background: var(--surface); }
.mc-poster img { transition: opacity .4s ease, transform .6s var(--ix-ease); }
@media (hover: hover) {
  .mc-link:hover .mc { transform: translateY(-5px); }
  .mc-link:hover .mc-poster { box-shadow: 0 22px 38px -22px var(--shadow); }
  .mc-link:hover .mc-poster img { transform: scale(1.05); }
}
.mc-link:active .mc { transform: scale(.97); }
.mc-link:focus-visible { outline: none; }
.mc-link:focus-visible .mc-poster { box-shadow: 0 0 0 3px var(--accent); }
.mc-badge { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.col-card { transition: transform .28s var(--ix-ease); }
@media (hover: hover) { .col-card:hover { transform: translateY(-4px); } }

/* ---------- Gorizontal qatorlar: kompyuterda strelkalar (enhance.js qo'shadi) ---------- */
.movie-section { position: relative; }
.ix-arrow {
  position: absolute;
  z-index: 3;
  top: calc(50% + 4px);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -14px var(--shadow);
  opacity: 0;
  transform: translateY(-50%) scale(.9);
  transition: opacity .2s ease, transform .2s var(--ix-ease);
}
.ix-arrow.ix-prev { left: 4px; }
.ix-arrow.ix-next { right: 4px; }
.movie-section:hover .ix-arrow:not([hidden]) { opacity: 1; transform: translateY(-50%) scale(1); }
.ix-arrow:hover { background: var(--surface-2); }
.ix-arrow:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.ix-arrow[hidden] { display: grid; opacity: 0 !important; pointer-events: none; }

/* ---------- Bo'limlar skrollda ohista chiqadi ---------- */
.ix-reveal { opacity: 0; transform: translate3d(0, 22px, 0); }
.ix-reveal.ix-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .7s var(--ix-ease);
}

/* ---------- Pastki menyu ---------- */
.nav-link { transition: color .2s ease; }
.nav-link svg { transition: transform .25s var(--ix-ease); }
.nav-link:hover svg { transform: translateY(-2px); }
.nav-link.active svg { color: var(--accent); }

/* ---------- Telefon: hero ixchamroq ---------- */
@media (max-width: 599px) {
  .code-box { padding: 16px; gap: 12px; margin-top: 2px; margin-bottom: 16px; }
  .code-box-text b { font-size: 19px; }
  .code-box-row input, .code-box-row .btn { height: 48px; }
  .genre-chips { padding-bottom: 18px; }
}

/* ---------- Kompyuter ---------- */
@media (min-width: 900px) {
  .code-box { padding: 26px 28px; }
  .code-box-row { width: min(560px, 56%); }
  .story-image-wrapper { width: 82px; height: 82px; }
  .story-title { width: 90px; font-size: 12px; }
  .stories-container.autoscroll > * { margin-right: 18px !important; }
}

/* ---------- Kino sahifasi: yuqoridagi kadrlar (mp-cover) ----------
   Keng va past blokda kadrning YUQORI qismi (odamlarning boshi) kesilib qolardi:
   kadr yuqoriroqdan ko'rsatiladi, kompyuterda blok balandroq, zoom kamroq. */
.mp-cover img { object-position: 50% 22%; }
@media (min-width: 900px) {
  .mp-cover { height: 440px; }
  .mp-cover img.on { transform: scale(1.03); }
}

/* ---------- Harakatni kamaytirish ---------- */
@media (prefers-reduced-motion: reduce) {
  .code-box::before, .stories-section-title::before { animation: none; }
  .ix-reveal { opacity: 1; transform: none; }
  .mc, .mc-poster img, .genre-chip, .story-item, .col-card, .ix-arrow { transition: none !important; }
}