/* Technodus Envelope Animation (V3 Final - Scoped to Form) */

/* --- SCOPED FORM CONTAINER --- */
.contact-form {
    position: relative;
    /* Use background from theme or override here */
    background: #1e293b;
    border-radius: 15px;

    /* 3D Context */
    perspective: 2000px;
    transform-style: preserve-3d;
    transition: transform 0.8s;
    z-index: 10;
}

/* --- FLAPS LAYER --- */
/* Injected via JS as children of .contact-form */

.envelope-flap {
    position: absolute;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 20;
    /* Anti-glitch: Ensure visibility during rotation */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

.contact-form.animate-envelope .envelope-flap {
    opacity: 1;
    pointer-events: auto;
}

/* COLORS */
:root {
    --flap-dark: #0c4a6e;
    /* Darkest Blue (Bottom) */
    --flap-mid: #0369a1;
    /* Mid Blue (Sides) */
    --flap-light: #0ea5e9;
    /* Light Blue (Top) */
}

/* --- BOTTOM FLAP (V3 Original) --- */
.flap-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    transform-origin: bottom;
    transform: rotateX(180deg);
    background-color: var(--flap-dark);
    z-index: 22;
}

/* --- SIDE FLAPS (V3 Original) --- */
.flap-left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform-origin: left;
    transform: rotateY(180deg);
    background-color: var(--flap-mid);
    z-index: 23;
}

.flap-right {
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    transform-origin: right;
    transform: rotateY(180deg);
    background-color: var(--flap-mid);
    background: linear-gradient(-90deg, var(--flap-mid), #0284c7);
    z-index: 24;
}

/* --- TOP FLAP (NEW: Rounded Triangle) --- */
.flap-top-diamond {
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    z-index: 25;

    transform-origin: top;
    transform: rotateX(180deg);
    /* Start Open */

    /* Container Setup */
    overflow: hidden;
    /* Clips the top half of the diamond */
    border-radius: 15px 15px 0 0;
    /* Matches form top corners */
    background-color: transparent;
    /* No background primarily */
}

/* The Diamond Shape (Pseudo-element) */
.flap-top-diamond::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 80%;
    padding-bottom: 80%;
    /* Square */

    background-color: var(--flap-light);

    /* Rotate to create triangle from diamond */
    transform: translateX(-50%) translateY(-50%) rotate(45deg);

    /* Rounded Tips Logic */
    border-radius: 15px;
    /* Smooth corners */
    border-bottom-right-radius: 40px;
    /* The specific rounded TIP */

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}


/* --- ANIMATION SEQUENCES (V3 Original) --- */

/* 1. Sides Appear/Fold */
.contact-form.animate-envelope .flap-left {
    opacity: 1;
    transform: rotateY(0deg);
    transition-delay: 0.1s;
}

.contact-form.animate-envelope .flap-right {
    opacity: 1;
    transform: rotateY(0deg);
    transition-delay: 0.3s;
}

/* 2. Bottom Folds Up */
.contact-form.animate-envelope .flap-bottom {
    opacity: 1;
    transform: rotateX(0deg);
    transition-delay: 0.5s;
}

/* 3. Top Flap Closes (Last) */
.contact-form.animate-envelope .flap-top-diamond {
    opacity: 1;
    transition-delay: 0.7s;
    transform: rotateX(0deg);
}


/* --- SUCCESS SEAL --- */
.sealed-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    text-align: center;
    opacity: 0;
    z-index: 30;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 1.0s;

    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    width: 80%;
    max-width: 350px;
}

.contact-form.animate-envelope .sealed-message {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.sealed-message i {
    color: #10b981;
    font-size: 3rem;
    margin-bottom: 15px;
}

.sealed-message h3 {
    color: #0f172a;
    font-size: 1.5rem;
    margin: 0 0 10px;
}

.refresh-text {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

.refresh-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: 0.3s;
}

.refresh-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-loading {
    opacity: 0.7;
    pointer-events: none;
}

.envelope-container,
.success-popup {
    display: none !important;
}

/* Hide form content when envelope closes */
/* The demo used .form-content but the real site uses standard inputs. 
   We can target them specifically to fade out. */
.contact-form.animate-envelope>form,
.contact-form.animate-envelope>.row,
.contact-form.animate-envelope>h3,
.contact-form.animate-envelope>button {
    transition: opacity 0.4s;
    opacity: 0;
    pointer-events: none;
}