/* Hudson Vortex - Enhanced Typography System */

/* ================================================================== */
/* VARIABLE FONT IMPORTS */
/* ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');

/* ================================================================== */
/* CSS LAYERS FOR ORGANIZATION */
/* ================================================================== */

@layer base, components, utilities, effects;

/* ================================================================== */
/* BASE TYPOGRAPHY VARIABLES */
/* ================================================================== */

@layer base {
    :root {
        /* Variable Font Families */
        --font-display: 'Plus Jakarta Sans', 'Syne', sans-serif;
        --font-heading: 'Space Grotesk', sans-serif;
        --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-mono: 'JetBrains Mono', 'Courier New', monospace;
        --font-accent: 'Syne', sans-serif;

        /* Fluid Typography Scale */
        --fluid-min-vw: 20;
        --fluid-max-vw: 90;
        --fluid-min-rem: 1;
        --fluid-max-rem: 1.5;
        
        /* Golden Ratio Scale */
        --scale-ratio: 1.618;
        --scale-base: clamp(1rem, calc(1rem + 0.5vw), 1.125rem);
        
        /* Dynamic Font Sizes with Golden Ratio */
        --font-size-xs: calc(var(--scale-base) / var(--scale-ratio));
        --font-size-sm: calc(var(--scale-base) / 1.2);
        --font-size-base: var(--scale-base);
        --font-size-md: calc(var(--scale-base) * 1.2);
        --font-size-lg: calc(var(--scale-base) * var(--scale-ratio));
        --font-size-xl: calc(var(--scale-base) * var(--scale-ratio) * 1.2);
        --font-size-2xl: calc(var(--scale-base) * var(--scale-ratio) * var(--scale-ratio));
        --font-size-3xl: calc(var(--scale-base) * var(--scale-ratio) * var(--scale-ratio) * 1.2);
        
        /* Advanced Fluid Hero Sizing */
        --font-size-hero: clamp(
            3rem,
            calc(3rem + (6 - 3) * ((100vw - 20rem) / (90 - 20))),
            6rem
        );
        
        /* Dynamic Line Heights Based on X-Height */
        --line-height-tight: calc(1em + 0.2ex);
        --line-height-base: calc(1em + 0.5ex);
        --line-height-relaxed: calc(1em + 0.8ex);
        
        /* Variable Font Weight Animation Values */
        --font-weight-min: 100;
        --font-weight-max: 900;
        --font-weight-base: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-black: 900;
        
        /* Letter Spacing with Optical Adjustments */
        --letter-spacing-tightest: -0.05em;
        --letter-spacing-tight: -0.025em;
        --letter-spacing-base: -0.01em;
        --letter-spacing-wide: 0.025em;
        --letter-spacing-wider: 0.05em;
        --letter-spacing-widest: 0.1em;
        --letter-spacing-ultra: 0.2em;
    }
}

/* ================================================================== */
/* ADVANCED TYPOGRAPHY FEATURES */
/* ================================================================== */

