/**
 * Expérience d'ouverture de Emocard - Version simplifiée et élégante
 * La simplicité est l'élégance parfaite, la sophistication suprême
 */

/* Variables épurées pour une harmonie parfaite */
:root {
    --gold-primary: #D4AF37;
    --gold-light: #F4D03F;
    --gold-lighter: #F8E7B3;
    --gold-dark: #B8860B;
    --gold-darker: #96700D;
    --gold-shimmer: #FFDF99;
    --gold-shadow: rgba(139, 101, 8, 0.5);
    --white: #FFFFFF;
    --text-dark: #2C3E50;
    --shadow-soft: rgba(0, 0, 0, 0.1);
    
    /* 📱 BREAKPOINTS RESPONSIVES STANDARDISÉS EMOCARD */
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
    --large: 1200px;
    
    /* Système d'espacement cohérent */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-xxl: 4rem;     /* 64px */
    
    /* Taille de la carte responsive intelligente */
    --card-width: clamp(280px, 85vw, 420px);
    --card-height: calc(var(--card-width) * 0.63);
    
    /* Marges responsives */
    --container-padding: clamp(1rem, 5vw, 3rem);
    --section-spacing: clamp(2rem, 8vh, 5rem);
    
    /* Animation fluide universelle */
    --smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --smooth-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset élégant et universel */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* MASQUER BARRES DE SCROLL - Tous navigateurs */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html, body, * {
    -ms-overflow-style: none !important; /* IE et Edge */
    scrollbar-width: none !important; /* Firefox */
}

html {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--white);
    min-height: 100vh;
    color: var(--text-dark);
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Écran de chargement minimaliste */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s var(--smooth);
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    text-align: center;
    padding: var(--container-padding);
    position: relative;
}

.loading-logo {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-lg);
}

.loading-logo img {
    width: clamp(100px, 18vw, 140px);
    height: auto;
    opacity: 0;
    animation: fadeInUp 1s var(--smooth) 0.3s forwards, logoGlow 3s ease-in-out 1.5s infinite;
    border-radius: 8px;
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.3));
}

.loading-heart {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* taille contrôlée par le SVG interne pour ratio parfait */
    color: #e74c3c;
    opacity: 0;
    /* apparition centrée (pas de translateY qui décale la position), puis pulsation */
    animation: fadeInCenter 0.45s var(--smooth) 0.8s forwards, heartPulse 1.1s ease-in-out 1.25s infinite;
    z-index: 2;
    text-shadow: 0 4px 8px rgba(231, 76, 60, 0.35);
    filter: drop-shadow(0 4px 10px rgba(231, 76, 60, 0.45));
}

/* SVG cœur : garantir ratio parfait et centrage */
.loading-heart-svg {
    display: block;
    width: clamp(56px, 8vw, 76px);
    height: clamp(56px, 8vw, 76px);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

/* apparition centrée sans translation additionnelle */
@keyframes fadeInCenter {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* pulse ajusté pour SVG : légère mise à l'échelle et rotation subtile */
@keyframes heartPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    25% { transform: translate(-50%, -50%) scale(1.15) rotate(-3deg); }
    50% { transform: translate(-50%, -50%) scale(0.95) rotate(3deg); }
    75% { transform: translate(-50%, -50%) scale(1.05) rotate(-1deg); }
}

.loading-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 400;
    margin-bottom: var(--space-lg);
    color: var(--gold-primary);
    opacity: 0;
    animation: fadeInUp 1s var(--smooth) 0.6s forwards;
}

.loading-bar {
    width: clamp(200px, 60vw, 250px);
    height: 3px;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 1s var(--smooth) 0.9s forwards;
}

.loading-progress {
    height: 100%;
    background: var(--gold-primary);
    border-radius: 2px;
    animation: loadingProgress 3.5s ease-out 1.2s forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes loadingProgress {
    from { width: 0%; }
    to { width: 100%; }
}

/* Conteneur principal harmonieux */
.card-reveal-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--container-padding);
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s var(--smooth-slow);
}

.card-reveal-container.active {
    opacity: 1;
    visibility: visible;
}

/* Emballage doré avec espacement parfait */
.gift-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    margin: var(--space-lg) 0;
}

/* Indication subtile pour l'interaction */
.click-hint {
    text-align: center;
    margin-top: var(--space-md);
    opacity: 1;
    transition: opacity 0.5s var(--smooth);
    pointer-events: none;
    z-index: 10;
}

.click-hint.hidden {
    opacity: 0;
    visibility: hidden;
}

.click-hint p {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: var(--gold-primary);
    font-weight: 500;
    margin: 0;
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--gold-primary);
    border-radius: 30px;
    backdrop-filter: blur(5px);
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.05),
        0 3px 8px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: pulseHint 2.5s ease-in-out infinite;
    letter-spacing: 0.5px;
}

