@media (orientation: landscape) {
    .images-wrapper {
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%;
    }
}
@media (orientation: portrait) {

}
body { background: black; transition: 2s all;}
.canvas-wrapper{
    position: relative;
}
body.active {
    background: #fff;
}
body.active .index {
    background: #fff;
}
.image-wrapper img {
    max-width: 100%;
    text-align: center;
}
.link-to-book {
    transition: 2s all;
    cursor: pointer;
}
body.active .link-to-book {
    opacity: 0;
    background: #fff;
}
a.buy-btn {
    display: block;
    position: fixed;
    right: 15px;
    top: 15px;
    font-size: 80px;
    color: #fff;
    text-transform: uppercase;
    font-family: Arial;
    text-decoration: none;
}
.first {
    display: flex;
    text-align: center;
    height: 100%;
    background: #fff;
}


.first-left {
    max-width: 710px;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    vertical-align: middle;
    justify-content: center;
    text-align: left;
    padding: 0 30px;
}

.first-right {
    flex: 1 1 0;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    display: flex;
}

.first-right img {
    max-height: 100vh;
}

h1 {
    font-weight: 300;
    margin-bottom: 35px;
    font-size: 68px;
    text-align: justify;
    text-align-last: justify;
}

h1 span {
    font-weight: bold;
}
h1 span.dn{
    font-weight: bold;
    font-size: 68px;
}

h1 span.up {
    font-size: 61px;
}

.first__text {
    margin-bottom: 100px;
    text-align: left;
}
#marker-canvas {
    filter: blur(1px);
}

.first-left__inner {
    width: 615px;
    display: inline-block;
    margin: 0 auto;
}

.transition {
    margin-bottom: -1px;
}

a.buy-book-btn {
    border: 2px solid #000;
    display: inline-block;
    padding: 15px 20px;
    font-size: 36px;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    margin:0 auto;
    position: relative;
    z-index: 9999;
    background: #fff;
}

.transition img {
    width: 100%;
}

div#fullimage {

}
div#fullimage-wrap {
    display:none;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    height: 100%;
    overflow: scroll;
}
div#fullimage-wrap.active {
    display: block;
}
.fullimage-close {
    width: 50px;
    height: 50px;
    position: fixed;
    right:15px;
    top:15px;
    color: #fff;
    font-size:80px;
    cursor:pointer;
    z-index: 999;
}
img {
    max-width: 100%;
}
.soldout {
    position: absolute;
    left: 50%;
    top: 45%;
    color: #fff;
    text-transform: uppercase;
    margin-left: -60px;
    font-size: 40px;
    text-shadow: 1px 1px black;
    opacity: 0.5;
    /* display: none; */
    font-family: Helvetica;
    font-weight: bold;
    filter: blur(2px);
}
.fullimage-inner .soldout {
    display:none;
}

.image-wrapper {
    position: relative;

}

.image-wrapper--soldout img {
    opacity: 0.5;
}

.image-wrapper:hover .soldout {
    display: block;
}

/* По умолчанию скрываем мобильное видео */
.mobile-video {
    display: none;
}

.index {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: black;
    overflow: hidden;
    position: relative;
    transition: 2s all;
}

div#imageContainer {
   /* width: 102.5%;*/
    /* margin-left: -1.2%; */
    padding: 100px 0;
}

div#imageContainer img {
    width: 50%;
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* Прелоадер */
.preloader {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
    // position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-size: 36px;
    font-family: Arial, sans-serif;
    z-index: 9;
    position: absolute;
}

