/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

    --bege: #f8f4ef;

    --bege-escuro: #eee3d8;

    --marrom: #705548;

    --marrom-escuro: #49372f;

    --dourado: #b9966d;

    --vermelho: #a51f2b;

    --texto: #342b27;

    --cinza: #77706b;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "DM Sans",
        sans-serif;

    background:
        var(--bege);

    color:
        var(--texto);

    overflow-x: hidden;

}


button,
input {

    font-family: inherit;

}


button {

    cursor: pointer;

}


/* =========================================================
   ABERTURA
   USA SOMENTE A CAPA
========================================================= */

#opening {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

    background:

        linear-gradient(
            rgba(35,20,17,.45),
            rgba(35,20,17,.72)
        ),

        url("Foto da Capa/capa.jpeg");

    background-size: cover;

    background-position: center;

    transition:

        opacity 1s ease,

        visibility 1s ease;

}


#opening.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.opening-content {

    width: 90%;

    max-width: 700px;

}


/* =========================================================
   LAÇO
========================================================= */

.bow-wrapper {

    width: 220px;

    height: 150px;

    position: relative;

    margin: 0 auto 20px;

    cursor: pointer;

    transition: transform .3s ease;

}


.bow-wrapper:hover {

    transform: scale(1.04);

}


.bow {

    position: absolute;

    inset: 0;

}


/* LADO ESQUERDO */

.bow-left {

    position: absolute;

    width: 92px;

    height: 78px;

    left: 10px;

    top: 28px;

    background:

        linear-gradient(
            135deg,
            #c52b38,
            #941b26
        );

    border-radius:

        70% 25% 70% 25%;

    transform: rotate(-24deg);

    box-shadow:

        inset -8px -8px 15px
        rgba(0,0,0,.12),

        0 10px 25px
        rgba(0,0,0,.15);

    transition:

        transform 1s cubic-bezier(.68,-.2,.25,1.3),

        opacity .8s ease;

}


/* LADO DIREITO */

.bow-right {

    position: absolute;

    width: 92px;

    height: 78px;

    right: 10px;

    top: 28px;

    background:

        linear-gradient(
            45deg,
            #941b26,
            #c52b38
        );

    border-radius:

        25% 70% 25% 70%;

    transform: rotate(24deg);

    box-shadow:

        inset 8px -8px 15px
        rgba(0,0,0,.12),

        0 10px 25px
        rgba(0,0,0,.15);

    transition:

        transform 1s cubic-bezier(.68,-.2,.25,1.3),

        opacity .8s ease;

}


/* CENTRO */

.bow-center {

    position: absolute;

    width: 45px;

    height: 55px;

    left: 50%;

    top: 40px;

    transform: translateX(-50%);

    background:

        linear-gradient(
            90deg,
            #7e131d,
            #b5222e,
            #7e131d
        );

    border-radius: 10px;

    z-index: 5;

    transition:

        transform .7s ease,

        opacity .6s ease;

}


/* FITAS */

.ribbon-left {

    position: absolute;

    width: 58px;

    height: 90px;

    left: 58px;

    top: 73px;

    background: #a51f2b;

    clip-path:

        polygon(
            0 0,
            100% 0,
            72% 65%,
            45% 100%,
            28% 65%
        );

    transform: rotate(12deg);

    transition:

        transform 1s ease,

        opacity .8s ease;

}


.ribbon-right {

    position: absolute;

    width: 58px;

    height: 90px;

    right: 58px;

    top: 73px;

    background: #8f1923;

    clip-path:

        polygon(
            0 0,
            100% 0,
            72% 65%,
            45% 100%,
            28% 65%
        );

    transform: rotate(-12deg);

    transition:

        transform 1s ease,

        opacity .8s ease;

}


/* =========================================================
   ANIMAÇÃO DO LAÇO
========================================================= */

#opening.opening-active .bow-left {

    transform:

        translateX(-100px)
        rotate(-55deg)
        scale(.8);

    opacity: 0;

}


#opening.opening-active .bow-right {

    transform:

        translateX(100px)
        rotate(55deg)
        scale(.8);

    opacity: 0;

}


