﻿/* 
--------------------------------------------------------------------------------------------
--------------------------------------    JEO3.css  ----------------------------------------
--------------------------------------------------------------------------------------------
    Appearance: Preferred Colors
--------------------------------------------------------------------------------------------
*/

:root {
    /* JEO Preferred Styles */
    --jeo-primary: rgba(100, 124, 100, 1);
    --jeo-dark: color-mix(in srgb, var(--jeo-primary) 99%, white);
    --jeo-bright: oklch(from var(--jeo-primary) calc(l + 0.15) c h);
    --jeo-rz-5: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 5%, white) 10%, transparent);
    --jeo-rz-15: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 20%, transparent);
    --jeo-rz-25: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 50%, transparent);
    --jeo-rz-35: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 40%, transparent);
    --jeo-rz-45: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 50%, transparent);
    --jeo-rz-55: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 60%, transparent);
    --jeo-rz-65: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 70%, transparent);
    --jeo-rz-75: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 80%, transparent);
    --jeo-rz-85: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 90%, transparent);
    --jeo-rz-95: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, white) 100%, transparent);
    --jeo-rz-dark-5: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 5%, black) 10%, transparent);
    --jeo-rz-dark-15: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 20%, transparent);
    --jeo-rz-dark-25: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 50%, transparent);
    --jeo-rz-dark-35: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 40%, transparent);
    --jeo-rz-dark-45: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 50%, transparent);
    --jeo-rz-dark-55: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 60%, transparent);
    --jeo-rz-dark-65: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 70%, transparent);
    --jeo-rz-dark-75: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 80%, transparent);
    --jeo-rz-dark-85: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 90%, transparent);
    --jeo-rz-dark-95: color-mix(in srgb, color-mix(in srgb, var(--jeo-primary) 15%, black) 100%, transparent);
    /* -- */
    --jeo-gradient-primary-stop-1: rgba(90, 90, 90, 1);
    --jeo-gradient-primary-stop-2: rgba(90, 100, 90, 1);
    --jeo-gradient-primary-stop-3: rgba(90, 105, 90, 1);
    --jeo-gradient-primary-stop-4: rgba(90, 115, 90, 1);
    --jeo-gradient-primary-stop-5: rgba(90, 125, 90, 1);
    --jeo-gradient-primary-stop-6: rgba(100, 140, 100, 1);
    /* -- */
    --jeo-gradient-green-stop-1: rgba(0, 50, 00, 1);
    --jeo-gradient-green-stop-2: rgba(30, 75, 30, 1);
    --jeo-gradient-green-stop-3: rgba(4, 90, 40, 1);
    --jeo-gradient-green-stop-4: rgba(50, 105, 50, 1);
    --jeo-gradient-green-stop-5: rgba(60, 125, 60, 1);
    --jeo-gradient-green-stop-6: rgba(70, 140, 70, 1);
    /* -- */
    --jeo-gradient-blue-stop-1: rgba(0, 20, 101, 0.8);
    --jeo-gradient-blue-stop-2: rgba(0, 30, 150, 1);
    --jeo-gradient-blue-stop-3: rgba(0, 40, 202, 1);
    --jeo-gradient-blue-stop-4: rgba(10, 50, 240, 1);
    --jeo-gradient-blue-stop-5: rgba(20, 60, 255, 1);
    /* -- */
    --jeo-gradient-red-stop-1: rgba(100, 0, 0, 0.8);
    --jeo-gradient-red-stop-2: rgba(150, 0, 0, 1);
    --jeo-gradient-red-stop-3: rgba(220, 0, 0, 1);
    --jeo-gradient-red-stop-4: rgba(235, 0, 0, 1);
    --jeo-gradient-red-stop-5: rgba(250, 0, 0, 1);
    /* -- */
    --jeo-gradient-orange-stop-1: rgba(142, 74, 0, 0.8);
    --jeo-gradient-orange-stop-2: rgb(163, 85, 0, 0.8);
    --jeo-gradient-orange-stop-3: rgb(169, 88, 0, 0.8);
    --jeo-gradient-orange-stop-4: rgb(213, 111, 0, 0.8);
    --jeo-gradient-orange-stop-5: rgb(255, 133, 0, 0.9);
    --jeo-gradient-orange-stop-6: rgb(255, 133, 0, 1);
    /* -- */
    --jeo-gradient-silver-stop-1: rgba(255, 255, 255, 1);
    --jeo-gradient-silver-stop-2: rgba(235, 235, 235, 1);
    --jeo-gradient-silver-stop-3: rgba(215, 215, 215, 1);
    --jeo-gradient-silver-stop-4: rgba(205, 205, 205, 1);
    --jeo-gradient-silver-stop-5: rgba(184, 184, 184, 0.95);
    --jeo-gradient-silver-stop-6: rgba(174, 174, 174, 0.85);
    /* -- */
    --jeo-gradient-violet-stop-1: rgba(50, 0, 50, 0.8);
    --jeo-gradient-violet-stop-2: rgba(80, 0, 80, 0.8);
    --jeo-gradient-violet-stop-3: rgba(120, 0, 120, 0.8);
    --jeo-gradient-violet-stop-4: rgba(155, 0, 155, 0.8);
    --jeo-gradient-violet-stop-5: rgba(205, 0, 205, 0.9);
    --jeo-gradient-violet-stop-6: rgba(255, 0, 255, 1);
    /* -- */
    --jeo-gradient-black-stop-1: rgba(0, 0, 0, 0.8);
    --jeo-gradient-black-stop-2: rgba(25, 25, 25, 0.7);
    --jeo-gradient-black-stop-3: rgba(40, 40, 40, 0.7);
    --jeo-gradient-black-stop-4: rgba(55, 55, 55, 0.7);
    --jeo-gradient-black-stop-5: rgba(70, 70, 70, 0.7);
    --jeo-gradient-black-stop-6: rgba(85, 85, 85, 0.7);
    /* -- */
    --jeo-gradient-cornflowerblue-stop-1: rgba(0, 72, 207, .7);
    --jeo-gradient-cornflowerblue-stop-2: rgba(0, 72, 207, 1);
    --jeo-gradient-cornflowerblue-stop-3: rgba(9, 108, 222, 1);
    --jeo-gradient-cornflowerblue-stop-4: rgba(17, 143, 240, 1);
    --jeo-gradient-cornflowerblue-stop-5: rgba(27, 159, 247, 1);
    --jeo-gradient-cornflowerblue-stop-6: rgba(0, 187, 255, 1);
    /* -- */
    --jeo-gradient-pink-stop-1: rgba(186, 0, 158, 1);
    --jeo-gradient-pink-stop-2: rgba(219, 0, 216, 1);
    --jeo-gradient-pink-stop-3: rgba(224, 25, 255, 1);
    --jeo-gradient-pink-stop-4: rgba(255, 36, 251, 1);
    --jeo-gradient-pink-stop-5: rgba(255, 105, 245, 1);
    --jeo-gradient-pink-stop-6: rgba(255, 133, 233, 1);
    /* -- */
    --jeo-gradient-rz-stop-6: color-mix(in srgb, var(--rz-primary) 90%, black);
    --jeo-gradient-rz-stop-5: color-mix(in srgb, var(--rz-primary) 92%, black);
    --jeo-gradient-rz-stop-4: color-mix(in srgb, var(--rz-primary) 92%, black);
    --jeo-gradient-rz-stop-3: color-mix(in srgb, var(--rz-primary) 94%, black);
    --jeo-gradient-rz-stop-2: color-mix(in srgb, var(--rz-primary) 96%, black);
    --jeo-gradient-rz-stop-1: color-mix(in srgb, var(--rz-primary) 99%, black);
    /* -- */
    --jeo-gradient-rz-2-stop-6: color-mix(in srgb, var(--rz-primary) 90%, white);
    --jeo-gradient-rz-2-stop-5: color-mix(in srgb, var(--rz-primary) 92%, white);
    --jeo-gradient-rz-2-stop-4: color-mix(in srgb, var(--rz-primary) 92%, white);
    --jeo-gradient-rz-2-stop-3: color-mix(in srgb, var(--rz-primary) 94%, white);
    --jeo-gradient-rz-2-stop-2: color-mix(in srgb, var(--rz-primary) 96%, white);
    --jeo-gradient-rz-2-stop-1: color-mix(in srgb, var(--rz-primary) 99%, white);
    /* -- */
    --jeo-gradient-primary: linear-gradient(0deg, var(--jeo-gradient-primary-stop-1) 0%, var(--jeo-gradient-primary-stop-2) 25%, var(--jeo-gradient-primary-stop-3) 45%, var(--jeo-gradient-primary-stop-4) 65%, var(--jeo-gradient-primary-stop-5) 85%, var(--jeo-gradient-primary-stop-6) 100%);
    --jeo-gradient-green: linear-gradient(0deg, var(--jeo-gradient-green-stop-1) 0%, var(--jeo-gradient-green-stop-2) 25%, var(--jeo-gradient-green-stop-3) 45%, var(--jeo-gradient-green-stop-4) 65%, var(--jeo-gradient-green-stop-5) 85%, var(--jeo-gradient-green-stop-6) 100%);
    --jeo-gradient-blue: linear-gradient(0deg, var(--jeo-gradient-blue-stop-1) 0%, var(--jeo-gradient-blue-stop-2) 25%, var(--jeo-gradient-blue-stop-3) 50%, var(--jeo-gradient-blue-stop-4) 75%, var(--jeo-gradient-blue-stop-5) 100%);
    --jeo-gradient-red: linear-gradient(0deg, var(--jeo-gradient-red-stop-1) 0%, var(--jeo-gradient-red-stop-2) 25%, var(--jeo-gradient-red-stop-3) 50%, var(--jeo-gradient-red-stop-4) 75%, var(--jeo-gradient-red-stop-5) 100%);
    --jeo-gradient-orange: linear-gradient(0deg, var(--jeo-gradient-orange-stop-1) 0%, var(--jeo-gradient-orange-stop-2) 25%, var(--jeo-gradient-orange-stop-3) 45%, var(--jeo-gradient-orange-stop-4) 65%, var(--jeo-gradient-orange-stop-5) 85%, var(--jeo-gradient-orange-stop-6) 100%);
    --jeo-gradient-silver: linear-gradient(0deg, var(--jeo-gradient-silver-stop-1) 0%, var(--jeo-gradient-silver-stop-2) 20%, var(--jeo-gradient-silver-stop-3) 40%, var(--jeo-gradient-silver-stop-4) 60%, var(--jeo-gradient-silver-stop-5) 80%, var(--jeo-gradient-silver-stop-6) 100%);
    --jeo-gradient-violet: linear-gradient(0deg, var(--jeo-gradient-violet-stop-1) 0%, var(--jeo-gradient-violet-stop-2) 25%, var(--jeo-gradient-violet-stop-3) 45%, var(--jeo-gradient-violet-stop-4) 65%, var(--jeo-gradient-violet-stop-5) 85%, var(--jeo-gradient-violet-stop-6) 100%);
    --jeo-gradient-black: linear-gradient(0deg, var(--jeo-gradient-black-stop-1) 0%, var(--jeo-gradient-black-stop-2) 25%, var(--jeo-gradient-black-stop-3) 45%, var(--jeo-gradient-black-stop-4) 65%, var(--jeo-gradient-black-stop-5) 85%, var(--jeo-gradient-black-stop-6) 100%);
    --jeo-gradient-cornflowerblue: linear-gradient(0deg, var(--jeo-gradient-cornflowerblue-stop-1) 0%, var(--jeo-gradient-cornflowerblue-stop-2) 25%, var(--jeo-gradient-cornflowerblue-stop-3) 45%, var(--jeo-gradient-cornflowerblue-stop-4) 65%, var(--jeo-gradient-cornflowerblue-stop-5) 85%, var(--jeo-gradient-cornflowerblue-stop-6) 100%);
    --jeo-gradient-pink: linear-gradient(0deg, var(--jeo-gradient-pink-stop-1) 0%, var(--jeo-gradient-pink-stop-2) 25%, var(--jeo-gradient-pink-stop-3) 45%, var(--jeo-gradient-pink-stop-4) 65%, var(--jeo-gradient-pink-stop-5) 85%, var(--jeo-gradient-pink-stop-6) 100%);
    --jeo-gradient-rz: linear-gradient(0deg, var(--jeo-gradient-rz-stop-1) 0%, var(--jeo-gradient-rz-stop-2) 25%, var(--jeo-gradient-rz-stop-3) 45%, var(--jeo-gradient-rz-stop-4) 65%, var(--jeo-gradient-rz-stop-5) 85%, var(--jeo-gradient-rz-stop-6) 100%);
    --jeo-gradient-rz-2: linear-gradient(0deg, var(--jeo-gradient-rz-2-stop-1) 0%, var(--jeo-gradient-rz-2-stop-2) 25%, var(--jeo-gradient-rz-2-stop-3) 45%, var(--jeo-gradient-rz-2-stop-4) 65%, var(--jeo-gradient-rz-2-stop-5) 85%, var(--jeo-gradient-rz-2-stop-6) 100%);
    /* ------- */
    /* 10-Color Spectrum Tokens */
    --color-1-red: oklch(65% 0.22 25);
    --color-2-orange: oklch(70% 0.20 55);
    --color-3-yellow: oklch(80% 0.18 95);
    --color-4-lime: oklch(78% 0.19 125);
    --color-5-green: oklch(68% 0.19 145);
    --color-6-teal: oklch(68% 0.14 195);
    --color-7-blue: oklch(58% 0.20 250);
    --color-8-indigo: oklch(55% 0.22 290);
    --color-9-magenta: oklch(60% 0.23 325);
    --color-10-pink: oklch(65% 0.21 350);
}

