.grid-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--clr-primary-1);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    transform-origin: center center;
    will-change: transform, opacity;
}

.grid-transition-overlay.active {
    opacity: 1;
}

body.transitioning {
    overflow: hidden;
}

.cv-hp-hero > div {
    transition: opacity 0.3s ease;
}

.cv-hp-hero.transitioning > div:not(.expanding) {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cv-hp-hero > div > a {
    transition: transform 0.3s ease;
}

.cv-hp-hero > div.expanding > a {
    transform: scale(0.95);
}

/* Random stvorce */
.grid-transition-square {
    --velkost: var(--space-4xl-5xl);
    width: var(--velkost);
    height: var(--velkost);
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    position: absolute;
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
    transform-origin: center center;
}

.grid-transition-square:nth-child(1) {
    top: 5%;
    left: 5%;
}
.grid-transition-square:nth-child(2) {
    top: 10%;
    right: 8%;
}
.grid-transition-square:nth-child(3) {
    bottom: 15%;
    left: 10%;
}
.grid-transition-square:nth-child(4) {
    top: 50%;
    left: 50%;
}
.grid-transition-square:nth-child(5) {
    bottom: 8%;
    right: 15%;
}
.grid-transition-square:nth-child(6) {
    top: 70%;
    left: 30%;
}
.grid-transition-square:nth-child(7) {
    top: 30%;
    left: 20%;
}
.grid-transition-square:nth-child(8) {
    bottom: 40%;
    right: 25%;
}

.grid-transition-overlay.active .grid-transition-square {
    opacity: 1;
}

.grid-transition-overlay.active .grid-transition-square {
    transform: scale(var(--counter-scale, 1));
}

@media (max-width: 799px) {
    .grid-transition-overlay {
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }
    
    .cv-hp-hero.transitioning > div:not(.expanding) {
        transition: opacity 0.15s ease;
    }
    
    .grid-transition-square:nth-child(1) {
		top: 8%;
		left: 12%;
	}

	.grid-transition-square:nth-child(2) {
		top: 18%;
		right: 8%;
	}

	.grid-transition-square:nth-child(3) {
		top: 35%;
		left: 5%;
	}

	.grid-transition-square:nth-child(4) {
		top: 55%;
		right: 15%;
	}

	.grid-transition-square:nth-child(5) {
		bottom: 10%;
		right: 10%;
	}

	.grid-transition-square:nth-child(6) {
		bottom: 30%;
		left: 20%;
	}

	.grid-transition-square:nth-child(7) {
		top: 45%;
		left: 35%;
	}

	.grid-transition-square:nth-child(8) {
		bottom: 15%;
		left: 8%;
	}
}

/* Claude accessibility slop */
@media (prefers-reduced-motion: reduce) {
    .grid-transition-overlay {
        transition: opacity 0.2s ease !important;
    }
    
    .cv-hp-hero > div,
    .cv-hp-hero > div > a {
        transition: none !important;
    }
    
    .grid-transition-square {
        transition: opacity 0.2s ease !important;
    }
}