/*** ANIMATIONS ***/

.flickeranim {animation:flicker-1 2s linear infinite both}

@keyframes flicker-1{0%,100%{opacity:1}41.99%{opacity:1}42%{opacity:0}43%{opacity:0}43.01%{opacity:1}47.99%{opacity:1}48%{opacity:0}49%{opacity:0}49.01%{opacity:1}}

.flickerinanim {animation:text-flicker-in-glow 4s linear both}

@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

/* Put this on any element you want to have the CRT effect */

.crt {
    position: relative;
    overflow: hidden;
	z-index: 1;
}

/* Animated scanlines */

.crt::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.04) 0px,
            rgba(255,255,255,0.04) 1px,
            rgba(0,0,0,0.12) 2px,
            rgba(0,0,0,0.12) 4px
        );

    animation: scanlines 8s linear infinite;
    opacity: .7;
}

@keyframes scanlines {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(4px);
    }
}

.crt::before {
    content: "";
    position: absolute;
    inset: -100%;
    pointer-events: none;
     z-index: 2;

    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(255,255,255,.08) 50%,
        transparent 55%
    );

    animation: sweep 6s linear infinite;
}

@keyframes sweep {
    from {
        transform: translateY(-50%);
    }
    to {
        transform: translateY(50%);
    }
}

/**

* ----------------------------------------

* animation tracking-in-expand

* ----------------------------------------

*/

@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

.flip-horizontal-bottom {
    -webkit-animation: flip-horizontal-bottom .4s cubic-bezier(.455, .03, .515, .955) both;
    animation: flip-horizontal-bottom .4s cubic-bezier(.455, .03, .515, .955) both
}

.slit-in-vertical {
    -webkit-animation: slit-in-vertical 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: slit-in-vertical 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

/* ---------------------------------------- * animation slit-in-vertical * ---------------------------------------- */

@-webkit-keyframes slit-in-vertical {
    0% {
        -webkit-transform: translateZ(-800px) rotateY(90deg);
        transform: translateZ(-800px) rotateY(90deg);
        opacity: 0;
    }

    54% {
        -webkit-transform: translateZ(-160px) rotateY(87deg);
        transform: translateZ(-160px) rotateY(87deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateZ(0) rotateY(0);
        transform: translateZ(0) rotateY(0);
    }
}

@keyframes slit-in-vertical {
    0% {
        -webkit-transform: translateZ(-800px) rotateY(90deg);
        transform: translateZ(-800px) rotateY(90deg);
        opacity: 0;
    }

    54% {
        -webkit-transform: translateZ(-160px) rotateY(87deg);
        transform: translateZ(-160px) rotateY(87deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateZ(0) rotateY(0);
        transform: translateZ(0) rotateY(0);
    }
}

.slit-in-horizontal {
	-webkit-animation: slit-in-horizontal 0.35s cubic-bezier(0.785, 0.135, 0.150, 0.860) both;
	        animation: slit-in-horizontal 0.35s cubic-bezier(0.785, 0.135, 0.150, 0.860) both;
}

/* ----------------------------------------------

* Generated by Animista on 2025-8-6 14:39:24

* Licensed under FreeBSD License.

* See http://animista.net/license for more info.

* w: http://animista.net, t: @cssanimista

* ---------------------------------------------- */

/**

* ----------------------------------------

* animation slit-in-horizontal

* ----------------------------------------

*/

@-webkit-keyframes slit-in-horizontal {
  0% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
            transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
            transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateX(0);
            transform: translateZ(0) rotateX(0);
  }
}

@keyframes slit-in-horizontal {
  0% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
            transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
            transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateX(0);
            transform: translateZ(0) rotateX(0);
  }
}

/* * ---------------------------------------- * animation fade-in * ---------------------------------------- */

@-webkit-keyframes fade-in60 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes fade-in60 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.6;
    }
}

.fade-in60 {
    -webkit-animation: fade-in60 0.28s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in60 0.28s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in100 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1.0;
    }
}

@keyframes fade-in100 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1.0;
    }
}

.fade-in100 {
    -webkit-animation: fade-in100 0.28s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in100 0.28s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }
}

@keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }
}

/**

* ----------------------------------------

* animation fade-out

* ----------------------------------------

*/

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*** ANIMATIONS ***/

/* ----------------------------------------------

* Generated by Animista on 2022-4-7 8:51:31

* Licensed under FreeBSD License.

* See http://animista.net/license for more info.

* w: http://animista.net, t: @cssanimista

* ---------------------------------------------- */

/**

* ----------------------------------------

* animation tracking-in-expand

* ----------------------------------------

*/

.floating { 
    animation-name: floating;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0%); }
    50%  { transform: translate(0, 1%); }
    100%   { transform: translate(0, -0%); }   
}

/**

* ----------------------------------------

* animation fade-in

* ----------------------------------------

*/

/*

---

fade out

-----

*/

/*** ANIMATIONS ***/

/* ----------------------------------------------

* Generated by Animista on 2022-4-7 8:51:31

* Licensed under FreeBSD License.

* See http://animista.net/license for more info.

* w: http://animista.net, t: @cssanimista

* ---------------------------------------------- */

/**

* ----------------------------------------

* animation tracking-in-expand

* ----------------------------------------

*/

/*** ANIMATIONS ***/

/* ----------------------------------------------

* Generated by Animista on 2022-4-7 8:51:31

* Licensed under FreeBSD License.

* See http://animista.net/license for more info.

* w: http://animista.net, t: @cssanimista

* ---------------------------------------------- */

/**

* ----------------------------------------

* animation tracking-in-expand

* ----------------------------------------

*/

/*** ANIMATIONS ***/

/* ----------------------------------------------

* Generated by Animista on 2022-4-7 8:51:31

* Licensed under FreeBSD License.

* See http://animista.net/license for more info.

* w: http://animista.net, t: @cssanimista

* ---------------------------------------------- */

/**

* ----------------------------------------

* animation tracking-in-expand

* ----------------------------------------

*/

/* ----------------------------------------------

* Generated by Animista on 2023-5-2 13:59:40

* Licensed under FreeBSD License.

* See http://animista.net/license for more info.

* w: http://animista.net, t: @cssanimista

* ---------------------------------------------- */

@-webkit-keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@keyframes flip-horizontal-bottom{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}