/**
 * Mobile Fix - Shared Stylesheet File
 * Implements theme tokens (light/dark), smooth scroll, scroll animations,
 * FAQ interactive accordions, and premium micro-interactions.
 */

/* 1. CSS Variable Theme System */
:root {
    --surface: #f7f9ff;
    --surface-bright: #f7f9ff;
    --surface-pure: #FFFFFF;
    --background: #f7f9ff;
    --on-background: #181c20;
    --on-surface: #181c20;
    --on-surface-variant: #424753;
    --border-subtle: #DADCE0;
    --surface-container-low: #f1f4fa;
    --surface-container: #ebeef4;
    --surface-container-high: #e5e8ee;
    --surface-container-highest: #dfe3e8;
    --secondary: #5e5e62;
    --outline-variant: #c2c6d5;
    
    /* Brand Logo Colors */
    --brand-yellow: #f5c518;
    --brand-orange: #e04c1a;
}


/* 2. Global Setup */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* Offset for sticky header */
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: 'Geist', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--background);
    color: var(--on-surface);
}


/* 4. Circuit Grid Utility (Subtle High-tech pattern) */
.circuit-grid {
    background-image: radial-gradient(circle at 1px 1px, rgba(245, 197, 24, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
}

/* 5. Material Symbols configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}
.material-symbols-outlined.font-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* 6. Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.03); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-pulse-subtle {
    animation: pulse-subtle 3s ease-in-out infinite;
}

/* 7. Scroll Reveal System */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }

/* 8. Custom Card & Button Interactions */
.premium-card-hover {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-card-hover:hover {
    transform: translateY(-6px);
    border-color: rgba(224, 76, 26, 0.35) !important;
    box-shadow: 0 20px 25px -5px rgba(224, 76, 26, 0.05), 
                0 10px 10px -5px rgba(224, 76, 26, 0.03),
                0 0 40px -5px rgba(224, 76, 26, 0.06);
}

.btn-premium-action {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-premium-action:hover {
    filter: brightness(0.97);
    box-shadow: 0 4px 14px rgba(224, 76, 26, 0.3);
    transform: translateY(-1px);
}
.btn-premium-action:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 4px rgba(224, 76, 26, 0.15);
}

/* Nav Link transitions */
.nav-link-transition {
    position: relative;
}
.nav-link-transition::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--brand-orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link-transition:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-link-active {
    color: var(--brand-orange) !important;
    font-weight: 700;
}
.nav-link-active::after {
    transform: scaleX(1) !important;
}

/* Custom focus states for inputs */
input:focus, textarea:focus, select:focus {
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 3px rgba(224, 76, 26, 0.2) !important;
    outline: none !important;
}

/* Premium Orange/Gold Flash Card Highlight Animation */
@keyframes gold-flash {
    0% { border-color: var(--border-subtle); box-shadow: 0 0 0 0 rgba(224, 76, 26, 0); }
    25% { border-color: var(--brand-orange); box-shadow: 0 0 0 8px rgba(224, 76, 26, 0.3); transform: scale(1.015); }
    100% { border-color: var(--border-subtle); box-shadow: 0 0 0 0 rgba(224, 76, 26, 0); }
}
.gold-highlight-flash {
    animation: gold-flash 2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

/* 9. Lightbox styles & custom zoom cursor */
.cursor-zoom-in {
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.cursor-zoom-in:hover {
    transform: scale(1.02) translateY(-2px);
    filter: brightness(1.03);
    box-shadow: 0 20px 25px -5px rgba(224, 76, 26, 0.05), 
                0 10px 10px -5px rgba(224, 76, 26, 0.03);
}