/* PAFI Karimun Custom Styles */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Styles */
body { 
    font-family: 'Inter', sans-serif; 
}

/* Animation Classes */
.fade-in { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.6s ease; 
}

.fade-in.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

.fade-left { 
    opacity: 0; 
    transform: translateX(-30px); 
    transition: all 0.8s ease; 
}

.fade-left.visible { 
    opacity: 1; 
    transform: translateX(0); 
}

.fade-right { 
    opacity: 0; 
    transform: translateX(30px); 
    transition: all 0.8s ease; 
}

.fade-right.visible { 
    opacity: 1; 
    transform: translateX(0); 
}

/* Counter Styling */
.counter { 
    font-variant-numeric: tabular-nums; 
}

/* Pulse Animation */
.pulse-slow { 
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; 
}

/* FAQ Content Animations */
.faq-content {
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
}

/* Glossary Content Animations */
#glossaryContent {
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
}

/* Header Transitions */
header {
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Custom Harbor Color Palette */
:root {
    --harbor-50: #f8fafc;
    --harbor-100: #f1f5f9;
    --harbor-200: #e2e8f0;
    --harbor-300: #cbd5e1;
    --harbor-400: #94a3b8;
    --harbor-500: #64748b;
    --harbor-600: #475569;
    --harbor-700: #334155;
    --harbor-800: #1e293b;
    --harbor-900: #0f172a;
}

/* Harbor color utility classes */
.bg-harbor-50 { background-color: var(--harbor-50); }
.bg-harbor-100 { background-color: var(--harbor-100); }
.bg-harbor-200 { background-color: var(--harbor-200); }
.bg-harbor-300 { background-color: var(--harbor-300); }
.bg-harbor-400 { background-color: var(--harbor-400); }
.bg-harbor-500 { background-color: var(--harbor-500); }
.bg-harbor-600 { background-color: var(--harbor-600); }
.bg-harbor-700 { background-color: var(--harbor-700); }
.bg-harbor-800 { background-color: var(--harbor-800); }
.bg-harbor-900 { background-color: var(--harbor-900); }

.text-harbor-50 { color: var(--harbor-50); }
.text-harbor-100 { color: var(--harbor-100); }
.text-harbor-200 { color: var(--harbor-200); }
.text-harbor-300 { color: var(--harbor-300); }
.text-harbor-400 { color: var(--harbor-400); }
.text-harbor-500 { color: var(--harbor-500); }
.text-harbor-600 { color: var(--harbor-600); }
.text-harbor-700 { color: var(--harbor-700); }
.text-harbor-800 { color: var(--harbor-800); }
.text-harbor-900 { color: var(--harbor-900); }

/* Gradient backgrounds */
.bg-gradient-harbor {
    background: linear-gradient(135deg, var(--harbor-800) 0%, var(--harbor-700) 100%);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .fade-in, .fade-left, .fade-right {
        transform: none;
        opacity: 1;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}