/*
* Page : Wipuulce
* Type : css
* Apply on 1 page
*/

/* componnents on all pages */
@import '../components/footer.css';
@import '../components/buttons.css';
@import '../components/loader.css';
@import '../components/hero.css';
@import '../components/forms.css';
@import '../components/toggle.css';

/* componnents on this page */
@import '../components/faq.css';

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

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

body [data-barba-namespace="wipuulce"] section.hero .hero-content {
    height: 24vw;
}
body [data-barba-namespace="wipuulce"] #wippulce-date > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (max-width: 768px) {
    body [data-barba-namespace="wipuulce"] #wippulce-date > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 72px 16px;
        min-height: calc(100vh - 144px);
    }
}
body [data-barba-namespace="wipuulce"] #wippulce-date h3 {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}
body.light body [data-barba-namespace="wipuulce"] #wippulce-date h3 {
    background-image: linear-gradient(90deg, var(--dark-color), var(--dark-color));
}
body.dark body [data-barba-namespace="wipuulce"] #wippulce-date h3 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}

body [data-barba-namespace="wipuulce"] div#video-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(133.69deg, #f6ecf6 -13.85%, #5200ff 221.38%);
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
body [data-barba-namespace="wipuulce"] .controller-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    width: calc(100% - 60px);
    position: absolute;
    bottom: 0;
}
body [data-barba-namespace="wipuulce"] .letf-controller, 
body [data-barba-namespace="wipuulce"] .right-controller {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}
body [data-barba-namespace="wipuulce"] div#video-container .content-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    max-width: 56%;
}
body [data-barba-namespace="wipuulce"] section.hero div#video-container picture {
    width: 216px;
    height: 172px;
}
body [data-barba-namespace="wipuulce"] section.hero div#video-container picture img {
    width: 216px;
    height: 216px;
}
body [data-barba-namespace="wipuulce"] section.hero div#video-container h1 {
    display: none;
}
body [data-barba-namespace="wipuulce"] section.hero div#video-container p {
    color: var(--lightness-color);
}

body [data-barba-namespace="wipuulce"] div#video-container .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
body [data-barba-namespace="wipuulce"] div#video-container .content-text svg {
    opacity: 0;
}
body [data-barba-namespace="wipuulce"] section.hero.visible #waite-logo-one {
    animation: waite-logo-for-wipuulce 1800ms 300ms ease-in infinite forwards;
}
body [data-barba-namespace="wipuulce"] section.hero.visible #waite-logo-two {
    animation: waite-logo-for-wipuulce 1800ms 600ms ease-in infinite forwards;
}
body [data-barba-namespace="wipuulce"] section.hero.visible #waite-logo-three {
    animation: waite-logo-for-wipuulce 1800ms 900ms ease-in infinite forwards;
}
@keyframes waite-logo-for-wipuulce {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

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

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

/* Pricing section */
body [data-barba-namespace="wipuulce"] section#pricing-section > div {
    display: flex;
    align-items: center;
}
body [data-barba-namespace="wipuulce"] section.pricing-section .pricing {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/* title container */
body [data-barba-namespace="wipuulce"] section.pricing-section .pricing .title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
body [data-barba-namespace="wipuulce"] section.pricing-section .pricing .title-container h2 {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body [data-barba-namespace="wipuulce"] section.pricing-section .pricing .title-container p {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
body [data-barba-namespace="wipuulce"] section.pricing-section .pricing span {
    font-family: var(--text-font);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--lightness-color);
}

/* toggle container */
body [data-barba-namespace="wipuulce"] section.pricing-section .pricing .toggle-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

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

/* animations */
body [data-barba-namespace="wipuulce"] section.pricing-section.visible .pricing .title-container h2, 
body [data-barba-namespace="wipuulce"] section.pricing-section.visible .pricing .title-container p {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
body [data-barba-namespace="wipuulce"] section.pricing-section .toggle-container {
    opacity: 0;
}
body [data-barba-namespace="wipuulce"] section.pricing-section.visible .toggle-container {
    will-change: transform;
    animation: apear 300ms 150ms ease-in forwards;
}
body [data-barba-namespace="wipuulce"] section.pricing-section.visible .products-container .product.one {
    will-change: transform;
    animation: bouncedApear 300ms 300ms ease-in forwards;
}
body [data-barba-namespace="wipuulce"] section.pricing-section.visible .products-container .product.two {
    will-change: transform;
    animation: bouncedApear 300ms 600ms ease-in forwards;
}
body [data-barba-namespace="wipuulce"] section.pricing-section.visible .products-container .product.three {
    will-change: transform;
    animation: bouncedApear 300ms 450ms ease-in forwards;
}

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

/* responsiv */
@media (max-width: 768px) {
    body [data-barba-namespace="wipuulce"] section.pricing-section.darkness-section > div > div {
        max-width: 1424px;
        padding: 16px;
        margin: 0px auto;
    }
}

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

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