#opening.opening-active .bow-center {

    transform:

        translateX(-50%)
        scale(1.5)
        rotate(15deg);

    opacity: 0;

}


#opening.opening-active .ribbon-left {

    transform:

        translate(-80px,40px)
        rotate(35deg);

    opacity: 0;

}


#opening.opening-active .ribbon-right {

    transform:

        translate(80px,40px)
        rotate(-35deg);

    opacity: 0;

}


/* =========================================================
   TEXTO DA ABERTURA
========================================================= */

.opening-small {

    font-size: 11px;

    letter-spacing: 5px;

    margin-bottom: 15px;

}


.opening-names {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(48px,9vw,90px);

    font-weight: 400;

    line-height: 1;

}


.opening-names span {

    font-style: italic;

}


.opening-date {

    margin-top: 20px;

    font-size: 12px;

    letter-spacing: 5px;

}


.open-label {

    margin-top: 35px;

    padding: 14px 28px;

    border:
        1px solid
        rgba(255,255,255,.8);

    border-radius: 50px;

    background:
        rgba(255,255,255,.08);

    color: white;

    font-size: 12px;

    letter-spacing: 2px;

    backdrop-filter: blur(7px);

    transition: .3s;

}


.open-label:hover {

    background: white;

    color: var(--vermelho);

}


/* =========================================================
   BOTÃO DE MÚSICA
========================================================= */

.music-button {

    position: fixed;

    top: 20px;

    right: 20px;

    z-index: 800;

    width: 48px;

    height: 48px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,.94);

    color:
        var(--marrom);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.15);

    font-size: 18px;

    transition: .3s;

}


.music-button:hover {

    transform: scale(1.08);

}


.music-button.playing {

    animation:
        musicPulse 1.5s infinite;

}


@keyframes musicPulse {

    0% {

        box-shadow:
            0 0 0 0
            rgba(185,150,109,.4);

    }

    70% {

        box-shadow:
            0 0 0 12px
            rgba(185,150,109,0);

    }

    100% {

        box-shadow:
            0 0 0 0
            rgba(185,150,109,0);

    }

}


/* =========================================================
   HERO
   USA SOMENTE A FOTO DA MÃO
========================================================= */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

    background:

        linear-gradient(
            rgba(35,25,21,.25),
            rgba(35,25,21,.68)
        ),

        url("Foto da mão/mão.jpeg");

    background-size: cover;

    background-position: center;

    position: relative;

}


.hero-content {

    width: min(900px,90%);

}


.hero-label {

    font-size: 11px;

    letter-spacing: 5px;

}


.hero h1 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(62px,11vw,125px);

    font-weight: 400;

    line-height: 1;

    margin: 25px 0;

}


.hero h1 span {

    font-style: italic;

}


.hero-text {

    max-width: 650px;

    margin: auto;

    font-size: 16px;

    line-height: 1.9;

}


.hero-date {

    margin-top: 35px;

    font-size: 12px;

    letter-spacing: 5px;

}


.hero-line {

    width: 50px;

    height: 1px;

    background: white;

    margin: 35px auto 0;

}


/* =========================================================
   SEÇÕES
========================================================= */

.section {

    padding: 110px 7%;

}


.container {

    width: min(1100px,100%);

    margin: auto;

}


.center {

    text-align: center;

}


.eyebrow {

    color:
        var(--dourado);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 4px;

}


.section-title {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(40px,5vw,65px);

    font-weight: 400;

    line-height: 1.15;

    margin: 18px 0 30px;

}


.section-text {

    max-width: 650px;

    margin: auto;

    color:
        var(--cinza);

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   MENSAGEM
========================================================= */

.message {

    background:
        var(--bege);

}


.heart {

    margin-top: 40px;

    color:
        var(--dourado);

    font-size: 25px;

}


/* =========================================================
   CONTAGEM
========================================================= */

.countdown {

    background:
        var(--bege-escuro);

}


.countdown-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 18px;

    max-width: 800px;

    margin: 50px auto 0;

}


.count-box {

    padding: 30px 15px;

    background:
        rgba(255,255,255,.65);

    border-radius: 15px;

}


