/* Elemento Website Themes - Based on elemento-gui-new styling */

:root {
    /* Color palette from elemento-gui-new */
    --yellow-light: #FAB83A;
    --yellow: #FFA600;
    --yellow-dark: #F28E00;

    --yellow-rgb: 250, 184, 58;

    --green-light: #57B154;
    --green: #28A745;
    --green-dark: #00953B;

    --orange-light: #FFA07A;
    --orange: #FF7F50;
    --orange-dark: #FF6347;

    --purple-light: #B19CD9;
    --purple: #9370DB;
    --purple-dark: #8A2BE2;

    --magenta-light: #FF77FF;
    --magenta: #FF00FF;
    --magenta-dark: #8B008B;
    
    --red-light: #EA5159;
    --red: #DC3545;
    --red-dark: #BA1631;

    --blue-light: #2CA5FF;
    --blue: #007BFF;
    --blue-dark: #006AC9;

    --grey-light: #B0B5BA;
    --grey: #8A8D95;
    --grey-dark: #6A6C75;
    --grey-darker: #4a4e53;

    --black-light: #2F3338;
    --black: #1A1C20;
    --black-dark: #000;

    /* RGB values without alpha for flexible use */
    --black-light-rgb: 47, 51, 56;
    --black-rgb: 26, 28, 32;
    --black-dark-rgb: 0, 0, 0;

    /* RGBA equivalents for black shades */
    --black-light-rgba: rgba(var(--black-light-rgb), 1);
    --black-rgba: rgba(var(--black-rgb), 1);
    --black-dark-rgba: rgba(var(--black-dark-rgb), 1);

    --white-light: #fff;
    --white-medium: #FAFAFF;
    --white: #F5F5FA;
    --white-dark: #E6E6F0;

    /* RGB values without alpha for flexible use */
    --white-light-rgb: 255, 255, 255;
    --white-medium-rgb: 250, 250, 255;
    --white-rgb: 245, 245, 250;
    --white-dark-rgb: 230, 230, 240;

    /* RGBA equivalents for white shades */
    --white-light-rgba: rgba(var(--white-light-rgb), 1);
    --white-medium-rgba: rgba(var(--white-medium-rgb), 1);
    --white-rgba: rgba(var(--white-rgb), 1);
    --white-dark-rgba: rgba(var(--white-dark-rgb), 1);

    /* Accent colors */
    --accent-color-light: var(--yellow-light);
    --accent-color: var(--yellow);
    --accent-color-dark: var(--yellow-dark);
    --electros-color: #ffa600;
    --atomos-color: #007bff;
    --cloud-net-color: #DC3545;

    /* Stripe opacity */
    --stripe-opacity-1: 0;
    --stripe-opacity-2: .3;
    --stripe-width-1: 12px;
    --stripe-gap-1: 9px;
    --stripe-width-2: 12px;
    --stripe-gap-2: 9px;

    @media (max-width: 1000px) {
        --stripe-width-1: 10px;
        --stripe-gap-1: 5px;
        --stripe-width-2: 10px;
        --stripe-gap-2: 5px;
    }

    /* Spacing system */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Border radius system - Unified for maximum consistency */
    --radius-none: 0;
    --radius-xs: 6px;
    --radius-sm: 6px;
    --radius-md: 6px;
    --radius-lg: 6px;
    --radius-xl: 6px;
    --radius-2xl: 6px;
    --radius-3xl: 6px;
    --radius-full: 50%;
    --radius-max: 99999px;
    
    /* Legacy border radius variables for backward compatibility */
    --border-radius: var(--radius-md);
    --card-border-radius: var(--radius-lg);
    --button-border-radius: var(--radius-lg);

    /* OS Colors */
    --os-linux: #000;
    --os-ubuntu: #E95420;
    --os-fedora: #294172;
    --os-centos: #932279;
    --os-debian: #A81D33;
    --os-redhat: #EE0000;
    --os-windows: #0078D6;
    --os-windows-xp: #01A601;
    --os-windows-10: #00A4EF;
    --os-windows-11: #0078D7;
    --os-windows-server-2008: #006cbe;
    --os-windows-server-2016: #005ca2;
    --os-windows-server-2019: #014675;
    --os-windows-server-2022: #002238;
    --os-macos: #393939;

    /* Light theme (Default) */
    --primary-color: var(--accent-color);
    --logo-color: var(--grey-dark);
    --button-color: var(--primary-color);
    --icon-color-disabled: rgba(0, 0, 0, 0.3);
    --button-text-color: var(--black);
    --titlebar-color: var(--text-color);
    --subtitle-color: var(--black);
    --secondary-color: var(--blue-light);
    --background-color: var(--white);
    --background-color-rgb: var(--white-rgb);
    --stripe-color-1: rgba(var(--white-rgb), var(--stripe-opacity-1));
    --stripe-color-2: rgba(var(--white-rgb), var(--stripe-opacity-2));
    --text-color: var(--grey-darker);
    --text-secondary: var(--black-light);
    --text-muted: var(--grey-light);
    --sidebar-bg-color: var(--white-light);
    --button-color-disabled: var(--white-light);
    --card-bg-color: var(--white-light);
    --hover-color: var(--yellow-light);
    --sidebar-width: 240px;
    --sidebar-active-text-color: var(--black-dark);
    --sidebar-active-text-bg: var(--accent-color-light);
    --modal-color: rgba(250, 250, 250, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.05);
    --input-bg-color: rgba(0, 0, 0, 0.05);
    --font-primary: 'Red Hat Display', sans-serif;
    --font-heading: 'Red Hat Display', sans-serif;
    --code-font: 'Red Hat Mono', monospace;
    --font-secondary: 'Open Sans', sans-serif;
    --monospace-background-color: rgba(0, 0, 0, 0.1);
    --experimental-background: rgba(0, 0, 0, 0.1);
    --switch-background-color: var(--text-color);
    --svg-arrow-color: var(--grey);
    --svg-fill-color: var(--white-light);
    --svg-tile-stroke: var(--grey);
    --svg-tile-color: var(--white-dark);
    --svg-text-color: var(--text-color);
    --planet-color: var(--white);
    --planet-halo-color: var(--accent-color);
    --particles-color-1: rgba(var(--black-rgb), 1);
    --particles-color-2: rgba(var(--black-rgb), 0.6);

    /* Glassmorphism gradient variables */
    --glassmorphism-gradient: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,    /* stronger white */
        rgba(220, 220, 220, 0.18) 50%,   /* stronger light gray */
        rgba(220, 220, 220, 0) 100%      /* transparent */
    );
    --glassmorphism-background: rgba(255, 255, 255, 0.28);  /* stronger white */
    --glassmorphism-border: rgba(200, 200, 200, 0.25);      /* stronger light gray */
    --glassmorphism-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);           /* stronger white */

    /* Spinning gradient for light theme - Inspired by CodePen effect */
    --spinning-gradient: conic-gradient(
        from 0deg,
        rgba(255, 166, 0, 0.8),    /* Yellow */
        rgba(44, 165, 255, 0.7),   /* Blue */
        rgba(220, 53, 69, 0.6),    /* Red */
        rgba(255, 184, 58, 0.8),   /* Orange */
        rgba(0, 123, 255, 0.7),    /* Dark Blue */
        rgba(234, 81, 89, 0.6),    /* Light Red */
        rgba(255, 166, 0, 0.8)     /* Back to Yellow */
    );

    /* Corner blob gradient for light theme */
    --corner-blob-gradient: var(--background-color);

    /* Background gradient for light theme - Enhanced with background color gaps for distinct blob effect */
    --background-gradient: 
        /* Multiple conic gradients with different centers and background color gaps */
        conic-gradient(from 0deg at 20% 20%, 
            rgba(255, 166, 0, 0.6) 0deg, 
            rgba(255, 184, 58, 0.7) 30deg, 
            var(--background-color) 45deg, 
            rgba(255, 166, 0, 0.4) 60deg, 
            var(--background-color) 90deg, 
            rgba(255, 184, 58, 0.5) 150deg, 
            rgba(255, 166, 0, 0.6) 180deg, 
            var(--background-color) 210deg, 
            rgba(255, 184, 58, 0.4) 270deg, 
            var(--background-color) 300deg, 
            rgba(255, 166, 0, 0.6) 360deg),
        /* Blue conic gradient */
        conic-gradient(from 90deg at 80% 80%, 
            rgba(44, 165, 255, 0.5) 0deg, 
            rgba(0, 123, 255, 0.6) 60deg, 
            var(--background-color) 120deg, 
            rgba(44, 165, 255, 0.4) 180deg, 
            var(--background-color) 240deg, 
            rgba(0, 123, 255, 0.5) 300deg, 
            rgba(44, 165, 255, 0.5) 360deg),
        /* Red conic gradient */
        conic-gradient(from 180deg at 50% 50%, 
            rgba(220, 53, 69, 0.4) 0deg, 
            rgba(234, 81, 89, 0.5) 90deg, 
            var(--background-color) 150deg, 
            rgba(220, 53, 69, 0.3) 210deg, 
            var(--background-color) 270deg, 
            rgba(234, 81, 89, 0.4) 330deg, 
            rgba(220, 53, 69, 0.4) 360deg),
        /* Yellow/Orange radial blobs */
        radial-gradient(ellipse 40% 60% at 30% 70%, 
            rgba(255, 166, 0, 0.4) 0%, 
            rgba(255, 184, 58, 0.5) 30%, 
            var(--background-color) 60%),
        radial-gradient(circle 35% at 85% 85%, 
            rgba(255, 166, 0, 0.3) 0%, 
            var(--background-color) 50%),
        /* Blue radial blobs */
        radial-gradient(ellipse 50% 40% at 70% 30%, 
            rgba(44, 165, 255, 0.3) 0%, 
            rgba(0, 123, 255, 0.4) 40%, 
            var(--background-color) 70%),
        radial-gradient(circle 25% at 15% 15%, 
            rgba(44, 165, 255, 0.4) 0%, 
            var(--background-color) 60%),
        /* Red radial blobs */
        radial-gradient(ellipse 45% 35% at 90% 10%, 
            rgba(220, 53, 69, 0.3) 0%, 
            rgba(234, 81, 89, 0.4) 50%, 
            var(--background-color) 80%),
        radial-gradient(circle 30% at 10% 90%, 
            rgba(220, 53, 69, 0.4) 0%, 
            var(--background-color) 55%);
}

