/* ==================================================
   ОБЩИЕ НАСТРОЙКИ
================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    background: #e4baec;

    overflow: hidden;
}

body {
    font-family: "Rubik Bubbles", system-ui;
}

h1,
h2,
p {
    margin: 0;
}


/* ==================================================
   START.HTML
================================================== */

.start-page {
    width: 100vw;
    height: 100vh;

    position: relative;
}


/* ---------- Основной блок ---------- */

.start {
    position: absolute;

    width: 900px;
    min-height: 200px;

    top: 50%;
    left: 50%;

    padding: 30px 50px;

    border-radius: 30px;

    background: #e7dbdb;

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

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

    animation: startAppear 0.9s ease-out forwards;
}

.start h1 {
    font-size: 20px;
    line-height: 1.35;
    text-align: center;

    color: #ff4d6d;
}


/* ---------- GIF ---------- */

.gifka {
    position: absolute;

    width: 180px;
    height: 180px;

    top: 12%;
    left: 12%;

    animation: gifAppear 0.9s ease-out 0.2s both;
}

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

    object-fit: contain;
}


/* ---------- Идём дальше ---------- */

.fafa {
    position: absolute;

    width: 300px;
    height: 100px;

    top: 72%;
    right: 12%;

    border-radius: 30px;

    background: #e7dbdb;

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

    animation: fafaAppear 0.9s ease-out 0.4s both;
}

.fafa h1 {
    font-size: 20px;
    color: #ff4d6d;
}


/* ---------- Кнопка ---------- */

.gaga {
    position: absolute;

    width: 200px;
    height: 100px;

    top: 82%;
    right: 12%;

    border-radius: 30px;

    background: #e7dbdb;

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

    animation: gagaAppear 0.9s ease-out 0.6s both;
}

.pogna {
    width: 100px;
    height: 60px;

    border: none;
    background: none;

    font-family: "Rubik Bubbles", system-ui;
    font-size: 25px;
    font-weight: 400;

    color: #ff4d6d;

    cursor: pointer;

    transition: transform 0.2s ease;
}

.pogna:hover {
    transform: scale(1.15) rotate(-3deg);
}


/* ==================================================
   INDEX.HTML
================================================== */

.index-page {
    width: 100vw;
    height: 100vh;
}

.index-page .page {
    width: 100%;
    height: 100%;

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

    gap: 50px;
}


/* ---------- Форма ---------- */

.vst {
    width: 600px;
    min-height: 400px;

    padding: 35px;

    border-radius: 30px;

    background: #e7dbdb;

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

    animation: formEnter 1s ease-out 0.15s both;
}

.vst form {
    width: 100%;
    text-align: center;
}

.text-content h1 {
    margin-bottom: 15px;

    font-size: 20px;
    line-height: 1.35;

    color: #ff4d6d;
}


/* ---------- Кнопки ---------- */

.buttons {
    margin-top: 35px;

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

    gap: 20px;

    position: relative;
}

.buttons button {
    width: 120px;
    height: 50px;

    border: none;
    background: none;

    font-family: "Rubik Bubbles", system-ui;
    font-size: 30px;
    font-weight: 400;

    color: #ff4d6d;

    cursor: pointer;
}

#no {
    position: relative;

    transition: transform 0.15s ease-out;
}


/* ---------- Фотографии ---------- */

.photo {
    width: 200px;
    height: 300px;

    object-fit: cover;

    border-radius: 20px;
}

.photo-left {
    animation: photoLeftEnter 1s ease-out 0.05s both;
}

.photo-right {
    animation: photoRightEnter 1s ease-out 0.05s both;
}


/* ==================================================
   СЦЕНА "ПРАВИЛЬНЫЙ ВЫБОР"
================================================== */

.choice-text {
    position: absolute;

    top: 8%;
    left: 50%;

    z-index: 20;

    transform: translateX(-50%);

    font-size: 42px;

    color: #ff4d6d;

    opacity: 0;

    pointer-events: none;
}

.hearts {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 15;

    pointer-events: none;
}

.hearts span {
    position: absolute;

    font-size: 35px;

    opacity: 0;
}


/* ---------- Форма падает ---------- */

.choice-made .vst {
    animation: formKissExit 1.4s ease-in forwards;
}


/* ---------- Фотографии сходятся ---------- */

