cards.css

/* * ======================================================================================
 * HEARTIFY CARDS & PREVIEW SYSTEM (V6.0 - LOVE LETTER EDITION)
 * ARCHITECT: Senior UI/UX Engineer
 * DATE: 2026-05-22
 * PURPOSE: Emotional Design Upgrade - Warmth, Realism, and Elegance
 * ======================================================================================
 */

/* ======================================================================================
   1.0 COMPONENT: PREVIEW STAGE (THE ROMANTIC SETTING)
   ====================================================================================== */
.preview-stage {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
    
    /* 1️⃣ VISUAL IDENTITY UPGRADE: WARMTH & EMOTION */
    /* Base: Warm, romantic off-white/blush blend */
    background-color: #fff0f5; 
    background: 
        /* Soft ambient light */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 241, 242, 0.5) 60%, rgba(255, 228, 230, 0.8) 100%),
        /* Very subtle grid (barely visible, just for structure) */
        linear-gradient(rgba(225, 29, 72, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(225, 29, 72, 0.03) 1px, transparent 1px);
    
    background-size: 100% 100%, 60px 60px, 60px 60px;
    background-position: center center;
    
    /* 9️⃣ MICRO-NOISE TEXTURE (High-End Polish) */
    /* This adds a "grain" to the whole stage, making it feel less digital */
}

.preview-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* 1.2 THE HERO CARD (THE ARTIFACT) */
#cardCanvas {
    /* 2️⃣ CARD PHYSICALITY (PAPER REALISM) */
    max-height: 82vh;
    max-width: 90%;
    width: auto;
    height: auto;
    background: white;
    
    /* Soft, organic corners - feels like heavy cardstock */
    border-radius: 12px; 
    
    position: relative;
    z-index: 20;
    
    /* 3️⃣ SHADOW SYSTEM (EMOTIONAL LIGHTING) */
    /* Resting state: "Placed on a table in soft evening light" */
    box-shadow: 
        /* Direct contact shadow */
        0 2px 10px rgba(148, 20, 50, 0.05),
        /* Ambient diffusion (Warm glow) */
        0 20px 40px -12px rgba(225, 29, 72, 0.15),
        /* Card edge definition */
        0 0 0 1px rgba(0,0,0,0.02);
    
    /* 5️⃣ ENTRANCE ANIMATION (GENTLE RISE) */
    animation: cardFloatUp 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards 0.2s;
    
    /* 4️⃣ HOVER INTERACTION (ELEGANCE) */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Add slight paper texture to the card itself (digital representation) */
#cardCanvas::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%);
    pointer-events: none;
}

#cardCanvas:hover {
    /* Less movement, more breathing */
    transform: translateY(-3px) scale(1.002);
    
    /* Shadow deepens slightly */
    box-shadow: 
        0 4px 15px rgba(148, 20, 50, 0.08),
        0 25px 50px -12px rgba(225, 29, 72, 0.2),
        0 0 0 1px rgba(0,0,0,0.02);
}

/* 1.3 PARTICLE SYSTEM (EMOTION & DRIFT) */
#bg-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

.particle {
    position: absolute;
    pointer-events: none;
    /* 6️⃣ ANIMATION VARIATION */
    animation: 
        particleFloat 12s linear infinite,
        particleSway 4s ease-in-out infinite alternate;
    
    /* Make particles soft/blurry for depth of field effect */
    filter: blur(0.5px);
    will-change: transform, opacity;
    
    /* Use heart shape for particles if possible (handled in JS content, but style here) */
    color: rgba(225, 29, 72, 0.2); 
    font-family: serif; /* Better heart shape */
}

@keyframes particleFloat {
    0% { transform: translateY(10vh) rotate(0deg); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

@keyframes particleSway {
    0% { margin-left: -15px; }
    100% { margin-left: 15px; }
}

@keyframes cardFloatUp {
    0% { 
        opacity: 0; 
        transform: translateY(40px) scale(0.96); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* ======================================================================================
   2.0 MOBILE RESPONSIVENESS (DELIGHTFUL EXPERIENCE)
   ====================================================================================== */
@media (max-width: 1024px) {
    /* 7️⃣ MOBILE EXPERIENCE UPGRADE */
    .preview-stage {
        height: auto;
        min-height: 80vh; /* More vertical space */
        padding: 3rem 1.5rem; /* More breathing room */
        
        /* Remove grid on mobile for pure emotion */
        background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 241, 242, 0.6) 100%);
        background-size: 100% 100%;
        
        margin-top: 0;
    }
    
    #cardCanvas {
        max-height: none;
        width: 100%;
        /* Default slight zoom for impact */
        transform: scale(1.02);
        
        /* Softer mobile shadow */
        box-shadow: 0 10px 30px -8px rgba(225, 29, 72, 0.2);
    }
    
    /* Ensure no hover effects on touch */
    #cardCanvas:hover {
        transform: scale(1.02);
        box-shadow: 0 10px 30px -8px rgba(225, 29, 72, 0.2);
    }
}

/* ======================================================================================
   3.0 DARK MODE OVERRIDES (MIDNIGHT ROMANCE)
   ====================================================================================== */
[data-theme="dark"] .preview-stage {
    background-color: #0f172a;
    /* Deep midnight gradient */
    background: 
        radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 1) 80%),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 100% 100%, 60px 60px, 60px 60px;
    
    box-shadow: inset 0 0 250px rgba(0,0,0,0.8);
}

[data-theme="dark"] #cardCanvas {
    box-shadow: 
        0 20px 60px -10px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255,255,255,0.05);
}

/* ======================================================================================
   4.0 PRINT & EXPORT UTILITIES (CRAFTED FEEL)
   ====================================================================================== */
@media print {
    /* 8️⃣ PRINT MODE UPGRADE */
    body { 
        background-color: #fffcf9; /* Faint cream/ivory for warmth */
        color: black;
    }

    .preview-stage { 
        background: #fffcf9; 
        padding: 0; 
        margin: 0; 
        box-shadow: none; 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    
    #cardCanvas { 
        box-shadow: none; 
        max-width: 100%; 
        width: auto; 
        height: auto;
        transform: none !important; 
        border: none;
        border-radius: 0; /* Printers cut corners anyway */
    }
    
    /* Hide particles in print */
    #bg-particles, .particle { display: none !important; }
}