/* ==================================================
   ОБЩИЕ НАСТРОЙКИ
   ================================================== */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    cursor: url('https://cdn.cursors-4u.net/css-previews/colorful-rose-5e81d196-css.webp'), auto;
}


/* ==================================================
   ROOM 1 — ПЕРВАЯ СЦЕНА
   ================================================== */

.intro-room {
    position: relative;

    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;

    background-image: url("Airbrush-IMAGE-ENHANCER-1787582644152-1787582644153.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.intro-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(30, 15, 18, 0.35);

    pointer-events: none;
}

/* ==================================================
   ЦЕНТРАЛЬНАЯ РАМКА
   ================================================== */

.dressing-room {
    position: relative;

    z-index: 5;

    width: 760px;
    height: 90vh;
    max-height: 820px;

    padding: 45px 50px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(
            90deg,
            rgba(35, 17, 20, 0.95),
            rgba(72, 39, 39, 0.80),
            rgba(35, 17, 20, 0.95)
        );

    border: 1px solid #9b7655;

    box-shadow:
        0 0 0 6px #241519,
        0 0 0 7px #806044,
        0 0 35px rgba(0, 0, 0, 0.8);

    overflow: hidden;
}

/* ==================================================
   ЗАГОЛОВОК
   ================================================== */

.room-title {
    font-size: 52px;
    letter-spacing: 6px;

    color: #ead8c1;

    text-shadow:
        0 2px 8px #12090b;
}

.room-subtitle {
    margin-top: 8px;

    font-size: 12px;
    letter-spacing: 4px;

    color: #b99a72;

    text-transform: uppercase;
}

/* ==================================================
   ЗЕРКАЛО ROOM 1
   ================================================== */

.mirror {
    width: 310px;
    height: 410px;

    margin: 30px auto 0;
    padding: 12px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #a98258,
            #5d402d,
            #b49468,
            #563a29
        );

    border-radius: 155px 155px 20px 20px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.7);
}

.mirror-inner {
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #292024;

    border-radius: 145px 145px 12px 12px;

    border: 3px solid #332023;
}

.entrance-photo {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* ==================================================
   ТЕКСТ ROOM 1
   ================================================== */

.room-message {
    margin-top: 25px;

    font-size: 15px;
    letter-spacing: 1px;

    color: #d9c5aa;

    line-height: 1.8;
}

/* ==================================================
   КНОПКА
   ================================================== */

.old-enter {
    margin-top: 18px;

    padding: 10px 45px;

    background: transparent;

    color: #d8bd96;

    border: 1px solid #9b7655;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;
    letter-spacing: 3px;

    cursor: url("IMG_0650.png"), pointer;

    transition: 0.25s ease;
}

.old-enter:hover {
    background-color: #5b3037;
    color: #f3e6d2;
}

/* ==================================================
   ROOM 2
   ================================================== */

#room-two {
    display: none;
}

.dressing-room-page {
    position: relative;
    background-size: auto;
    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background-color: #241619;
    background-position: center;
}

/* ==================================================
   ФОН ROOM 2


======================= */

.dressing-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    overflow: hidden;
}

/* ==================================================
   СТЕНА
   ================================================== */

.room-wall {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 76%;

    background-image: url("");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 1;
}



/* ==================================================
   ПОЛ
   ================================================== */

.room-floor {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 24%;

    background-image: url("6cwtOaU6rqf0d2fAHWE7X3Nidzl3RlUPR-VIVFUPtWBcAz47OMxfUaaFiRtBLVfnghQseseeq4s3CwNAd6p3nlio.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 3;
}

.room-floor::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 35px;

    background:
        linear-gradient(
            to bottom,
            rgba(20, 10, 12, 0.45),
            rgba(20, 10, 12, 0)
        );
}

/* ==================================================
   ОБЩИЕ ОБЪЕКТЫ
   ================================================== */

.room-gif {
    position: absolute;

    z-index: 10;

    text-align: center;

    cursor: url("IMG_0650.png"), pointer;

    transition: transform 0.3s ease;
}

.room-gif img {
    width: 100%;
    height: auto;

    display: block;
}

.room-gif span {
    display: none;
}

.room-gif:hover {
    transform: scale(1.05);
}

/* ==================================================
   ЗЕРКАЛО
   ================================================== */