@keyframes pulseHint {
    0%, 100% { 
        transform: translateY(0);
        opacity: 0.8;
    }
    50% { 
        transform: translateY(-2px);
        opacity: 1;
    }
}

.gift-package {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    cursor: pointer;
    user-select: none;
    transition: transform 0.4s var(--smooth), box-shadow 0.4s var(--smooth);
    will-change: transform;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.gift-package:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 8px 12px rgba(212, 175, 55, 0.15);
}

/* Papier doré raffiné - simplifié */
.golden-wrapper {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        var(--gold-lighter) 0%, 
        var(--gold-light) 15%,
        var(--gold-primary) 40%, 
        var(--gold-dark) 65%,
        var(--gold-darker) 85%, 
        var(--gold-dark) 100%
    );
    border-radius: clamp(12px, 3vw, 15px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.12),
        0 15px 25px var(--gold-shadow),
        inset 0 2px 3px rgba(255, 255, 255, 0.6),
        inset 0 -2px 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Texture de papier métallique quadrillée */
.wrapper-surface {
    position: absolute;
    inset: 0;
    background-image: 
        /* Quadrillage fin horizontal */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 12px,
            rgba(255, 255, 255, 0.05) 12px,
            rgba(255, 255, 255, 0.05) 13px
        ),
        /* Quadrillage fin vertical */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 12px,
            rgba(255, 255, 255, 0.05) 12px,
            rgba(255, 255, 255, 0.05) 13px
        ),
        /* Points scintillants subtils */
        radial-gradient(
            1px 1px at 10px 10px,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 100%
        ),
        radial-gradient(
            0.7px 0.7px at 30px 35px,
            rgba(255, 255, 255, 0.8) 50%,
            transparent 100%
        ),
        radial-gradient(
            0.8px 0.8px at 50px 60px,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 100%
        );
    background-size: 
        14px 14px,
        14px 14px,
        100px 100px,
        100px 100px,
        100px 100px;
    opacity: 0.95;
}

/* Effets de reflets métalliques simplifiés */
.wrapper-glow {
    position: absolute;
    inset: 0;
    background: 
        /* Reflet diagonal */
        linear-gradient(
            45deg,
            transparent 20%,
            rgba(255, 255, 255, 0.5) 40%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0.5) 60%,
            transparent 80%
        );
    mix-blend-mode: soft-light;
    animation: simpleShine 6s infinite ease-in-out;
}

/* Animation de reflet simplifiée */
@keyframes simpleShine {
    0%, 100% { 
        opacity: 0.6;
        background-position: -150% -150%;
    }
    50% { 
        opacity: 0.9;
        background-position: 250% 250%;
    }
}

/* Effet holographique subtil conservé */
.gift-package::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 70%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: holographicEffect 4s infinite ease-in-out;
    border-radius: clamp(12px, 3vw, 15px);
}

@keyframes holographicEffect {
    0%, 100% { 
        opacity: 0.3;
        background-position: 0% 0%;
    }
    50% { 
        opacity: 0.7;
        background-position: 100% 100%;
    }
}

/* Révélation de la carte avec espacement parfait */
.card-reveal {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: all 0.6s var(--smooth-slow);
    z-index: 100;
    background: var(--white);
    overflow-y: auto;
    padding: var(--space-md) var(--container-padding) var(--container-padding) var(--container-padding);
    min-height: 100vh;
    padding-top: max(env(safe-area-inset-top), var(--space-md));
}

.card-reveal.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    animation: cardRevealEntrance 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.card-presentation {
    text-align: center;
    max-width: min(90vw, 600px);
    width: 100%;
    padding: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-sm);
}

.card-presentation h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 600;
    color: var(--gold-primary);
    margin-bottom: var(--space-md);
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-align: center;
}

.card-presentation p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-dark);
    font-weight: 300;
    margin-bottom: var(--space-lg); /* Réduit de xxl à lg pour plus de compacité */
    opacity: 0.8;
    max-width: 100%;
    text-align: center;
    line-height: 1.6;
}

#gift-card-container {
    margin: var(--space-md) auto; /* Réduit de lg à md pour plus de compacité */
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--card-width);
    height: var(--card-height);
    max-width: 90vw;
}

/* Actions de la carte harmonieuses - espacement optimisé */
.card-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-lg); /* Réduit de xl à lg pour plus de compacité */
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: clamp(10px, 2.5vw, 12px) clamp(20px, 5vw, 24px);
    background: var(--white);
    color: var(--gold-primary);
    border: 2px solid var(--gold-primary);
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s var(--smooth);
    text-decoration: none;
    min-width: clamp(140px, 30vw, 160px);
    white-space: nowrap;
    will-change: transform, background-color;
}

