/* ============================================
   THR UI STYLES
   ============================================ */

/* Popup Base Styles (Shared with AL-QURAN but duplicated here for Landing Page) */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn 0.2s ease;
}

.popup-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.dark .popup-card {
    background: #0f1729;
    /* Adjusted for gundam-dark */
    border: 1px solid #1e293b;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Envelope Animation */
.thr-envelope {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.thr-envelope-body {
    width: 180px;
    height: 120px;
    background: linear-gradient(135deg, #1e293b, #0f1729);
    border: 2px solid #eab308;
    border-top: none;
    border-radius: 0 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 15px 35px rgba(234, 179, 8, 0.15), inset 0 0 20px rgba(0,0,0,0.8);
}

.thr-envelope-body .material-symbols-outlined {
    color: #facc15;
    font-size: 3.5rem;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.6));
    z-index: 1;
}

.thr-envelope-flap {
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-top: 75px solid #ca8a04;
    position: relative;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), z-index 0.6s step-end;
    transform-origin: top center;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}

.thr-envelope.opened .thr-envelope-flap {
    transform: rotateX(180deg);
    border-top-color: #a16207;
    z-index: 0;
}

.thr-envelope:not(.opened):hover {
    animation: envelopeShake 0.5s ease;
}

@keyframes envelopeShake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(3deg);
    }
}

/* Content Reveal */
.thr-content-reveal {
    animation: contentReveal 0.6s ease;
}

@keyframes contentReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}