/*
 Theme Name:   Royalestate Child
 Description:  A custom theme for Royal Estate Auctions using the Spectra One FSE theme.
 Author:       Ryan
 Template:     spectra-one
 Version:      1.0.1
*/


/* Custom CSS goes below this line */

.myuheader.is-menu-open {
}

.wp-block-navigation__responsive-container.is-menu-open {
    /* 1. Ensure it covers the whole browser window */
    height: 100vh !important;
    width: 100vw !important;

    /* 2. Position it fixed */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important; /* Fixed typo from 'buttom' */

    /* 3. Ensure it is visible above other content */
    z-index: 970;
    background-image: linear-gradient(160deg, #26282b 40%, #585858 100%);
}

.glass {
    border: 3px solid hsla(0, 0%, 100%, 0.3) !important; /* Fixed hsla syntax */
    background: hsla(0, 0%, 100%, 0.1) !important;
    backdrop-filter: blur(2px) !important;
}

.myheader {
    background: #0000009c !important;
    backdrop-filter: blur(5px) !important;
    width: 100% !important;
}

.relative-parent {
    position: relative;
}

.absolute-child {
    position: absolute;
    top: 0; 
}

/* Animations */
.fade-out-up1{animation:fadeOutUpDramatic .8s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-up2{animation:fadeOutUpDramatic 1s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-up3{animation:fadeOutUpDramatic 1.2s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-up4{animation:fadeOutUpDramatic 1.4s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-up5{animation:fadeOutUpDramatic 1.6s cubic-bezier(.55,0,.9,.25) 1s forwards}

@keyframes fadeOutUpDramatic {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-50%); visibility: hidden; pointer-events: none; }
}

.fade-out-down1{animation:fadeOutDownDramatic .8s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-down2{animation:fadeOutDownDramatic 1s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-down3{animation:fadeOutDownDramatic 1.2s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-down4{animation:fadeOutDownDramatic 1.4s cubic-bezier(.55,0,.9,.25) 1s forwards}
.fade-out-down5{animation:fadeOutDownDramatic 1.6s cubic-bezier(.55,0,.9,.25) 1s forwards}

@keyframes fadeOutDownDramatic {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(50%); visibility: hidden; pointer-events: none; }
}

.curtain, .curtain * {
    pointer-events: none !important;
}

.flip-card {
    perspective: 1000px;
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s;
    transform-style: preserve-3d;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.flip-back {
    transform: rotateY(180deg);
}

.counter-box {
    transform: translateY(64px);
}