/* ----------------------------------------------
 * Generated by Animista on 2024-11-13 12:38:43
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

body {
    position: relative; /* Crucial for positioning the pseudo-element */
    /* Ensure body has enough height if content is short, or ::before won't be visible */
    min-height: 100vh;
    /* You might want a default non-animated background color on the body itself */
    /* background-color: #some-base-color; */
}

body::before {
    content: ""; /* Pseudo-elements require content, even if empty */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Or 100vh if you always want it viewport height */
    z-index: -1; /* Place it behind the body's content */

    /* --- Animated background properties --- */
    background-image: repeating-linear-gradient(
        -45deg, /* Angle of the stripes */
        #3a3f47 0%, /* Darker stripe color */
        #3a3f47 25px, /* Darker stripe width */
        #2c3036 25px, /* Lighter stripe color starts */
        #2c3036 50px /* Lighter stripe width (total gradient repeat length is 50px) */
    );
    animation: stripe-animation 10s linear infinite;

    /* --- Fade properties --- */
    opacity: 0; /* Start fully transparent */
    visibility: hidden; /* Start hidden to prevent interaction */
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
    /*
        Transition opacity over 0.5s.
        Transition visibility instantly (0s) but DELAY it until opacity transition is done for fade-out.
        For fade-in, visibility will become visible immediately due to the .animated-background rule below.
    */
}

body.animated-background::before {
    opacity: 1; /* Fade in to fully opaque */
    visibility: visible; /* Make it visible */
    transition-delay: 0s; /* Ensure no delay when fading in */
}

/* --- Define the animation keyframes (unchanged) --- */
@keyframes stripe-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100px 0;
    }
}

/* Optional: If you want the body content to also fade or change color */
/*
body.animated-background {
    color: white;
    transition: color 0.5s ease-in-out;
}
*/