.object-one {
    position: absolute;

    left: 8%;
    top: 18%;

    width: 190px;
    height: auto;

    z-index: 11;
}

/* ==================================================
   ТУАЛЕТНЫЙ СТОЛИК
   ================================================== */

/* ==================================================
   ПАРИК / ГОЛОВА ПРИВЯЗАНЫ К ТУАЛЕТНОМУ СТОЛИКУ
   ================================================== */

/* ==================================================
   ТУАЛЕТНЫЙ СТОЛИК + МАНЕКЕН
   ================================================== */

.object-two {
    position: absolute ;

    width: 280px ;

    left: 5% ;
    top: 600px ;

    transform: none ;
}

.object-two .dressing-table-image {
    display: block;
    width: 100%;
    height: auto;
}

.object-two .table-object {
    position: absolute ;

    left: 60% ;

    /* ВОТ ЭТО ДВИГАЕТ МАНЕКЕН ВВЕРХ/ВНИЗ */
    top: -60px ;

    transform: translateX(-50%) ;

    width: 100px ;
    height: auto ;

    z-index: 5;
    pointer-events: none;
}

/* ==================================================
   ШКАТУЛКА
   ================================================== */

.object-five {
    position: absolute;

    left: 13%;
    bottom: 27%;

    width: 70px;

    z-index: 25;
}

.object-five img {
    width: 80px;

    height: auto;

    display: block;
}

/* ==================================================
   ШКАФ
   ================================================== */

.object-three {
    position: absolute;

    left: 23%;
    bottom: 2%;
    
    width: 440px;

    z-index: 11;
}

.object-three img {
    width: 100%;
    height: auto;

    display: block;
}

/* ==================================================
   ДВЕРЬ
   ================================================== */

.object-six {
    position: absolute;

    right: 2%;
    bottom: 1%;

    width: 310px;

    z-index: 2;
}

/* ==================================================
   ФОТО В ЗЕРКАЛЕ
   ================================================== */

.mirror-photo {
    position: absolute;

    left: 14%;
    top: 14%;

    width: 72%;
    height: 78%;

    overflow: hidden;

    z-index: 1;

    background: #302326;
}

.mirror-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    disp


lay: block;
}

.mirror-frame {
    position: relative;

    width: 190px;
    height: auto;

    display: block;

    z-index: 2;
}

/* ==================================================
   КРОВАТЬ
   ================================================== */

.object-bed {
    position: absolute;

    left: 56%;
    bottom: 3%;

    width: 380px;

    z-index: 13;
}

.object-bed img {
    width: 100%;
    height: auto;

    display: block;
}

/* ==================================================
   КАРТИНА СЛЕВА
   ================================================== */

.painting-one {
    left: 29%;
    top: 8%;

    width: 230px;

    z-index: 9;
}

.painting-one img {
    width: 230px;
    height: auto;

    display: block;
}

/* ==================================================
   КАРТИНА СПРАВА
   ================================================== */

.painting-two {
    right: 25%;
    top: 7%;

    width: 230px;

    z-index: 9;
}

.painting-two img {
    width: 230px;
    height: auto;

    display: block;
}

/* ==================================================
   ЛЮСТРА
   ================================================== */

.chandelier {
    position: absolute;

    left: 50%;
    top: -10px;

    width: 190px;

    z-index: 15;

    transform: translateX(-50%);
}

.chandelier img {
    width: 190px;
    height: auto;

    display: block;
}

.chandelier:hover {
    transform: translateX(-50%) scale(1.07);
}

/* ==================================================
   ДЕКОР НА ПОЛУ
   ================================================== */

.floor-decoration {
    position: absolute;

    height: auto;

    pointer-events: none;

    z-index: 5;
}

.floor-teddy {
    left: 57%;
    bottom: 4%;

    width: 105px;

    transform: rotate(8deg);
}

/* ==================================================
   БЛЁСТКИ
   ================================================== */

.sparkles {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 30;

    pointer-events: none;

    overflow: hidden;
}

.sparkles img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* ==================================================
   ЭФФЕКТ ШКАФА
   ================================================== */

#wardrobe-items {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 40;

    pointer-events: none;

    overflow: hidden;
}

.wardrobe-item {
    position: absolute;

    width: 100px;
    height: auto;

    opacity: 0;
}

/* ==================================================
   ПЕРВАЯ ВЕЩЬ
   ================================================== */

