* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 2000px;
    perspective-origin: center center;
    padding: 0;
    margin: 0;
    position: relative;
}

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Previne cortes nas laterais durante zoom no mobile */
    position: relative;
}

/* Título estilizado do convite - Desktop (layout horizontal lado a lado) */
/* EDITAR AQUI: Os valores abaixo são para desktop (telas maiores que 768px) */
.invitation-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1400px;
    color: #8b6f47;
    z-index: 10;
    padding: 0 40px;
    pointer-events: none; /* Não interfere com cliques no convite */
}

.title-text {
    font-family: 'Farmhouse', 'Merriweather', serif; /* Farmhouse com fallback */
    /* EDITAR AQUI: Ajuste font-size para alterar tamanho (valores maiores = texto maior) */
    font-size: 1.8rem; /* Aumentado para desktop - valores comuns: 1.5rem, 1.8rem, 2.0rem, 2.5rem */
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #6b5b47;
    white-space: nowrap;
}

.title-names {
    font-family: 'Signatura Monoline Script Regular', 'Sacramento', 'Dancing Script', cursive; /* Signatura com fallback */
    /* EDITAR AQUI: Ajuste font-size para alterar tamanho dos nomes (valores maiores = texto maior) */
    font-size: 3.5rem; /* Aumentado para desktop - valores comuns: 3.0rem, 3.5rem, 4.0rem, 4.5rem */
    font-weight: 400;
    color: #8b6f47;
    line-height: 1.2;
    white-space: nowrap;
}

.title-names strong {
    font-family: 'Simple Handmade', 'Caveat', cursive; /* Simple Handmade com fallback */
    font-weight: 700;
    color: #6b4e37;
}

.invitation-wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    /* Proporção similar a um convite (largura maior que altura) */
    aspect-ratio: 4 / 3;
    height: auto;
    transform-style: preserve-3d;
    transform-origin: center center;
    /* EDITAR AQUI: Ajuste a duração (valor em segundos) para alterar a velocidade do zoom no mobile */
    /* Valores maiores = zoom mais lento (ex: 2.5s, 3.0s, 3.5s) */
    /* Valores menores = zoom mais rápido (ex: 1.0s, 1.5s, 2.0s) */
    transition: transform 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Alça que segura a capa - largura inicial de 50% (2/4 da largura da capa) */
.ribbon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 100;
    /* Animação padrão: usada quando remove .pulling (fechar convite) - manter rápido */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.ribbon-img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Quando a capa está aberta, alça sobe e sai completamente da tela com movimento natural */
/* EDITAR AQUI: Ajuste os valores abaixo para alterar a velocidade da animação inicial (quando abre) */
/* transform: duração da animação de movimento (3.5s = mais devagar, 2.0s = mais rápido) */
/* opacity: duração da animação de opacidade (3.0s = mais devagar, 2.0s = mais rápido) */
.ribbon.pulling {
    transform: translate(-50%, -300vh) rotate(-8deg);
    opacity: 0;
    /* Animação inicial: mais lenta e suave para o primeiro clique (abrir) */
    transition: transform 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 3.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Container da capa - largura inicial 50% (2/4), expande para 100% (4/4) quando aberto */
.cover-container {
    position: relative;
    width: 50%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: width 0.4s ease;
}

.cover-container.opened {
    width: 100%;
}

/* Fundo que aparece quando a capa abre */
.cover-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0s ease;
}

.cover-container.opened .cover-background {
    opacity: 1;
}

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

/* Convite atrás do tudo que você precisa saber */
.cover-convite {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50%;
    z-index: 0.5;
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 0s ease;
    margin-bottom: 45px;
    cursor: pointer;
}

.cover-container.opened .cover-convite {
    opacity: 1;
}

/* Estado destacado - centro da tela */
.cover-convite.highlighted {
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 1001;
    margin-bottom: 0;
}