/* Dark theme */
.theme-dark {
    --os-linux: #FCC624;
    --os-ubuntu: #E95420;
    --os-fedora: #51A2DA;
    --os-centos: #B5258E;
    --os-debian: #D70A53;
    --os-redhat: #EE0000;
    --os-windows: #00ADEF;
    --os-windows-xp: #2ECC71;
    --os-windows-10: #0078D7;
    --os-windows-11: #0067C0;
    --os-windows-server-2008: #0078D4;
    --os-windows-server-2016: #0099BC;
    --os-windows-server-2019: #00B7C3;
    --os-windows-server-2022: #2be3f0;
    --os-macos: #FFF;

    --primary-color: var(--accent-color);
    --logo-color: var(--accent-color);
    --button-color: var(--primary-color);
    --button-color-disabled: var(--black-light);
    --icon-color-disabled: rgba(255, 255, 255, 0.25);
    --button-text-color: var(--black);
    --titlebar-color: var(--primary-color);
    --subtitle-color: var(--grey-light);
    --secondary-color: var(--blue-light);
    --background-color: var(--black-rgba);
    --background-color-rgb: var(--black-rgb);
    --stripe-color-1: rgba(var(--black-rgb), var(--stripe-opacity-1));
    --stripe-color-2: rgba(var(--black-rgb), var(--stripe-opacity-2));
    --text-color: var(--grey-light);
    --text-secondary: var(--white-light);
    --text-muted: var(--grey-dark);
    --sidebar-bg-color: var(--black-light);
    --sidebar-active-text-color: var(--accent-color);
    --sidebar-active-text-bg: var(--background-color);
    --card-bg-color: var(--black-light);
    --hover-color: var(--yellow-light);
    --modal-color: rgba(28, 28, 28, 0);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --input-bg-color: rgba(255, 255, 255, 0.08);
    --monospace-background-color: rgba(255, 255, 255, 0.1);
    --experimental-background: rgba(0, 0, 0, 0.1);
    --switch-background-color: var(--text-color);
    --svg-arrow-color: var(--grey);
    --svg-fill-color: var(--black-light);
    --svg-tile-stroke: var(--grey-dark);
    --svg-tile-color: var(--card-bg-color);
    --svg-text-color: var(--text-color);
    --planet-color: var(--background-color);
    --planet-halo-color: #fff;
    --particles-color-1: rgba(var(--white-rgb), 1);
    --particles-color-2: rgba(var(--white-rgb), 0.6);

    /* Glassmorphism gradient variables for dark theme */
    --glassmorphism-gradient: linear-gradient(
        135deg,
        rgba(80, 80, 80, 0.10) 0%,    /* soft dark gray */
        rgba(60, 60, 60, 0.04) 50%,   /* even softer */
        rgba(60, 60, 60, 0) 100%      /* transparent */
    );
    --glassmorphism-background: rgba(80, 80, 80, 0.08);   /* soft dark gray */
    --glassmorphism-border: rgba(120, 120, 120, 0.08);    /* soft border */
    --glassmorphism-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(80, 80, 80, 0.06);           /* soft dark gray */

    /* Spinning gradient for dark theme - Inspired by CodePen effect */
    --spinning-gradient: conic-gradient(
        from 0deg,
        rgba(255, 166, 0, 0.6),    /* Yellow */
        rgba(44, 165, 255, 0.5),   /* Blue */
        rgba(220, 53, 69, 0.4),    /* Red */
        rgba(255, 184, 58, 0.6),   /* Orange */
        rgba(0, 123, 255, 0.5),    /* Dark Blue */
        rgba(234, 81, 89, 0.4),    /* Light Red */
        rgba(255, 166, 0, 0.6)     /* Back to Yellow */
    );

    /* Corner blob gradient for dark theme */
    --corner-blob-gradient: var(--background-color);

    /* Background gradient for dark theme - Enhanced with background color gaps for distinct blob effect */
    --background-gradient: 
        /* Multiple conic gradients with different centers and background color gaps */
        conic-gradient(from 0deg at 20% 20%, 
            rgba(255, 166, 0, 0.5) 0deg, 
            rgba(255, 184, 58, 0.6) 30deg, 
            var(--background-color) 45deg, 
            rgba(255, 166, 0, 0.3) 60deg, 
            var(--background-color) 90deg, 
            rgba(255, 184, 58, 0.4) 150deg, 
            rgba(255, 166, 0, 0.5) 180deg, 
            var(--background-color) 210deg, 
            rgba(255, 184, 58, 0.3) 270deg, 
            var(--background-color) 300deg, 
            rgba(255, 166, 0, 0.5) 360deg),
        /* Blue conic gradient */
        conic-gradient(from 90deg at 80% 80%, 
            rgba(44, 165, 255, 0.4) 0deg, 
            rgba(0, 123, 255, 0.5) 60deg, 
            var(--background-color) 120deg, 
            rgba(44, 165, 255, 0.3) 180deg, 
            var(--background-color) 240deg, 
            rgba(0, 123, 255, 0.4) 300deg, 
            rgba(44, 165, 255, 0.4) 360deg),
        /* Red conic gradient */
        conic-gradient(from 180deg at 50% 50%, 
            rgba(220, 53, 69, 0.3) 0deg, 
            rgba(234, 81, 89, 0.4) 90deg, 
            var(--background-color) 150deg, 
            rgba(220, 53, 69, 0.2) 210deg, 
            var(--background-color) 270deg, 
            rgba(234, 81, 89, 0.3) 330deg, 
            rgba(220, 53, 69, 0.3) 360deg),
        /* Yellow/Orange radial blobs */
        radial-gradient(ellipse 40% 60% at 30% 70%, 
            rgba(255, 166, 0, 0.3) 0%, 
            rgba(255, 184, 58, 0.4) 30%, 
            var(--background-color) 60%),
        radial-gradient(circle 35% at 85% 85%, 
            rgba(255, 166, 0, 0.25) 0%, 
            var(--background-color) 50%),
        /* Blue radial blobs */
        radial-gradient(ellipse 50% 40% at 70% 30%, 
            rgba(44, 165, 255, 0.4) 0%, 
            rgba(0, 123, 255, 0.3) 40%, 
            var(--background-color) 70%),
        radial-gradient(circle 25% at 15% 15%, 
            rgba(44, 165, 255, 0.3) 0%, 
            var(--background-color) 60%),
        /* Red radial blobs */
        radial-gradient(ellipse 45% 35% at 90% 10%, 
            rgba(220, 53, 69, 0.25) 0%, 
            rgba(234, 81, 89, 0.3) 50%, 
            var(--background-color) 80%),
        radial-gradient(circle 30% at 10% 90%, 
            rgba(220, 53, 69, 0.3) 0%, 
            var(--background-color) 55%);
}