.item-dress {
    left: 38%;
    top: 58%;
}

/* ==================================================
   ВТОРАЯ ВЕЩЬ
   ================================================== */

.item-skirt {
    left: 40%;
    top: 58%;
}

/* ==================================================
   ТРЕТЬЯ ВЕЩЬ
   ================================================== */

.item-bow {
    left: 39%;
    top: 58%;
}

/* ==================================================
   ЧЕТВЁРТАЯ ВЕЩЬ
   ================================================== */

.item-bag {
    left: 41%;
    top: 58%;
}

/* ==================================================
   АНИМАЦИЯ ВЕЩЕЙ
   ================================================== */

.wardrobe-item.fly-one {
    animation: wardrobeFlyOne 1.4s ease-out forwards;
}

.wardrobe-item.fly-two {
    animation: wardrobeFlyTwo 1.5s ease-out forwards;
}

.wardrobe-item.fly-three {
    animation: wardrobeFlyThree 1.3s ease-out forwards;
}

.wardrobe-item.fly-four {
    animation: wardrobeFlyFour 1.6s ease-out forwards;
}

/* ==================================================
   ТРАЕКТОРИИ
   ================================================== */

@keyframes wardrobeFlyOne {

    0% {
        left: 38%;
        top: 58%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 20%;
        top: 20%;
        opacity: 0;
    }
}

@keyframes wardrobeFlyTwo {

    0% {


left: 40%;
        top: 58%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 55%;
        top: 15%;
        opacity: 0;
    }
}

@keyframes wardrobeFlyThree {

    0% {
        left: 39%;
        top: 58%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 72%;
        top: 30%;
        opacity: 0;
    }
}

@keyframes wardrobeFlyFour {

    0% {
        left: 41%;
        top: 58%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 30%;
        top: 75%;
        opacity: 0;
    }
}

/* ==================================================
   СВЕТ ОТ ЛЮСТРЫ
   ================================================== */

#light-effect {
    position: fixed;

    inset: 0;

    z-index: 50;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            ellipse 45% 55% at 50% 8%,
            rgba(255, 210, 145, 0.32) 0%,
            rgba(255, 190, 120, 0.14) 35%,
            rgba(30, 12, 15, 0.08) 65%,
            rgba(10, 5, 7, 0.42) 100%
        );

    transition: opacity 0.7s ease;
}

/* свет включён */

#light-effect.light-on {
    opacity: 1;
}

/* ==================================================
   ЗАТЕМНЕНИЕ
   ================================================== */

.dressing-room-page::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 6;

    pointer-events: none;

    background: rgba(30, 12, 15, 0.08);
}

/* ==================================================
   ROOM 3
   ================================================== */

#main-site {
    display: none;
} 

/* ==================================================
   ROOM 1 — GIF С КАНДЗИ
   ================================================== */

.room-title {
    height: 80px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.room-title img {
    width: 230px;
    height: auto;

    display: block;
}

/* ==================================================
   ROOM 1 — ПРИВЕТСТВИЕ
   ================================================== */

.room-message {
    margin-top: 25px;

    text-align: center;

    color: #d9c5aa;
}

.japanese-message {
    font-size: 15px;
    letter-spacing: 1px;

    line-height: 1.8;
}

.english-message {
    margin-top: 8px;

    font-size: 21px;
    line-height: 1.5;

    color: #ead8c1;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, 0.7);
}

/* ==================================================
   ROOM 1 — КРАСИВАЯ КНОПКА
   ================================================== */

.old-enter {
    position: relative;

    margin-top: 5px;

    padding: 10px 45px;

    background:
        linear-gradient(
            to bottom,
            rgba(100, 55, 55, 0.35),
            rgba(35, 17, 20, 0.75)
        );

    color: #e8cfaa;

    border: 1px solid #a98258;

    outline: 1px solid rgba(169, 130, 88, 0.35);
    outline-offset: 4px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;
    letter-spacing: 4px;

    cursor: url("IMG_0650.png"), pointer;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.45),
        inset 0 0 10px rgba(180, 140, 100, 0.08);

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.old-enter:hover {
    background:
        linear-gradient(
            to bottom,
            rgba(125, 67, 72, 0.7),
            rgba(65, 30, 36, 0.9)
        );

    color: #fff0dc;

    box-shadow:
        0 0 15px rgba(169, 130, 88, 0.35),
        inset 0 0 12px rgba(210, 170, 120, 0.12);
}

.side-flourish {
    position: absolute;

    top: 45px;

    width: auto;
    height: 720px;

    z-index: 6;

    pointer-events: none;
}

.side-flourish-left {
    left: -25px;
}

.side-flourish-right {
    right: -25px;
}

.enter-button {
    margin: 18px auto 0;

    width: 150px;

    text-align: center;
}

.enter-button img {
    width: 100%;
    height: auto;

    display: block;
}

.welcome-gif {
    display: block;
    width: 240px;
    height: a


file.webp
WEBP · 0 KB
uto;
    margin: 10px auto 0;
}

/* ==================================================
   ДЕВУШКА В ROOM 2
   ================================================== */

.room-girl {
    position: absolute;

    left: 39%;
    bottom: 2%;

    width: 415px;

    z-index: 14;

    pointer-events: none;
}

.room-girl img {
    width: 100%;
    height: auto;

    display: block;

    filter:
        drop-shadow(0 4px 4px rgba(20, 8, 10, 0.45))
        drop-shadow(0 0 3px rgba(210, 175, 130, 0.25));
}

/* ==================================================
   МЯГКАЯ ПЫЛЬ / БЛЁСТКИ ROOM 2
   ================================================== */

#sparkles {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    overflow: hidden;

    z-index: 8;
}