.action-btn:hover {
    background: var(--gold-primary);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.action-btn.primary {
    background: var(--gold-primary);
    color: var(--white);
}

.action-btn.primary:hover {
    background: var(--gold-dark);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.3);
}

/* FAQ Section avec espacement optimal - VERSION FINALE */
.faq-section {
    margin-top: var(--section-spacing);
    padding: var(--space-xxl) var(--container-padding);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    width: 100%;
    background: var(--white);
    max-width: 900px;
    display: none; /* Masqué par défaut, sera affiché après la révélation de la carte */
}

/* Conteneur FAQ pour le component */
#faq-container {
    margin-top: var(--space-md);
}

/* Titre FAQ élégant */
.faq-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 600;
    color: var(--gold-primary);
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* Styles pour le compte à rebours de validité */
.validity-countdown {
    margin: var(--space-md) auto;
    text-align: center;
    padding: var(--space-sm);
    background: rgba(212, 175, 55, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    max-width: 500px;
}

.validity-countdown h3 {
    font-family: 'Playfair Display', serif;
    color: var(--gold-primary);
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    margin-bottom: var(--space-xs);
    font-weight: 500;
}

.countdown-display {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-dark);
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.countdown-unit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.countdown-value {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    font-weight: 700;
    color: var(--gold-primary);
}

.countdown-label {
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Responsive Design parfait */
@media (max-width: 768px) {
    .card-reveal {
        justify-content: flex-start;
        padding-top: max(env(safe-area-inset-top), var(--space-sm));
        padding-bottom: max(env(safe-area-inset-bottom), var(--space-md));
    }
    
    .card-presentation {
        margin-top: var(--space-xs);
        padding: var(--space-sm) 0;
    }
    
    .card-actions {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
    }
    
    .action-btn {
        width: 100%;
        max-width: 250px;
    }
    
    .gift-wrapper {
        gap: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .card-reveal {
        padding-top: max(env(safe-area-inset-top), var(--space-xs));
    }
    
    .card-presentation {
        margin-top: 0;
        padding: var(--space-xs) 0;
    }
    
    .loading-content {
        padding: var(--space-lg);
    }
    
    .gift-package:hover {
        transform: scale(1.01) translateY(-1px);
    }
    
    #gift-card-container {
        margin: var(--space-sm) auto;
        min-height: 200px;
        max-height: 45vh;
    }
}

/* Mode paysage mobile - corrections optimisées pour une meilleure utilisation de l'espace */
@media (max-height: 600px) and (orientation: landscape) {
    .card-reveal {
        justify-content: flex-start;
        padding-top: max(env(safe-area-inset-top), var(--space-xs));
        padding-bottom: max(env(safe-area-inset-bottom), var(--space-xs));
    }
    
    .card-presentation {
        margin-top: 0;
        padding: var(--space-xs) 0;
    }
    
    /* 🚀 OPTIMISATION : Carte plus grande en landscape pour mieux utiliser l'espace */
    #gift-card-container {
        margin: var(--space-sm) auto;
        min-height: 220px;
        max-height: 65vh; /* 🔥 Augmenté de 40vh à 65vh */
        width: clamp(320px, 50vw, 480px); /* 🔥 Largeur optimisée pour landscape */
    }
    
    /* 🎯 Optimisation supplémentaire : Emocard elle-même plus grande */
    .gift-card {
        max-width: 100%;
        height: auto;
        min-height: 200px;
    }
    
    .card-actions {
        margin-top: var(--space-md);
    }
}

/* Correction pour écrans très hauts */
@media (min-height: 900px) {
    .card-reveal {
        justify-content: center;
        padding-top: var(--space-lg);
    }
    
    .card-presentation {
        margin-top: var(--space-md);
    }
}

/* Correction pour écrans très courts */
@media (max-height: 500px) {
    .card-reveal {
        padding-top: max(env(safe-area-inset-top), var(--space-xs));
        padding-bottom: max(env(safe-area-inset-bottom), var(--space-xs));
    }
    
    .card-presentation {
        margin-top: 0;
        padding: var(--space-xs) 0;
    }
    
    .card-presentation h1 {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
        margin-bottom: var(--space-xs);
    }
    
    .card-presentation p {
        margin-bottom: var(--space-md);
    }
    
    #gift-card-container {
        margin: var(--space-xs) auto;
        min-height: 160px; /* 🚀 Augmenté de 140px à 160px */
        max-height: 50vh; /* 🚀 Augmenté de 35vh à 50vh */
        width: clamp(300px, 45vw, 420px); /* 🚀 Largeur optimisée */
    }
    
    .card-actions {
        margin-top: var(--space-sm);
    }
}

/* Préférence pour animations réduites */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Effets de particules de papier déchiré */
.paper-particles {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
}

.paper-particle {
    position: absolute;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(248, 248, 240, 0.9) 50%,
        rgba(255, 255, 255, 0.8) 100%
    );
    border-radius: 1px;
    opacity: 0.9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Formes irrégulières pour paraître plus organiques */
    clip-path: polygon(
        0 0, 
        100% 0, 
        98% 35%, 
        100% 60%,
        92% 100%, 
        30% 98%,
        0 100%
    );
}

/* DÉCHIRURES ORGANIQUES HYPER-RÉALISTES */

/* 1. Déchirure primaire avec irrégularités et fibres apparentes */
.tear-1 {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(248, 248, 240, 0.95) 50%,
        rgba(255, 255, 255, 0.92) 100%
    );
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M0,0 L400,0 L400,90 C395,87 392,91 388,88 C384,91 381,87 378,90 C374,87 370,92 366,89 C363,92 360,88 357,91 C353,87 349,92 345,88 C341,92 338,88 334,91 C330,87 327,92 323,89 C319,92 316,88 313,91 C309,87 305,92 301,88 C298,91 294,87 290,90 C287,86 283,91 280,87 C276,91 272,87 269,90 C265,86 262,91 258,87 C254,91 251,87 247,90 C243,86 240,91 236,87 C232,91 228,87 224,90 C221,86 217,91 213,87 C210,90 206,87 202,90 C198,86 195,91 191,87 C187,91 184,87 180,90 C176,86 172,91 168,87 C164,91 161,87 157,90 C153,86 150,91 146,87 C142,91 139,87 135,90 C131,86 127,91 124,87 C120,91 116,86 112,90 C109,86 105,90 101,87 C98,90 94,87 91,91 C87,87 83,91 79,87 C75,90 72,87 68,91 C64,87 60,91 56,87 C53,90 49,87 45,91 C42,87 38,91 34,87 C30,91 27,87 23,91 C19,87 15,91 12,87 C8,91 4,87 0,90 L0,300 L400,300 L400,240 C396,237 393,242 389,238 C385,242 382,238 378,242 C374,238 371,243 367,239 C363,243 360,238 356,242 C352,238 349,243 345,239 C341,243 337,238 334,242 C330,238 326,243 322,239 C319,243 315,238 311,242 C308,238 304,243 300,239 C296,243 293,238 289,242 C285,238 282,243 278,239 C274,243 270,238 267,242 C263,238 259,243 255,239 C252,243 248,238 244,242 C240,238 237,243 233,239 C229,243 226,238 222,242 C218,238 215,243 211,239 C207,243 204,238 200,242 C196,238 193,243 189,239 C185,243 181,238 178,242 C174,238 170,243 166,239 C163,243 159,238 155,242 C151,238 148,243 144,239 C140,243 137,238 133,242 C129,238 125,243 122,239 C118,243 114,238 110,242 C107,238 103,243 99,239 C95,243 92,238 88,242 C84,238 81,243 77,239 C73,243 70,238 66,242 C62,238 59,243 55,239 C51,243 47,238 44,242 C40,238 36,243 32,239 C29,243 25,238 21,242 C18,238 14,243 10,239 C6,243 3,238 0,241 L0,0 Z' fill='white'/%3E%3C/svg%3E") no-repeat;
    mask-size: 100% 100%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M0,0 L400,0 L400,90 C395,87 392,91 388,88 C384,91 381,87 378,90 C374,87 370,92 366,89 C363,92 360,88 357,91 C353,87 349,92 345,88 C341,92 338,88 334,91 C330,87 327,92 323,89 C319,92 316,88 313,91 C309,87 305,92 301,88 C298,91 294,87 290,90 C287,86 283,91 280,87 C276,91 272,87 269,90 C265,86 262,91 258,87 C254,91 251,87 247,90 C243,86 240,91 236,87 C232,91 228,87 224,90 C221,86 217,91 213,87 C210,90 206,87 202,90 C198,86 195,91 191,87 C187,91 184,87 180,90 C176,86 172,91 168,87 C164,91 161,87 157,90 C153,86 150,91 146,87 C142,91 139,87 135,90 C131,86 127,91 124,87 C120,91 116,86 112,90 C109,86 105,90 101,87 C98,90 94,87 91,91 C87,87 83,91 79,87 C75,90 72,87 68,91 C64,87 60,91 56,87 C53,90 49,87 45,91 C42,87 38,91 34,87 C30,91 27,87 23,91 C19,87 15,91 12,87 C8,91 4,87 0,90 L0,300 L400,300 L400,240 C396,237 393,242 389,238 C385,242 382,238 378,242 C374,238 371,243 367,239 C363,243 360,238 356,242 C352,238 349,243 345,239 C341,243 337,238 334,242 C330,238 326,243 322,239 C319,243 315,238 311,242 C308,238 304,243 300,239 C296,243 293,238 289,242 C285,238 282,243 278,239 C274,243 270,238 267,242 C263,238 259,243 255,239 C252,243 248,238 244,242 C240,238 237,243 233,239 C229,243 226,238 222,242 C218,238 215,243 211,239 C207,243 204,238 200,242 C196,238 193,243 189,239 C185,243 181,238 178,242 C174,238 170,243 166,239 C163,243 159,238 155,242 C151,238 148,243 144,239 C140,243 137,238 133,242 C129,238 125,243 122,239 C118,243 114,238 110,242 C107,238 103,243 99,239 C95,243 92,238 88,242 C84,238 81,243 77,239 C73,243 70,238 66,242 C62,238 59,243 55,239 C51,243 47,238 44,242 C40,238 36,243 32,239 C29,243 25,238 21,242 C18,238 14,243 10,239 C6,243 3,238 0,241 L0,0 Z' fill='white'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    z-index: 2;
}