/* High contrast theme */
.theme-high-contrast {

    --os-linux: #FCC624;
    --os-ubuntu: #E95420;
    --os-fedora: #51A2DA;
    --os-centos: #B5258E;
    --os-debian: #D70A53;
    --os-redhat: #EE0000;
    --os-windows: #00ADEF;
    --os-windows-xp: #2ECC71;
    --os-windows-10: #0078D7;
    --os-windows-11: #0067C0;
    --os-windows-server-2008: #0078D4;
    --os-windows-server-2016: #0099BC;
    --os-windows-server-2019: #00B7C3;
    --os-windows-server-2022: #2be3f0;
    --os-macos: #FFF;

    --primary-color: var(--accent-color);
    --logo-color: var(--accent-color);
    --button-color: var(--primary-color);
    --button-color-disabled: var(--black);
    --icon-color-disabled: rgba(255, 255, 255, 0.25);
    --button-text-color: var(--black-dark);
    --titlebar-color: var(--primary-color);
    --subtitle-color: var(--white-light);
    --secondary-color: var(--blue-light);
    --background-color: var(--black-dark);
    --background-color-rgb: var(--black-dark-rgb);
    --stripe-color-1: rgba(var(--black-dark-rgb), var(--stripe-opacity-1));
    --stripe-color-2: rgba(var(--black-dark-rgb), var(--stripe-opacity-2));
    --text-color: var(--white-light);
    --text-secondary: var(--white-light);
    --text-muted: var(--grey-light);
    --sidebar-bg-color: var(--black);
    --sidebar-active-text-color: var(--accent-color);
    --sidebar-active-text-bg: var(--background-color);
    --card-bg-color: var(--black);
    --hover-color: var(--yellow-light);
    --modal-color: rgba(0, 0, 0, 0);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --input-bg-color: rgba(255, 255, 255, 0.05);
    --monospace-background-color: rgba(255, 255, 255, 0.1);
    --experimental-background: rgba(0, 0, 0, 0.1);
    --switch-background-color: var(--black-light);
    --svg-arrow-color: var(--white);
    --svg-fill-color: var(--black);
    --svg-tile-stroke: var(--black-light);
    --svg-tile-color: var(--card-bg-color);
    --svg-text-color: var(--text-color);
    --planet-color: var(--background-color);
    --planet-halo-color: #fff;
    --particles-color-1: rgba(var(--white-light-rgb), 1);
    --particles-color-2: rgba(var(--white-light-rgb), 0.6);

    /* Glassmorphism gradient variables for high contrast theme */
    --glassmorphism-gradient: linear-gradient(
        135deg,
        rgba(40, 40, 40, 0.25) 0%,    /* darker gray */
        rgba(20, 20, 20, 0.15) 50%,   /* even darker */
        rgba(20, 20, 20, 0) 100%      /* transparent */
    );
    --glassmorphism-background: rgba(40, 40, 40, 0.20);  /* darker gray */
    --glassmorphism-border: rgba(80, 80, 80, 0.30);      /* darker border */
    --glassmorphism-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(40, 40, 40, 0.15);           /* darker gray */

    /* Spinning gradient for high contrast theme - Inspired by CodePen effect */
    --spinning-gradient: conic-gradient(
        from 0deg,
        rgba(255, 166, 0, 0.9),    /* Yellow */
        rgba(44, 165, 255, 0.8),   /* Blue */
        rgba(220, 53, 69, 0.7),    /* Red */
        rgba(255, 184, 58, 0.9),   /* Orange */
        rgba(0, 123, 255, 0.8),    /* Dark Blue */
        rgba(234, 81, 89, 0.7),    /* Light Red */
        rgba(255, 166, 0, 0.9)     /* Back to Yellow */
    );

    /* Corner blob gradient for high contrast theme */
    --corner-blob-gradient: var(--background-color);

    /* Background gradient for high contrast theme - Enhanced with background color gaps for distinct blob effect */
    --background-gradient: 
        /* Multiple conic gradients with different centers and background color gaps */
        conic-gradient(from 0deg at 20% 20%, 
            rgba(255, 166, 0, 0.8) 0deg, 
            rgba(255, 184, 58, 0.9) 30deg, 
            var(--background-color) 45deg, 
            rgba(255, 166, 0, 0.6) 60deg, 
            var(--background-color) 90deg, 
            rgba(255, 184, 58, 0.7) 150deg, 
            rgba(255, 166, 0, 0.8) 180deg, 
            var(--background-color) 210deg, 
            rgba(255, 184, 58, 0.6) 270deg, 
            var(--background-color) 300deg, 
            rgba(255, 166, 0, 0.8) 360deg),
        /* Blue conic gradient */
        conic-gradient(from 90deg at 80% 80%, 
            rgba(44, 165, 255, 0.7) 0deg, 
            rgba(0, 123, 255, 0.8) 60deg, 
            var(--background-color) 120deg, 
            rgba(44, 165, 255, 0.6) 180deg, 
            var(--background-color) 240deg, 
            rgba(0, 123, 255, 0.7) 300deg, 
            rgba(44, 165, 255, 0.7) 360deg),
        /* Red conic gradient */
        conic-gradient(from 180deg at 50% 50%, 
            rgba(220, 53, 69, 0.6) 0deg, 
            rgba(234, 81, 89, 0.7) 90deg, 
            var(--background-color) 150deg, 
            rgba(220, 53, 69, 0.5) 210deg, 
            var(--background-color) 270deg, 
            rgba(234, 81, 89, 0.6) 330deg, 
            rgba(220, 53, 69, 0.6) 360deg),
        /* Yellow/Orange radial blobs */
        radial-gradient(ellipse 40% 60% at 30% 70%, 
            rgba(255, 166, 0, 0.6) 0%, 
            rgba(255, 184, 58, 0.7) 30%, 
            var(--background-color) 60%),
        radial-gradient(circle 35% at 85% 85%, 
            rgba(255, 166, 0, 0.5) 0%, 
            var(--background-color) 50%),
        /* Blue radial blobs */
        radial-gradient(ellipse 50% 40% at 70% 30%, 
            rgba(44, 165, 255, 0.7) 0%, 
            rgba(0, 123, 255, 0.6) 40%, 
            var(--background-color) 70%),
        radial-gradient(circle 25% at 15% 15%, 
            rgba(44, 165, 255, 0.6) 0%, 
            var(--background-color) 60%),
        /* Red radial blobs */
        radial-gradient(ellipse 45% 35% at 90% 10%, 
            rgba(220, 53, 69, 0.5) 0%, 
            rgba(234, 81, 89, 0.6) 50%, 
            var(--background-color) 80%),
        radial-gradient(circle 30% at 10% 90%, 
            rgba(220, 53, 69, 0.6) 0%, 
            var(--background-color) 55%);
}