.sparkle {
    position: absolute;

    width: 3px;
    height: 3px;
}   
@keyframes sparkleFloat {

    0% {
        opacity: 0;
        transform: translate(0, 15px) scale(0.4);
    }

    25% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.35;
        transform: translate(8px, -20px) scale(0.8);
    }

    75% {
        opacity: 0.55;
        transform: translate(-5px, -50px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(5px, -90px) scale(0.5);
    }

}

html,
body,
body  
{
  cursor: url('https://cdn.cursors-4u.net/css-previews/colorful-rose-5e81d196-css.webp') 0 0, auto;
}

/* ==================================================
   ROOM 2 — ВИНТАЖНЫЙ ЛИСТ / UPDATE
   ================================================== */

.room-note {
    position: absolute;

    right: 25px;
    top: 25px;

    width: 185px;
    height: 190px;

    z-index: 60;

    pointer-events: auto;
}

/* внешняя винтажная рамка */

.room-note-frame {
    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding: 9px;

    background:
        linear-gradient(
            135deg,
            #6d4b35,
            #b08a5d,
            #63442f,
            #a98258,
            #503326
        );

    border: 1px solid #d0ae7d;

    box-shadow:
        0 0 0 2px #39221f,
        0 0 0 4px #806044,
        0 5px 18px rgba(20, 8, 10, 0.55);

    position: relative;
}

/* внутренняя бумага */

.room-note-frame::before {
    content: "";

    position: absolute;

    left: 9px;
    right: 9px;
    top: 9px;
    bottom: 9px;

    background:
        linear-gradient(
            rgba(245, 225, 194, 0.94),
            rgba(222, 199, 163, 0.94)
        );

    border: 1px solid rgba(94, 57, 39, 0.7);

    box-shadow:
        inset 0 0 12px rgba(90, 50, 30, 0.18);

    pointer-events: none;
}

/* ==================================================
   ЗАГОЛОВОК ЛИСТА — PNG
   ================================================== */

