html { scroll-behavior: smooth; }

/* ===== CARD HOVER ===== */
.card-hover { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.15); }
.dark .card-hover:hover { box-shadow: 0 20px 40px rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.1); }

/* ===== COUNTDOWN CIRCLE ===== */
.countdown-circle { position: relative; width: 100px; height: 100px; }
.countdown-circle svg { transform: rotate(-90deg); }
.countdown-circle .progress-ring { transition: stroke-dashoffset 1s linear; }

/* ===== SAFELINK BUTTON ===== */
.safelink-button-area { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.safelink-btn { min-width: 200px; }
.safelink-btn:not(:disabled):hover { transform: scale(1.02); }

/* ===== PROSE CONTENT ===== */
.prose h1 { font-size: 2rem; font-weight: 700; margin: 1.5rem 0 1rem; color: #f1f5f9; }
.prose h2 { font-size: 1.5rem; font-weight: 600; margin: 1.25rem 0 0.75rem; color: #e2e8f0; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; color: #e2e8f0; }
.prose p { margin: 0.75rem 0; line-height: 1.8; color: #cbd5e1; }
.prose a { color: #a78bfa; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #c4b5fd; }
.prose img { border-radius: 0.75rem; margin: 1rem 0; max-width: 100%; }
.prose ul, .prose ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.prose li { margin: 0.25rem 0; }
.prose blockquote { border-left: 4px solid #8b5cf6; padding-left: 1rem; margin: 1rem 0; font-style: italic; color: #94a3b8; }
.prose code { background: #1e1b4b; padding: 0.125rem 0.375rem; border-radius: 0.375rem; font-size: 0.875rem; color: #c4b5fd; }
.prose pre { background: #0f0d2e; color: #e2e8f0; padding: 1rem; border-radius: 0.75rem; overflow-x: auto; margin: 1rem 0; border: 1px solid rgba(139,92,246,0.15); }
.prose pre code { background: transparent; padding: 0; color: inherit; }
/* Light mode prose */
html:not(.dark) .prose h1 { color: #111827; }
html:not(.dark) .prose h2, html:not(.dark) .prose h3 { color: #1f2937; }
html:not(.dark) .prose p { color: #4b5563; }
html:not(.dark) .prose a { color: #7c3aed; }
html:not(.dark) .prose code { background: #f3f4f6; color: #6d28d9; }
html:not(.dark) .prose pre { background: #f9fafb; color: #1f2937; border-color: #e5e7eb; }
html:not(.dark) .prose blockquote { color: #6b7280; border-color: #8b5cf6; }

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== FADE IN ANIMATION ===== */
.fade-in { animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== HERO STAGGERED FADE ===== */
.hero-fade-in { opacity: 0; animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards; }
.hero-fade-in:nth-child(1) { animation-delay: 0.1s; }
.hero-fade-in:nth-child(2) { animation-delay: 0.2s; }
.hero-fade-in:nth-child(3) { animation-delay: 0.35s; }
.hero-fade-in:nth-child(4) { animation-delay: 0.5s; }
.hero-fade-in:nth-child(5) { animation-delay: 0.6s; }

/* ===== HERO FLOATING ELEMENTS ===== */
.hero-float-1 { animation: heroFloat1 6s ease-in-out infinite; }
.hero-float-2 { animation: heroFloat2 8s ease-in-out infinite; }
.hero-float-3 { animation: heroFloat3 7s ease-in-out infinite; }

@keyframes heroFloat1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes heroFloat2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@keyframes heroFloat3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ===== LINE CLAMP ===== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== ANIMATE ON SCROLL ===== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Staggered delays for card groups */
.animate-on-scroll.visible:nth-child(1) { transition-delay: 0s; }
.animate-on-scroll.visible:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll.visible:nth-child(3) { transition-delay: 0.15s; }
.animate-on-scroll.visible:nth-child(4) { transition-delay: 0.2s; }
.animate-on-scroll.visible:nth-child(5) { transition-delay: 0.25s; }
.animate-on-scroll.visible:nth-child(6) { transition-delay: 0.3s; }

/* ===== LINE CLAMP 3 ===== */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== GLOW EFFECT ===== */
.glow-purple { box-shadow: 0 0 20px rgba(139,92,246,0.15), 0 0 60px rgba(139,92,246,0.05); }

/* ===== GRADIENT TEXT ===== */
.gradient-text {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== GLASS CARD ===== */
.glass-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139,92,246,0.08);
}

/* ===== PULSE RING ===== */
@keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}
.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid currentColor;
    animation: pulseRing 2s ease-out infinite;
}

/* ===== SMOOTH BODY ===== */
body {  }
html:not(.dark) body { background: #ffffff; }
html.dark body { background: #0a0e27; }