/**
 * A2 Start Animations CSS
 * 
 * File: a2-startAnimations.css
 * Description: This file contains custom CSS start animations by A2ST.
 * Version: 1.0.0
 * Author: A.Diaz
 * Created: 2025-02-03
 * Last Updated: 2025-02-03
 */
 
 /* ENTRANCE ANIMATIONS */

/* #region LOGO TO HEADER ANIMATION */
/* ==========================================================================
   LOGO TO HEADER ENTRANCE ANIMATION 
   ========================================================================== */
.logo-to-header-animation {
    /* Start Configurable variables */
    --background-color: red;
    --background-final-width: 120px;
    --background-final-height: 60px;
    --logo-start-width: 200px;
    --logo-start-height: 100px;
    --logo-end-width: var(--background-final-width);
    --logo-end-height: var(--background-final-height);
    --final-left-position: 20px;
    --final-top-position: 0;
    --final-borders-radius: 0 0 20px 20px;
    --final-opacity: 0;

    --animation-duration: 1.5s;
    --animation-delay: 1s;
    --animation-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
    /* End Configurable variables */

    /* Do not change anything from here */
    --animation-background-duration: var(--animation-duration);
    --animation-background-delay: var(--animation-delay);
    --animation-background-easing: var(--animation-easing);
    --animation-logo-duration: var(--animation-duration);
    --animation-logo-delay: var(--animation-delay);
    --animation-logo-easing: var(--animation-easing);

    position: absolute !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.logo-to-header-animation .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    z-index: 998;
    transform-origin: top left;
    animation: logo-to-header-bg-resize var(--animation-background-duration) var(--animation-background-easing) forwards var(--animation-background-delay);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-to-header-animation .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--logo-start-width);
    height: var(--logo-start-height);
    z-index: 999;
    transform-origin: center center;
    animation: logo-to-header-logo-resize var(--animation-logo-duration) var(--animation-logo-easing) forwards var(--animation-logo-delay);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes logo-to-header-bg-resize {
    0% { 
        top: 0px;
        left: 0px; 
        border-radius: 0px; 
        opacity: 1;
    }
    50% { 
        border-radius: var(--final-borders-radius)
    }
    100% { 
        top: var(--final-top-position);
        left: var(--final-left-position);
        width: var(--background-final-width); 
        height: var(--background-final-height); 
        border-radius: var(--final-borders-radius);
        opacity: var(--final-opacity);
    }
}

@keyframes logo-to-header-logo-resize {
    0% { 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: var(--logo-start-width);
        max-height: var(--logo-start-height);
        opacity: 1;
    }
    100% {
        top: var(--final-top-position);
        left: var(--final-left-position);
        transform: translate(0);
        width: var(--logo-end-width);
        height: var(--logo-end-height);
        opacity: var(--final-opacity);
    }
}
/* #endregion */

/* #region LOGO TO CENTER TO HEADER ANIMATION */
/* ==========================================================================
   LOGO CENTER TO HEADER ENTRANCE ANIMATION 
   ========================================================================== */
.logo-center-to-header-animation {
    /* Start Configurable variables */
    --background-color: red;
    --background-final-width: 120px;
    --background-final-height: 60px;
    --logo-start-width: 200px;
    --logo-start-height: 100px;
    --logo-end-width: var(--background-final-width);
    --logo-end-height: var(--background-final-height);
    --final-left-position: 20px;
    --final-top-position: 10px;
    --final-borders-radius: 20px;

    --animation-duration: 2s;
    --animation-delay: 1s;
    --animation-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
    /* End Configurable variables */

    /* Do not change anything from here */
    --animation-background-duration: var(--animation-duration);
    --animation-background-delay: var(--animation-delay);
    --animation-background-easing: var(--animation-easing);
    --animation-logo-duration: var(--animation-duration);
    --animation-logo-delay: var(--animation-delay);
    --animation-logo-easing: var(--animation-easing);

    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.logo-center-to-header-animation .background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    z-index: 998;
    transform-origin: center center;
    animation: logo-center-to-header-bg-resize var(--animation-background-duration) var(--animation-background-easing) forwards var(--animation-background-delay);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-center-to-header-animation .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--logo-start-width);
    height: var(--logo-start-height);
    z-index: 999;
    transform-origin: center;
    animation: logo-center-to-header-logo-resize var(--animation-logo-duration) var(--animation-logo-easing) forwards var(--animation-logo-delay);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes logo-center-to-header-bg-resize {
    0% { 
        border-radius: 0;
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        border-radius: var(--final-borders-radius);
        transform: scale(0);
        opacity: 0.3;
    }
    100% { 
        border-radius: var(--final-borders-radius);
        transform: scale(0);
        opacity: 0.3;
    }
}

@keyframes logo-center-to-header-logo-resize {
    0% { 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--logo-start-width);
        height: var(--logo-start-height);
    }
    50% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--logo-start-width);
        height: var(--logo-start-height);
    }
    100% {
        top: var(--final-top-position);
        left: var(--final-left-position);
        transform: translate(0);
        width: var(--logo-end-width);
        height: var(--logo-end-height);
    }
}
/* #endregion */

