* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.greeingnew-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    width: 100%;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
}

/* Main Card */
.card {
    position: relative;
    width: 480px;
    height: 420px;
    background: white;
    border-radius: 24px;
   /*  box-shadow: none; */
    overflow: hidden;
    opacity: 0;
    transform: scale(0.9);
    animation: cardFadeIn 0.6s ease-out forwards;
}

@keyframes cardFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Gradient Overlay */
.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #eff6ff, #faf5ff, #fdf2f8);
    opacity: 0.6;
}

/* Animated Geometric Shapes */
.geometric-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.shape-1 {
    right: -80px;
    top: -80px;
    width: 256px;
    height: 256px;
    background: linear-gradient(to bottom right, rgba(96, 165, 250, 0.2), rgba(168, 85, 247, 0.2));
    animation: rotate-scale-1 20s linear infinite, scale-pulse-1 4s ease-in-out infinite;
}

.shape-2 {
    left: -64px;
    bottom: -64px;
    width: 224px;
    height: 224px;
    background: linear-gradient(to top right, rgba(244, 114, 182, 0.2), rgba(251, 146, 60, 0.2));
    animation: rotate-scale-2 25s linear infinite, scale-pulse-2 5s ease-in-out infinite;
}

@keyframes rotate-scale-1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotate-scale-2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes scale-pulse-1 {
    0%, 100% { transform: scale(1) rotate(var(--rotation, 0deg)); }
    50% { transform: scale(1.1) rotate(var(--rotation, 0deg)); }
}

@keyframes scale-pulse-2 {
    0%, 100% { transform: scale(1) rotate(var(--rotation, 0deg)); }
    50% { transform: scale(1.2) rotate(var(--rotation, 0deg)); }
}

/* Accent Border */
.accent-border {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to bottom, #3b82f6, #a855f7, #ec4899);
}

/* Content Container */
.content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

/* Top Section */
.top-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInDown 0.5s ease-out 0.2s forwards;
}

@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.icon-wrapper {
    width: 28px;
    height: 28px;
    animation: iconWiggle 2s ease-in-out infinite;
}

@keyframes iconWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}

.sparkles-icon {
    width: 100%;
    height: 100%;
    color: #a855f7;
}

.title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #475569;
}

.title sup {
    font-size: 14px;
}

/* Year Display */
.year-wrapper {
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    animation: fadeInScale 0.6s ease-out 0.3s forwards;
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.year {
    font-size: 96px;
    font-weight: bold;
    background: linear-gradient(to right, #2563eb, #9333ea, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.05em;
    line-height: 1;
}

.underline {
    height: 4px;
    background: linear-gradient(to right, #3b82f6, #a855f7, #ec4899);
    border-radius: 9999px;
    margin-top: 8px;
    width: 0;
    animation: underlineGrow 0.8s ease-out 0.6s forwards;
}

@keyframes underlineGrow {
    to { width: 100%; }
}

/* Bottom Section */
.bottom-section {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out 0.5s forwards;
    margin-bottom: 80px;
}

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

.quote-container {
    position: relative;
}

.quote-mark {
    position: absolute;
    font-size: 48px;
    color: #d8b4fe;
    opacity: 0.4;
    font-family: Georgia, serif;
}

.quote-open {
    left: -16px;
    top: -8px;
}

.quote-close {
    right: -8px;
    bottom: -8px;
}

.korean-text {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
    padding-left: 16px;
}

.line-1 {
    color: #1e293b;
}

.line-2 {
    background: linear-gradient(to right, #374151, #111827);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Floating Particles */
.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(to right, #60a5fa, #a78bfa);
    border-radius: 50%;
    opacity: 0.4;
}

.particle-1 {
    left: 20%;
    top: 30%;
    animation: particleFloat1 2s ease-in-out infinite;
}

.particle-2 {
    left: 32%;
    top: 50%;
    animation: particleFloat2 2.3s ease-in-out 0.2s infinite;
}

.particle-3 {
    left: 44%;
    top: 70%;
    animation: particleFloat3 2.6s ease-in-out 0.4s infinite;
}

.particle-4 {
    left: 56%;
    top: 30%;
    animation: particleFloat4 2.9s ease-in-out 0.6s infinite;
}

.particle-5 {
    left: 68%;
    top: 50%;
    animation: particleFloat5 3.2s ease-in-out 0.8s infinite;
}

.particle-6 {
    left: 80%;
    top: 70%;
    animation: particleFloat6 3.5s ease-in-out 1s infinite;
}

@keyframes particleFloat1 {
    0%, 100% { transform: translateY(0); opacity: 0.4; transform: scale(1); }
    50% { transform: translateY(-15px); opacity: 0.8; transform: scale(1.3); }
}

@keyframes particleFloat2 {
    0%, 100% { transform: translateY(0); opacity: 0.4; transform: scale(1); }
    50% { transform: translateY(-15px); opacity: 0.8; transform: scale(1.3); }
}

@keyframes particleFloat3 {
    0%, 100% { transform: translateY(0); opacity: 0.4; transform: scale(1); }
    50% { transform: translateY(-15px); opacity: 0.8; transform: scale(1.3); }
}

@keyframes particleFloat4 {
    0%, 100% { transform: translateY(0); opacity: 0.4; transform: scale(1); }
    50% { transform: translateY(-15px); opacity: 0.8; transform: scale(1.3); }
}

@keyframes particleFloat5 {
    0%, 100% { transform: translateY(0); opacity: 0.4; transform: scale(1); }
    50% { transform: translateY(-15px); opacity: 0.8; transform: scale(1.3); }
}

@keyframes particleFloat6 {
    0%, 100% { transform: translateY(0); opacity: 0.4; transform: scale(1); }
    50% { transform: translateY(-15px); opacity: 0.8; transform: scale(1.3); }
}

/* Corner Accents */
.corner-accent {
    position: absolute;
    width: 64px;
    height: 64px;
    opacity: 0.3;
}

.corner-top-right {
    top: 32px;
    right: 32px;
    border-top: 2px solid #d8b4fe;
    border-right: 2px solid #d8b4fe;
    border-top-right-radius: 16px;
}

.corner-bottom-left {
    bottom: 32px;
    left: 32px;
    border-bottom: 2px solid #bfdbfe;
    border-left: 2px solid #bfdbfe;
    border-bottom-left-radius: 16px;
}