/* ============================================================
   Theme: Python  (theme/theme.css)
   ------------------------------------------------------------
   ظاهرِ هویت دوره: مسکات‌های کشیده‌شده با CSS و قاب ویدیوی مسکات.
   ساختار HTML مسکات‌ها، متن‌ها، ایموجی، آرم و مسیر ویدیوها در
   theme/theme.js است. common.css و CSS/JS صفحات هیچ هویتی
   از دوره ندارند. برای دوره‌ی جدید، پوشه‌ی theme/ را کپی و
   محتویاتش را عوض کنید (README را ببینید).
   ============================================================ */

/* ------------------------------------------------------------
   ۱) مسکات صفحه‌ی «آفلاین» (offline.html)
   منبع اصلی: قبلاً در offline.css بود، به اینجا منتقل شد.
   ------------------------------------------------------------ */

.mascot-scene {

    width: 260px;

    height: 285px;

    margin: 0 auto 10px;

    position: relative;

}

/* soft background */

.mascot-scene::before {

    content: "";

    position: absolute;

    width: 205px;

    height: 205px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #F1FFEC 0%,
            #E9FFE1 65%,
            #E1FFD6 100%
        );

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -48%);

}

/* =========================================
   PYTHON
========================================= */

.theme-mascot {

    filter: drop-shadow(0 14px 18px rgba(60, 199, 90, 0.22));

    position: absolute;

    width: 145px;

    height: 205px;

    left: 50%;

    top: 60px;

    transform:
        translateX(-50%);

    z-index: 5;

}

/* =========================================
   BODY
========================================= */

.theme-mascot .body {

    position: absolute;

    width: 116px;

    height: 135px;

    left: 50%;

    bottom: 7px;

    transform:
        translateX(-50%);

    background:

        linear-gradient(
            145deg,
            #86E863 0%,
            #6DD946 65%,
            #61C83C 100%
        );

    border-radius:
        52% 52% 45% 45%;

    box-shadow:

        0 10px 18px
        rgba(89,180,56,.18);

}

/* =========================================
   BELLY
========================================= */

.theme-mascot .belly {

    position: absolute;

    width: 70px;

    height: 82px;

    background:

        linear-gradient(
            145deg,
            #F8FFF5,
            #EDFFE7
        );

    border-radius:
        50%;

    left: 50%;

    bottom: 8px;

    transform:
        translateX(-50%);

}

/* =========================================
   HEAD
========================================= */

.theme-mascot .head {

    position: absolute;

    width: 105px;

    height: 91px;

    left: 50%;

    top: -39px;

    transform:
        translateX(-50%);

    background:

        linear-gradient(
            145deg,
            #8FED6D,
            #6DD946
        );

    border-radius:
        48% 48% 45% 45%;

    z-index: 10;

    box-shadow:

        0 8px 15px
        rgba(89,180,56,.20);

}

/* =========================================
   ANTENNA
========================================= */

.theme-mascot .antenna {

    position: absolute;

    width: 3px;

    height: 20px;

    background: #3A6E27;

    left: 50%;

    top: -17px;

    transform:
        translateX(-50%)
        rotate(8deg);

}

.theme-mascot .antenna span {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #FFD447;

    left: -3px;

    top: -7px;

    box-shadow:
        0 2px 6px rgba(255,196,40,.4);

}

/* =========================================
   EYEBROWS
========================================= */

.theme-mascot .eyebrow {

    position: absolute;

    width: 22px;

    height: 7px;

    border-radius: 10px;

    background:
        #509E34;

    top: 17px;

}

.theme-mascot .eyebrow-left {

    left: 20px;

    transform:
        rotate(-12deg);

}

.theme-mascot .eyebrow-right {

    right: 20px;

    transform:
        rotate(12deg);

}

/* =========================================
   EYES
========================================= */

.theme-mascot .eye {

    position: absolute;

    width: 25px;

    height: 29px;

    border-radius: 50%;

    background: white;

    top: 27px;

    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.04);

}

.theme-mascot .eye-left {

    left: 17px;

}

.theme-mascot .eye-right {

    right: 17px;

}

/* pupils */

.theme-mascot .pupil {

    position: absolute;

    width: 11px;

    height: 14px;

    border-radius: 50%;

    background: #2D3B28;

    left: 50%;

    top: 9px;

    transform:
        translateX(-50%);

}

.theme-mascot .shine {

    position: absolute;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: white;

    left: 9px;

    top: 9px;

    z-index: 3;

}

