/* =============================================
   InfinitySpace42 - Core Styles
   Base Reset, CSS Variables, Themes, Preferences
   ============================================= */

/* =============================================
   Base Reset
   ============================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================================
   CSS Variables & Theme
   ============================================= */

:root {
    /* Futuristic Color Palette */
    --primary-cyan: #00ffff;
    --primary-purple: #8b5cf6;
    --accent-neon: #39ff14;
    --surface-dark: #0d1b2a;
    --surface-darker: #090d1f;
    --surface-dark-rgb: 13, 27, 42;
    --dark-bg: var(--surface-dark);
    --unified-background-base: #7E00B4;
    --unified-background-gradient: linear-gradient(135deg, #7E00B4 0%, #0096C7 100%);
    --unified-background-overlay: linear-gradient(155deg,
            rgba(62, 0, 110, 0.94) 0%,
            rgba(26, 28, 96, 0.9) 52%,
            rgba(10, 46, 110, 0.92) 100%);
    --body-gradient: var(--unified-background-gradient);
    --page-gradient: var(--unified-background-gradient);
    --page-overlay-gradient: var(--unified-background-overlay);
    --hero-gradient: linear-gradient(135deg, rgba(10, 10, 30, 0.95) 0%, rgba(26, 26, 46, 0.94) 50%, rgba(42, 42, 62, 0.95) 100%);
    --page-bg-base: var(--unified-background-base);
    --page-accent: var(--primary-cyan);
    --page-accent-rgb: 0, 255, 255;
    --page-accent-secondary: var(--primary-purple);
    --page-accent-secondary-rgb: 139, 92, 246;
    --particle-color: rgba(var(--page-accent-rgb), 0.65);
    --darker-bg: var(--surface-darker);
    --card-bg: rgba(var(--surface-dark-rgb), 0.85);
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --text-accent: var(--primary-cyan);
    --banner-color: #0a0a1e;
    --banner-color-rgb: 10, 10, 30;
    --banner-text-color: var(--text-secondary);
    
    /* Neon Colors for Cards */
    --neon-cyan: #00ffff;
    --neon-pink: #ff00ff;
    --neon-green: #00ff00;
    --neon-yellow: #ffff00;
    
    /* Typography */
    --font-title: 'Orbitron', monospace;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    /* Spacing */
    --container-max-width: 1200px;
    --section-padding: 80px 0;
    --bg-dark: var(--dark-bg);
    --text-light: var(--text-primary);
}

html {
    background-color: var(--page-bg-base, var(--bg-dark));
}

body {
    font-family: var(--font-body);
    background-color: var(--page-bg-base, var(--bg-dark));
    background-image:
        var(--page-overlay-gradient, linear-gradient(155deg,
                rgba(62, 0, 110, 0.94) 0%,
                rgba(26, 28, 96, 0.9) 52%,
                rgba(10, 46, 110, 0.92) 100%)),
        var(--page-gradient, linear-gradient(135deg, #7E00B4 0%, #0096C7 100%));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--text-light);
    margin: 0;
    padding: 0;
    padding-top: 80px; /* Space for fixed header */
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: visible;
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }
}

.vision-disclaimer {
    margin: 0 auto 1.5rem;
    padding: 1rem 1.5rem;
    max-width: min(1200px, 92vw);
    background: linear-gradient(135deg, rgba(255, 196, 0, 0.15), rgba(255, 64, 129, 0.18));
    border: 1px solid rgba(255, 196, 0, 0.45);
    border-radius: 14px;
    color: #fff7d6;
    font-size: 0.95rem;
    text-align: center;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 5;
}

.vision-disclaimer strong {
    color: #ffe27a;
}

/* Page themes */
body[data-page-theme] {
    --page-gradient: var(--unified-background-gradient);
    --page-overlay-gradient: var(--unified-background-overlay);
    --page-bg-base: var(--unified-background-base);
}

body[data-page-theme="team-career"] {
    --page-accent: #16A34A;
    --page-accent-rgb: 22, 163, 74;
    --page-accent-secondary: #34D399;
    --page-accent-secondary-rgb: 52, 211, 153;
    --section-panel-background: radial-gradient(circle at top, rgba(0, 255, 255, 0.08), transparent 60%), var(--darker-bg);
    --bg-secondary: var(--section-panel-background);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-cyan);
    color: #000;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 10px;
    outline: 3px solid #000;
}

main {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-indicator,
    .particles,
    .floating-particle {
        animation: none !important;
    }
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}



/* Card animation preference */
body.card-animations-disabled .feature-card,
body.card-animations-disabled .feature-card.is-proximity-hover,
body.card-animations-disabled .area-card {
    transform: none !important;
}

body.card-animations-disabled .feature-card::before {
    transform: scaleX(1);
}

body.card-animations-disabled .feature-card:hover,
body.card-animations-disabled .feature-card.is-proximity-hover {
    transform: none !important;
    box-shadow: none;
}

body.card-animations-disabled .area-card:hover {
    box-shadow: none;
}

body.card-animations-disabled .feature-card ul,
body.card-animations-disabled .feature-card:hover ul,
body.card-animations-disabled .feature-card.is-proximity-hover ul,
body.card-animations-disabled .area-card ul,
body.card-animations-disabled .area-card:hover ul {
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: none;
}

body.card-animations-disabled .areas-grid:hover .feature-card:not(:hover) ul {
    max-height: 1000px !important;
    opacity: 1 !important;
    overflow: visible;
    transition: none;
}

body.card-animations-disabled .area-card::before {
    left: 0;
}

body.card-animations-disabled .area-card:hover::before {
    left: 0;
}

body.card-animations-disabled .feature-card .audio-links,
body.card-animations-disabled .feature-card .expandable-content {
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding-top: 1.2rem;
}

/* Toggle & modal styling for animation settings */
.settings-section {
    margin-top: 25px;
    display: grid;
    gap: 1rem;
}

.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
}
.settings-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.settings-toggle-title {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 1rem;
}

.settings-toggle-description {
    color: #555;
    font-size: 0.85rem;
    line-height: 1.4;
}

.settings-toggle-hint {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.35;
}

.settings-toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.settings-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d0d5dd;
    border-radius: 999px;
    transition: background 0.3s ease;
}

.settings-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    transition: left 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.settings-toggle-switch input:disabled + .settings-toggle-slider {
    cursor: not-allowed;
    opacity: 0.6;
}

.settings-toggle-switch input:disabled + .settings-toggle-slider::before {
    box-shadow: none;
    background: #f3f4f6;
}

.settings-toggle-switch input:checked + .settings-toggle-slider {
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));
}

.settings-toggle-switch input:checked + .settings-toggle-slider::before {
    transform: translateX(24px);
}

.card-animation-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--surface-dark-rgb), 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25000;
    padding: 20px;
}

.card-animation-modal {
    background: #ffffff;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 20px 45px rgba(var(--surface-dark-rgb), 0.25);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.card-animation-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.card-animation-modal__header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #111;
}

.card-animation-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
}

.card-animation-modal__close:hover {
    color: #000;
}

.card-animation-modal__intro {
    margin: 0;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.5;
}

.card-animation-modal__footer {
    display: flex;
    justify-content: flex-end;
}

.card-animation-modal__close-btn {
    padding: 0.6rem 1.4rem;
    background: #f1f3f5;
    border: 1px solid #d0d5dd;
    color: #333;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.card-animation-modal__close-btn:hover {
    background: #e2e8f0;
}