/*
============================================================
ANIMATION CLASS
============================================================
*/
.ani {
    animation-duration: 0.7s;
    animation-timing-function: var(--ease-out);
    animation-fill-mode: both;
}

.ani-fast {
    animation-duration: 0.35s;
}

.ani-slow {
    animation-duration: 1.1s;
}

.ani-infinite {
    animation-iteration-count: infinite;
}

.ani-delay-100 {
    animation-delay: 0.1s;
}

.ani-delay-200 {
    animation-delay: 0.2s;
}

.ani-delay-300 {
    animation-delay: 0.3s;
}

.ani-delay-400 {
    animation-delay: 0.4s;
}

.ani-delay-500 {
    animation-delay: 0.5s;
}

.ani-delay-700 {
    animation-delay: 0.7s;
}

.ani-delay-1000 {
    animation-delay: 1s;
}

.ani-fade-in {
    animation-name: fadeIn;
}

.ani-fade-out {
    animation-name: fadeOut;
}

.ani-fade-up {
    animation-name: fadeUp;
}

.ani-fade-down {
    animation-name: fadeDown;
}

.ani-fade-left {
    animation-name: fadeLeft;
}

.ani-fade-right {
    animation-name: fadeRight;
}

.ani-zoom-in {
    animation-name: zoomIn;
}

.ani-zoom-out {
    animation-name: zoomOut;
}

.ani-slide-up {
    animation-name: slideUp;
}

.ani-slide-down {
    animation-name: slideDown;
}

.ani-float {
    animation-name: floatY;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ani-spin {
    animation-name: spin;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ani-pulse {
    animation-name: pulse;
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ani-fade {
    animation: fadeIn 0.45s ease both;
}

.ani-up {
    animation: up 0.45s ease both;
}

.ani-bg-red {
    animation: bgRed 1s infinite;
}

.ani-txt-yellow {
    animation: txtYellow 1s infinite;
}

.ani-txt-orange {
    animation: txtOrange 1s infinite;
}

.ani-opacity {
    animation: opacityBlink 0.8s infinite;
}

.ani-opacity--normal {
    animation: opacityBlink 1s infinite;
}

.ani-opacity--slow {
    animation: opacityBlink 1.2s infinite;
}

.ani-opacity--60 {
    opacity: 0.6;
    animation: opacity60Blink 0.8s infinite;
}

.ani-shine {
    animation: shine 2s infinite;
    text-shadow: 1px 1px 15px #f46722;
}

.ani-shine-y {
    animation: shineY 2s infinite;
    text-shadow: 1px 1px 30px #ffcc00;
}

.ani-shine-box {
    animation: shineBox 2s infinite;
    box-shadow: 1px 1px 30px #fff600;
}

.ani-scale-blink {
    animation: scaleBlink 1s infinite;
}

.ani-scale-blink--slow {
    animation: scaleBlink 2s infinite;
}

.ani-pulse-grow {
    animation: pulseGrow 1.5s ease-in-out infinite;
}

.ani-arrow-move {
    animation: arrowMove 2s linear infinite;
}

.ani-rotate-infinite {
    animation: rotateInfinite 5s linear infinite;
}

.ani-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite both;
}

.ani-vibrate {
    animation: vibrate 0.3s linear infinite both;
}

.ani-reveal {
    animation: reveal 0.8s ease-out forwards;
}

.line-wrap {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.3s;
    z-index: 0;
}

.line {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 40px;
    width: auto;
    animation: textLoop 20s linear infinite;
}

.line-wrap:hover .line {
    animation-play-state: paused;
}

/*
============================================================
AOS CUSTOM
============================================================
*/
html.aos-disabled [data-aos] {
    transform: none;
    opacity: 1;
}

[data-aos="fade-up-sm"] {
    transform: translate3d(0, 20px, 0);
    opacity: 0;
}

[data-aos="fade-up-sm"].aos-animate {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

[data-aos="fade-down-sm"] {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
}

[data-aos="fade-down-sm"].aos-animate {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

[data-aos="blur-up"] {
    transform: translate3d(0, 30px, 0);
    filter: blur(12px);
    opacity: 0;
}

[data-aos="blur-up"].aos-animate {
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    opacity: 1;
}

[data-aos="clip-left"] {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
}

[data-aos="clip-left"].aos-animate {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

[data-aos="clip-right"] {
    clip-path: inset(0 0 0 100%);
    opacity: 1;
}

[data-aos="clip-right"].aos-animate {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/*
============================================================
KEYFRAMES
============================================================
*/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeUp {
    0% {
        transform: translate3d(0, var(--ani-distance), 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fadeDown {
    0% {
        transform: translate3d(0, calc(var(--ani-distance) * -1), 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fadeLeft {
    0% {
        transform: translate3d(var(--ani-distance), 0, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fadeRight {
    0% {
        transform: translate3d(calc(var(--ani-distance) * -1), 0, 0);
        opacity: 0;
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0.92);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomOut {
    0% {
        transform: scale(1.08);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translate3d(0, 100%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideDown {
    0% {
        transform: translate3d(0, -100%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes floatY {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -12px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.04);
        opacity: 0.75;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes up {
    0% {
        transform: translateY(8px);
        opacity: 0.01;
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes bgRed {
    0%,
    49.5% {
        background: #b11515;
    }

    50%,
    100% {
        background: #000000;
    }
}

@keyframes txtYellow {
    0%,
    49.5% {
        color: #ffff00;
    }

    50%,
    100% {
        color: inherit;
    }
}

@keyframes txtOrange {
    0%,
    49.5% {
        color: #f46722;
    }

    50%,
    100% {
        color: inherit;
    }
}

@keyframes opacityBlink {
    0%,
    49.5% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.25;
    }
}

@keyframes opacity60Blink {
    0%,
    49.5% {
        opacity: 0.6;
    }

    50%,
    100% {
        opacity: 0.15;
    }
}

@keyframes shine {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.6);
    }
}

@keyframes shineY {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.8) saturate(1.2);
    }
}

@keyframes shineBox {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(255, 246, 0, 0);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 246, 0, 0.75);
    }
}

@keyframes scaleBlink {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes pulseGrow {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@keyframes arrowMove {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes rotateInfinite {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.12);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.12);
    }

    70% {
        transform: scale(1);
    }
}

@keyframes vibrate {
    0%,
    100% {
        transform: translate(0);
    }

    20% {
        transform: translate(-1px, 1px);
    }

    40% {
        transform: translate(-1px, -1px);
    }

    60% {
        transform: translate(1px, 1px);
    }

    80% {
        transform: translate(1px, -1px);
    }
}

@keyframes reveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes textLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes textLoopRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .line,
    .rolling-track,
    [class*="ani-"] {
        animation: none;
    }
}