@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --Cinnabar: #E03E29;
    --White: #FFFFFF;
    --Armadillo: #423B33;
    --BG: #E8E3DD;
}

html {
    scroll-behavior: smooth;
    background: var(--BG);
    font-family: "Inter", sans-serif;
}

body {
    margin: 0;
    cursor: url('img/cursor-dot.png') 16 16, default;
}

a:hover {
    cursor: url('img/cursor-hand.png') 16 16, pointer;
}

h1 {
    font-size: 44px;
    font-weight: 600;
    line-height: 50px;
    margin: 0;
    text-align: center;
}

p {
    margin: 0;
}

.hero-title-p {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.hero-title-p a:hover {
    text-decoration-style: double;
}

.r {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrap {
    max-width: 1520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    gap: 30px;
    box-sizing: border-box;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    border-radius: 16px;
    background: var(--Cinnabar);
    overflow: hidden;
}

.hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    height: 360px;
}

.hero-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--White);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.hero-title {
    padding: 0px 10px;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--Armadillo);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.hero-title a {
    color: var(--Armadillo);
}

.hero-title-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 7px;
}

.hero-title h1 {
    font-weight: 600;
}

.hero-anchor {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: fit-content;
    gap: 10px;
    padding: 7px;

    color: var(--Armadillo);
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;

    border-radius: 5px;

    transition: all 0.4s ease;

    z-index: 5;
}

.hero-anchor-white {
    color: var(--White);
}

.p-vh .hero-anchor:hover {
    background: rgba(66, 59, 51, 0.30);
} 

.hero-dragon {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(40%, -40%);
    width: 380px;
    height: auto;
}

.hero-stamp {
    position: absolute;
    left: 30px;
    bottom: 30px;

    z-index: 5;
}

.hero-stamp img {
    width: 100%;
    height: auto;
}

.hero-buts {
    display: flex;
    width: 160px;
    min-width: 160px;
    height: 100%;
    flex-direction: column;
    align-items: flex-end;
}

.hero-buts-item {
    display: flex;
    flex: 1;
    width: 100%;
    padding: 20px;
    gap: 20px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    /* height: 100%; */
    width: 100%;
    box-sizing: border-box;
    color: var(--White);
    text-decoration: none;
    transition: all 0.4s ease;
}

.hero-buts-item img {
    transition: all 0.4s ease;
}

.hero-buts-item:hover {
    background: linear-gradient(270deg, rgba(232, 227, 221, 0.10) 0%, rgba(255, 255, 255, 0.00) 85.5%);
}

.hero-buts-item:hover img {
    margin-left: 10px;
}

.hero-buts-divider {
    background: linear-gradient(90deg, rgba(232, 227, 221, 0.00) 10%, #E8E3DD 100%);
    width: 100%;
    height: 1px;
}

.hots {
    height: 50px;
}


.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

.card {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: #ddd;
    overflow: hidden;
    border-radius: 16px;
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); */
  }

.card:hover {
    cursor: url('img/cursor-open.png') 16 16, pointer;
}

.card video,
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



.hots {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hots-wrapper {
    display: flex;
    animation: scroll 10s linear infinite;
    white-space: nowrap;
    width: fit-content;
}

.hots-content {
    flex-shrink: 0;
    color: var(--White);
    font-size: 16px;
    font-weight: 400;
}

  
/* Анимация смещает всю обёртку на ширину одного блока */
@keyframes scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-25%);
    }
}

.contacts-content, .pack-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contacts-content h1, .contacts-content h1 a {
    color: var(--White);
}

.p-vh .wrap {
    min-height: 100vh;
}

.contacts-content a:hover {
    /* text-decoration: none; */
    text-decoration-style: double;
}

.pack-dragon {
    position: absolute;
    right: 0;
    height: 100%;
    width: auto;
    z-index: 3;

    transform: translateX(20%);
}

.p-packages {
    background-image: url(img/dragon-pack.png);
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-position: top right;
    background-attachment: fixed;
}

.packages {
    display: flex;
    justify-self: center;
    gap: 30px;
    z-index: 7;
}

.pack-card { 
    width: 420px;
    background: var(--White);
    border-radius: 16px;
    z-index: 5;
    overflow: visible;

    display: flex;
    padding: 20px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
    
    gap: 20px;

    color: var(--Armadillo);
}

.pack-card-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.pack-card-labelnew {
    position: absolute;
    right: 30px;
    top: 30px;
}

.pack-card h2 {
    color: var(--Cinnabar);
    font-family: Inter;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    max-width: 300px;
    margin: 0;
}

.pack-card-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    align-self: stretch;
}

.pack-card-price-start {
    color: rgba(66, 59, 51, 0.70);
    font-size: 14px;
}

.pack-card-price-days {
    font-size: 16px;
}

.pack-card-price-price {
    font-size: 34px;
    font-weight: 600;
}

.pack-card-price-price span {
    margin-right: 5px;
}

.pack-card hr {
    background: rgba(66, 59, 51, 0.20);
    width: 60%;
    margin: 0;
}

.pack-card-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    position: relative;
}

.pack-card-list li {
    position: relative;
    padding-left: 25px;
    font-size: 16px;
}

.pack-card-jp {
    writing-mode: vertical-rl; /* ключ! делает текст вертикальным сверху вниз */
    text-orientation: mixed;   /* чтобы кандзи и кана отображались естественно */
    font-size: 16px;
    color: rgba(66, 59, 51, 0.60);
    line-height: 1.6;
    letter-spacing: 4px;
    font-weight: 400;
    white-space: nowrap;

    position: absolute;
    right: 0;
    bottom: 0;
    
}

