@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Cairo:wght@400;600;700&display=swap');

body {
    font-family: var(--font-main);
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: background-color 0.5s, color 0.5s;
}

body { 
    background-color: #fdfbf7; 
    background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, #fdfbf7 70%);
    color: #0f172a; 
    min-height: 100vh; 
}

html.dark body { 
    background-color: #050505; 
    background-image: radial-gradient(circle at 50% 0%, #151515 0%, #050505 80%); 
    color: white; 
}

body.loading { overflow: hidden; height: 100vh; touch-action: none; }
html.skip-preloader body.loading { overflow: auto; height: auto; touch-action: auto; }
html.skip-preloader #epic-preloader { display: none !important; }

h1, h2, h3, .font-serif { font-family: var(--font-serif); }

#epic-preloader {
    position: fixed; inset: 0; z-index: 99999; 
    background-color: #fdfbf7; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}
html.dark #epic-preloader { background-color: #050505; }
#epic-preloader.fade-out { opacity: 0; visibility: hidden; }

.preloader-logo {
    width: 100px; height: 100px; border-radius: 20px; object-fit: cover;
    filter: drop-shadow(0 0 25px rgba(250, 204, 21, 0.6));
    animation: pulseLogo 2s infinite alternate ease-in-out;
}
@keyframes pulseLogo {
    0% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.4)); }
    100% { transform: scale(1.1); filter: drop-shadow(0 0 30px rgba(250, 204, 21, 0.8)); }
}

.loading-text {
    margin-top: 24px; font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: 0.3em; font-weight: bold;
    background: linear-gradient(to right, #facc15, #f59e0b); -webkit-background-clip: text; color: transparent;
    animation: pulseText 1.5s ease-in-out infinite;
}
@keyframes pulseText { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

#interactive-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; display: block; }

.glow-orb {
    position: absolute; border-radius: 50%; filter: blur(100px); 
    opacity: 0.05;
    animation: floatOrb 20s infinite alternate ease-in-out; pointer-events: none;
}
html.dark .glow-orb { opacity: 0.15; }

.orb-1 { width: 50vw; height: 50vw; background: #f59e0b; top: -10%; left: -10%; }
.orb-2 { width: 60vw; height: 60vw; background: #facc15; bottom: -20%; right: -10%; animation-delay: -5s; }

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 80px) scale(1.1); }
}

.perfect-tooth-bg {
    position: absolute; top: -5%; left: 50%; transform: translateX(-50%);
    width: 120vw; max-width: 1100px; height: 1100px;
    background: linear-gradient(180deg, rgba(250, 204, 21, 0.08) 0%, transparent 70%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.8 4.7C17.6 3.6 16.1 3 14.5 3c-1.3 0-2.6.4-3.6 1.2-1-.8-2.3-1.2-3.6-1.2-1.6 0-3.1.6-4.3 1.7-1.1 1.1-1.7 2.6-1.7 4.3 0 2.2 1.2 4.1 3 5V18c0 1.9 1.6 3.5 3.5 3.5 1.7 0 3.2-1.2 3.5-2.8l.5-2.2.5 2.2c.3 1.6 1.8 2.8 3.5 2.8 1.9 0 3.5-1.6 3.5-3.5v-4c1.8-.9 3-2.8 3-5 0-1.7-.6-3.2-1.7-4.3z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center top;
    z-index: -1; pointer-events: none;
    animation: breatheTooth 8s infinite alternate ease-in-out;
}
html.dark .perfect-tooth-bg {
    background: linear-gradient(180deg, rgba(20,20,20,0.8) 0%, transparent 70%);
}

@keyframes breatheTooth {
    from { opacity: 0.7; filter: drop-shadow(0 0 0px transparent); }
    to { opacity: 0.95; filter: drop-shadow(0 0 30px rgba(250, 204, 21, 0.08)); }
}

.glass-card {
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    background: rgba(255, 255, 255, 0.7); 
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1.5rem; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
html.dark .glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.8);
}

.glass-input { 
    background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.1); 
    border-radius: 0.75rem; padding: 0.75rem 1rem; color: #0f172a; width: 100%; transition: all 0.3s; 
}
html.dark .glass-input {
    background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); color: white;
}
.glass-input:focus { border-color: rgba(250, 204, 21, 0.6); outline: none; box-shadow: 0 0 20px rgba(250, 204, 21, 0.1); }

.reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }