/* ===== INVITATION CARD (PAGE 2) ===== */
    h1 {
        font-family: "Playfair Display", serif;
        /*font-family: "Poiret One", sans-serif;*/
        text-transform: uppercase;
        font-size: 15px;
        color: #d4af37;
        margin-bottom: 15px;
    }

    .subtitle {
        display: block;
        font-family: "Playfair Display", serif;
        /*font-family: "Poiret One", sans-serif;*/
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 20px;
        margin-left: 40px;
        margin-right: 40px;
    }
    
    .subtitle.animate-logo {
      animation: sparkleOnce 2s ease-out forwards;
    }

    .logo-image {
        max-width: 100%;
        max-height: 200px;
        display: block;
        margin: 0 auto 20px;
    }
    
    .names {
        transform: translateX(-30px);
        display: block;
        font-family: "Zeyada", cursive;
        font-size: 30px;
        margin: 15px 0;
    }
    
    .names-cowok {
        transform: translateX(30px);
        display: block;
        font-family: "Zeyada", cursive;
        font-size: 30px;
        margin: 15px 0;
    }

    .ampersand {
        font-family: "Zeyada", cursive;
        font-size: 22px;
        color: #9c9c99;
        display: block;
        margin: 5px 0;
    }

    .countdown { 
        font-family: "Playfair Display", serif;
        /*font-family: "Poiret One", sans-serif; */
        margin: 20px 0;
    }

    .countdown-title { 
        font-family: "Playfair Display", serif;
        font-size: 12px; 
        letter-spacing: 1.2px; 
        color: #d4af37; 
        margin-bottom: 10px; 
    }

    .countdown-timer {
        display: flex; 
        justify-content: space-around; 
    }
    
    .time-number { 
        font-size: 20px; 
        font-weight: 600; 
        color: #d4af37;
    }
    
    .time-label { 
        font-size: 9px; 
        text-transform: uppercase; 
        color: #ccc; 
    }

    .date-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin: 25px 0 30px;
        font-family: "Poiret One", sans-serif;
    }

    .pill {
        padding: 10px 25px;
        border: 1.3px solid #d4af37;
        border-radius: 30px;
        font-size: 13px;
        letter-spacing: 2px;
        color: #ffffff;
    }

    .circle {
        border: 1.3px solid #d4af37;
        width: 80px; height: 80px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
    }
    
    
    /* Base style tanpa animasi */
    .subtitle,
    .logo-image,
    .names,
    .names-cowok
    .countdown-timer
    .date-container {
      opacity: 0;
    }
    
    /* Animasi ketika class animate ditambahkan */
    .subtitle.animate {
      animation: sparkleOnce 3s ease-out forwards;
    }
    .logo-image.animate {
      animation: sparkleOnce 3s ease-out forwards;
    }
    .names.animate {
      animation: fadeInFromLeft 3s ease-out forwards;
    }
    .names-cowok.animate {
      animation: fadeInFromRight 3s ease-out forwards;
    }
    
    .countdown-timer.animate {
        animation: zoomInOut 3s ease-in-out infinite;
    }
    
    .date-container.animate {
        animation: sparkleOnce 3s ease-in-out forwards;
    }
    
    @keyframes fadeInFromLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes fadeInFromRight {
      from { opacity: 0; transform: translateX(30px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes sparkleOnce {
      0% { opacity: 0; transform: translateY(20px) scale(0.8); }
      50% { opacity: 1; transform: translateY(-8px) scale(1.05); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    @keyframes zoomInOut {
      0% { transform: scale(0.9); opacity: 0.8;}
      50% {transform: scale(1.1); opacity: 1;}
      100% {transform: scale(1); opacity: 1;}
    }