/* --- SCROLLBAR PERSONALIZADA GLOBAL --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000000;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 20, 147, 0.8);
    border-radius: 10px;
    border: 2px solid #000000;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff007f;
}

/* --- FONDO ANIMADO NEGRO/GRIS OSCURO --- */
body {
    font-family: 'Nunito', sans-serif;
    /* Degradado de negros y grises profundos */
    background: linear-gradient(-45deg, #000000, #141414, #080808, #1a1a1a);
    background-size: 400% 400%;
    animation: gradientBG 20s ease infinite;
    min-height: 100dvh;
    overflow-x: hidden;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="%23ff007f" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>') 14 14, auto;
}

a,
button,
.tilt-wrapper {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23ff1493" stroke="%23ffffff" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>') 16 16, pointer !important;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.font-handwriting {
    font-family: 'Caveat', cursive;
}

/* --- EFECTOS NEÓN INTENSOS --- */
.glow-text {
    text-shadow: 0 0 10px rgba(255, 20, 147, 0.8), 0 0 20px #ff1493, 0 0 40px #ff007f;
    color: #ffffff;
}

/* --- EFECTO GLASSMORPHISM BASE --- */
.glass-panel {
    background: rgba(20, 20, 20, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

/* --- CRONÓMETRO GLASS + NEÓN --- */
.timer-box {
    animation: pulse-glow-dark 3s infinite alternate;
    border: 1px solid rgba(255, 20, 147, 0.4);
    /* Borde rosa */
}

@keyframes pulse-glow-dark {
    0% {
        box-shadow: 0 0 15px rgba(255, 20, 147, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.02);
        transform: scale(1);
    }

    100% {
        box-shadow: 0 0 30px rgba(255, 20, 147, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.05);
        transform: scale(1.02);
    }
}

.time-val {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px #ff1493;
}

.time-label {
    font-size: 0.65rem;
    color: #aaaaaa;
    font-weight: 700;
    letter-spacing: 2px;
}

/* --- ESTELA MÁGICA Y PARTÍCULAS --- */
.cursor-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 16px;
    text-shadow: 0 0 10px #ff1493, 0 0 20px white;
    animation: sparkle-fall 0.8s ease-out forwards;
}

@keyframes sparkle-fall {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1.5);
    }

    100% {
        transform: translate(-50%, 40px) scale(0) rotate(180deg);
        opacity: 0;
        filter: brightness(0.5);
    }
}

/* --- SOBRES DARK GLASS --- */
.tilt-wrapper {
    perspective: 1000px;
    transform-style: preserve-3d;
    padding: 15px;
    transition: transform 0.3s;
}

.mini-envelope {
    position: relative;
    width: 140px;
    height: 95px;
    /* Fondo gris oscuro con transparencia */
    background: rgba(30, 30, 30, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 20, 147, 0.5);
    /* Toque neón inferior */
}

/* Solapas del sobre simuladas con bordes oscuros */
.mini-envelope::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 50px solid #1a1a1a;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.8));
}

.mini-envelope::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 50px solid #0d0d0d;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    z-index: 1;
}

.tilt-wrapper:hover .mini-envelope {
    transform: scale(1.1) translateY(-10px);
    background: rgba(40, 40, 40, 0.6);
    /* Brillo neón al acercarse */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 20, 147, 0.5);
    border: 1px solid rgba(255, 20, 147, 0.8);
}

.tilt-wrapper.opened .mini-envelope {
    background: rgba(10, 10, 10, 0.7);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
}

.tilt-wrapper.opened .mini-envelope::before {
    transform: rotateX(180deg);
    z-index: 0;
    border-top-color: #111111;
}

.tilt-wrapper.opened .mini-envelope::after {
    border-bottom-color: #050505;
}

/* --- POLAROID GLASS --- */
.polaroid {
    /* Se aplica la clase glass-panel base y se sobreescriben sombras */
    padding: 12px 12px 20px 12px;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 1), 0 0 30px rgba(255, 20, 147, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 20, 147, 0.4);
    animation: burst-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 85dvh;
}

.polaroid-img-container {
    width: 100%;
    height: 35dvh;
    min-height: 180px;
    max-height: 350px;
    background-color: #000;
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.polaroid-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoom-slow 10s infinite alternate ease-in-out;
    opacity: 0.85;
}

@keyframes zoom-slow {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

/* Área de texto con scroll (Scrollbar interior más delicada) */
.polaroid-text-area {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    padding-top: 15px;
    padding-right: 5px;
}

.polaroid-text-area::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.polaroid-text-area::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.polaroid-text-area::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 20, 147, 0.6);
    border-radius: 10px;
    border: none;
}

@keyframes burst-in {
    0% {
        transform: scale(0.3) translateY(100px) rotate(-15deg);
        opacity: 0;
        filter: blur(10px);
    }

    60% {
        transform: scale(1.05) translateY(-10px) rotate(3deg);
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: scale(1) translateY(0) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

/* Pantalla de Carga Dark */
.heart-loader {
    filter: drop-shadow(0 0 30px #ff1493);
    animation: heartbeat-super 0.8s infinite alternate;
}

@keyframes heartbeat-super {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px #ff1493);
    }

    100% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 60px #ff007f);
    }
}

/* Botón Glass */
.glass-btn {
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 20, 147, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 20, 147, 0.3);
}

.glass-btn:hover {
    background: rgba(255, 20, 147, 0.1);
    border-color: #ff1493;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 20, 147, 0.6);
}