.room-note-title {
    position: relative;

    z-index: 10;

    width: 100%;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.room-note-title img {
    display: block ;

    width: 100px ;
    height: 25px ;

    max-width: 100px ;
    max-height: 25px ;

    object-fit: contain;

    margin: 0 ;
    padding: 0 ;
}
/* область прокрутки */

.room-note-scroll {
    position: relative;

    z-index: 2;

    height: 132px;

    padding: 3px 10px 8px;

    box-sizing: border-box;

    overflow-y: auto;

    color: #4c302b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    line-height: 1.55;

    text-align: left;
}

/* маленькая дата */

.room-note-scroll .note-date {
    margin-top: 2px;

    text-align: center;

    color: #8a6548;

    font-size: 9px;

    letter-spacing: 1px;
}

/* обычные абзацы */

.room-note-scroll p {
    margin: 6px 0;
}

/* красивый scrollbar */

.room-note-scroll::-webkit-scrollbar {
    width: 5px;
}

.room-note-scroll::-webkit-scrollbar-track {
    background: rgba(92, 54, 42, 0.12);
}

.room-note-scroll::-webkit-scrollbar-thumb {
    background: #806044;

    border: 1px solid #5a392e;
}

/* Firefox */

.room-note-scroll {
    scrollbar-width: thin;
    scrollbar-color: #806044 rgba(92, 54, 42, 0.12);
}

/* ==================================================
   ДЕКОРАТИВНЫЕ GIF / PNG В ROOM 2
   ================================================== */

.room-decor-gifs {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 12;

    pointer-events: none;
}

.decor-gif {
    position: absolute;

    pointer-events: none;
}

.decor-gif img {
    width: 100%;
    height: auto;

    display: block;
}

/* ==================================================
   1 — СЛЕВА ВНИЗУ
   ================================================== */

.decor-gif-one {
    left: 14%;
    top: 67%;

    width: 140px;
}

/* ==================================================
   2 — СПРАВА ОТ ДЕВУШКИ
   ================================================== */

.decor-gif-two {
    left: 61%;
    top: 40%;

    width: 140px;
}

/* ==================================================
   3 — СПРАВА ВНИЗУ
   ================================================== */

.decor-gif-three {
    right: 14%;
    bottom: 12%;

    width: 160px;
}

/* ==================================================
   4 — СЛЕВА ВНИЗУ, МЕЖДУ СТОЛИКОМ И ШКАФОМ
   ================================================== */

.decor-gif-four {
    left: 17%;
    bottom: 9%;

    width: 130px;
}

/* ==================================================
   5 — СПРАВА СВЕРХУ
   ================================================== */

.decor-gif-five {
    right: 12%;
    top: 24%;

    width: 130px;
}

.left-curtain {
    position: absolute;
    left: 0;
    top: 0;

    width: 180px;
    height: 100vh;

    z-index: 40;

    pointer-events: none;
}

.left-curtain img {
    width: 100%;
    height: 100%;

    object-fit: fill;

    display: block;
}

/* ==================================================
   ПАЛАС
   ================================================== */

.room-rug {
    position: absolute;

    left: 38%;
    bottom: 1%;

    width: 430px;
    height: auto;

    z-index: 4;

    pointer-events: none;
}

/* ==================================================
   ФАРФОРОВЫЕ КУКЛЫ
   Между тумбой и шкафом
   ================================================== */

.doll-decoration {
    position: absolute;

    left: 29%;
    bottom: 5%;

    width: 120px;
    height: auto;

    z-index: 14;

    pointer-events: none;
}

/* ==================================================
   ВЕЩЬ НА ТУМБЕ
   ================================================== */

.table-object {
    position: absolute;

    left: 7%;
    bottom: 28%;

    width: 100px;
    height: auto;

    z-index: 20;

    pointer-events: none;
}

 /* =====================================================
   WARDROBE — NOTE PAPER
   ===================================================== */

.wardrobe-note {
    position: fixed;
    width: 360px;
    max-width: 80vw;

    right: 7%;
    top: 50%;

    transform: translateY(-50%);

    z-index: 99999;

    display: none;
}

.wardrobe-note.show {
    display: block;
}

.wardrobe-note-paper {
    width: 100%;
    height: auto;
    display: block;
}

.wardrobe-note-content {
    position: absolute;

    top: 18%;
    left: 18%;
    right: 18%;
    bottom: 15%;

    overflow-y: auto;

    text-align: center;

    color: #4b2929;
}

.wardrobe-note-title {
    font-family: serif;
    font-size: 21px;
    line-height: 1.3;

    margin-bottom: 8px;
}

.wardrobe-note-brand {
    font-size: 12px;
    font-style: italic;

    margin-bottom: 18px;
}

.wardrobe-note-text {
    font-family: serif;
    font-size: 14px;
    line-height: 1.7;

    text-align: left;
}

.wardrobe-note-close {
    position: absolute;

    right: 11%;
    top: 9%;

    z-index: 5;

    border: none;
    background: none;

    font-family: serif;
    font-size: 22px;

    color: #4b2929;

    cursor: pointer;

    padding: 0;
}

.wardrobe-note-close:hover {
    opacity: 0.6;
}

/* лёгкое ощущение, что карточка выбрана */

.item-card.wardrobe-selected {
    position: relative;
    z-index: 20;
}