@layer base {
    /* Base Typography Settings */
    body {
        font-family: var(--font-body);
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        letter-spacing: var(--letter-spacing-base);
        font-weight: var(--font-weight-base);
        
        /* Variable Font Settings */
        font-variation-settings: 
            "wght" var(--font-weight-base),
            "slnt" 0;
        
        /* Advanced OpenType Features */
        font-feature-settings: 
            "liga" on,     /* Ligatures */
            "calt" on,     /* Contextual alternates */
            "kern" on,     /* Kerning */
            "ss01" on,     /* Stylistic set 1 */
            "cv01" on;     /* Character variant 1 */
        
        /* Optical Sizing */
        font-optical-sizing: auto;
        
        /* Better Rendering */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ================================================================== */
/* KINETIC TYPOGRAPHY EFFECTS */
/* ================================================================== */

@layer effects {
    /* Electromagnetic Pulse Effect */
    .text-pulse {
        animation: electromagnetic-pulse 3s ease-in-out infinite;
        font-variation-settings: 
            "wght" var(--font-weight-base);
    }
    
    @keyframes electromagnetic-pulse {
        0%, 100% {
            font-variation-settings: "wght" 400;
            letter-spacing: var(--letter-spacing-base);
            opacity: 0.9;
        }
        50% {
            font-variation-settings: "wght" 700;
            letter-spacing: var(--letter-spacing-wide);
            opacity: 1;
        }
    }
    
    /* Vortex Swirl Effect */
    .text-vortex {
        display: inline-block;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .text-vortex:hover {
        transform: rotate(5deg) scale(1.05);
        font-variation-settings: "wght" 600, "slnt" -10;
    }
    
    /* Frequency Wave Effect */
    .text-wave {
        display: inline-block;
        animation: frequency-wave 4s ease-in-out infinite;
        animation-delay: calc(var(--char-index) * 0.1s);
    }
    
    @keyframes frequency-wave {
        0%, 100% {
            transform: translateY(0) scaleY(1);
        }
        25% {
            transform: translateY(-0.2em) scaleY(0.95);
        }
        75% {
            transform: translateY(0.2em) scaleY(1.05);
        }
    }
    
    /* Glitch Effect */
    .text-glitch {
        position: relative;
        display: inline-block;
    }
    
    .text-glitch::before,
    .text-glitch::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .text-glitch::before {
        animation: glitch-1 0.5s infinite;
        color: var(--portal-primary);
        z-index: -1;
    }
    
    .text-glitch::after {
        animation: glitch-2 0.5s infinite;
        color: var(--portal-secondary);
        z-index: -2;
    }
    
    @keyframes glitch-1 {
        0%, 100% {
            clip-path: inset(0 0 0 0);
            transform: translate(0);
        }
        20% {
            clip-path: inset(20% 0 60% 0);
            transform: translate(-2px, 2px);
        }
        40% {
            clip-path: inset(40% 0 20% 0);
            transform: translate(2px, -2px);
        }
        60% {
            clip-path: inset(60% 0 10% 0);
            transform: translate(-1px, 1px);
        }
    }
    
    @keyframes glitch-2 {
        0%, 100% {
            clip-path: inset(0 0 0 0);
            transform: translate(0);
        }
        20% {
            clip-path: inset(60% 0 20% 0);
            transform: translate(2px, -1px);
        }
        40% {
            clip-path: inset(20% 0 40% 0);
            transform: translate(-2px, 1px);
        }
        60% {
            clip-path: inset(10% 0 60% 0);
            transform: translate(1px, -2px);
        }
    }
}

/* ================================================================== */
/* LAYERED TEXT EFFECTS */
/* ================================================================== */

@layer effects {
    /* Multi-layer Shadow Effect */
    .text-shadow-multi {
        text-shadow: 
            0 0 10px rgba(0, 255, 204, 0.8),
            0 0 20px rgba(0, 255, 204, 0.6),
            0 0 30px rgba(0, 255, 204, 0.4),
            0 0 40px rgba(0, 255, 204, 0.2),
            0 0 50px rgba(0, 255, 204, 0.1),
            2px 2px 4px rgba(0, 0, 0, 0.5),
            -2px -2px 4px rgba(255, 255, 255, 0.1);
    }
    
    /* Holographic Effect */
    .text-holographic {
        background: linear-gradient(
            45deg,
            #ff0080,
            #ff8080,
            #80ff80,
            #80ffff,
            #8080ff,
            #ff80ff,
            #ff0080
        );
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: holographic-shift 3s ease-in-out infinite;
        filter: brightness(1.2) contrast(1.1);
    }
    
    @keyframes holographic-shift {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
    
    /* 3D Extrusion Effect */
    .text-3d {
        text-shadow: 
            1px 1px 0 #00ccff,
            2px 2px 0 #00bbee,
            3px 3px 0 #00aadd,
            4px 4px 0 #0099cc,
            5px 5px 0 #0088bb,
            6px 6px 0 #0077aa,
            7px 7px 10px rgba(0, 0, 0, 0.5);
        transform: perspective(1000px) rotateY(-5deg);
        transition: all 0.3s ease;
    }
    
    .text-3d:hover {
        transform: perspective(1000px) rotateY(5deg);
    }
}

/* ================================================================== */
/* COMPONENT-SPECIFIC TYPOGRAPHY */
/* ================================================================== */

@layer components {
    /* Portal Title Enhanced */
    .portal-title {
        font-family: var(--font-display);
        font-size: var(--font-size-hero);
        font-weight: var(--font-weight-black);
        letter-spacing: var(--letter-spacing-ultra);
        text-transform: uppercase;
        line-height: 0.9;
        
        /* Variable font animation */
        animation: 
            weight-pulse 4s ease-in-out infinite,
            letter-breathe 6s ease-in-out infinite;
        
        /* Advanced features */
        font-feature-settings: 
            "liga" on,
            "calt" on,
            "ss01" on,
            "swsh" on;
        
        /* Multiple effects combined */
        background: linear-gradient(
            90deg,
            var(--portal-primary) 0%,
            var(--portal-secondary) 25%,
            var(--portal-tertiary) 50%,
            var(--portal-secondary) 75%,
            var(--portal-primary) 100%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradient-shift 3s linear infinite;
    }
    
    @keyframes weight-pulse {
        0%, 100% {
            font-variation-settings: "wght" 400;
        }
        50% {
            font-variation-settings: "wght" 900;
        }
    }
    
    @keyframes letter-breathe {
        0%, 100% {
            letter-spacing: var(--letter-spacing-ultra);
        }
        50% {
            letter-spacing: calc(var(--letter-spacing-ultra) * 1.2);
        }
    }
    
    @keyframes gradient-shift {
        to {
            background-position: 200% center;
        }
    }
    
    /* Navigation Typography */
    .nav-menu a {
        font-family: var(--font-heading);
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-sm);
        letter-spacing: var(--letter-spacing-wider);
        text-transform: uppercase;
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav-menu a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent,
            var(--portal-primary),
            transparent
        );
        transition: width 0.3s ease;
    }
    
    .nav-menu a:hover {
        font-variation-settings: "wght" 700;
        letter-spacing: calc(var(--letter-spacing-wider) * 1.1);
    }
    
    .nav-menu a:hover::after {
        width: 100%;
    }
    
    /* Body Text Enhanced */
    .content p {
        font-variation-settings: "wght" var(--font-weight-base);
        font-feature-settings: 
            "liga" on,
            "calt" on,
            "kern" on,
            "onum" on;  /* Old-style numerals */
        
        /* Optimal paragraph spacing */
        margin-bottom: calc(1em + 0.5ex);
        
        /* Prevent widows and orphans */
        widows: 3;
        orphans: 3;
    }
    
    /* Data Display Typography */
    .data-value {
        font-family: var(--font-mono);
        font-feature-settings: 
            "tnum" on,  /* Tabular numbers */
            "zero" on,  /* Slashed zero */
            "ss02" on;  /* Alternative style */
        font-variation-settings: "wght" 500;
        letter-spacing: var(--letter-spacing-base);
    }
}

/* ================================================================== */
/* RESPONSIVE TYPOGRAPHY */
/* ================================================================== */

@layer base {
    /* Mobile-first fluid typography */
    @media (max-width: 768px) {
        :root {
            --scale-base: clamp(0.875rem, calc(0.875rem + 0.25vw), 1rem);
        }
        
        .portal-title {
            font-size: clamp(2rem, calc(2rem + 4vw), 3.5rem);
            letter-spacing: var(--letter-spacing-wider);
        }
    }
    
    /* Tablet optimization */
    @media (min-width: 769px) and (max-width: 1024px) {
        :root {
            --scale-base: clamp(1rem, calc(1rem + 0.35vw), 1.0625rem);
        }
    }
    
    /* Large screens */
    @media (min-width: 1440px) {
        :root {
            --scale-base: 1.25rem;
        }
        
        .portal-title {
            font-size: clamp(5rem, calc(5rem + 2vw), 8rem);
        }
    }
}

/* ================================================================== */
/* ACCESSIBILITY */
/* ================================================================== */

@layer utilities {
    /* Respect user preferences */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* High contrast mode */
    @media (prefers-contrast: high) {
        body {
            font-weight: 500;
            letter-spacing: 0;
        }
        
        .text-shadow-multi,
        .text-holographic,
        .text-3d {
            text-shadow: none;
            background: none;
            -webkit-text-fill-color: currentColor;
        }
    }
}

/* ================================================================== */
/* UTILITY CLASSES */
/* ================================================================== */

@layer utilities {
    /* Weight utilities */
    .font-thin { font-variation-settings: "wght" 100; }
    .font-light { font-variation-settings: "wght" 300; }
    .font-normal { font-variation-settings: "wght" 400; }
    .font-medium { font-variation-settings: "wght" 500; }
    .font-semibold { font-variation-settings: "wght" 600; }
    .font-bold { font-variation-settings: "wght" 700; }
    .font-black { font-variation-settings: "wght" 900; }
    
    /* Dynamic weight on hover */
    .hover-bold {
        transition: font-variation-settings 0.3s ease;
    }
    
    .hover-bold:hover {
        font-variation-settings: "wght" 700;
    }
    
    /* Letter spacing utilities */
    .tracking-tightest { letter-spacing: var(--letter-spacing-tightest); }
    .tracking-tight { letter-spacing: var(--letter-spacing-tight); }
    .tracking-normal { letter-spacing: var(--letter-spacing-base); }
    .tracking-wide { letter-spacing: var(--letter-spacing-wide); }
    .tracking-wider { letter-spacing: var(--letter-spacing-wider); }
    .tracking-widest { letter-spacing: var(--letter-spacing-widest); }
    .tracking-ultra { letter-spacing: var(--letter-spacing-ultra); }
}