/*!
 * LearnHaus — © 2026. Copyright LearnHaus.
 * Do not copy, modify, and/or redistribute. 
 * The content presented herein may not, under any circumstances, 
 * be reproduced in whole or in any part or form without written permission from LearnHaus.
 * ------------------
 * D3.js graphs from: Copyright 2010-2023 Mike Bostock.
 * Some icons from: iconpacks.net.
 */
/*!***********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/extra-animations.css ***!
  \***********************************************************************************/
/* ------ ICON SIZING ------*/
/* TABLER ICONS */
[class*="icon-tabler"] {
    width: currentWidth;
    height: auto;
}

/* Spin Saving Loader Icon */
.icon.icon-tabler.icons-tabler-outline.icon-tabler-loader-3-page {
    animation: rotateloader 1000ms ease infinite; /* Rotate */
}

/* ------ RAINBOW SHIFTING BACKGROUND ------ */
/* Shine Animation */
[class*="rainbow-shine-animation"] {
    background-size: 400% 400%;
    animation: gradientShine 4s ease-in-out infinite;
}
@keyframes gradientShine {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 50%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 50%; }
    100% { background-position: 0% 50%; }
}
/* Fast Shine Animation */
[class*="rainbow-shine-animation-fast"] {
    background-size: 400% 400%;
    animation: gradientShineOneWay 4s ease-in-out infinite;
}
@keyframes gradientShineOneWay {
    0% { background-position: 0% 10%; }
    25% { background-position: 75% 85%; }
    50% { background-position: 25% 25%; }
    90% { background-position: 100% 50%; }
    100% { background-position: 0% 10%; }
}
/* Reds Shine Animation */
[class*="rainbow-shine-animation-reds"] {
    background: linear-gradient(270deg, #dc2528, #f14d4f, #ff686a, #dc2528);
    background-size: 400% 400%;
    animation: gradientShineReds 4s ease-in-out infinite;
}
@keyframes gradientShineReds {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 50%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 50%; }
    100% { background-position: 0% 50%; }
}
/* Oranges Shine Animation */
[class*="rainbow-shine-animation-oranges"] {
    background: linear-gradient(270deg, #ffbe08, #ff9800, #ffc658, #ffbe08);
    background-size: 400% 400%;
    animation: gradientShineOranges 4s ease-in-out infinite;
}
@keyframes gradientShineOranges {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 50%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 50%; }
    100% { background-position: 0% 50%; }
}
/* Blues Shine Animation */
[class*="rainbow-shine-animation-blues"] {
    background: linear-gradient(135deg, #1419fc, #4263f5, #c542f5, #ffffff);
    background-size: 400% 400%;
    animation: gradientShineBlues 4s ease-in-out infinite;
}
@keyframes gradientShineBlues {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 50%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 50%; }
    100% { background-position: 0% 50%; }
}
    
/* ------ SPINNING & ZOOMING ELEMENT ------ */
[class*="spin-element-1-2"] {
    animation: rotateAndPulse 1.25s linear infinite;
}
@keyframes rotateAndPulse {
    0% {
        transform: rotate(0deg) scale(0.5);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(0.5);
    }
}

/* ------ LOOT SHAKE ANIMATION ------ */
[class*="loot-shake-animation"] {
    animation: shake-and-pulse 2s ease-in-out infinite;
}

/* Keyframes for the loot shake and pulse effect */
@keyframes shake-and-pulse {
    0%, 20% {
        transform: translate(0, 0) rotate(0deg); /* Initial position, no shake */
    }
    25% {
        transform: translate(-2px, 2px) rotate(-2deg);
    }
    30% {
        transform: translate(2px, -2px) rotate(2deg);
    }
    35% {
        transform: translate(-3px, 3px) rotate(-3deg);
    }
    40% {
        transform: translate(3px, -3px) rotate(3deg);
    }
    /* Short pause */
    45%, 60% {
        transform: translate(0, 0) rotate(0deg);
    }
    65% {
        transform: translate(-4px, 4px) rotate(-4deg);
    }
    70% {
        transform: translate(4px, -4px) rotate(4deg);
    }
    75% {
        transform: translate(-5px, 5px) rotate(-5deg);
    }
    80% {
        transform: translate(5px, -5px) rotate(5deg);
    }
    /* Final shake burst */
    85% {
        transform: translate(-6px, 6px) rotate(-6deg);
    }
    90% {
        transform: translate(6px, -6px) rotate(6deg);
    }
    95% {
        transform: translate(-7px, 7px) rotate(-7deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg); /* Return to original position */
    }
}

/* ------ LOADING WAVE ELEMENTS ------ */
/* General style for the icons */
#wave-icon-1, #wave-icon-2, #wave-icon-3, #wave-icon-4 {
    display: inline-block;
    animation: wave-bounce 1s ease-in-out infinite;
}

/* Define the bounce animation */
@keyframes wave-bounce {
    0%, 50%, 100% {
        transform: translateY(0); /* Icon at original position */
    }
    75% {
        transform: translateY(-20px); /* Adjust bounce height as needed */
    }
}

/* Staggered delays for each icon to create the wave effect */
#wave-icon-1 {
    animation-delay: 0s;
}
#wave-icon-2 {
    animation-delay: 0.1666666666s;
}
#wave-icon-3 {
    animation-delay: .3333333333s;
}
#wave-icon-4 {
    animation-delay: .5s;
}

/* ------ TYPEWRITER EFFECT ------ */

.typewriter-animation {
    display: inline-block; /* Allows for multi-line typing effect */
}

/* ------ LOADING SHIMMER ELEMENTS ------ */

.loadingshimmer {
    position: relative;
    overflow: hidden;
    /* The gradient below defines three semi-transparent stripes across 100% width.
       We then scale the background to 200% so the stripes can smoothly scroll. */
    background: linear-gradient(
        45deg,
        rgba(255,255,255,0.1) 0%,     /* lower-intensity region */
        rgba(255,255,255,0.1) 15%,
        rgba(255,255,255,0.15) 15%, 
        rgba(255,255,255,0.2) 17%, 
        rgba(255,255,255,0.3) 20%,     /* brighter stripe #1 */
        rgba(255,255,255,0.3) 30%,
        rgba(255,255,255,0.2) 33%, 
        rgba(255,255,255,0.15) 35%,
        rgba(255,255,255,0.1) 35%,     /* back to lower-intensity */
        rgba(255,255,255,0.1) 45%,
        rgba(255,255,255,0.15) 45%,
        rgba(255,255,255,0.2) 47%,
        rgba(255,255,255,0.3) 50%,     /* brighter stripe #2 */
        rgba(255,255,255,0.3) 60%,
        rgba(255,255,255,0.2) 63%,
        rgba(255,255,255,0.15) 65%,
        rgba(255,255,255,0.1) 65%,
        rgba(255,255,255,0.1) 75%,
        rgba(255,255,255,0.15) 75%,
        rgba(255,255,255,0.2) 77%,
        rgba(255,255,255,0.3) 80%,     /* brighter stripe #3 */
        rgba(255,255,255,0.3) 90%,
        rgba(255,255,255,0.2) 93%,
        rgba(255,255,255,0.15) 95%,
        rgba(255,255,255,0.1) 95%,
        rgba(255,255,255,0.1) 100%
    );
    background-size: 200% 200%;
    animation: shimmer 1.8s linear infinite;
}
  
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ------ ROTATING LOADER ------ */  

@keyframes rotateloader {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

/* ------ SCORE CANVAS ------ */  

[class*="scores-canvas"] {
    scrollbar-width: none;
}


/*# sourceMappingURL=epsilon-demo-event-analytics.dev.css.map*/