/* Hide Alpine until ready */
[x-cloak] { 
    display: none !important; 
}

/* Global brand color */
:root { 
    --brand:#dd5201; 
}

/* Glass Navigation Bar */
.glass {
    background: rgb(255, 255, 255);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.20);
}

/* Active underline (desktop menu) */
.active-underline { 
    position:relative; 
}
.active-underline::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:3px;
    background:var(--brand);
    transition:.3s;
    border-radius:2px;
}
.active-underline:hover::after { 
    width:100%; 
}

/* Icon rotation for dropdowns */
.chev { 
    transition:.2s; 
}
.rotate { 
    transform:rotate(180deg); 
}

html, body { 
    overflow-x:hidden; 
}

/* ============================== */
/* HERO ANIMATIONS                */
/* ============================== */

/* Background zoom animation */
.hero-bg {
    animation: heroZoom 14s ease-out forwards;
    transform-origin: center;
}

@keyframes heroZoom {
    0% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Hero text fade-up */
@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-animate { 
    opacity: 0;
    animation: heroFadeUp 1s ease-out forwards; 
}
.hero-delay-1 { animation-delay: .2s; }
.hero-delay-2 { animation-delay: .45s; }

/* ============================== */
/* SCROLL FADE ANIMATION         */
/* ============================== */

/* Initial state */
.scroll-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: all .9s ease-out;
}

/* When visible */
.scroll-fade.show {
    opacity: 1;
    transform: translateY(0);
}

/* Glass Card Base */
.glass-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    transition: all .35s ease;
}

/* Hover Effect */
.glass-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

/* Optional: Animate icon on hover */
.glass-card:hover i {
    transform: scale(1.15);
    transition: transform .35s ease;
}