/* 2. Déchirure secondaire avec fibres de papier visibles */
.tear-2 {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.94) 0%, 
        rgba(248, 248, 240, 0.92) 50%,
        rgba(255, 255, 255, 0.90) 100%
    );
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M0,0 L400,0 L400,50 C398,48 396,52 394,50 C391,53 389,47 386,50 C384,47 381,51 379,48 C376,52 374,47 371,50 C369,47 366,52 364,49 C362,53 359,47 357,50 C354,47 352,52 349,48 C347,52 344,47 342,50 C340,46 337,52 334,48 C332,52 329,47 327,51 C324,47 322,52 319,47 C317,51 315,47 312,51 C309,47 307,52 304,47 C302,51 299,47 297,51 C294,47 292,52 289,47 C287,51 284,47 282,51 C279,47 277,52 274,47 C272,51 269,47 267,51 C264,47 262,52 259,47 C257,51 254,47 252,51 C249,47 247,52 244,47 C242,51 239,47 237,51 C234,47 232,52 229,47 C227,51 224,47 222,51 C219,47 217,52 214,47 C212,51 209,47 207,51 C204,47 202,52 199,47 C197,51 194,47 192,51 C189,47 187,52 184,47 C182,51 179,47 177,51 C174,47 172,52 169,47 C167,51 164,47 162,51 C159,47 157,52 154,47 C152,51 149,47 147,51 C144,47 142,52 139,47 C137,51 134,47 132,51 C129,47 127,52 124,47 C122,51 119,47 117,51 C114,47 112,52 109,47 C107,51 104,47 102,51 C99,47 97,52 94,47 C92,51 89,47 87,51 C84,47 82,52 79,47 C77,51 74,47 72,51 C69,47 67,52 64,47 C62,51 59,47 57,51 C54,47 52,52 49,47 C47,51 44,47 42,51 C39,47 37,52 34,47 C32,51 29,47 27,51 C24,47 22,52 19,47 C17,51 14,47 12,51 C9,47 7,52 4,47 C2,51 0,47 0,50 L0,300 L400,300 L400,270 C398,267 396,272 393,267 C391,272 388,267 386,272 C383,267 381,272 378,267 C375,272 373,267 370,272 C368,267 365,272 363,267 C360,272 358,267 355,272 C353,267 350,272 348,267 C345,272 343,267 340,272 C338,267 335,272 333,267 C330,272 328,267 325,272 C323,267 320,272 318,267 C315,272 313,267 310,272 C308,267 305,272 303,267 C300,272 298,267 295,272 C293,267 290,272 288,267 C285,272 283,267 280,272 C278,267 275,272 273,267 C270,272 268,267 265,272 C263,267 260,272 258,267 C255,272 253,267 250,272 C248,267 245,272 243,267 C240,272 238,267 235,272 C233,267 230,272 228,267 C225,272 223,267 220,272 C218,267 215,272 213,267 C210,272 208,267 205,272 C203,267 200,272 198,267 C195,272 193,267 190,272 C188,267 185,272 183,267 C180,272 178,267 175,272 C173,267 170,272 168,267 C165,272 163,267 160,272 C158,267 155,272 153,267 C150,272 148,267 145,272 C142,267 140,272 137,267 C135,272 132,267 130,272 C127,267 125,272 122,267 C120,272 117,267 115,272 C112,267 110,272 107,267 C105,272 102,267 100,272 C97,267 95,272 92,267 C90,272 87,267 85,272 C82,267 80,272 77,267 C75,272 72,267 70,272 C67,267 65,272 62,267 C60,272 57,267 55,272 C52,267 50,272 47,267 C45,272 42,267 40,272 C37,267 35,272 32,267 C30,272 27,267 25,272 C22,267 20,272 17,267 C15,272 12,267 10,272 C7,267 5,272 2,267 C1,270 0,267 0,270 L0,0 Z' fill='white'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    z-index: 3;
}