.count-box strong {

    display: block;

    font-family:
        "Playfair Display",
        serif;

    font-size: 48px;

    font-weight: 400;

    color:
        var(--marrom);

}


.count-box span {

    display: block;

    margin-top: 5px;

    color:
        var(--cinza);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 2px;

}


/* =========================================================
   EVENTO
========================================================= */

.event {

    background: white;

}


.event-card {

    max-width: 750px;

    margin: 50px auto 0;

    padding: 55px 30px;

    background:
        var(--bege);

    border-radius: 25px;

    box-shadow:
        0 20px 60px
        rgba(70,50,40,.08);

}


.event-icon {

    font-size: 48px;

    margin-bottom: 20px;

}


.event-card h3 {

    font-family:
        "Playfair Display",
        serif;

    font-size: 40px;

    font-weight: 400;

    margin-bottom: 25px;

}


.event-card p {

    color:
        var(--cinza);

    margin: 8px 0;

}


.event-date {

    color:
        var(--texto) !important;

    font-weight: 600;

    font-size: 18px;

}


.event-divider {

    width: 45px;

    height: 1px;

    background:
        var(--dourado);

    margin: 28px auto;

}


/* =========================================================
   HISTÓRIA
========================================================= */

.story {

    background:
        var(--bege);

}


.timeline {

    max-width: 750px;

    margin: 55px auto 0;

    text-align: left;

    border-left:
        1px solid
        var(--dourado);

    padding-left: 35px;

}


.timeline-item {

    position: relative;

    margin-bottom: 50px;

}


.timeline-item::before {

    content: "";

    position: absolute;

    left: -41px;

    top: 5px;

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background:
        var(--dourado);

    border:
        4px solid
        var(--bege);

}


.timeline-year {

    display: inline-block;

    padding: 5px 12px;

    background:
        var(--dourado);

    color: white;

    border-radius: 20px;

    font-size: 11px;

}


.timeline-item h3 {

    font-family:
        "Playfair Display",
        serif;

    font-size: 28px;

    font-weight: 400;

    margin: 12px 0 8px;

}


.timeline-item p {

    color:
        var(--cinza);

    line-height: 1.8;

}


/* =========================================================
   PRESENTES
========================================================= */

.gifts-section {

    background: white;

}


.gift-options {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 25px;

    max-width: 900px;

    margin: 55px auto 0;

}


.gift-option {

    padding: 45px 35px;

    border-radius: 25px;

    background:
        var(--bege);

    transition: .35s;

}


.gift-option:hover {

    transform: translateY(-7px);

    box-shadow:
        0 20px 50px
        rgba(70,50,40,.10);

}


.gift-icon {

    font-size: 50px;

    margin-bottom: 20px;

}


.gift-option h3 {

    font-family:
        "Playfair Display",
        serif;

    font-size: 31px;

    font-weight: 400;

    margin-bottom: 15px;

}


.gift-option p {

    color:
        var(--cinza);

    line-height: 1.7;

    font-size: 14px;

}


.gift-button {

    margin-top: 25px;

    padding: 13px 24px;

    border: none;

    border-radius: 50px;

    background:
        var(--marrom);

    color: white;

    font-size: 13px;

}


.gift-button:hover {

    background:
        var(--marrom-escuro);

}


/* =========================================================
   CONFIRMAÇÃO
========================================================= */

.confirmation {

    background:
        var(--bege-escuro);

}


