/* O'rik — Iluro maskoti (partials/mascot.html + js/mascot.js) */

.orik {
    --orik-size: 160px;
    position: relative;
    flex: none;
    width: var(--orik-size);
    aspect-ratio: 1;
    margin: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.orik__body {
    position: absolute;
    inset: 0;
    display: block;
    transform-origin: 50% 88%;
    animation: orik-bob 3.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

.orik__poster,
.orik__model {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.orik__poster {
    object-fit: cover;
    object-position: 50% 58%;
    transition: opacity .5s cubic-bezier(.16, 1, .3, 1), filter .5s cubic-bezier(.16, 1, .3, 1);
}

.orik__model {
    --poster-color: transparent;
    --progress-bar-height: 0;
    background: transparent;
    opacity: 0;
    transform: scale(.88) translateY(4%);
}

/* Model tayyor bo'lganda: PNG eriydi, 3D o'rik "jonlanib" sakraydi. */
.orik.is-3d .orik__model {
    opacity: 1;
    transform: none;
    transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.34, 1.56, .64, 1);
}

.orik.is-3d .orik__poster {
    opacity: 0;
    filter: blur(6px);
}

/* Har bir holatning o'z harakati */
.orik[data-orik-pose="oylash"] .orik__body { animation: orik-ponder 5.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.orik[data-orik-pose="uxlash"] .orik__body { animation: orik-breathe 4.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.orik[data-orik-pose="streak"] .orik__body { animation-duration: 2.9s; }
.orik[data-orik-pose="xursand"] .orik__body {
    animation: orik-hop .72s cubic-bezier(.3, 0, .4, 1) 3, orik-bob 3.8s cubic-bezier(.45, 0, .55, 1) 2.16s infinite;
}

@keyframes orik-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3.5%); }
}

@keyframes orik-ponder {
    0%, 100% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2.5deg) translateY(-1.5%); }
}

@keyframes orik-breathe {
    0%, 100% { transform: scale(1, 1); }
    45% { transform: scale(1.025, .975); }
}

@keyframes orik-hop {
    0% { transform: translateY(0) scale(1.06, .94); }
    40% { transform: translateY(-11%) scale(.97, 1.03); }
    80% { transform: translateY(0) scale(1.05, .95); }
    100% { transform: translateY(0) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
    .orik__body,
    .orik[data-orik-pose] .orik__body { animation: none; }
    .orik.is-3d .orik__model,
    .orik__poster { transition: none; }
}

/* ---------- Joylashuvlar ---------- */

/* Landing hero: o'rik namuna kartasining yuqori chetida o'tiradi */
.loop-demo { position: relative; }
.orik--landing-hero {
    --orik-size: 176px;
    position: absolute;
    top: calc(var(--orik-size) * -.84);
    right: 14px;
    z-index: 2;
}
.hero-visual.hero-visual--loop { padding-top: 150px; }

/* Landing yakuniy chaqiruv: qora blok ustiga chiqib, qo'l silkitadi */
.final-cta { position: relative; margin-top: 150px; padding-top: 104px; }
.orik--landing-cta {
    --orik-size: 190px;
    position: absolute;
    top: calc(var(--orik-size) * -.56);
    left: 50%;
    margin-left: calc(var(--orik-size) / -2);
}

/* Kirish / ro'yxatdan o'tish: karta chetida turadi */
.auth-card { position: relative; }
.orik--auth {
    --orik-size: 132px;
    position: absolute;
    top: calc(var(--orik-size) * -.82);
    right: 22px;
    z-index: 1;
}
.auth-shell:has(.orik--auth) .auth-card { margin-top: 84px; }

/* Dashboard: salomlashuv yonida */
.iluro-home-hero { position: relative; }
.orik--dashboard {
    --orik-size: 128px;
    position: absolute;
    top: calc(var(--orik-size) * -.62);
    right: 18px;
    z-index: 1;
}
.iluro-home:has(.orik--dashboard) { margin-top: 74px; }

/* Natija: ball yonida kayfiyat */
.result-hero { position: relative; }
.result-hero:has(.orik--result) { padding-right: 150px; }
.orik--result {
    --orik-size: 140px;
    position: absolute;
    top: 50%;
    right: 6px;
    margin-top: calc(var(--orik-size) / -2);
}

/* Xatolarim */
.mistakes-head { position: relative; }
.mistakes-head:has(.orik--mistakes) { padding-right: 130px; min-height: 96px; }
.orik--mistakes {
    --orik-size: 124px;
    position: absolute;
    top: -18px;
    right: 0;
}
.orik--mistakes-empty { --orik-size: 150px; margin: -18px auto 0; }

/* Davomiylik sahifasi */
.streak-hero {
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 28px);
    margin: 0 0 22px;
    padding: 18px clamp(18px, 3vw, 30px);
    border: 1px solid #eee4dc;
    border-radius: 28px;
    background: radial-gradient(circle at 12% 60%, rgba(244, 81, 8, .12), transparent 42%), #fffaf6;
}
.orik--streak { --orik-size: 150px; margin: -8px 0 -14px; }
.streak-hero h1 {
    margin: 0;
    color: #171717;
    font: 700 clamp(30px, 4vw, 44px)/1.05 "Space Grotesk", Manrope, sans-serif;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.streak-hero p { margin: 8px 0 0; color: #66625f; font-size: 15px; line-height: 1.55; max-width: 46ch; }
body.is-dark-mode .streak-hero { border-color: #2a2f35; background: #1a1d21; }
body.is-dark-mode .streak-hero h1 { color: #f7f2ea; }
body.is-dark-mode .streak-hero p { color: #b7afa6; }

/* Xato sahifalari (404 / 500) */
.orik--error {
    --orik-size: 210px;
    position: absolute;
    top: calc(var(--orik-size) * -.7);
    right: 12px;
}

/* ---------- Telefon ---------- */
@media (max-width: 760px) {
    .orik--landing-hero { --orik-size: 128px; right: 4px; }
    .hero-visual.hero-visual--loop { padding-top: 112px; }
    .orik--landing-cta { --orik-size: 150px; }
    .final-cta { margin-top: 116px; padding-top: 84px; }
    .orik--error { --orik-size: 150px; }
}

@media (max-width: 620px) {
    .orik--dashboard { --orik-size: 100px; right: 8px; top: -78px; }
    .iluro-home:has(.orik--dashboard) { margin-top: 72px; }
    .iluro-home-hero:has(.orik--dashboard) .iluro-home-hero__copy h1 { padding-right: 64px; }
    .result-hero:has(.orik--result) { padding-right: 104px; }
    .orik--result { --orik-size: 104px; top: 8px; right: 2px; margin-top: 0; }
    .mistakes-head:has(.orik--mistakes) { padding-right: 96px; }
    .orik--mistakes { --orik-size: 96px; top: -12px; }
    .orik--streak { --orik-size: 112px; }
    .orik--auth { --orik-size: 112px; right: 14px; }
    .auth-shell:has(.orik--auth) .auth-card { margin-top: 70px; }
}