/**
Theme Name: Bar gradnja
Author: Neco
Author URI: http://wpastra.com/about/
Description: Astra child for Bar gradnja
Version: 1.0.0.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bar-gradnja
Template: astra
*/

.transition-overlay {
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    width: 100%;
    height: 100%;
    background: #0e232d;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}

.transition-overlay.active {
    pointer-events: all;
    display: block;
}

.logo-container {
    width: 60px;
    /*height: 160px;*/
}

.logo-container svg {
    width: 100%;
    height: 100%;
}

.page-content {
    transition: opacity 0.3s ease;
}

.page-content.fade-out {
    opacity: 0;
}

.info-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    max-width: 600px;
    margin: 2rem auto 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.info-box h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.info-box ul {
    text-align: left;
    list-style-position: inside;
    line-height: 1.8;
    opacity: 0.9;
}

@keyframes fadeInOverlay {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes redTileSlide {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        /*transform: translateX(0);*/
        opacity: 0;
    }
}

@keyframes blueTileSlide {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        /*transform: translateY(0);*/
        opacity: 0;
    }
}

@keyframes drawLineLeft {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    50% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }
}

@keyframes drawLineRight {
    0% {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    50% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 0;
    }
}

.animate-overlay {
    animation: fadeInOverlay 2s ease-in-out;
}

.animate-red {
    animation: redTileSlide 1.5s ease-out both;
}

.animate-blue {
    animation: blueTileSlide 1.5s ease-out both;
}

.animate-line-top {
    animation: drawLineLeft 1s ease-out both;
}

.animate-line-bottom {
    animation: drawLineRight 1s ease-out both;
}


.animate-overlay {
    animation: fadeInOverlay 1.2s ease-in-out;
}

.animate-red {
    animation: redTileSlide 0.8s ease-out both;
}

.animate-blue {
    animation: blueTileSlide 0.8s ease-out both;
}

.animate-line-top {
    animation: drawLineLeft 1s ease-out both;
}

.animate-line-bottom {
    animation: drawLineRight 1s ease-out both;
}

/* red tiles — now only 0.15s spread */
.red-element:nth-child(1) {
    animation-delay: 0.05s;
}

.red-element:nth-child(2) {
    animation-delay: 0.08s;
}

.red-element:nth-child(3) {
    animation-delay: 0.11s;
}

.red-element:nth-child(4) {
    animation-delay: 0.14s;
}

.red-element:nth-child(5) {
    animation-delay: 0.17s;
}

.red-element:nth-child(6) {
    animation-delay: 0.20s;
}

.red-element:nth-child(7) {
    animation-delay: 0.23s;
}

.red-element:nth-child(8) {
    animation-delay: 0.26s;
}

.red-element:nth-child(9) {
    animation-delay: 0.29s;
}

.red-element:nth-child(10) {
    animation-delay: 0.32s;
}

.red-element:nth-child(11) {
    animation-delay: 0.35s;
}

.red-element:nth-child(12) {
    animation-delay: 0.38s;
}

.red-element:nth-child(13) {
    animation-delay: 0.41s;
}

.red-element:nth-child(14) {
    animation-delay: 0.44s;
}

.red-element:nth-child(15) {
    animation-delay: 0.47s;
}

/* blue tiles — slightly longer but still fast */
.blue-element:nth-child(1) {
    animation-delay: 0.10s;
}

.blue-element:nth-child(2) {
    animation-delay: 0.13s;
}

.blue-element:nth-child(3) {
    animation-delay: 0.16s;
}

.blue-element:nth-child(4) {
    animation-delay: 0.19s;
}

.blue-element:nth-child(5) {
    animation-delay: 0.22s;
}

.blue-element:nth-child(6) {
    animation-delay: 0.25s;
}

.blue-element:nth-child(7) {
    animation-delay: 0.28s;
}

.blue-element:nth-child(8) {
    animation-delay: 0.31s;
}

.blue-element:nth-child(9) {
    animation-delay: 0.34s;
}

.blue-element:nth-child(10) {
    animation-delay: 0.37s;
}

.blue-element:nth-child(11) {
    animation-delay: 0.40s;
}

.blue-element:nth-child(12) {
    animation-delay: 0.43s;
}

.blue-element:nth-child(13) {
    animation-delay: 0.46s;
}

.blue-element:nth-child(14) {
    animation-delay: 0.49s;
}

.blue-element:nth-child(15) {
    animation-delay: 0.52s;
}

.blue-element:nth-child(16) {
    animation-delay: 0.55s;
}