/*
 * DivinationChaloce
 * Landing Page Styles
 *
 * این فایل فقط برای صفحه اصلی لندینگ استفاده می‌شود.
 */


/* =========================================================
   پایه صفحه
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body.dc-landing-page {
    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;

    background-color: #000;

    overflow: hidden;
}


/* =========================================================
   Landing Container
   ========================================================= */

.dc-landing {
    position: relative;

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;

    background-color: #000;

    overflow: hidden;
}


/* =========================================================
   Wrapper
   ========================================================= */

.dc-landing-wrapper {
    position: relative;

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;
}


/* =========================================================
   تصویر مرکزی
   ========================================================= */

.dc-landing-center {
    position: absolute;

    /*
     * همان موقعیت نسخه اصلی
     */
    top: calc(50% + 70px);
    left: 50%;

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

    z-index: 10;

    margin: 0;
    padding: 0;
}


.dc-landing-center-image {
    display: block;

    width: 180px;
    height: auto;

    margin: 0;
    padding: 0;
}


/* =========================================================
   Orbit
   ========================================================= */

.dc-landing-orbit {
    position: absolute;

    /*
     * نقطه مرجع چرخش
     * همان موقعیت نسخه اصلی
     */
    top: calc(50% - 30px);
    left: 50%;

    width: 0;
    height: 0;

    margin: 0;
    padding: 0;

    pointer-events: none;

    z-index: 5;
}


/* =========================================================
   آیتم‌های اطراف
   ========================================================= */

.dc-landing-item {
    position: absolute;

    top: 50%;
    left: 50%;

    /*
     * هندسه اصلی:
     *
     * rotate(angle)
     * translateX(350px)
     * rotate(-angle)
     *
     * باعث می‌شود تصویر روی قوس قرار بگیرد
     * ولی خودش نچرخد.
     */

    transform:
        rotate(var(--landing-angle))
        translateX(350px)
        rotate(calc(-1 * var(--landing-angle)));

    transform-origin: center;

    margin: 0;
    padding: 0;

    pointer-events: auto;
}


/* =========================================================
   لینک هر آیتم
   ========================================================= */

.dc-landing-link {
    display: block;

    margin: 0;
    padding: 0;

    text-decoration: none;

    line-height: 0;
}


/* =========================================================
   تصاویر اطراف
   ========================================================= */

.dc-landing-item-image {
    display: block;

    width: 100px;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0;
}


/* =========================================================
   حالت Hover
   ========================================================= */

/*
 * فعلاً هیچ افکت حرکتی روی تصاویر اعمال نمی‌کنیم
 * تا هندسه اصلی لندینگ تغییر نکند.
 */

.dc-landing-item-image {
    transition: opacity 0.2s ease;
}


.dc-landing-link:hover .dc-landing-item-image {
    opacity: 0.85;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

    /*
     * تصویر مرکزی
     */
    .dc-landing-center {
        top: 50%;
        left: 20%;
    }

    .dc-landing-center-image {
        width: 140px;
    }


    /*
     * نقطه مرجع Orbit
     */
    .dc-landing-orbit {
        left: 20%;
    }


    /*
     * آیتم‌های اطراف
     *
     * شعاع از 350px به 240px کاهش پیدا می‌کند.
     */
    .dc-landing-item {
        transform:
            rotate(var(--landing-angle))
            translateX(240px)
            rotate(calc(-1 * var(--landing-angle)));
    }


    /*
     * اندازه تصاویر اطراف
     */
    .dc-landing-item-image {
        width: 70px;
    }
}


/* =========================================================
   جلوگیری از فاصله‌های ناخواسته تصویر
   ========================================================= */

.dc-landing img {
    vertical-align: top;
}