/* Theme transition animations */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}



/* Background canvas rotation animation - more organic and irregular */
@keyframes background-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    15% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.05);
    }
    30% {
        transform: translate(-50%, -50%) rotate(120deg) scale(1.08);
    }
    45% {
        transform: translate(-50%, -50%) rotate(200deg) scale(1.12);
    }
    60% {
        transform: translate(-50%, -50%) rotate(280deg) scale(1.09);
    }
    75% {
        transform: translate(-50%, -50%) rotate(320deg) scale(1.06);
    }
    90% {
        transform: translate(-50%, -50%) rotate(350deg) scale(1.03);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

/* Spinning gradient blur effect */
.background-blur {
    filter: blur(100px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
}

.gradient-mask {
    border-radius: var(--radius-max);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    min-width: 1000px;
    height: 100vh;
    transform: translate(-50%, -50%) scale(0.7);
    overflow: hidden;
    z-index: 2;
}

.spinning-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vw;
    transform: translate(-50%, -50%);
    animation: spin 18s linear infinite;
    background: var(--spinning-gradient);
    z-index: 3;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(2);
    }
    100% {
        transform: translate(-50%, -50%) rotate(1turn) scale(2);
    }
}

/* Fallback gradient animation for older browsers */
@keyframes gradient-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Link accessibility - Ultra-subtle dotted underline */
a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(var(--accent-color-rgb), 0.6); /* Semi-transparent */
    text-underline-offset: 4px;
    text-decoration-thickness: 0.4px;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--accent-color);
    text-decoration-color: var(--accent-color);
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
}

a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}