/* Estado removido - sai da tela */
.cover-convite.removed {
    transform: translate(150vw, -150vh) rotate(45deg);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 1.2s ease-in-out;
}

.convite-img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.3s ease;
    /* Mantém qualidade máxima da imagem sem transformações que causam blur */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cover-convite.highlighted .convite-img {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

/* Tudo que você precisa saber atrás do receptivos */
.cover-tudo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 43%;
    z-index: 1;
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 0s ease;
    margin-bottom: 45px;
    cursor: pointer;
}

.cover-container.opened .cover-tudo {
    opacity: 1;
}

/* Estado destacado - centro da tela */
.cover-tudo.highlighted {
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 1001;
    margin-bottom: 0;
}

/* Estado removido - sai da tela */
.cover-tudo.removed {
    transform: translate(150vw, -150vh) rotate(45deg);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 1.2s ease-in-out;
}

.tudo-img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.3s ease;
    /* Mantém qualidade máxima da imagem sem transformações que causam blur */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cover-tudo.highlighted .tudo-img {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

/* Receptivos atrás da máscara e acima do tudo */
.cover-receptivos {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 37%;
    z-index: 2;
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.33, 1, 0.68, 1), opacity 0s ease;
    margin-bottom: 45px;
    cursor: pointer;
}

.cover-container.opened .cover-receptivos {
    opacity: 1;
}

/* Estado destacado - centro da tela */
.cover-receptivos.highlighted {
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    z-index: 1001;
    margin-bottom: 0;
}

/* Estado removido - sai da tela com efeito de jogar papel fora */
.cover-receptivos.removed {
    transform: translate(150vw, -150vh) rotate(45deg);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 1.2s ease-in-out;
}

.receptivos-img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.3s ease;
    /* Mantém qualidade máxima da imagem sem transformações que causam blur */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cover-receptivos.highlighted .receptivos-img {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

/* Overlay destacado - removido (invisível) */
.receptivos-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.receptivos-overlay.visible {
    opacity: 0;
    pointer-events: none;
}

/* Máscara na parte inferior do fundo */
.cover-mask {
    position: absolute;
    bottom: 0;
    left: 51%;
    transform: translateX(-50%);
    width: 65%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.1s ease;
    bottom: -45px;
}

.cover-container.opened .cover-mask {
    opacity: 1;
}

.mask-img {
    width: 100%;
    height: auto;
    display: block;

}

/* Cada aba representa 50% do container */
.cover-half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
}

.cover-left {
    left: 0;
    transform-origin: right center;
}

.cover-right {
    right: 0;
    transform-origin: left center;
}

/* Face frontal da capa (capa.png) */
.cover-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    z-index: 2;
}

/* Face traseira da capa (fundo.png) */
.cover-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    z-index: 1;
    opacity: 0;
}

/* Imagens da capa */
.cover-img {
    width: 200%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* Estado fechado: mostra centro da imagem (do 25% ao 75%) */
.cover-container.closed .cover-left .cover-front .cover-img {
    transform: translateX(-25%);
}

.cover-container.closed .cover-right .cover-front .cover-img {
    transform: translateX(-25%);
}

.cover-container.closed .cover-left .cover-front {
    transform: rotateY(0deg);
    transition: transform 0.4s ease, z-index 0.4s ease;
    z-index: 5;
}

.cover-container.closed .cover-right .cover-front {
    transform: rotateY(0deg);
    transition: transform 0.4s ease, z-index 0.4s ease;
    z-index: 5;
}

.cover-container.closed .cover-back {
    opacity: 0;
    transition: opacity 0.2s 0.3s ease;
}

/* Estado aberto - cada aba mostra 50% da imagem e gira para revelar fundo.png */
.cover-container.opened .cover-left .cover-front .cover-img {
    transform: translateX(0%);
}

.cover-container.opened .cover-right .cover-front .cover-img {
    transform: translateX(-50%);
}

.cover-container.opened .cover-left .cover-front {
    transform: rotateY(-180deg);
    transition: transform 0.4s ease, z-index 0.6s;
    z-index: 1;
    box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, 0.25);
}