.choice-made .photo-left {
    animation: photoKissLeft 1.4s ease-in-out forwards;
}

.choice-made .photo-right {
    animation: photoKissRight 1.4s ease-in-out forwards;
}


/* ---------- Надпись ---------- */

.choice-made .choice-text {
    animation: choiceTextAppear 0.8s ease-out 0.7s forwards;
}


/* ---------- Сердечки ---------- */

.choice-made .hearts span:nth-child(1) {
    animation: heartFly1 1.8s ease-out 0.4s forwards;
}

.choice-made .hearts span:nth-child(2) {
    animation: heartFly2 1.8s ease-out 0.5s forwards;
}

.choice-made .hearts span:nth-child(3) {
    animation: heartFly3 1.8s ease-out 0.6s forwards;
}

.choice-made .hearts span:nth-child(4) {
    animation: heartFly4 1.8s ease-out 0.7s forwards;
}

.choice-made .hearts span:nth-child(5) {
    animation: heartFly5 1.8s ease-out 0.8s forwards;
}

.choice-made .hearts span:nth-child(6) {
    animation: heartFly6 1.8s ease-out 0.9s forwards;
}

.choice-made .hearts span:nth-child(7) {
    animation: heartFly7 1.8s ease-out 1s forwards;
}


/* ==================================================
   2INDEX.HTML
================================================== */

.evening-page {
    width: 100vw;
    height: 100vh;

    position: relative;
}


/* ---------- Заголовок ---------- */

.evening-title {
    position: absolute;

    top: 5%;
    left: 50%;

    transform: translateX(-50%);

    opacity: 0;

    animation: eveningTitleAppear 0.8s ease-out 0.2s forwards;
}

.evening-title h1 {
    font-size: 30px;

    color: #ff4d6d;

    white-space: nowrap;
}


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

.vecher {
    position: absolute;

    top: 50%;
    left: 50%;

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

    display: flex;
    flex-direction: column;

    gap: 25px;
}


/* Верхний и нижний ряд */

.perv,
.vtor {
    display: flex;

    justify-content: center;

    gap: 25px;
}


/* ---------- Карточка ---------- */

.card {
    position: relative;

    width: 400px;
    height: 200px;

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    opacity: 0;
}


/* ---------- Картинка ---------- */

.kartochki {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        filter 0.35s ease,
        transform 0.35s ease;
}


/* ---------- Затемнение + текст ---------- */

.card-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    padding: 25px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;
}


/* ---------- Заголовок карточки ---------- */

.card-overlay h2 {
    margin-bottom: 10px;

    font-size: 28px;

    color: white;
}


/* ---------- Текст карточки ---------- */

.card-overlay p {
    font-family: Arial, sans-serif;

    font-size: 16px;
    line-height: 1.4;

    color: white;
}


/* ---------- Наведение ---------- */

.card:hover .kartochki {
    filter: brightness(45%);

    transform: scale(1.05);
}

.card:hover .card-overlay {
    opacity: 1;
}


/* ==================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ КАРТОЧЕК
================================================== */

.card-1 {
    animation: cardLeftAppear 0.8s ease-out 0.3s forwards;
}

.card-2 {
    animation: cardRightAppear 0.8s ease-out 0.5s forwards;
}

.card-3 {
    animation: cardLeftAppear 0.8s ease-out 0.7s forwards;
}

.card-4 {
    animation: cardRightAppear 0.8s ease-out 0.9s forwards;
}


/* ==================================================
   НИЖНИЙ ВОПРОС
================================================== */

.final-choice {
    position: absolute;

    left: 50%;
    bottom: 5%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 10px;

    opacity: 0;

    animation: finalChoiceAppear 0.8s ease-out 1.4s forwards;
}

.final-choice h1 {
    font-size: 25px;

    color: #ff4d6d;
}


/* ---------- Кнопка "Да" ---------- */

#everythingYes {
    width: 120px;
    height: 50px;

    border: none;
    border-radius: 15px;

    background: #e7dbdb;

    font-family: "Rubik Bubbles", system-ui;
    font-size: 20px;

    color: #ff4d6d;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

#everythingYes:hover {
    transform: scale(1.1);

    background: #f0dede;
}


/* ==================================================
   КОНФЕТТИ
================================================== */

