body {
    font-family: 'Manrope', sans-serif;
}

h1,
h2,
h3,
h4,
.font-serif {
    font-family: 'Noto Serif', serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-header {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.asymmetric-frame {
    border-top-right-radius: 4rem;
    border-bottom-left-radius: 4rem;
}

.asymmetric-frame-alt {
    border-top-left-radius: 4rem;
    border-bottom-right-radius: 4rem;
}

.asymmetric-frame-about {
    border-radius: 0.25rem 4rem 0.25rem 0.25rem;
}

.text-shadow-subtle {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reveal {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(40px);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

.luxury-zoom-container {
    overflow: hidden;
}

.luxury-zoom-image {
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.luxury-zoom-container:hover .luxury-zoom-image {
    transform: scale(1.08);
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-reveal {
    animation: fade-in-up 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}