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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem 2rem;
        }

        #protoTransition{
            background: hsl(224 14% 12% / 1);
        }

        .protocontainer {
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
            color: white;
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .subtitle {
            text-align: left;
            color: rgba(255,255,255,0.9);
            font-size: var(--font-size-text-md);
            margin-bottom: var(--font-size-text-md);
            line-height: var(--line-height-xl);
        }

        .examples-container {
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-bottom: 2rem;
        }

        .card {
            background: var(--color-white10);
            border-radius: var(--border-radius-md);
            padding: var(--border-radius-lg);
            width: 100%;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--font-size-text-xs);
        }

        .card h2 {
            color: var(--color-white80);
            font-size: var(--font-size-text-sm);
            margin: 0;
        }

        .description {
            color: var(--color-white70);
            font-size: var(--font-size-text-sm);
            line-height: var(--line-height-xs);
            max-width: 60%;
            margin-bottom: 0;
        }

        .demo-container {
            width: 100%;
            height: 84px;
            background: var(--color-black20);
            border-radius: var(--border-radius-md);
            position: relative;
            overflow: hidden;
            margin-top: 1rem;
            cursor: pointer;
        }

        .demo-element {
            width: 64px;
            height: 64px;
            position: absolute;
            top: 10px;
            left: 10px;
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            transition-duration: var(--dls-transition-duration-500);
            transition-property: transform, box-shadow;
            pointer-events: none;
        }

        /* Linear timing function */
        .linear {
            background: var(--color-linear);
            transition-timing-function: var(--dls-transition-easing-linear);
        }

        .demo-container:hover .linear {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

        /* Ease-in timing function */
        .ease-in {
            background: var(--color-ease-in);
            transition-timing-function: var(--dls-transition-easing-ease-in);
        }

        .demo-container:hover .ease-in {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

        /* Ease-out timing function */
        .ease-out {
            background: var(--color-ease-out);
            transition-timing-function: var(--dls-transition-easing-ease-out);
        }

        .demo-container:hover .ease-out {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

        /* Ease-in-out timing function */
        .ease-in-out {
            background: var(--color-ease-in-out);
            transition-timing-function: var(--dls-transition-easing-ease-in-out);
        }

        .demo-container:hover .ease-in-out {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

        /* Overshoot/Bounce timing function */
        .overshoot {
            background: var(--color-overshoot);
            transition-timing-function: var(--dls-transition-easing-overshoot);
            /* transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
        }

        .demo-container:hover .overshoot {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

        /* Ease timing function (default) */
        .ease {
            background: var(--color-ease);
            transition-timing-function: var(--dls-transition-easing-ease);
        }

        .demo-container:hover .ease {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

        /* Easing anticipate timing function (default) */
        .anticipate {
            background: var(--color-anticipate);
            transition-timing-function: cubic-bezier(0.48, -0.45, 0.45, 1.40);
        }

        .demo-container:hover .anticipate {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

/*

        .anticipate2 {
            background: var(--color-anticipate);
            transition-timing-function: var(--dls-transition-easing-anticipate2);
        }

        .demo-container:hover .anticipate2 {
            transform: translateX(calc(90vw - 100px));
            box-shadow: 0 10px 30px var(--color-black90);
        }

*/


        /* Ease timing function (default) 
        .demo-container:hover .demo-element {
              transform: translateX(calc(90vw - 90px)) !important;
            }*/


        /* Bonus section */
        .bonus-section {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .bonus-section h2 {
            color: white;
            font-size: 2rem;
            margin-bottom: 30px;
        }

        .complex-demo {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 20px;
        }

        .complex-element {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 1s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
        }

        .bounce {
            background: linear-gradient(45deg, #ff7675, #d63031);
            transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .bounce:hover {
            transform: scale(1.5) translateY(-40px);
        }

        .elastic {
            background: linear-gradient(45deg, #00b894, #00a085);
            transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .elastic:hover {
            transform: scale(1.3) rotate(180deg);
        }

        .back {
            background: linear-gradient(45deg, #6c5ce7, #a29bfe);
            transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .back:hover {
            transform: translateX(50px) scale(1.2);
        }


        @media (max-width: 1440px) {
            .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            h1 {
                font-size: 2rem;
            }
            /*
            .demo-container:hover .demo-element {
                transform: translateX(calc(100vw - 100px)) !important;
              transform: translateX(calc(90vw - 90px)) !important;
            }
            */
            .complex-demo {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {           
            .description {
                max-width: 100%;
            }
        }

/* ------------------------------------------------------------------
Root values
------------------------------------------------------------------- */

:root {
  /* 3 colors */
  --color-background: #21232c;
  --color-accent: #FE3942;
  --color-accent-dark: #FE3942;
  /* shades accent-dark */
  --color-accent-dark02: rgba(254, 57, 66, 0.02);
  --color-accent-dark05: rgba(254, 57, 66, 0.05);
  --color-accent-dark10: rgba(254, 57, 66, 0.1);
  --color-accent-dark20: rgba(254, 57, 66, 0.2);
  --color-accent-dark30: rgba(254, 57, 66, 0.3);
  --color-accent-dark40: rgba(254, 57, 66, 0.4);
  --color-accent-dark50: rgba(254, 57, 66, 0.5);
  --color-accent-dark60: rgba(254, 57, 66, 0.6);
  --color-accent-dark70: rgba(254, 57, 66, 0.7);
  --color-accent-dark80: rgba(254, 57, 66, 0.8);
  --color-accent-dark90: rgba(254, 57, 66, 0.9);
  /* Pastels for transaitions */
  --color-linear: #FF3860;
  --color-ease: #DE38FF;
  --color-ease-in: #8838FF;
  --color-ease-out: #3874FF;
  --color-ease-in-out: #38D7FF;
  --color-overshoot: #38FFB3;
  --color-anticipate: #A5FF38;
  /* black and white */
  --color-black: black;
  --color-white: white;
  /* greys */
  --color-aaGrey: #646464;
  --color-charcoalLight: #40464b;
  --color-charcoalMedium: #2b3237;
  --color-charcoalDark: #1e2124;
  --color-grey98: #FAFAFA;
  --color-grey95: #F2F2F2;
  --color-grey90: #E6E6E6;
  --color-grey80: #CCCCCC;
  --color-grey70: #B3B3B3;
  --color-grey60: #999999;
  --color-grey50: #808080;
  --color-grey40: #666666;
  --color-grey30: #4D4D4D;
  --color-grey20: #333333;
  --color-grey10: #1A1A1A;
  /* shades */
  --color-black02: rgba(0, 0, 0, .02);
  --color-black05: rgba(0, 0, 0, .05);
  --color-black10: rgba(0, 0, 0, .1);
  --color-black20: rgba(0, 0, 0, .2);
  --color-black30: rgba(0, 0, 0, .3);
  --color-black40: rgba(0, 0, 0, .4);
  --color-black50: rgba(0, 0, 0, .5);
  --color-black60: rgba(0, 0, 0, .6);
  --color-black70: rgba(0, 0, 0, .7);
  --color-black80: rgba(0, 0, 0, .8);
  --color-black90: rgba(0, 0, 0, .9);
   /* tints */
  --color-white02: rgba(255, 255, 255, .02);
  --color-white05: rgba(255, 255, 255, .05);
  --color-white10: rgba(255, 255, 255, .1);
  --color-white20: rgba(255, 255, 255, .2);
  --color-white30: rgba(255, 255, 255, .3);
  --color-white40: rgba(255, 255, 255, .4);
  --color-white50: rgba(255, 255, 255, .5);
  --color-white60: rgba(255, 255, 255, .6);
  --color-white70: rgba(255, 255, 255, .7);
  --color-white80: rgba(255, 255, 255, .8);
  --color-white90: rgba(255, 255, 255, .9);
  /* TYPOGRAPHY */
  /* font families */
  --font-family-sans: "ABC Sans Nova", sans-serif;
  --font-family-sans-condensed-bold: "ABC Sans Nova Condensed bold", sans-serif;
  --font-family-serif: "ABCSerif Regular", serif;
  /* font weights */
  --font-weight-light: 200;
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --font-weight-black: 900;
  /* font sizes text*/
  --font-size-text-xxs: .6875rem;
  --font-size-text-xs: .75rem;
  --font-size-text-sm: .875rem;
  --font-size-text-md: 1rem;
  --font-size-text-lg: 1.125rem;
  --font-size-text-xl: 1.25rem;
  --font-size-text-xxl: 1.5rem;
  --font-size-text-3xl: 1.75rem;
  /* font sizes headings*/
  --font-size-heading-xxs: 1rem;
  --font-size-heading-xs: 1.125rem;
  --font-size-heading-sm: 1.25rem;
  --font-size-heading-md: 1.5rem;
  --font-size-heading-lg: 2rem;
  --font-size-heading-xl: 2.25rem;
  --font-size-heading-xxl: 3rem;
  --font-size-heading-3xl: 4rem;
  /* line heights */
  --line-height-xxs: 1;
  --line-height-xs: 1.125;
  --line-height-sm: 1.25;
  --line-height-md: 1.5;
  --line-height-lg: 1.75;
  --line-height-xl: 2;
  --line-height-xxl: 2.5;
  /* letter spacing */
  --letter-spacing-xxs: -2px;
  /* -2px */
  --letter-spacing-xs: -1px;
  /* -1px */
  --letter-spacing-sm: -0.5px;
  /* -0.5px */
  --letter-spacing-md: 0;
  /* default auto */
  --letter-spacing-lg: 0.5px;
  /* -0.5px */
  --letter-spacing-xl: 1px;
  /* 1px */
  --letter-spacing-xxl: 2px;
  /* 2px */
  /* elevation */
  --box-shadow-xs: 0px 2px 2px rgba(0, 0, 0, 0.05);
  --box-shadow-sm: 0px 1px 4px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.05);
  --box-shadow-lg: 0px 10px 16px -4px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.05);
  --box-shadow-xxl: 0px 24px 48px -12px rgba(0, 0, 0, 0.25);
  /* border-radius */
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-xxl: 32px;
  --border-radius-circle: 50%;
  /* transitions */
  --dls-transition-duration-100: 0.1s;
  --dls-transition-duration-150: 0.15s;
  --dls-transition-duration-200: 0.2s;
  --dls-transition-duration-300: 0.3s;
  --dls-transition-duration-400: 0.4s;
  --dls-transition-duration-450: 0.45s;
  --dls-transition-duration-500: 0.5s;
  --dls-transition-easing-linear: linear;
  --dls-transition-easing-ease: ease;
  --dls-transition-easing-ease-in: ease-in;
  --dls-transition-easing-ease-out: ease-out;
  --dls-transition-easing-ease-in-out: ease-in-out;
  --dls-transition-easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* --dls-transition-easing-anticipate-original: cubic-bezier(0.48, -0.25, 0.25, 1.20); */
  --dls-transition-easing-anticipate: cubic-bezier(0.48, -0.45, 0.45, 1.40);
  --dls-transition-easing-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* same as overshoot*/
  --dls-link-transition: color 0.2s ease-out,border-color 0.2s ease-out,border-radius 0.2s ease-out,background-color 0.2s ease-out,box-shadow 0.2s ease-out,transform 0.2s ease-out;
}