#confetti {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    z-index: 100;
}


/* ==================================================
   START — АНИМАЦИИ
================================================== */

@keyframes startAppear {

    from {
        opacity: 0;
        transform: translate(-50%, -70%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}


@keyframes gifAppear {

    from {
        opacity: 0;
        transform: translate(-100px, -100px) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) rotate(0);
    }
}


@keyframes fafaAppear {

    from {
        opacity: 0;
        transform: translate(100px, 100px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}


@keyframes gagaAppear {

    from {
        opacity: 0;
        transform: translate(100px, 100px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}


/* ==================================================
   START — УХОД
================================================== */

@keyframes startExit {

    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    to {
        opacity: 0;
        transform: translate(-150%, -50%) rotate(-8deg);
    }
}


@keyframes gifExit {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(300px, -200px) rotate(30deg);
    }
}


@keyframes fafaExit {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(300px, 100px) rotate(10deg);
    }
}


@keyframes gagaExit {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(400px, 200px) rotate(20deg);
    }
}


/* ==================================================
   INDEX — ПОЯВЛЕНИЕ
================================================== */

@keyframes formEnter {

    from {
        opacity: 0;
        transform: translateY(-300px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes photoLeftEnter {

    from {
        opacity: 0;
        transform: translateX(-300px) rotate(-15deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(-3deg);
    }
}


@keyframes photoRightEnter {

    from {
        opacity: 0;
        transform: translateX(300px) rotate(15deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(3deg);
    }
}


/* ==================================================
   ПОЦЕЛУЙ
================================================== */

@keyframes formKissExit {

    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    60% {
        opacity: 1;
        transform: translateY(100px) scale(0.95);
    }

    100% {
        opacity: 0;
        transform: translateY(600px) scale(0.8);
    }
}


@keyframes photoKissLeft {

    0% {
        transform: translateX(0) rotate(-3deg);
    }

    50% {
        transform: translateX(130px) rotate(2deg);
    }

    100% {
        transform: translateX(150px) rotate(0);
    }
}


@keyframes photoKissRight {

    0% {
        transform: translateX(0) rotate(3deg);
    }

    50% {
        transform: translateX(-130px) rotate(-2deg);
    }

    100% {
        transform: translateX(-150px) rotate(0);
    }
}


/* ==================================================
   НАДПИСЬ "ПРАВИЛЬНЫЙ ВЫБОР"
================================================== */

@keyframes choiceTextAppear {

    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px) scale(0.7);
    }

    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(10px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}


/* ==================================================
   СЕРДЕЧКИ
================================================== */

@keyframes heartFly1 {

    from {
        opacity: 0;
        transform: translate(-20px, 20px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(-250px, -250px) scale(1.2);
    }
}


@keyframes heartFly2 {

    from {
        opacity: 0;
        transform: translate(20px, 20px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(200px, -280px) scale(1.3);
    }
}


@keyframes heartFly3 {

    from {
        opacity: 0;
        transform: translate(0, 30px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(-100px, -350px) scale(1);
    }
}


@keyframes heartFly4 {

    from {
        opacity: 0;
        transform: translate(0, 20px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(120px, -220px) scale(1.4);
    }
}


@keyframes heartFly5 {

    from {
        opacity: 0;
        transform: translate(0, 20px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(-180px, -150px) scale(0.9);
    }
}


@keyframes heartFly6 {

    from {
        opacity: 0;
        transform: translate(0, 20px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(250px, -150px) scale(1.1);
    }
}


@keyframes heartFly7 {

    from {
        opacity: 0;
        transform: translate(0, 20px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(40px, -330px) scale(1.2);
    }
}


/* ==================================================
   2INDEX — ЗАГОЛОВОК
================================================== */

@keyframes eveningTitleAppear {

    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


/* ==================================================
   2INDEX — КАРТОЧКИ
================================================== */

@keyframes cardLeftAppear {

    from {
        opacity: 0;
        transform: translateX(-500px) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}


@keyframes cardRightAppear {

    from {
        opacity: 0;
        transform: translateX(500px) rotate(8deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}


/* ==================================================
   2INDEX — НИЖНИЙ БЛОК
================================================== */

@keyframes finalChoiceAppear {

    from {
        opacity: 0;
        transform: translateX(-50%) translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}