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

	Theme Name: Bloua
    Text Domain: bloua
	Version: 0.4.2
	Description: Poe is a clean, flexible and fast block theme built with portfolios and blogs in mind. Its default look is a stylish white on black color scheme with yellow accents and clean sans-serif typography, but Poe is built from the ground up for flexibility. It includes ten different theme styles to choose from, and over 30 different block patterns that you can use to quickly create unique page layouts.
	Tags: blog, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks, full-site-editing
	Author: Anders Norén
	Author URI: https://andersnoren.se
	Theme URI: https://andersnoren.se/teman/poe-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Requires PHP: 5.6
	Tested up to: 6.5

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

/* --------------------------------------------------------------------------------------------- */
div[class^="wp-block-blou-page-"],
.wp-block-post-content,
.block-editor-inner-blocks,
div[class^="block-editor-block-"] {
    display: contents;
}

:where(.wp-site-blocks)>* {
    margin-block: 0;
}

.wp-site-blocks {
    --height: calc(100svh - 30px);
    background-size: cover;
    max-width: 100svw;
    min-height: calc(100svh - var(--wp--style--root--padding-top) - var(--wp--style--root--padding-bottom));
    height: calc(100svh - var(--wp--style--root--padding-top) - var(--wp--style--root--padding-bottom));
    max-height: calc(100svh - var(--wp--style--root--padding-top) - var(--wp--style--root--padding-bottom));
    padding: 0;
    min-height: var(--height);
    height: var(--height);
    max-height: var(--height);

}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    background: var(--wp--preset--color--background);
}

p,
h6 {
    margin-block: unset;
    line-height: normal;
}

::selection {
    background: var(--wp--preset--color--primary);
    color: white;
}

.font-default, .font-light b {
    font-family: var(--wp--preset--font-family--default);
}

.font-light {
    font-family: var(--wp--preset--font-family--default-light);
}
body,
.cursor,
a,
button {
    /* cursor: url("assets/cursors/cursor.svg"), auto; */
    cursor: none;
}

/* SPACING */
:root {
    --wp--style--root--padding-right: clamp(24px, 3.333vw, 48px);
    --wp--style--root--padding-right: unset !important;
    --wp--style--root--padding-left: unset !important;
    --header-height: 30px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
}

@media (max-width: 768px) {
    :root {
        --spacing-xs: 2px;
        --spacing-sm: 4px;
        --spacing-md: 8px;
        --spacing-lg: 16px;
        --spacing-xl: 32px;
    }

    .preloader--image {
        display: none;
    }

    .preloader--image:nth-child(1),
    .preloader--image:nth-child(2),
    .preloader--image:nth-child(3) {
        display: block;
    }
}

/* BLOU STYLES */
/* PRELOADER */
body {
    /* overflow: hidden; */
}

.blou-preloader {
    --time: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    min-width: 100svw;
    max-width: 100svw;
    max-height: 100svh;
    min-height: 100svh;
    background: var(--wp--preset--color--background);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    animation: PreloaderClose 1s ease-in-out both;
    animation-delay: 2800ms;
    transform-origin: center;
}

.blou-preloader[data-time="2"] {
    --time: 2;
}

.blou-preloader[data-time="3"] {
    --time: 3;
}

.preloader--wraper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    animation: PreloaderWrapperClose 1s ease both;
    animation-delay: 1800ms;
}

@keyframes PreloaderClose {
    from {
        left: 0%;
    }

    80% {
        background: var(--wp--preset--color--background);
        opacity: 1;
        transform: scale(1);
        filter: blur(0px);
    }

    to {
        opacity: 0;
        background: var(--wp--preset--color--primary);
        pointer-events: none;
        transform: scale(1.4);
        filter: blur(40px);
    }
}

@keyframes PreloaderWrapperClose {
    from {
        max-height: 18rem;
    }

    to {
        max-height: 0rem;
    }
}

.preloader--image {
    height: 18rem;
    width: 9rem;
    background: url("assets/images/preloaders.webp");
    background-size: cover;
    mix-blend-mode: color-burn;
    background-position-x: calc((50% * var(--time)) - 50%);
}



.preloader--image:nth-child(3n + 2) {
    background-origin: left;
    background-position-x: 50%;
    /* outline: solid 2px green; */
}

.blou-preloader[data-time="2"] .preloader--image:nth-child(3n + 2) {
    background-position-x: 95%;
}

.blou-preloader[data-time="3"] .preloader--image:nth-child(3n + 2) {
    background-position-x: 0%;
}

.preloader--image:nth-child(3n) {
    background-position-x: calc(95% / var(--time));
    /* outline: solid 2px red; */
}

@media (max-aspect-ratio: 4/3) {
    div.blou-preloader {
        overflow: hidden;
        max-width: 100svw;
        max-height: 100svh;
    }

    main.wp-block-group {
        height: 100%;
    }

    div.wp-site-blocks {
        background: none;
        min-height: 100svh;
        height: 100svh;
        max-height: 100svh;
    }

}

@media (max-aspect-ratio: 4/3) {
    div.home--section {
        background: url("assets/images/main-bg.webp");
        background-size: 300%;
        min-height: auto;
        background-position-y: 21%;
    }
}

.home--section {
    background: url("assets/images/bg-shapes.png");
    background-size: 400% 100%;
    background-repeat: no-repeat;
    background-position-y: top;
}

.home--sectionHover {
    background: url("assets/images/bg-shapes.png");
    background-size: 400% 100%;
    background-repeat: no-repeat;
    background-position-y: top;
    mix-blend-mode: color-burn;
}

.home--sections {
    background: url("assets/images/main-bg.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: top;
    aspect-ratio: 16 / 9;
}

.cursor-pointer,
a {
    /* cursor: url("assets/cursors/cursor.cur"), pointer !important; */
    cursor: none;
}



/* Layout */
.layout-stack {
    display: flex;
}

/* Page Style */
.page-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blou-circle {
    --size: 20px;
    aspect-ratio: 1 / 1;
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    background-color: var(--wp--preset--color--primary);
}