:root {
    --gold: #FFD700;
    --soft-pink: #ffb7c5;
    --deep-pink: #ff1493;
    --neon-glow: 0 0 15px rgba(255, 20, 147, 0.6), 0 0 30px rgba(255, 183, 197, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.12);
    --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Tajawal', sans-serif; background: #050505; height: 100vh; overflow: hidden; color: white; }

/* 1. الخلفية الساحرة وتأثير الشفق */
.cinematic-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -5; }
.cinematic-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(0.6); }
.aurora-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(255,20,147,0.15) 0%, transparent 50%, rgba(255,215,0,0.1) 100%);
    background-size: 200% 200%; animation: auroraShift 10s ease infinite alternate;
}
@keyframes auroraShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* 2. شاشة التحميل على شكل قلب نابض */
#premium-loader { position: fixed; inset: 0; background: #0a0a0a; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 1s ease; }
.heart-pulse-loader { width: 50px; height: 50px; background: var(--deep-pink); clip-path: path('M25,45 C45,30 50,15 40,5 C32,-2 25,10 25,10 C25,10 18,-2 10,5 C0,15 5,30 25,45 Z'); animation: pulseLoader 1s infinite alternate; margin-bottom: 20px; filter: drop-shadow(0 0 10px var(--deep-pink)); }
.loader-text { font-family: 'Cairo', sans-serif; font-size: 1.1rem; color: var(--soft-pink); animation: fade 1.5s infinite; }
@keyframes pulseLoader { 0% { transform: scale(0.8); } 100% { transform: scale(1.2); } }
@keyframes fade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* 3. حاوية البطاقة الزجاجية */
.wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 15px; perspective: 1200px; }

.glass-card {
    position: relative; background: var(--glass-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 40px; padding: 40px 20px;
    width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d; animation: floatIdle 6s ease-in-out infinite; transition: transform 0.4s var(--ease-apple);
}

@keyframes floatIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* 4. العنوان والفخامة */
.glow-title {
    font-family: 'Reem Kufi', sans-serif; font-size: clamp(2.5rem, 8vw, 3.2rem); margin-bottom: 25px;
    background: linear-gradient(to right, #fff, var(--soft-pink), #fff);
    background-size: 200% auto; color: transparent; -webkit-background-clip: text;
    animation: textShine 3s linear infinite; filter: drop-shadow(0 4px 10px rgba(255,20,147,0.5));
}
@keyframes textShine { to { background-position: 200% center; } }

/* 5. الصورة المتمركزة (توسيط وتأثيرات ساحرة) */
.profile-centerpiece { display: flex; justify-content: center; align-items: center; margin-bottom: 35px; width: 100%; }
.profile-wrapper { position: relative; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; }
.profile-wrapper:hover .image-container { transform: scale(1.08) translateZ(15px); }

.image-container { width: 130px; height: 130px; border-radius: 50%; z-index: 5; transition: transform 0.5s var(--ease-apple); box-shadow: var(--neon-glow); }
.image-container img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; }

/* الحلقات السحرية المزدوجة */
.magic-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; }
.outer-ring { width: 150px; height: 150px; border-top-color: var(--soft-pink); border-bottom-color: var(--gold); animation: spinRing 8s linear infinite; z-index: 1; filter: blur(1px); }
.inner-ring { width: 140px; height: 140px; border-left-color: var(--deep-pink); border-right-color: #fff; animation: spinRingReverse 5s linear infinite; z-index: 2; }

@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes spinRingReverse { to { transform: rotate(-360deg); } }

/* الأيقونات العائمة حول الصورة */
.floating-mini-heart { position: absolute; font-size: 1.2rem; z-index: 6; animation: floatMini 3s ease-in-out infinite alternate; opacity: 0.8; }
.h1 { top: -10px; right: -5px; animation-delay: 0s; }
.h2 { bottom: -5px; left: -10px; font-size: 1.5rem; animation-delay: 1s; }
.h3 { top: 50%; right: -20px; animation-delay: 2s; }
@keyframes floatMini { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-15px) scale(1.2); } }

/* 6. العداد النيون الزجاجي */
.timer-grid { display: flex; justify-content: center; gap: 8px; margin-bottom: 25px; width: 100%; }
.time-box { position: relative; width: clamp(65px, 18vw, 85px); height: clamp(75px, 20vw, 95px); background: rgba(0,0,0,0.25); border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 0 0 10px rgba(255,255,255,0.05); }

.time-box span { font-family: 'Cairo', sans-serif; font-size: clamp(1.4rem, 5vw, 1.8rem); font-weight: 900; color: #fff; text-shadow: 0 0 10px var(--soft-pink); z-index: 2; margin-bottom: -5px; }
.time-box p { font-family: 'Tajawal', sans-serif; font-size: clamp(0.6rem, 2vw, 0.8rem); color: #ccc; z-index: 2; font-weight: 700; }

.progress-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); width: 80px; height: 80px; z-index: 1; }
.progress-ring circle { fill: none; stroke: var(--soft-pink); stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1s var(--ease-apple); filter: drop-shadow(0 0 3px var(--deep-pink)); stroke-linecap: round; }

/* 7. الاقتباسات */
.quote-section { text-align: center; width: 100%; }
.romantic-quote { font-family: 'Cairo', sans-serif; font-size: clamp(1.1rem, 4vw, 1.3rem); font-weight: 700; color: #fff; line-height: 1.5; min-height: 50px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.sub-quote { font-family: 'Tajawal', sans-serif; font-size: clamp(0.8rem, 3vw, 1rem); color: var(--soft-pink); opacity: 0; animation: fadeInUp 1s 4s forwards; margin-top: 10px; }

/* 8. نظام الجزيئات (القلوب المتصاعدة) */
#particles-layer { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.magic-particle { position: absolute; bottom: -5vh; animation: riseUp linear forwards; opacity: 0; }
@keyframes riseUp {
    0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    80% { opacity: 0.6; }
    100% { transform: translateY(-110vh) scale(1.5) rotate(360deg); opacity: 0; }
}

/* حركة الدخول الانسيابية */
.reveal { opacity: 0; transform: translateY(30px); animation: fadeInUp 1s var(--ease-apple) forwards; }
.reveal:nth-child(1) { animation-delay: 0.3s; }
.reveal:nth-child(2) { animation-delay: 0.6s; }
.reveal:nth-child(3) { animation-delay: 0.9s; }
.reveal:nth-child(4) { animation-delay: 1.2s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* إعدادات الشاشات الصغيرة وتوافق SVG */
@media (max-width: 400px) {
    .progress-ring { width: 65px; height: 65px; }
    .progress-ring circle { r: 30; cx: 32.5; cy: 32.5; stroke-dasharray: 188; stroke-dashoffset: 188; }
}