/*
Theme Name: Arete
Author: YourAlex
Author URI: 
Theme URI: 
Tags: full-site-editing, block-patterns
Text Domain: arete
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 100.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Generic Styles */
/* 1. The Main Header Container */
.arete-header {
    position: fixed !important; /* Locks it to the screen */
    top: 0;
    left: 0;
	width: 100%;
    z-index: 999; /* Ensures it stays on top of your page content */
}

/* 2. The Fake Background Layer (The Glass) */
.arete-header::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts the glass effect behind your logo and menu */
    pointer-events: none; /* Ensures you can still click your menu items */

    /* Your glassmorphism styles go perfectly here: */
    background-color: color-mix(in srgb, var(--wp--preset--color--base, black) 60%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08); 
}


.arete-header.is-scrolled-header {
    /* Adds the shadow only when scrolling */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); 
    
    /* Smoothly fades the shadow in */
    transition: box-shadow 0.3s ease-in-out; 
}


/* Simple slide in animation */
/* 1. The Initial State (Hidden and pushed down 50px) */

.entryAnimationStyleComingUp {
    opacity: 0;
    transform: translateY(50px);
    
    /* This tells the browser to smoothly animate any changes */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    
    /* Optional: A slight performance boost for scroll animations */
    will-change: opacity, transform; 
}

/* 2. The Final State (Triggered when JS adds the attribute) */
.entryAnimationStyleComingUp[data-visible] {
    opacity: 1; /* Fades in */
    transform: translateY(0); /* Slides back to its original position */
}