/* ================= FLIP CARD CERTIFICATE DESIGN ================= */

/* Scene Container */
.edu-card-intro {
    width: 450px;
    height: 300px;
    margin: 2rem 0;
    /* Vertical margin only, horizontal handled by flex gap */
    perspective: 1500px;
    cursor: pointer;
    display: inline-block;
    /* Helps with some browser rendering in flex */
}

/* Card Container - Flips on Y-axis */
.envelope-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Flip the card when opened */
.envelope-wrapper.opened {
    transform: rotateY(180deg);
}

/* Hide flap in flip design */
.envelope-flap {
    display: none;
}

/* Common styles for both sides */
.envelope-cover,
.certificate-paper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* FRONT SIDE - Envelope Cover */
.envelope-cover {
    background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%);
    border: 1px solid rgba(115, 194, 251, 0.2);
    z-index: 2;
}

/* Metallic Sheen Texture */
.envelope-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.03) 10px,
            rgba(255, 255, 255, 0.03) 20px);
    pointer-events: none;
}

/* Cover Content */
.cover-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.cover-content img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #73C2FB;
    box-shadow: 0 0 20px rgba(115, 194, 251, 0.5);
    margin-bottom: 1.5rem;
    object-fit: cover;
}

.cover-content h3 {
    font-size: 2.4rem;
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 700;
}

.cover-content p {
    font-size: 1.5rem;
    color: #73C2FB;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

/* Click Hint */
.click-hint {
    font-size: 1.2rem;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: pulseHint 2s infinite;
}

@keyframes pulseHint {

    0%,
    100% {
        opacity: 0.5;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* BACK SIDE - Certificate Paper */
.certificate-paper {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 4px double #73C2FB;
    transform: rotateY(180deg);
    z-index: 1;
}

/* Paper Texture */
.certificate-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px);
    pointer-events: none;
}

/* Watermark */
.certificate-paper::after {
    content: '\f19d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    font-size: 16rem;
    color: rgba(115, 194, 251, 0.04);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    z-index: 0;
}

/* Paper Content */
.paper-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.paper-content h3 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.6rem;
    color: #1a1a2e;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 3px solid #73C2FB;
    padding-bottom: 0.5rem;
    display: inline-block;
}

.paper-content h4 {
    font-size: 1.5rem;
    color: #444;
    margin-bottom: 1rem;
    font-weight: 600;
}

.paper-content h4 i {
    color: #73C2FB;
    margin-right: 0.5rem;
}

.paper-content .field {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: #0072ff;
    margin: 1.5rem 0;
    font-weight: 500;
}

/* Year Badge */
.year-badge {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid #73C2FB;
}

.year-badge i {
    color: #73C2FB;
}

/* Hover Effect */
.envelope-wrapper:hover {
    box-shadow: 0 15px 40px rgba(115, 194, 251, 0.3);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .edu-card-intro {
        width: 100%;
        max-width: 380px;
        height: 280px;
        margin: 2rem auto;
        /* Force centering on mobile */
    }

    .cover-content h3 {
        font-size: 2rem;
    }

    .cover-content p {
        font-size: 1.3rem;
    }

    .paper-content h3 {
        font-size: 2.2rem;
    }

    .paper-content h4 {
        font-size: 1.3rem;
    }

    .paper-content .field {
        font-size: 1.4rem;
    }
}

/* Extra small screens */
@media (max-width: 450px) {
    .edu-card-intro {
        height: 260px;
    }

    .cover-content img {
        width: 60px;
        height: 60px;
    }

    .cover-content h3 {
        font-size: 1.8rem;
    }

    .paper-content h3 {
        font-size: 2rem;
    }
}