.preloader .loader {
    width: 160px;
    height: 160px;
    border: 8px solid rgba(255, 255, 255, 0.2);
    border-top: 8px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

body.white-page {
    background: white;
    color: black;
    padding: 0;
}
body.white-page .index {
    background: white;
    padding: 0 7.5%;
    margin: 7% 0;
}

.white-page .pokaz {
    position: relative;
    height: 100vh;
    align-items: center;
    justify-content: center;
    display:flex;
    box-sizing: content-box;
    padding: 300px 0;
}

.white-page video {
    width: 75%;
}

.video-wrapper2 {
    position: absolute;
    width: 75%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.video-wrapper2 video {
    width: 100%;
    height: calc(100% - 60px);
    display: block;
}

.custom-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: url(/images/Button_alpha_00047-min.png) no-repeat center center;
    background-size: contain;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.custom-play-button img {
    border-radius: 100%;
    background: #333;
    border: 0;
    outline: none;
    overflow: h;
    width: 60px;
}

.video-footer img {
    height: 100%;
}

.video-footer {
    background-color: #000;
    color: white;
    padding: 0;
    text-align: right;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35px;
}

.video-footer a {
    color: #1e90ff;
    text-decoration: none;
}

.video-footer a:hover {
    text-decoration: underline;
}

body.white-page .preloader{
    color: black;
    background: white;
}
body.white-page .preloader .loader {
    border: 8px solid rgba(0, 0, 0, 0.2);
    border-top: 8px solid black;
}

.video-container {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* Соотношение 16:9 */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pokaz {
    background: black;
}

#imageGrid img {
    cursor: pointer;
}

.hslider-outer{position:relative;}
.hslider{
    position:sticky;
    top:0; height:100vh;
    overflow:hidden;
    background: #000;
    border-top: 1px solid #000;
}

.track{display:flex; align-items:center; gap:3vw; height:100%; padding:6vh 6vw; will-change:transform}

.footer {
    height: 50%;
    background: #000;
}

.mycard {
    flex: 0 0 auto;
    height: 80vh;
    aspect-ratio: 9 / 14;
    overflow: hidden;
    border: 0;
    box-shadow: none;
}
.mycard img{width:100%; height:100%; object-fit:cover; display:block}

:root{
    --sun:#ffd54a;      /* цвет солнца */
    --ray:#ffec8b;      /* цвет лучей */
}

.sun{
    aspect-ratio:1;
    border-radius:50%;
    position:relative;
    background:
            radial-gradient(circle at 50% 50%,
            #fff 0 35%, var(--sun) 35% 60%, transparent 60%);
    filter: drop-shadow(0 0 20px var(--sun)) drop-shadow(0 0 40px var(--sun));
}

/* Вращающиеся лучи */
.sun::before{
    content:"";
    position:absolute;
    inset:-70%;                /* насколько далеко лучи выходят наружу */
    border-radius:50%;
    /* «зубчатый» конусный градиент — чередуем прозрачное/яркое */
    background:
            conic-gradient(
                    from 0deg,
                    rgba(255,236,139,0) 0 10deg, rgba(255,236,139,.95) 10deg 12deg,
                    rgba(255,236,139,0) 12deg 22deg, rgba(255,236,139,.95) 22deg 24deg,
                    rgba(255,236,139,0) 24deg 36deg, rgba(255,236,139,.95) 36deg 38deg,
                    rgba(255,236,139,0) 38deg 52deg, rgba(255,236,139,.95) 52deg 54deg,
                    rgba(255,236,139,0) 54deg 70deg, rgba(255,236,139,.95) 70deg 72deg,
                    rgba(255,236,139,0) 72deg 90deg, rgba(255,236,139,.95) 90deg 92deg,
                    rgba(255,236,139,0) 92deg 116deg, rgba(255,236,139,.95) 116deg 118deg,
                    rgba(255,236,139,0) 118deg 150deg, rgba(255,236,139,.95) 150deg 152deg,
                    rgba(255,236,139,0) 152deg 180deg, rgba(255,236,139,.95) 180deg 182deg,
                    rgba(255,236,139,0) 182deg 210deg, rgba(255,236,139,.95) 210deg 212deg,
                    rgba(255,236,139,0) 212deg 240deg, rgba(255,236,139,.95) 240deg 242deg,
                    rgba(255,236,139,0) 242deg 270deg, rgba(255,236,139,.95) 270deg 272deg,
                    rgba(255,236,139,0) 272deg 300deg, rgba(255,236,139,.95) 300deg 302deg,
                    rgba(255,236,139,0) 302deg 330deg, rgba(255,236,139,.95) 330deg 332deg,
                    rgba(255,236,139,0) 332deg 360deg
            );
    /* маска: спрячем центр и сделаем плавное затухание к краям */
    -webkit-mask:
            radial-gradient(circle,
            transparent 0 62%, #000 63% 100%);
    mask:
            radial-gradient(circle,
            transparent 0 62%, #000 63% 100%);
    filter: blur(1.5px);       /* мягкость лучей */
    animation: spin 18s linear infinite;
}

/* Мягкое внешнее свечение */
.sun::after{
    content:"";
    position:absolute;
    inset:-20%;
    border-radius:50%;
    background:
            radial-gradient(circle,
            rgba(255,213,74,.6) 0 35%,
            rgba(255,213,74,.35) 35% 60%,
            rgba(255,213,74,.15) 60% 100%);
    filter: blur(12px);
    z-index:-1;
}

@keyframes spin{
    to{ transform: rotate(360deg); }
}

/* уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
    .sun::before{ animation: none; }
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Показываем мобильное видео и скрываем обычное на экранах до 768px */
@media screen and (max-width: 768px) {
    .desktop-video {
        display: none;
    }
    .mobile-video {
        display: block;
    }

    div#imageContainer img {
        width: 100%;
    }

    .first {
        flex-direction: column;
        padding-top: 25px;
        text-align: justify;
        position: relative;
    }

    h1 span.dn {
        font-size: 100%;
    }

    h1 span.up {
        font-size:8.3vw;
    }

    .first-left__inner {
        width:auto;
    }

    .first-left {
        text-align: justify;
        flex: 0 0 0;
    }

    h1 {
        font-size: 9.2vw;
        margin-bottom: 15px;
    }

    a.buy-book-btn {
        position: absolute;
        bottom: 25px;
        text-align: center;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
        left: 50%;
        translate: -50% 0;
    }

    .first__text {
        margin-bottom: 0;
        font-size: 12px;
    }

    .first-right {
        flex: 0;
    }

    body.white-page video {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .first img {
        width:100%;
    }

    div#imageContainer {
        width: 100%;
        margin-left: 0;
    }

    body.white-page {
        background: #000;
        color: black;
        padding: 0;
    }

    .video-footer {
        text-align: center;
    }

    .video-wrapper2{
        height: auto;
    }

    .custom-play-button {
        background-size: 250%;
    }

    .white-page .pokaz {
        padding: 100px 0;
    }

    .mycard {
        width: 73vw;
        aspect-ratio: 9 / 16;
    }

    .transition {
        height: 100%;
        background-image: url("/images/v5_00000.jpg");
        background-size: cover;
        background-position: center;
    }
    .transition img {
        display:none;
    }

    .hslider {
        overflow-x:scroll;
    }

}