/* =========================================
   CHEEKS
========================================= */

.theme-mascot .cheek {

    position: absolute;

    width: 17px;

    height: 9px;

    border-radius: 50%;

    background:
        rgba(255,158,181,.8);

    top: 59px;

}

.theme-mascot .cheek-left {

    left: 4px;

}

.theme-mascot .cheek-right {

    right: 4px;

}

/* =========================================
   SURPRISED MOUTH
========================================= */

.theme-mascot .surprised-mouth {

    position: absolute;

    width: 18px;

    height: 22px;

    border-radius: 50%;

    background:
        #3A6E27;

    left: 50%;

    top: 59px;

    transform:
        translateX(-50%);

    box-shadow:

        inset 0 4px 0 rgba(255,255,255,.08);

}

/* =========================================
   ARMS
========================================= */

.theme-mascot .arm {

    position: absolute;

    width: 29px;

    height: 62px;

    background:
        linear-gradient(
            160deg,
            #86E863,
            #6DD946
        );

    border-radius: 30px;

    top: 39px;

    z-index: 4;

}

.theme-mascot .arm-left {

    left: -14px;

    transform:
        rotate(30deg);

}

.theme-mascot .arm-right {

    right: -14px;

    transform:
        rotate(-30deg);

}

/* =========================================
   HANDS
========================================= */

.theme-mascot .hand {

    position: absolute;

    width: 31px;

    height: 27px;

    border-radius: 50%;

    background:
        #86E863;

    bottom: -8px;

    left: 50%;

    transform:
        translateX(-50%);

}

.theme-mascot .hand span {

    position: absolute;

    width: 7px;

    height: 14px;

    border-radius: 10px;

    background:
        #86E863;

    bottom: 17px;

}

.theme-mascot .hand span:nth-child(1) {

    left: 2px;

    transform:
        rotate(-20deg);

}

.theme-mascot .hand span:nth-child(2) {

    left: 11px;

    transform:
        rotate(0);

}

.theme-mascot .hand span:nth-child(3) {

    right: 2px;

    transform:
        rotate(20deg);

}

/* =========================================
   TAIL
========================================= */

.theme-mascot .tail {

    position: absolute;

    border-radius: 50%;

    z-index: 1;

}

.theme-mascot .tail-1 {

    width: 60px;

    height: 42px;

    bottom: -3px;

    right: 5px;

    border-bottom:
        18px solid #61C83C;

    transform:
        rotate(12deg);

}

.theme-mascot .tail-2 {

    width: 35px;

    height: 30px;

    bottom: -8px;

    right: -6px;

    border-bottom:
        15px solid #61C83C;

    transform:
        rotate(-25deg);

}

/* =========================================
   WIFI BUBBLE
========================================= */


/* ------------------------------------------------------------
   ۲) مسکات مینیمال صفحه‌ی «بارگیری» (loading.html)
   منبع اصلی: قبلاً در loading.css بود، به اینجا منتقل شد.
   ------------------------------------------------------------ */

.loading-mascot {

    filter: drop-shadow(0 8px 14px rgba(60, 199, 90, 0.20));

    position: relative;

    width: 145px;

    height: 145px;

    display: flex;

    align-items: center;

    justify-content: center;

    animation:
        mascot-float 1.8s ease-in-out infinite;

}

/* Soft circle */

.loading-mascot::before {

    content: "";

    position: absolute;

    width: 125px;

    height: 125px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            #F1FFEC 0%,
            #E9FFE1 65%,
            #E1FFD6 100%
        );

}

/* =========================================
   BODY
========================================= */

.loading-mascot .mascot-body {

    position: relative;

    width: 92px;

    height: 92px;

    border-radius:
        48% 48% 43% 43%;

    background:

        linear-gradient(
            145deg,
            #8FED6D,
            #6DD946
        );

    z-index: 2;

    box-shadow:

        0 9px 18px
        rgba(109,217,70,.20);

}

/* =========================================
   EYES
========================================= */

.loading-mascot .mascot-eye {

    position: absolute;

    width: 21px;

    height: 25px;

    border-radius: 50%;

    background: white;

    top: 28px;

}

.loading-mascot .mascot-eye::after {

    content: "";

    position: absolute;

    width: 9px;

    height: 12px;

    border-radius: 50%;

    background: #2D3B28;

    left: 50%;

    top: 8px;

    transform:
        translateX(-50%);

}

.loading-mascot .eye-left {

    left: 17px;

}