/* #region SPLIT VIEW ANIMATION */
/* ==========================================================================
   SPLIT VIEW ENTRANCE ANIMATION
   ========================================================================== */
.split-view-animation {

    /* Start Configurable variables */
    --split-views-bg-color: #fff;
    --logo-positionX: 50%;
    --logo-positionY: 50%;
    --loader-positionX: 50%;
    --loader-positionY: 55%;
    --loader-width: 30%;
    --loader-height: 20px;
    --loader-bg-color: #e0e0e0;
    --loader-bar-color: #3b82f6;
    --loader-border-radius: 10px;

    --animation-loading-duration: 0.5s;
    --animation-loading-delay: 0s;
    --animation-split-duration: 1s;
    --animation-split-delay: 0.3s;
    --animation-elements-fadeOut-duration: 0.3s;
    --animation-easing: ease-in-out;
    /* End Configurable Variables */

    /* Do not change anything from here */
    --animation-split-view-duration: var(--animation-split-duration);
    --animation-split-view-delay: calc(var(--animation-loading-duration) + var(--animation-loading-delay) + var(--animation-split-delay));
    --animation-split-view-easing: var(--animation-easing);
    --animation-logo-duration: var(--animation-elements-fadeOut-duration);
    --animation-logo-delay: calc(var(--animation-loading-duration) + var(--animation-loading-delay));
    --animation-logo-easing: var(--animation-easing);;
    --animation-loader-duration: var(--animation-elements-fadeOut-duration);
    --animation-loader-delay: calc(var(--animation-loading-duration) + var(--animation-loading-delay));
    --animation-loader-easing: var(--animation-easing);;
    --animation-loader-bar-duration: var(--animation-loading-duration);
    --animation-loader-bar-delay: var(--animation-loading-delay);
    --animation-loader-bar-easing: var(--animation-easing);;
    --z-index-foreground: 999;
    --z-index-background: 998;

    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.split-view-animation .split-view-part {
    position: absolute;
    background: var(--split-views-bg-color);;
    z-index: var(--z-index-background);
    display: flex;
    justify-content: center;
    align-items: center;
}

.split-view-animation .split-view-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: center top;
    animation: split-view-slide-up var(--animation-split-view-duration) var(--animation-split-view-easing) forwards var(--animation-split-view-delay);
}

.split-view-animation .split-view-bottom {
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: center bottom;
    animation: split-view-slide-down var(--animation-split-view-duration) var(--animation-split-view-easing) forwards var(--animation-split-view-delay);
}

.split-view-animation .split-view-left {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transform-origin: left center;
    animation: split-view-slide-left var(--animation-split-view-duration) var(--animation-split-view-easing) forwards var(--animation-split-view-delay);
}

.split-view-animation .split-view-right {
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    transform-origin: right center;
    animation: split-view-slide-right var(--animation-split-view-duration) var(--animation-split-view-easing) forwards var(--animation-split-view-delay);
}

.split-view-animation .split-view-logo {
    position: absolute;
    top: var(--logo-positionY);
    left: var(--logo-positionX);
    transform: translate(-50%, -50%);
    z-index: var(--z-index-foreground);
    animation: split-view-logo-fadeOut var(--animation-logo-duration) var(--animation-logo-easing) forwards var(--animation-logo-delay);
}

.split-view-animation .split-view-loader {
    position: absolute;
    top: var(--loader-positionY);
    left: var(--loader-positionX);
    transform: translate(-50%, -50%);
    width: var(--loader-width);
    height: var(--loader-height);
    background-color: var(--loader-bg-color);
    z-index: var(--z-index-foreground);
    overflow: hidden;
    border-radius: var(--loader-border-radius);
    animation: split-view-loader-fadeOut var(--animation-loader-duration) var(--animation-loader-easing) forwards var(--animation-loader-delay);
  }
  
.split-view-animation .split-view-loader::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0%);
    transform-origin: left;
    animation: split-view-loading-bar var(--animation-loader-bar-duration) var(--animation-loader-bar-easing) forwards var(--animation-loader-bar-delay), 
        split-view-loader-fadeOut var(--animation-loader-bar-duration) var(--animation-loader-bar-easing) forwards var(--animation-loader-delay);
    background-color: var(--loader-bar-color);
}