/* 3. Déchirure finale avec ombres et effets 3D */
.tear-3 {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.90) 0%, 
        rgba(248, 248, 240, 0.85) 50%,
        rgba(255, 255, 255, 0.80) 100%
    );
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M0,0 L400,0 L400,30 C397,27 395,32 392,28 C390,33 386,28 384,32 C381,27 378,33 374,28 C371,33 368,27 366,33 C362,27 360,33 356,27 C354,33 350,28 347,33 C344,27 342,33 338,27 C336,32 332,28 330,33 C326,27 324,33 321,28 C318,33 315,27 312,32 C308,27 306,33 302,27 C299,33 296,28 293,33 C290,27 288,33 284,27 C281,33 278,28 275,33 C271,27 269,33 266,28 C263,33 260,27 257,32 C253,27 251,33 247,27 C244,33 241,28 238,33 C235,27 233,33 229,27 C226,33 223,28 220,33 C217,27 215,33 211,27 C208,33 205,28 202,33 C199,27 197,33 193,27 C190,33 187,28 184,33 C181,27 179,33 175,27 C172,33 169,28 166,33 C163,27 161,33 157,27 C154,33 151,28 148,33 C145,27 143,33 139,27 C136,33 133,28 130,33 C127,27 125,33 121,27 C118,33 115,28 112,33 C109,27 107,33 103,27 C100,33 97,28 94,33 C91,27 89,33 85,27 C82,33 79,28 76,33 C73,27 71,33 67,27 C64,33 61,28 58,33 C55,27 53,33 49,27 C46,33 43,28 40,33 C37,27 35,33 31,27 C28,33 25,28 22,33 C19,27 17,33 13,27 C10,33 7,28 4,33 C3,30 1,33 0,30 L0,300 L400,300 L400,200 C397,196 394,202 390,196 C387,202 384,196 381,203 C377,196 374,203 370,196 C367,203 364,196 361,203 C357,196 354,203 350,196 C347,203 344,196 341,203 C337,196 334,203 330,196 C327,203 324,196 321,203 C317,196 314,203 310,196 C307,203 304,196 301,203 C297,196 294,203 290,196 C287,203 284,196 281,203 C277,196 274,203 270,196 C267,203 264,196 261,203 C257,196 254,203 250,196 C247,203 244,196 241,203 C237,196 234,203 230,196 C227,203 224,196 221,203 C217,196 214,203 210,196 C207,203 204,196 201,203 C197,196 194,203 190,196 C187,203 184,196 181,203 C177,196 174,203 170,196 C167,203 164,196 161,203 C157,196 154,203 150,196 C147,203 144,196 141,203 C137,196 134,203 130,196 C127,203 124,196 121,203 C117,196 114,203 110,196 C107,203 104,196 101,203 C97,196 94,203 90,196 C87,203 84,196 81,203 C77,196 74,203 70,196 C67,203 64,196 61,203 C57,196 54,203 50,196 C47,203 44,196 41,203 C37,196 34,203 30,196 C27,203 24,196 21,203 C17,196 14,203 10,196 C7,203 4,196 3,200 L0,200 L0,0 Z' fill='white'/%3E%3C/svg%3E") no-repeat;
    mask-size: 100% 100%;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M0,0 L400,0 L400,30 C397,27 395,32 392,28 C390,33 386,28 384,32 C381,27 378,33 374,28 C371,33 368,27 366,33 C362,27 360,33 356,27 C354,33 350,28 347,33 C344,27 342,33 338,27 C336,32 332,28 330,33 C326,27 324,33 321,28 C318,33 315,27 312,32 C308,27 306,33 302,27 C299,33 296,28 293,33 C290,27 288,33 284,27 C281,33 278,28 275,33 C271,27 269,33 266,28 C263,33 260,27 257,32 C253,27 251,33 247,27 C244,33 241,28 238,33 C235,27 233,33 229,27 C226,33 223,28 220,33 C217,27 215,33 211,27 C208,33 205,28 202,33 C199,27 197,33 193,27 C190,33 187,28 184,33 C181,27 179,33 175,27 C172,33 169,28 166,33 C163,27 161,33 157,27 C154,33 151,28 148,33 C145,27 143,33 139,27 C136,33 133,28 130,33 C127,27 125,33 121,27 C118,33 115,28 112,33 C109,27 107,33 103,27 C100,33 97,28 94,33 C91,27 89,33 85,27 C82,33 79,28 76,33 C73,27 71,33 67,27 C64,33 61,28 58,33 C55,27 53,33 49,27 C46,33 43,28 40,33 C37,27 35,33 31,27 C28,33 25,28 22,33 C19,27 17,33 13,27 C10,33 7,28 4,33 C3,30 1,33 0,30 L0,300 L400,300 L400,200 C397,196 394,202 390,196 C387,202 384,196 381,203 C377,196 374,203 370,196 C367,203 364,196 361,203 C357,196 354,203 350,196 C347,203 344,196 341,203 C337,196 334,203 330,196 C327,203 324,196 321,203 C317,196 314,203 310,196 C307,203 304,196 301,203 C297,196 294,203 290,196 C287,203 284,196 281,203 C277,196 274,203 270,196 C267,203 264,196 261,203 C257,196 254,203 250,196 C247,203 244,196 241,203 C237,196 234,203 230,196 C227,203 224,196 221,203 C217,196 214,203 210,196 C207,203 204,196 201,203 C197,196 194,203 190,196 C187,203 184,196 181,203 C177,196 174,203 170,196 C167,203 164,196 161,203 C157,196 154,203 150,196 C147,203 144,196 141,203 C137,196 134,203 130,196 C127,203 124,196 121,203 C117,196 114,203 110,196 C107,203 104,196 101,203 C97,196 94,203 90,196 C87,203 84,196 81,203 C77,196 74,203 70,196 C67,203 64,196 61,203 C57,196 54,203 50,196 C47,203 44,196 41,203 C37,196 34,203 30,196 C27,203 24,196 21,203 C17,196 14,203 10,196 C7,203 4,196 3,200 L0,200 L0,0 Z' fill='white'/%3E%3C/svg%3E") no-repeat;
    -webkit-mask-size: 100% 100%;
    z-index: 4;
}