.loading-mascot .eye-right {

    right: 17px;

}

/* =========================================
   MOUTH
========================================= */

.loading-mascot .mascot-mouth {

    position: absolute;

    width: 13px;

    height: 8px;

    border-bottom:
        3px solid #427D2C;

    border-radius:
        0 0 15px 15px;

    left: 50%;

    bottom: 22px;

    transform:
        translateX(-50%);

}

/* =========================================
   TAIL
========================================= */

.loading-mascot .mascot-tail {

    position: absolute;

    width: 48px;

    height: 32px;

    border-bottom:
        14px solid #3A6E27;

    border-radius:
        0 0 40px 40px;

    right: 8px;

    bottom: 22px;

    z-index: 1;

    transform:
        rotate(-18deg);

}


@keyframes mascot-float {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* ------------------------------------------------------------
   ۳) قاب ویدیوی مسکات (splash و login)
   قاب گرد و سه‌بعدی با لبه‌ی پایین ضخیم؛ رنگ قاب از رنگ
   پس‌زمینه‌ی خود ویدیو (theme.js → videos[x].bg) گرفته می‌شود
   تا ویدیو بدون لبه‌ی ناهماهنگ در قاب بنشیند.
   ------------------------------------------------------------ */

.mascot-video-slot {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mascot-video {
    --video-bg: #dfe9ff;
    --video-edge: color-mix(in srgb, var(--video-bg) 66%, #1b2540);

    position: relative;
    isolation: isolate;

    width: min(100%, 440px);
    margin-inline: auto;
    aspect-ratio: 16 / 10;

    border-radius: 30px;
    overflow: hidden;

    background: var(--video-bg);
    border: 3px solid #ffffff;

    box-shadow:
        0 6px 0 var(--video-edge),
        0 24px 44px rgba(36, 33, 55, 0.16);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    animation: mascot-video-in 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mascot-video:active {
    transform: translateY(3px);
    box-shadow:
        0 3px 0 var(--video-edge),
        0 14px 30px rgba(36, 33, 55, 0.14);
}

/* براق سطح شیشه‌ای قاب */
.mascot-video::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0) 22%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.mascot-video-el {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: var(--video-bg);
}

/* دکمه‌ی صدا — گرد با لبه‌ی پایین ضخیم */
.mascot-video-sound {
    position: absolute;
    left: 12px;
    bottom: 14px;
    z-index: 3;

    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;

    border: none;
    border-radius: 50%;
    cursor: pointer;

    color: #34406b;
    background: #ffffff;
    box-shadow:
        0 3px 0 #cfd4e6,
        0 8px 16px rgba(36, 33, 55, 0.18);

    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mascot-video-sound:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #cfd4e6, 0 4px 10px rgba(36, 33, 55, 0.16);
}

.mascot-video-sound svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.mascot-video-sound svg path:first-child {
    stroke: none;
}

.mascot-video-sound .ic-off {
    display: none;
    color: #e0564f;
}

.mascot-video-sound.is-muted .ic-on {
    display: none;
}

.mascot-video-sound.is-muted .ic-off {
    display: block;
}

@keyframes mascot-video-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mascot-video { animation: none; }
}

/* ------------------------------------------------------------
   ۴) ویدیوی مسکات بدون قاب (frameless) — مثلاً صفحه‌ی splash
   بدون کادر، سایه، انیمیشن ورود و هر افکت دیگر: فقط خودِ کاراکتر
   که انگار مستقیم روی صفحه ایستاده. پس‌زمینه‌ی ویدیو سفید خالص
   است و با mix-blend-mode: multiply از بین می‌رود، پس بک‌گراند
   خودِ صفحه (گرادیان و دایره‌های محو) از پشت ویدیو دیده می‌شود.

   نکته: mix-blend-mode فقط با محتوای «همان stacking context»
   ترکیب می‌شود؛ پس هیچ‌کدام از والدهای ویدیو نباید transform،
   filter، opacity، isolation یا z-index (روی عنصر position شده)
   داشته باشند وگرنه سفید ویدیو به‌صورت مستطیل دیده می‌شود.
   ------------------------------------------------------------ */

.mascot-video-frameless {
    --video-ratio: 4 / 3;

    position: relative;
    width: min(100%, 460px);
    aspect-ratio: var(--video-ratio);
    margin-inline: auto;

    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
    transform: none;
    isolation: auto;
    pointer-events: none;
}

.mascot-video-frameless .mascot-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
    mix-blend-mode: multiply;
}