@keyframes split-view-slide-up {
    0% { transform: translateY(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateY(-100%); visibility: hidden; }
}

@keyframes split-view-slide-down {
    0% { transform: translateY(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateY(100%); visibility: hidden; }
}

@keyframes split-view-slide-left {
    0% { transform: translateX(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateX(-100%); visibility: hidden; }
}

@keyframes split-view-slide-right {
    0% { transform: translateX(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateX(100%); visibility: hidden;}
}

@keyframes split-view-logo-fadeOut {
    0% { opacity: 1; visibility: visible; }
    99% { visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes split-view-loader-fadeOut {
    0% { opacity: 1; visibility: visible; }
    99% { visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes split-view-loading-bar {
    0% { transform: scaleX(0.6); }
    100% { transform: scaleX(1); }
}
/* #endregion */

/* #region SLIDE VIEW ANIMATION */
/* ==========================================================================
   SLIDE VIEW ENTRANCE ANIMATION
   ========================================================================== */
.slide-view-animation {

    /* Start Configurable variables */
    --background-color: #fff;
    --logo-positionX: 50%;
    --logo-positionY: 50%;
    --loader-positionX: 50%;
    --loader-positionY: 55%;
    --loader-width: 30%;
    --loader-height: 20px;
    --loader-bg-color: #e0e0e0;
    --loader-bar-color: #3b82f6;
    --loader-border-radius: 10px;

    --animation-loading-duration: 0.5s;
    --animation-loading-delay: 0s;
    --animation-slide-duration: 1s;
    --animation-slide-delay: 0.3s;
    --animation-elements-fadeOut-duration: 0.3s;
    --animation-easing: ease-in-out;
    /* End Configurable Variables */

    /* Do not change anything from here */
    --animation-slide-view-duration: var(--animation-slide-duration);
    --animation-slide-view-delay: calc(var(--animation-loading-duration) + var(--animation-loading-delay) + var(--animation-slide-delay));
    --animation-slide-view-easing: var(--animation-easing);
    --animation-logo-duration: var(--animation-elements-fadeOut-duration);
    --animation-logo-delay: calc(var(--animation-loading-duration) + var(--animation-loading-delay));
    --animation-logo-easing: var(--animation-easing);;
    --animation-loader-duration: var(--animation-elements-fadeOut-duration);
    --animation-loader-delay: calc(var(--animation-loading-duration) + var(--animation-loading-delay));
    --animation-loader-easing: var(--animation-easing);;
    --animation-loader-bar-duration: var(--animation-loading-duration);
    --animation-loader-bar-delay: var(--animation-loading-delay);
    --animation-loader-bar-easing: var(--animation-easing);;
    --z-index-foreground: 999;
    --z-index-background: 998;

    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.slide-view-animation .slide-view-part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    z-index: var(--z-index-background);
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-view-animation .slide-view-top {
    transform-origin: center top;
    animation: split-view-slide-up var(--animation-slide-view-duration) var(--animation-slide-view-easing) forwards var(--animation-slide-view-delay);
}

.slide-view-animation .slide-view-bottom {
    transform-origin: center bottom;
    animation: slide-view-slide-down var(--animation-slide-view-duration) var(--animation-slide-view-easing) forwards var(--animation-slide-view-delay);
}

.slide-view-animation .slide-view-left {
    transform-origin: left center;
    animation: split-view-slide-left var(--animation-slide-view-duration) var(--animation-slide-view-easing) forwards var(--animation-slide-view-delay);
}

.slide-view-animation .slide-view-right {
    transform-origin: right center;
    animation: slide-view-slide-right var(--animation-slide-view-duration) var(--animation-slide-view-easing) forwards var(--animation-slide-view-delay);
}

.slide-view-animation .slide-view-logo {
    position: absolute;
    top: var(--logo-positionY);
    left: var(--logo-positionX);
    transform: translate(-50%, -50%);
    z-index: var(--z-index-foreground);
    animation: slide-view-logo-fadeOut var(--animation-logo-duration) var(--animation-logo-easing) forwards var(--animation-logo-delay);
}

.slide-view-animation .slide-view-loader {
    position: absolute;
    top: var(--loader-positionY);
    left: var(--loader-positionX);
    transform: translate(-50%, -50%);
    width: var(--loader-width);
    height: var(--loader-height);
    background-color: var(--loader-bg-color);
    z-index: var(--z-index-foreground);
    overflow: hidden;
    border-radius: var(--loader-border-radius);
    animation: split-view-loader-fadeOut var(--animation-loader-duration) var(--animation-loader-easing) forwards var(--animation-loader-delay);
  }
  
.slide-view-animation .slide-view-loader::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    animation: slide-view-loading-bar var(--animation-loader-bar-duration) var(--animation-loader-bar-easing) forwards var(--animation-loader-bar-delay), 
    slide-view-loader-fadeOut var(--animation-loader-bar-duration) var(--animation-loader-bar-easing) forwards var(--animation-loader-delay);
    background-color: var(--loader-bar-color);
}

@keyframes slide-view-slide-up {
    0% { transform: translateY(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateY(-100%); visibility: hidden; }
}

@keyframes slide-view-slide-down {
    0% { transform: translateY(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateY(100%); visibility: hidden; }
}

@keyframes slide-view-slide-left {
    0% { transform: translateX(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateX(-100%); visibility: hidden; }
}

@keyframes slide-view-slide-right {
    0% { transform: translateX(0%); visibility: visible; }
    99% { visibility: visible; }
    100% { transform: translateX(100%); visibility: hidden;}
}

@keyframes slide-view-logo-fadeOut {
    0% { opacity: 1; visibility: visible; }
    99% { visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes slide-view-loader-fadeOut {
    0% { opacity: 1; visibility: visible; }
    99% { visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes slide-view-loading-bar {
    0% { transform: scaleX(0.6); }
    100% { transform: scaleX(1); }
}
/* #endregion */

/* #region SLIDE VIEW & LOGO TO HEADER ANIMATION */