/* Design System for Convite Cerimônia do Jaleco - Updated with Assets */
@import url('https://fonts.googleapis.com/css2?family=Kalnia:wght@400;700&family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&family=Italianno&display=swap');

:root {
    --verde-enfermagem: #1F5C46;
    --verde-escuro: #143B2D;
    --dourado-principal: #C9A24A;
    --dourado-claro: #E4C878;
    --creme-fundo: #F7F2EA;
    --off-white: #FFFDF8;
    --bege-acetinado: #EDE4D7;
    --marrom-sombra: #8A6B4A;
    
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.1);
    --shadow-premium: 0 20px 50px rgba(20, 59, 45, 0.15);
    
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--creme-fundo);
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    color: var(--verde-escuro);
}

/* Background Handling */
.app-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Responsive Backgrounds */
@media (min-width: 769px) {
    .bg-mobile { display: none; }
    .bg-desktop { display: block; }
}

@media (max-width: 768px) {
    .bg-mobile { display: block; }
    .bg-desktop { display: none; }
}

/* Cover Section */
.section-cover {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition-slow);
    z-index: 10;
}

.section-cover.hidden {
    opacity: 0;
    transform: scale(1.1);
    pointer-events: none;
}

.title-group {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.img-title {
    max-width: 80%;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.img-convite { max-width: 400px; }
.img-sub { max-width: 350px; }
.img-year { max-width: 250px; }

@media (max-width: 768px) {
    .img-convite { max-width: 250px; }
    .img-sub { max-width: 220px; }
    .img-year { max-width: 180px; }
}

/* Envelope Asset */
.envelope-container {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
    animation: float 4s ease-in-out infinite;
}

.envelope-container:hover {
    transform: scale(1.05);
}

.img-envelope {
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15));
}

@media (max-width: 768px) {
    .img-envelope { max-width: 300px; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Internal Section */
.section-internal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 40px 20px; /* Added bottom padding for mobile safety */
    opacity: 0;
    transform: translateY(100vh);
    transition: var(--transition-slow);
    z-index: 20;
}

.section-internal.active {
    opacity: 1;
    transform: translateY(0);
}

.card-internal {
    width: 95%;
    max-width: 380px;
    height: auto;
    max-height: 85vh; /* Safe height to avoid UI overlap */
    background: #F2EBE1;
    padding: 35px 20px;
    border-radius: 40px;
    box-shadow: var(--shadow-premium);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 2px solid var(--dourado-principal);
    overflow: hidden; /* Disabled internal scroll as requested */
}

/* Mobile Centering (Default) */
.col-left, .col-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.internal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
}

.img-internal-convite { max-width: 250px; }
.img-internal-sub { max-width: 230px; }
.img-internal-year { max-width: 200px; margin-top: 10px; }

.internal-body {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--verde-escuro);
    text-align: center;
    padding: 0 20px;
}

.event-info {
    width: 100%;
    text-align: center;
}

.event-date-time {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.date-label, .location-label {
    background: var(--dourado-principal);
    color: white;
    font-size: 0.85rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    padding: 5px 25px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: inline-block;
}

.date-main {
    font-family: 'Kalnia', serif;
    font-size: 2.2rem;
    color: var(--verde-escuro);
    line-height: 1;
    margin-bottom: 5px;
    font-weight: 400;
    white-space: nowrap;
}

.date-sub {
    font-family: 'Kalnia', serif;
    font-size: 1.1rem;
    color: var(--verde-escuro);
    font-weight: 400;
}

.event-location {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.location-text {
    font-size: 1.05rem;
    color: var(--verde-escuro);
    font-family: 'Kalnia', serif;
}

.rsvp-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-rsvp {
    background: #4A5D45;
    color: white;
    text-decoration: none;
    padding: 18px 25px;
    border-radius: 50px;
    font-family: 'Kalnia', serif;
    font-weight: 400;
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid var(--dourado-principal);
    display: block;
    width: 100%;
    white-space: nowrap;
    margin-top: 10px;
    animation: rsvp-pulse 2.5s infinite ease-in-out;
    text-align: center;
}

.btn-rsvp:hover {
    transform: scale(1.05);
    background: var(--verde-enfermagem);
    box-shadow: 0 10px 25px rgba(20, 59, 45, 0.3);
    animation-play-state: paused;
}

@keyframes rsvp-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); }
    50% { transform: scale(1.02); box-shadow: 0 5px 15px rgba(201, 162, 74, 0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); }
}


.back-btn {
    margin-top: 5px;
    background: transparent;
    border: none;
    color: var(--dourado-principal);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s;
}

@media (max-width: 360px) {
    .date-main { font-size: 1rem; }
    .btn-rsvp { font-size: 1rem; }
}

/* Desktop Media Query (Refined) */
@media (min-width: 769px) {
    .card-internal {
        max-width: 1200px; /* Increased width to prevent clipping */
        height: auto;
        min-height: 550px;
        flex-direction: row;
        padding: 60px 80px; /* Slightly reduced padding from previous turn */
        gap: 60px;
        align-items: center;
        text-align: left;
    }

    .col-left {
        flex: 1.4;
        align-items: flex-start;
        text-align: left;
    }

    .col-right {
        flex: 1;
        align-items: center;
        text-align: center;
    }

    .internal-header { align-items: flex-start; gap: 15px; margin-bottom: 20px; }
    .img-internal-convite { max-width: 450px; }
    .img-internal-sub { max-width: 400px; }
    .img-internal-year { max-width: 420px; margin-top: 15px; }
    
    .internal-body { 
        font-size: 1.3rem; 
        text-align: left; 
        margin-top: 20px; 
        padding: 0; 
    }
    
    .date-main { font-size: 4.8rem; margin-top: 10px; margin-bottom: 10px; white-space: nowrap; }
    .date-sub { font-size: 1.8rem; }
    .location-text { font-size: 1.5rem; }
    .btn-rsvp { max-width: 450px; font-size: 1.5rem; padding: 22px 45px; margin-top: 15px; }
    .date-label, .location-label { font-size: 1.1rem; padding: 8px 35px; margin-bottom: 15px; }

    .back-btn {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
    }
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.6s ease-out;
}

.section-internal.active .reveal {
    opacity: 1;
    transform: translateY(0);
}

.delay-3 { transition-delay: 0.6s; }

/* Music Button */
.music-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    background: var(--dourado-principal);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 2px solid white;
}

.music-btn:hover {
    transform: scale(1.1);
    background: var(--verde-enfermagem);
}

.music-btn i {
    width: 20px;
    height: 20px;
}

.music-btn.playing {
    animation: pulse-music 2s infinite;
}

@keyframes pulse-music {
    0% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(201, 162, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); }
}

@media (max-width: 768px) {
    .music-btn {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
}