.cover-container.opened .cover-right .cover-front {
    transform: rotateY(180deg);
    transition: transform 0.4s ease, z-index 0.6s;
    z-index: 1;
    box-shadow: 1.5rem 2rem 3rem rgba(0, 0, 0, 0.25);
}

.cover-container.opened .cover-back {
    opacity: 1;
    transition: opacity 0.3s 0.5s ease;
}

/* Verso (fundo.png) - mostra imagem completa quando aberto */
.cover-left .cover-back .cover-img {
    transform: translateX(0%);
}

.cover-right .cover-back .cover-img {
    transform: translateX(-50%);
}

.cover-container.opened .cover-left .cover-back .cover-img {
    transform: translateX(0%);
}

.cover-container.opened .cover-right .cover-back .cover-img {
    transform: translateX(-50%);
}

/* ============================================
   RESPONSIVIDADE PARA CELULAR
   ============================================ */
/* 
   Ajustes para manter a mesma proporção visual do desktop no celular
   Desktop: max-width 1200px, usa margin-bottom: 45px e bottom: -45px
   Proporção: 45px / 1200px = 3.75% do container
   No mobile, mantemos essa mesma proporção usando unidades relativas
*/

/* Media query para dispositivos móveis (telas menores que 768px) */
@media screen and (max-width: 768px) {
    /* Título no mobile - layout vertical (um embaixo do outro) */
    .invitation-title {
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        display: flex !important; /* Força flex mas muda direção */
        flex-direction: column !important; /* Um embaixo do outro */
        align-items: center !important; /* Centraliza */
        justify-content: center !important;
        text-align: center;
        width: 90%;
        padding: 0 15px;
    }
    
    .title-text {
        display: block !important; /* Garante que fica embaixo */
        font-size: 0.9rem;
        letter-spacing: 1.5px;
        margin-bottom: 8px; /* Espaço entre os textos */
    }
    
    .title-names {
        display: block !important; /* Garante que fica embaixo */
        font-size: 1.8rem;
        line-height: 1.2;
        margin-bottom: 0;
    }
    
    /* Ajusta o convite para não ficar em cima do título após zoom */
    /* EDITAR AQUI: Ajuste o valor margin-top para aproximar ou afastar o convite do título */
    /* Valores menores = convite mais próximo do título (ex: 80px, 100px, 120px) */
    /* Valores maiores = convite mais distante do título (ex: 140px, 160px, 180px) */
    /* IMPORTANTE: Mantenha distância suficiente para o título não sobrepor o convite após zoom */
    /* Recomendado: entre 80px e 120px para uma distância segura mas próxima */
    .invitation-wrapper {
        margin-top: 30px; /* Espaço para o título não sobrepor o convite após zoom - ajuste este valor */
    }
    
    /* ============================================
       TAMANHO INICIAL DO CONVITE NO CELULAR (ANTES DE ABRIR)
       ============================================ */
    /* 
       EDITAR AQUI: Ajuste o valor abaixo para alterar o tamanho do convite inicial no celular
       O valor atual é width: 95% (significa 95% da largura da tela)
       
       Como ajustar:
       - Valores maiores = convite maior (ex: 98% = muito grande, 95% = grande, 92% = médio-grande)
       - Valores menores = convite menor (ex: 85% = pequeno, 90% = médio)
       
       IMPORTANTE: Não use valores acima de 98% para evitar cortes nas bordas
       Recomendado: entre 90% e 98%
    */
    .invitation-wrapper {
        width: 90% !important; /* Aumenta o tamanho inicial no celular (padrão desktop: 90%) */
        /* margin-top já definido acima para espaçar do título */
    }
    
    /* 
       Opcional: Se quiser aumentar ainda mais, você também pode ajustar o cover-container
       Mas geralmente não é necessário - ajustar apenas o invitation-wrapper já é suficiente
    */
    /* 
       EDITAR AQUI: Ajuste os valores abaixo para alterar o espaçamento no mobile
       Valores em vw (viewport width) mantêm a proporção visual do desktop
       Ajuste se necessário: valores menores = menos espaço, valores maiores = mais espaço
    */
    
    /* Convite - margin-bottom proporcional ao desktop */
    .cover-convite {
        margin-bottom: 4vw; /* Proporcional ao desktop (45px em 1200px ≈ 3.75%, usando 4vw para ajuste fino) */
    }
    
    /* Tudo que você precisa saber - margin-bottom proporcional */
    .cover-tudo {
        margin-bottom: 4vw;
    }
    
    /* Receptivos - margin-bottom proporcional */
    .cover-receptivos {
        margin-bottom: 4vw;
    }
    
    /* Máscara - bottom negativo proporcional */
    .cover-mask {
        bottom: -4vw;
    }
}

