/* ==========================================================================
   SWISS ENTERPRISE PORTFOLIO DESIGN SYSTEM (DESIGN.md Reference)
   ========================================================================== */

/* Custom CSS Variables & Tokens */
:root {
    /* Color Tokens - Warm Editorial Light Mode - Raw RGB Values */
    --color-surface-rgb: 250 249 247;
    --color-surface-dim-rgb: 218 218 216;
    --color-surface-bright-rgb: 250 249 247;
    --color-surface-lowest-rgb: 255 255 255;
    --color-surface-low-rgb: 244 243 241;
    --color-surface-container-rgb: 239 238 236;
    --color-surface-container-high-rgb: 233 232 230;
    --color-surface-container-highest-rgb: 227 226 224;
    --color-on-surface-rgb: 26 28 27;
    --color-on-surface-variant-rgb: 68 71 72;
    
    --color-primary-rgb: 0 0 0;
    --color-on-primary-rgb: 255 255 255;
    --color-primary-container-rgb: 28 27 27;
    
    --color-secondary-rgb: 94 94 94;
    --color-accent-rgb: 0 75 80; /* Deep Swiss Teal */
    --color-outline-rgb: 116 120 120;
    --color-outline-variant-rgb: 196 199 199;
    --color-border-rgb: 229 229 229;

    /* Rendered CSS Variables for Vanilla CSS compatibility */
    --color-surface: rgb(var(--color-surface-rgb));
    --color-surface-dim: rgb(var(--color-surface-dim-rgb));
    --color-surface-bright: rgb(var(--color-surface-bright-rgb));
    --color-surface-lowest: rgb(var(--color-surface-lowest-rgb));
    --color-surface-low: rgb(var(--color-surface-low-rgb));
    --color-surface-container: rgb(var(--color-surface-container-rgb));
    --color-surface-container-high: rgb(var(--color-surface-container-high-rgb));
    --color-surface-container-highest: rgb(var(--color-surface-container-highest-rgb));
    --color-on-surface: rgb(var(--color-on-surface-rgb));
    --color-on-surface-variant: rgb(var(--color-on-surface-variant-rgb));
    
    --color-primary: rgb(var(--color-primary-rgb));
    --color-on-primary: rgb(var(--color-on-primary-rgb));
    --color-primary-container: rgb(var(--color-primary-container-rgb));
    
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-accent: rgb(var(--color-accent-rgb));
    --color-outline: rgb(var(--color-outline-rgb));
    --color-outline-variant: rgb(var(--color-outline-variant-rgb));
    --color-border: rgb(var(--color-border-rgb));

    /* Typographic Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* Grid Spacing */
    --unit: 8px;
    --container-max-width: 1280px;
    --gutter: 24px;
    --section-gap: 128px;
    
    /* Layout Overlays */
    --grid-col-opacity: 0.05;
}

/* Elegant Dark Mode - Obsidian Slate Editorial */
html.dark {
    --color-surface-rgb: 18 19 18;
    --color-surface-dim-rgb: 29 30 29;
    --color-surface-bright-rgb: 28 29 28;
    --color-surface-lowest-rgb: 10 11 10;
    --color-surface-low-rgb: 24 25 24;
    --color-surface-container-rgb: 32 34 32;
    --color-surface-container-high-rgb: 43 45 43;
    --color-surface-container-highest-rgb: 56 58 56;
    --color-on-surface-rgb: 250 249 247;
    --color-on-surface-variant-rgb: 196 199 199;
    
    --color-primary-rgb: 255 255 255;
    --color-on-primary-rgb: 0 0 0;
    --color-primary-container-rgb: 227 226 224;
    
    --color-secondary-rgb: 163 166 165;
    --color-accent-rgb: 51 163 172; /* Neon Electric Teal */
    --color-outline-rgb: 163 166 165;
    --color-outline-variant-rgb: 58 61 60;
    --color-border-rgb: 47 49 48;
    
    --grid-col-opacity: 0.08;
}

/* ==========================================================================
   GLOBAL RESET & SWISS BACKGROUND GRID
   ========================================================================== */
body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Subtle vertical grid lines (blueprint look) */
    background-image: linear-gradient(to right, rgba(0, 0, 0, var(--grid-col-opacity)) 1px, transparent 1px);
    background-size: 8.333333% 100%;
    position: relative;
}

html.dark body {
    background-image: linear-gradient(to right, rgba(255, 255, 255, var(--grid-col-opacity)) 1px, transparent 1px);
}

/* Accessibility Focus Ring Policy */
*:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 4px;
}

/* ==========================================================================
   GRID OVERLAY DESIGN LAYERS
   ========================================================================== */
