/*
 * Estilos personalizados para la invitación de boda
 */


 
/* Clase para el cursor parpadeante */
.typing-cursor::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    animation: blink 0.7s infinite;
    font-weight: 400;
    opacity: 1;
}

/* Animación de parpadeo */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Paleta de colores: lavanda y combinaciones */
:root {
    /* Lavanda (primario) */
    --lavender-50: #F6F3FF;    /* fondo muy suave */
    --lavender-200: #EADCF9;
    --lavender-400: #C6A8FF;
    --lavender-600: #7C4DFF;

    /* Neutros */
    --white: #FFFFFF;
    --gray-800: #333333;
    --beige: #FFF6ED;
    --gold: #B08B59;           /* dorado para acentos */
    --gold-opaque: rgba(176,139,89,0.9);

    /* Acentos complementarios */
    --dusty-blue: #7DA3C0;
    --soft-pink: #F6D0DA;
    --sage: #9AAE93;

    /* Contrastes más vivos */
    --orange: #FF8C42;
    --teal: #0EA5A4;
    --black: #000000;
}

/* Oculta el contenido principal hasta que se abre el sobre */
.hide-content #main-content {
    display: none;
}

/* --- Animación del Sobre --- */
#envelope-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--lavender-50);
    z-index: 100;
    cursor: pointer;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.8s ease-out 0.2s;
    text-align: center;
    padding: 20px;
}
 
p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

.envelope-heading {
    font-family: 'Alex Brush', cursive;
    font-size: 2.5rem;
    color: var(--gold);
    opacity: 1;
    transition: opacity 0.5s;
}

.envelope-image {
    max-width: 300px;
    width: 70%;
    margin-top: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.envelope-text {
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: var(--gray-800);
    opacity: 1;
    transition: opacity 0.5s;
}

/* Estado "abierto" del sobre */
#envelope-wrapper.open {
    transform: translateY(-120vh) scale(0.5); /* Se va volando hacia arriba */
    opacity: 0;
}

#envelope-wrapper.open .envelope-heading,
#envelope-wrapper.open .envelope-text {
    opacity: 0;
}


/* --- Rotador de Imágenes (Nuestra Historia) --- */
.rotator {
    position: relative;
    /* El aspect-square y overflow-hidden de Tailwind manejan el tamaño */
}

.rotator-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    border-radius: 0.5rem; /* rounded-lg */
}

.rotator-img.active {
    opacity: 1;
}

/* --- Animación de Letras (Hero) --- */
.hero-item {
    opacity: 1; /* Necesario para que los hijos sean visibles */
}

.char {
    display: inline-block;
    opacity: 0;
    transform: translate(0, 50px) scale(0.8);
    /* La animación 'flyIn' es asignada por JS */
}

/* Keyframe usado por el JS para las letras */
@keyframes flyIn {
    from {
        opacity: 0;
        transform: translate(0, 50px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}


/* --- Botón de Música --- */
#music-control {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}

#music-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #c6a8ff;
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.3s;
}

#music-toggle .icon {
    font-size: 20px;
    display: inline-block;
}

#music-toggle .text {
    font-size: 14px;
    letter-spacing: 0.5px;
}

#music-toggle:hover {
    background-color: var(--gold);
    transform: scale(1.08);
}

/* --- BORDES RASGADOS Y SOMBRAS PARALELAS ENTRE SECCIONES --- */

/* Sombra paralela (efecto 3D) */
.torn-shadow {
    position: relative;
}

.torn-shadow::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.08) 60%, transparent 100%);
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    filter: blur(1px);
}

/* Borde rasgado superior usando clip-path para efecto papel roto */
.torn-top {
    position: relative;
    clip-path: polygon(
        0% 12px, 
        2% 10px, 4% 9px, 6% 11px, 8% 8px, 10% 10px, 
        12% 9px, 14% 11px, 16% 8px, 18% 10px, 
        20% 9px, 22% 11px, 24% 8px, 26% 10px,
        28% 9px, 30% 11px, 32% 8px, 34% 10px,
        36% 9px, 38% 11px, 40% 8px, 42% 10px,
        44% 9px, 46% 11px, 48% 8px, 50% 10px,
        52% 9px, 54% 11px, 56% 8px, 58% 10px,
        60% 9px, 62% 11px, 64% 8px, 66% 10px,
        68% 9px, 70% 11px, 72% 8px, 74% 10px,
        76% 9px, 78% 11px, 80% 8px, 82% 10px,
        84% 9px, 86% 11px, 88% 8px, 90% 10px,
        92% 9px, 94% 11px, 96% 8px, 98% 10px, 100% 11px,
        100% 100%, 0% 100%
    );
    margin-top: 12px;
    padding-top: 0;
}

/* Borde rasgado inferior con efecto más pronunciado */
.torn-bottom {
    position: relative;
    clip-path: polygon(
        0% 0%, 2% 2px, 4% 3px, 6% 1px, 8% 4px, 10% 2px,
        12% 3px, 14% 1px, 16% 4px, 18% 2px,
        20% 3px, 22% 1px, 24% 4px, 26% 2px,
        28% 3px, 30% 1px, 32% 4px, 34% 2px,
        36% 3px, 38% 1px, 40% 4px, 42% 2px,
        44% 3px, 46% 1px, 48% 4px, 50% 2px,
        52% 3px, 54% 1px, 56% 4px, 58% 2px,
        60% 3px, 62% 1px, 64% 4px, 66% 2px,
        68% 3px, 70% 1px, 72% 4px, 74% 2px,
        76% 3px, 78% 1px, 80% 4px, 82% 2px,
        84% 3px, 86% 1px, 88% 4px, 90% 2px,
        92% 3px, 94% 1px, 96% 4px, 98% 2px, 100% 1px,
        100% 100%, 0% 100%
    );
    margin-bottom: 12px;
    padding-bottom: 0;
}

/* --- RESPONSIVE: ajustes para pantallas más pequeñas --- */
@media (max-width: 1024px) {
    /* menos detalle en el rasgado, offsets más pequeños */
    .torn-top {
        clip-path: polygon(
            0% 10px, 10% 8px, 20% 10px, 30% 7px, 40% 9px, 50% 8px,
            60% 10px, 70% 7px, 80% 9px, 90% 8px, 100% 9px,
            100% 100%, 0% 100%
        );
        margin-top: 10px;
    }

    .torn-bottom {
        clip-path: polygon(
            0% 0%, 10% 2px, 20% 3px, 30% 1px, 40% 4px, 50% 2px,
            60% 3px, 70% 1px, 80% 4px, 90% 2px, 100% 1px,
            100% 100%, 0% 100%
        );
        margin-bottom: 10px;
    }

    .torn-shadow::after {
        height: 10px;
        bottom: -10px;
    }
}

@media (max-width: 640px) {
    /* móvil: rasgado muy sutil y sombras más pequeñas */
    .torn-top {
        clip-path: polygon(0% 8px, 20% 6px, 40% 8px, 60% 6px, 80% 8px, 100% 7px, 100% 100%, 0% 100%);
        margin-top: 8px;
    }

    .torn-bottom {
        clip-path: polygon(0% 0%, 20% 2px, 40% 3px, 60% 1px, 80% 3px, 100% 2px, 100% 100%, 0% 100%);
        margin-bottom: 8px;
    }

    .torn-shadow::after {
        height: 8px;
        bottom: -8px;
        background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.06) 60%, transparent 100%);
    }

    /* reducir padding lateral en secciones para evitar recortes del clip-path */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}