/* Media query para celulares pequenos (telas menores que 480px) */
@media screen and (max-width: 480px) {
    /* Ajustes finos para telas muito pequenas - pode aumentar ligeiramente se necessário */
    .cover-convite {
        margin-bottom: 4.5vw;
    }
    
    .cover-tudo {
        margin-bottom: 4.5vw;
    }
    
    .cover-receptivos {
        margin-bottom: 4.5vw;
    }
    
    .cover-mask {
        bottom: -4.5vw;
    }
}

/* ============================================
   ZOOM E AJUSTES PARA MOBILE APÓS ABERTURA
   ============================================ */

/* Zoom no invitation-wrapper para mobile - mostra apenas 2.2/4 (55%) da largura */
/* EDITAR AQUI: Ajuste o valor scale para alterar o nível de zoom */
/* scale maior = mais zoom (valores comuns: 1.5x, 1.82x, 2.0x) */
@media screen and (max-width: 768px) {
    .invitation-wrapper.zoomed {
        /* Zoom para mostrar 2.2/4 = 55% da largura (scale = 4/2.2 ≈ 1.82x) */
        /* Força renderização de alta qualidade usando translate3d para aceleração GPU */
        -webkit-transform: translate3d(0, 0, 0) scale(1.82);
        transform: translate3d(0, 0, 0) scale(1.82);
    }
    
    /* Aumentar tamanho das imagens destacadas no mobile mantendo proporção */
    /* EDITAR AQUI: Ajuste width e max-width para alterar o tamanho das imagens destacadas */
    /* width maior = imagens maiores (valores comuns: 60%, 65%, 70%, 75%) */
    /* max-width menor = mais espaço nas laterais (valores comuns: 75vw, 80vw, 85vw) */
    /* Reduzido para evitar corte das bordas - especialmente importante com zoom (1.82x) aplicado */
    /* O box-shadow também precisa ser considerado no cálculo */
    .cover-convite.highlighted {
        width: 60% !important; /* Reduzido para evitar corte das bordas */
        max-width: 80vw !important; /* Reduzido para garantir espaço nas laterais (compensa zoom + box-shadow) */
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .cover-tudo.highlighted {
        width: 60% !important; /* Reduzido para evitar corte das bordas */
        max-width: 80vw !important; /* Reduzido para garantir espaço nas laterais (compensa zoom + box-shadow) */
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .cover-receptivos.highlighted {
        width: 60% !important; /* Reduzido para evitar corte das bordas */
        max-width: 80vw !important; /* Reduzido para garantir espaço nas laterais (compensa zoom + box-shadow) */
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    /* Reduzir box-shadow no mobile para evitar cortes nas bordas */
    .cover-convite.highlighted .convite-img,
    .cover-tudo.highlighted .tudo-img,
    .cover-receptivos.highlighted .receptivos-img {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Reduzido de 15px 50px para evitar cortes */
    }
}