@keyframes horizontal-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes horizontal-shake-short {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-1px);
    }

    20% {
        transform: translateX(-2px);
    }

    30% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(-4px);
    }

    70% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(0px);
    }
}

@keyframes neon-rz {
    from {
        box-shadow: inset 0px 0px 1px 1px rgba(100, 154, 100, 0.3);
    }

    to {
        box-shadow: inset 0px 0px 5px 16px rgb(70, 220, 70, 1);
    }
}

@keyframes neon-rz-2 {
    from {
        box-shadow: inset 0px 0px 11px 11px var(--jeo-primary);
    }

    to {
        box-shadow: inset 0px 0px 1px 1px var(--rz-white);
    }
}

@keyframes neon-rz-3 {
    from {
        box-shadow: inset 0px 0px 15px 15px var(--jeo-rz-dark-55);
    }

    to {
        box-shadow: inset 0px 0px 15px 15px var(--jeo-rz-15);
    }
}

@keyframes neon1 {
    from {
        box-shadow: inset 0px 0px 1px 1px rgba(100, 154, 100, 0.2), inset 0px 0px 0px 1px rgba(100, 164, 100, 0.2), inset 0px 0px 15px 3px rgba(100, 164, 100, 0.2), inset 0px 0px 15px 3px rgba(100, 164, 100, 0.2);
    }

    to {
        box-shadow: inset 0px 0px 5px 16px rgb(0, 110, 250, 0.3);
    }
}

@keyframes neon2 {
    from {
        box-shadow: inset 0px 0px 1px 1px rgba(100, 154, 100, 0.3), 0px 0px 2px 2px rgba(0, 139, 0, 0.3), 0px 0px 4px 4px rgba(0, 175, 0, 0.3);
    }

    to {
        box-shadow: inset 0px 0px 5px 16px rgb(250, 0, 70, 1);
    }
}

@keyframes neon3 {
    from {
        box-shadow: 0px 0px 2px 2px rgba(100, 0, 0, 0.2), 0px 0px 4px 4px rgba(200, 0, 0, 0.2);
    }

    to {
        box-shadow: 0px 0px 2px 2px rgb(235, 50, 50, .2), 0px 0px 4px 4px rgb(235, 50, 50, .1);
    }
}
@keyframes pulseGlow {
  from {
    /* Subtle initial glow: X-offset, Y-offset, Blur-radius, Color */
    filter: drop-shadow(0 0 3px rgba(90, 255, 90, 0.3));
  }
  to {
    /* Intense expanded glow */
    filter: drop-shadow(0 0 12px rgba(50, 255, 50, .6));
  }
}
/*-----*/