.grid-overlay {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

html.dark .grid-overlay {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   SCROLLBAR & PROGRESS PROGRESS
   ========================================================================== */
.progress-bar-container {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    height: 180px;
    width: 2px;
    background: var(--color-surface-container-high);
    z-index: 100;
    border-radius: 9999px;
    overflow: hidden;
}

.progress-bar-fill {
    width: 100%;
    height: 0%;
    background: var(--color-accent);
    transition: height 0.1s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
    background: var(--color-surface-container-highest);
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav-link {
    position: relative;
    padding-bottom: 2px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background-color: var(--color-accent);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: var(--color-accent) !important;
}

.nav-link.active::after {
    width: 100%;
}

/* Premium Swiss Accent Navigation Dots & Numbers */
.nav-link:hover .nav-dot,
.nav-link.active .nav-dot,
.mobile-nav-link:hover .nav-dot,
.mobile-nav-link.active .nav-dot {
    opacity: 1;
    transform: scale(1);
}

.nav-link:hover .nav-num,
.nav-link.active .nav-num,
.mobile-nav-link:hover .nav-num,
.mobile-nav-link.active .nav-num {
    color: var(--color-accent) !important;
}

/* ==========================================================================
   REVEAL ON SCROLL & MICRO-ANIMATIONS
   ========================================================================== */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Section Labels Editorial lines */
.section-label-line {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.15em;
}

.section-label-line::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-outline-variant);
    max-width: 80px;
}

/* ==========================================================================
   TYPOGRAPHY SPECIFICS
   ========================================================================== */
.font-display-lg {
    letter-spacing: -0.04em;
    font-weight: var(--font-weight-black);
}

.font-headline-lg {
    letter-spacing: -0.02em;
    font-weight: var(--font-weight-bold);
}

.font-label-md {
    letter-spacing: 0.1em;
    font-weight: var(--font-weight-semibold);
}

/* Swiss Editorial Headers Capitalization */
h1, h2, h3, h4, h5, h6,
.nav-link,
.mobile-nav-link,
.font-headline-md:not(a) {
    text-transform: uppercase;
}

/* Buttons and Zero Radius Shape Principle */
a, button {
    border-radius: 0px !important;
}

/* ==========================================================================
   DARK/LIGHT ICON TOGGLE ANIMATIONS
   ========================================================================== */
#dark-mode-toggle {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#dark-mode-toggle:hover {
    transform: rotate(30deg) scale(1.1);
}

/* ==========================================================================
   PREMIUM BACKGROUND ANIMATIONS (AMBIENT DRIFT & BLUEPRINT SCAN)
   ========================================================================== */
@keyframes float-slow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(45px, -65px) scale(1.12);
    }
    66% {
        transform: translate(-35px, 35px) scale(0.92);
    }
}

@keyframes float-delayed {
    0%, 100% {
        transform: translate(0, 0) scale(1.08);
    }
    50% {
        transform: translate(-55px, 45px) scale(0.88);
    }
}

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

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

/* ==========================================================================
   INFINITE SCROLLING FOOTER TICKER
   ========================================================================== */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.animate-marquee {
    display: flex;
    flex-shrink: 0;
    gap: 3rem; /* 48px matching Tailwind gap-12 */
    padding-right: 3rem; /* offset the gap to avoid jumping */
    animation: marquee 35s linear infinite;
}

/* Subtle, smooth hover interaction */
.marquee-container:hover .animate-marquee {
    animation-play-state: paused;
}

/* ==========================================================================
   CUSTOM SWISS ARCHITECTURAL CURSOR
   ========================================================================== */
#custom-cursor-dot,
#custom-cursor-square {
    display: none;
    opacity: 0;
    will-change: transform;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    z-index: 99999 !important;
}

/* Enable only on desktop / non-touch fine precision pointers */
@media (pointer: fine) {
    html, body, a, button, select, input, textarea, [role="button"], .clickable,
    a *, button *, [role="button"] *, select *, input *, textarea *, .clickable * {
        cursor: none !important;
    }
    
    #custom-cursor-dot,
    #custom-cursor-square {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #custom-cursor-dot {
        width: 12px;
        height: 12px;
        transition: opacity 0.3s ease;
    }

    #custom-cursor-square {
        width: 40px;
        height: 40px;
        transition: opacity 0.3s ease;
    }

    /* Normal Inner Elements */
    .cursor-dot-normal {
        background-color: var(--color-accent);
        width: 6px;
        height: 6px;
        border-radius: 0px;
        transition: background-color 0.2s, transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .cursor-square-normal {
        border: 1.5px solid var(--color-outline);
        width: 24px;
        height: 24px;
        border-radius: 0px;
        transition: border-color 0.2s, background-color 0.2s, transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Hover States - Toggle visibility of normal vs hover SVGs */
    #custom-cursor-dot.cursor-hover-dot .cursor-dot-normal {
        display: none;
    }
    
    #custom-cursor-dot.cursor-hover-dot .cursor-dot-hover {
        display: block;
    }

    #custom-cursor-square.cursor-hover-square .cursor-square-normal {
        display: none;
    }

    #custom-cursor-square.cursor-hover-square .cursor-square-hover {
        display: block;
    }
}

/* Slow rotation keyframes for premium modern feel */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}

/* ==========================================================================
   PREMIUM SWISS GRID PRELOADER
   ========================================================================== */
body.preloader-active {
    overflow: hidden !important;
}

#preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: var(--color-surface) !important;
    z-index: 99998 !important; /* Placed immediately below the custom cursor (99999) */
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
    will-change: transform;
}

/* Exit shutter slide-up animation */
#preloader.preloader-loaded {
    transform: translateY(-100%);
}

/* Children components fade out slightly faster to maintain elegance */
#preloader.preloader-loaded * {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}