/* Déchirure - Révélation avec texture papier et fibres visibles */
.tear-reveal {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.98);
    transform-origin: top right;
    transition: all 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    pointer-events: none;
    will-change: opacity, transform;
    /* Ombre réaliste de la déchirure */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.25));
}

/* Fibres de papier apparentes sur les bords déchirés */
.tear-reveal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        /* Effet de fibres de papier très subtiles */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.1'%3E%3Cpath d='M0,0 L5,0 L5,100 L0,100 Z'/%3E%3Cpath d='M10,0 L15,0 L15,100 L10,100 Z'/%3E%3Cpath d='M20,0 L23,0 L23,100 L20,100 Z'/%3E%3Cpath d='M30,0 L33,0 L33,100 L30,100 Z'/%3E%3Cpath d='M40,0 L45,0 L45,100 L40,100 Z'/%3E%3Cpath d='M50,0 L53,0 L53,100 L50,100 Z'/%3E%3Cpath d='M60,0 L65,0 L65,100 L60,100 Z'/%3E%3Cpath d='M70,0 L75,0 L75,100 L70,100 Z'/%3E%3Cpath d='M80,0 L83,0 L83,100 L80,100 Z'/%3E%3Cpath d='M90,0 L95,0 L95,100 L90,100 Z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.25;
    mask: inherit;
    -webkit-mask: inherit;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Effet de profondeur pour rendre la déchirure plus réaliste */
.tear-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    mask: inherit;
    -webkit-mask: inherit;
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Animation de déchirure plus naturaliste avec timing spécifique */
.tear-1.active {
    animation: tearReveal1 1.2s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
}

.tear-2.active {
    animation: tearReveal2 1.4s cubic-bezier(0.15, 0.8, 0.25, 1) 0.2s forwards;
}

.tear-3.active {
    animation: tearReveal3 1.6s cubic-bezier(0.15, 0.8, 0.25, 1) 0.4s forwards;
}

/* Animation organique et élastique de déchirement */
@keyframes tearReveal1 {
    0% { 
        opacity: 0; 
        transform: scale(0.9) rotate(-2deg) translateX(-10px);
        filter: blur(4px) drop-shadow(0 5px 15px rgba(0, 0, 0, 0));
    }
    25% {
        opacity: 0.4;
        transform: scale(1.05) rotate(1deg) translateX(-5px);
        filter: blur(2px) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
    }
    60% {
        opacity: 0.8;
        transform: scale(0.98) rotate(-0.5deg) translateX(2px);
        filter: blur(1px) drop-shadow(0 10px 25px rgba(0, 0, 0, 0.15));
    }
    100% { 
        opacity: 1; 
        transform: scale(1) rotate(0) translateX(0);
        filter: blur(0) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.2));
    }
}