.pack-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url('img/card-items-price-icon-dragon.svg'); /* путь к SVG */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pack-card-case {
    height: 90px;
    position: relative;
    width: 100%;
    border-radius: 10px;
    background: var(--Armadillo);
    overflow: hidden;

    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 7px;

    padding: 0 15px;
    box-sizing: border-box;

    color: var(--White);

    text-decoration: none;

    background-position: 50% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    transition: all 0.6s ease;
}

.pack-card-case-arrow {
    width: 20px;
    height: 20px;
    transition: all 0.6s ease;
}

.pack-card-case-one {
    background-image: url(img/case-hero-one.png);
}

.pack-card-case-framer {
    background-image: url(img/case-hero-framer.png);
}

.pack-card-case-prod {
    background-image: url(img/case-hero-product.png);
}

.pack-card-case:hover {
    background-size: auto 120%;
}

.pack-card-case:hover .pack-card-case-arrow {
    margin-left: 5px;
}

.pack-card-case-hero {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.pack-scroll {
    display: none;
}

.launch-header-anchor {
    display: flex;
    justify-content: center;
    width: 100%;
    
}

.p-launches .hero-anchor {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.launch-header {
    position: sticky;
    z-index: 5;
    top: 0;
    background: var(--BG);
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 20px;
    /* padding: 40px 0px; */
}

.launch-header-w {
    width: 100%;
}

.launch-header-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.popup-overlay {
    position: fixed;
    inset: 0;
    background: var(--BG);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
    cursor: url('img/cursor-close.png') 16 16, default;
}

.popup-overlay.active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    z-index: 999;
}

.popup-content {
    position: relative;
    max-width: 1520px; /* как wrap */
    padding: 10px;
    box-sizing: border-box;
}

.popup-content img {
    width: 100%;
    max-height: 80vh;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 16px;
    pointer-events: none;
}

.popup-content video {
    width: 100%;
    max-height: 80vh;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 16px;
    pointer-events: none;
    /* background: #000; */
}

.popup-content video::-webkit-media-controls {
    display: none;
}

.case-header-anchor {
    position: fixed;
    background: rgba(232, 227, 221, 0.60);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #D7D2CB;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    gap: 10px;
}

.case-header-anchor .hero-anchor {
    position: static;
    transform: none;
}

.case-header-anchor span {
    opacity: 0.5;
}

.p-case .wrap {
    max-width: 740px;
    padding: 0;
    padding-top: 200px;
    padding-bottom: 200px;
    justify-content: flex-start;
    gap: 30px;
}

/* adapt */

@media (max-width: 1400px) {
    .packages {
        width: 100%;
    }
    
    .pack-card {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 1220px) {
    .wrap {
        padding: 20px;
        gap: 20px;
    }

    .packages {
        gap: 20px;
    }

    .hero-dragon {
        transform: translate(40%, -40%);
        width: 300px;
        height: auto;
    }

    .gallery {
        gap: 20px;
    }
}

@media (max-width: 1100px) {
    .packages {
        gap: 10px;
    }

    .pack-card-list li {
        font-size: 14px;
    }
}

@media (max-width: 1020px) {

    .header {
        flex-direction: column-reverse;
    }

    .hero {
        flex-direction: column;
        height: 400px;
    }

    .hero-buts {
        flex-direction: row;
        height: 70px;
        min-height: 70px;
        width: 100%;
    }

    .hero-buts-item {
        align-items: center;
        gap: 7px;
        padding: 0px;
        height: 100%;
        justify-content: center;
    }

    .hero-buts-item img {
        width: 20px;
        height: auto;
    }

    .hero-buts-item:hover {
        gap: 2px;
        background: linear-gradient(0deg, rgba(232, 227, 221, 0.10) 0%, rgba(255, 255, 255, 0.00) 85.5%);
    }
    
    .hero-buts-item:hover img {
        margin-left: 0px;
    }

    .hero-buts-divider {
        height: 100%;
        width: 1px;
        background: linear-gradient(180deg, rgba(232, 227, 221, 0.00) 10%, #E8E3DD 100%);
    }

    .hero-buts-divider-hide {
        display: none;
    }

    .hots {
        height: 35px;
    }
}

@media (max-width: 960px) {
    .pack-card {
        min-width: 300px;
    }

    .packages {
        flex-wrap: wrap;
    }

    .p-packages .wrap {
        justify-content: flex-start;
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (max-width: 880px) {

    .hero {
        height: 65vh;
    }

    .hero-anchor {
        top: 30px;
        font-size: 16px;
    }

    .hero-anchor img {
        width: 16px;
        height: auto;
    }

    .hero-title {
        padding-top: 0px;
        padding-bottom: 40px;
        
    }

    .hero-dragon {
        transform: translate(35%, 10%);
        width: 200px;
        height: auto;
    }

    .hero-stamp {
        width: 60px;
        height: auto;
        left: 20px;
        bottom: 20px;
    }
}

@media (max-width: 680px) {
    .pack-card {
        padding: 15px;
        scroll-snap-align: start;
    }

    .pack-card h2 {
        font-size: 22px;
    }

    .pack-card-price-price {
        font-size: 26px;
    }

    .p-packages .wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .p-packages {
        background-size: 260px auto;
        background-position: bottom right -60px;
    }

    .packages {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 10px;
        -webkit-overflow-scrolling: touch;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .packages::-webkit-scrollbar {
        display: none;
      }

    /* .pack-scroll {
        display: block;
        height: 100%;
        width: 0px;
        scroll-snap-align: start;
    } */
}

@media (max-width: 600px) {
    h1 {
        font-size: 26px;
        line-height: 120%;
    }

    .hero-title {
        gap: 10px;
    }

    .hero-stamp {
        width: 50px;
        left: 10px;
        bottom: 10px;
    }

    .wrap {
        padding: 10px;
        gap: 10px;
    }

    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 390px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}