.confirmation-form {

    width: min(460px, 100%);

    margin: 40px auto 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.confirmation-form input {

    width: 100%;

    height: 54px;

    padding: 0 18px;

    border: 1px solid #d8c4b1;

    border-radius: 12px;

    background: rgba(255, 255, 255, .65);

    color: var(--texto);

    outline: none;

    font-size: 14px;

    transition: .3s;

}


.confirmation-form input::placeholder {

    color: #8d8179;

}


.confirmation-form input:focus {

    border-color: var(--dourado);

    background: white;

    box-shadow:
        0 5px 20px
        rgba(112, 85, 72, .06);

}


.confirmation-form button {

    width: 100%;

    height: 54px;

    margin-top: 5px;

    border: none;

    border-radius: 50px;

    background: var(--marrom);

    color: white;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1.5px;

    transition: .3s;

}


.confirmation-form button:hover {

    background: var(--marrom-escuro);

    transform: translateY(-2px);

}

.confirmation-form input {

    width: 100%;

    padding: 17px 18px;

    border:
        1px solid #ddd;

    border-radius: 10px;

    background: white;

    outline: none;

    font-size: 14px;

}


.confirmation-form input:focus {

    border-color:
        var(--dourado);

}


.confirmation-form button {

    width: 100%;

    margin-top: 15px;

    padding: 17px;

    border: none;

    border-radius: 50px;

    background:
        var(--marrom);

    color: white;

    font-size: 14px;

}


.confirmation-form button:hover {

    background:
        var(--marrom-escuro);

}


/* =========================================================
   MODAIS
========================================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(30,23,19,.72);

    backdrop-filter: blur(8px);

    opacity: 0;

    visibility: hidden;

    transition: .3s;

}


.modal.active {

    opacity: 1;

    visibility: visible;

}


.modal-content {

    position: relative;

    width: min(500px,100%);

    max-height: 90vh;

    overflow-y: auto;

    padding: 45px 30px;

    background: white;

    border-radius: 25px;

    text-align: center;

    transform: translateY(25px);

    transition: .3s;

}


.modal.active .modal-content {

    transform: translateY(0);

}


.close-modal {

    position: absolute;

    top: 15px;

    right: 18px;

    width: 35px;

    height: 35px;

    border: none;

    border-radius: 50%;

    background:
        var(--bege);

    font-size: 18px;

}


.modal-icon {

    font-size: 45px;

    margin-bottom: 15px;

}


.modal-content h3 {

    font-family:
        "Playfair Display",
        serif;

    font-size: 35px;

    font-weight: 400;

    margin-bottom: 12px;

}


.modal-text {

    color:
        var(--cinza);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   QR CODE
========================================================= */

#qrcode {

    display: flex;

    justify-content: center;

    margin: 25px auto;

}


#qrcode img {

    padding: 12px;

    background: white;

    border-radius: 12px;

}


.pix-key-box {

    padding: 14px;

    background:
        var(--bege);

    border-radius: 10px;

    margin-top: 15px;

    word-break: break-all;

    font-size: 13px;

}


.copy-pix {

    margin-top: 12px;

    padding: 11px 20px;

    border: none;

    border-radius: 25px;

    background:
        var(--marrom);

    color: white;

}


/* =========================================================
   SUGESTÕES
========================================================= */

.suggestions {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 25px;

}


.suggestion {

    padding: 15px;

    background:
        var(--bege);

    border-radius: 12px;

    font-size: 14px;

    text-align: left;

}


/* =========================================================
   FINAL
========================================================= */

.final {

    padding: 120px 7%;

    background:
        var(--marrom-escuro);

    color: white;

}


.final-rings {

    font-size: 50px;

}


.final h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(42px,6vw,70px);

    font-weight: 400;

    margin: 25px 0;

}


.final p {

    color: #ddd;

}


.final-names {

    margin-top: 12px;

    font-family:
        "Playfair Display",
        serif;

    font-size: 36px;

    color: #d8b895;

}


footer {

    padding: 25px;

    background: #241c18;

    color: #aaa;

    text-align: center;

    font-size: 11px;

}


/* =========================================================
   ANIMAÇÃO
========================================================= */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}


.reveal.show {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:700px) {

    .section {

        padding: 80px 6%;

    }


    .opening-names {

        font-size: 55px;

    }


    .hero h1 {

        font-size: 62px;

    }


    .countdown-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .count-box strong {

        font-size: 38px;

    }


    .gift-options {

        grid-template-columns:
            1fr;

    }


    .timeline {

        padding-left: 25px;

    }


    .timeline-item::before {

        left: -31px;

    }

}


@media(max-width:420px) {

    .opening-names {

        font-size: 46px;

    }


    .hero h1 {

        font-size: 50px;

    }


    .bow-wrapper {

        transform: scale(.8);

    }


    .suggestions {

        grid-template-columns:
            1fr;

    }

}