@keyframes tearReveal2 {
    0% { 
        opacity: 0; 
        transform: scale(0.85) rotate(3deg) translateY(-15px);
        filter: blur(5px) drop-shadow(0 5px 15px rgba(0, 0, 0, 0));
    }
    30% {
        opacity: 0.5;
        transform: scale(1.08) rotate(-1.5deg) translateY(-8px);
        filter: blur(2px) drop-shadow(0 10px 25px rgba(0, 0, 0, 0.12));
    }
    65% {
        opacity: 0.85;
        transform: scale(0.96) rotate(0.8deg) translateY(-2px);
        filter: blur(0.5px) drop-shadow(0 15px 35px rgba(0, 0, 0, 0.18));
    }
    100% { 
        opacity: 1; 
        transform: scale(1) rotate(0) translateY(0);
        filter: blur(0) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.25));
    }
}

@keyframes tearReveal3 {
    0% { 
        opacity: 0; 
        transform: scale(0.8) rotate(-4deg) translate(8px, 10px);
        filter: blur(6px) drop-shadow(0 5px 15px rgba(0, 0, 0, 0));
    }
    35% {
        opacity: 0.6;
        transform: scale(1.12) rotate(2deg) translate(4px, 5px);
        filter: blur(3px) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.15));
    }
    70% {
        opacity: 0.9;
        transform: scale(0.94) rotate(-1deg) translate(1px, 2px);
        filter: blur(1px) drop-shadow(0 20px 45px rgba(0, 0, 0, 0.22));
    }
    100% { 
        opacity: 1; 
        transform: scale(1) rotate(0) translate(0, 0);
        filter: blur(0) drop-shadow(0 25px 50px rgba(0, 0, 0, 0.3));
    }
}

/* Animation du cœur vibrant pour le chargement */
@keyframes heartPulse {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 0.8;
    }
    15% {
        transform: translate(-50%, -50%) scale(1.3) rotate(-8deg);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) scale(0.8) rotate(6deg);
        opacity: 0.9;
    }
    45% {
        transform: translate(-50%, -50%) scale(1.2) rotate(-4deg);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(0.9) rotate(3deg);
        opacity: 0.95;
    }
    75% {
        transform: translate(-50%, -50%) scale(1.1) rotate(-2deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 0.85;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.3));
    }
    50% {
        filter: drop-shadow(0 6px 20px rgba(212, 175, 55, 0.6));
    }
}

/* Apparition centrée sans translation verticale pour éviter décalage initial */
@keyframes fadeInCenter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Animation spectaculaire d'entrée de la carte - Version ultra smooth et rapide */
@keyframes cardRevealEntrance {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
        filter: blur(5px) brightness(0.8);
    }
    30% {
        opacity: 0.7;
        transform: scale(0.98) translateY(5px);
        filter: blur(2px) brightness(0.95);
    }
    60% {
        opacity: 0.9;
        transform: scale(1.01) translateY(-1px);
        filter: blur(0.5px) brightness(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0) brightness(1);
    }
}

/* ========== ENCART DE DÉCOMPTE DE VALIDITÉ ========== */
.validity-countdown {
    margin: var(--space-lg) auto;
    max-width: 400px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d1 100%);
    border: 2px solid var(--gold-light);
    border-radius: 12px;
    padding: var(--space-md);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    animation: pulseCountdown 3s ease-in-out infinite;
}

.countdown-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.countdown-icon {
    font-size: 1.5rem;
    animation: tickTock 1s ease-in-out infinite alternate;
}

.countdown-text {
    text-align: center;
}

.countdown-label {
    display: block;
    font-size: 0.9rem;
    color: var(--gold-dark);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.countdown-timer {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold-darker);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes pulseCountdown {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
        border-color: var(--gold-light);
    }
    50% { 
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
        border-color: var(--gold-primary);
    }
}

@keyframes tickTock {
    0% { transform: rotate(-10deg); }
    100% { transform: rotate(10deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .validity-countdown {
        margin: var(--space-md) auto;
        padding: var(--space-sm);
    }
    
    .countdown-timer {
        font-size: 1.1rem;
    }
    
    .countdown-icon {
        font-size: 1.3rem;
    }
}

/* ⏰ ENCART DE VALIDITÉ AVEC COMPTE À REBOURS DYNAMIQUE */
.validity-countdown {
    margin: var(--space-lg) auto var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.03) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    backdrop-filter: blur(5px);
    transition: all 0.3s var(--smooth);
}

.validity-countdown:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-color: rgba(212, 175, 55, 0.3);
}

.countdown-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.countdown-icon {
    font-size: 1.5rem;
    animation: countdownPulse 2s ease-in-out infinite;
}

.countdown-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.countdown-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.countdown-timer {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.5px;
}

@keyframes countdownPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.1); 
        opacity: 0.8; 
    }
}