/* style.css */

/* 1. Major Section Reveal (The Card/Block itself) */
.reveal-element {
    opacity: 0;
    transform: translateY(32px);
    transition: all 1s ease-out;
}

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

/* 2. Staggered Items (The list items inside the cards) */
/* These start hidden and small, then pop in */
.stagger-item {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Snappier pop */
}

.stagger-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Manual Delays (for big cards) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* 4. Logo Styling */
nav img {
    /* max-width: 400px; */
    height: auto;
    transition: opacity 0.3s ease;
}

nav img:hover {
    opacity: 0.8;
}

/* 5. Hamburger Menu Styles */
#hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

#hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-menu-overlay {
    top: 73px; /* Adjust based on nav height */
    height: calc(100vh - 73px);
    bottom: 0;
}

.mobile-menu-overlay.open {
    transform: translateX(0);
}

.mobile-menu-link {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s ease;
}

.mobile-menu-overlay.open .mobile-menu-link {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu-overlay.open .mobile-menu-link:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu-overlay.open .mobile-menu-link:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-menu-overlay.open .mobile-menu-link:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-menu-overlay.open .mobile-menu-link:nth-child(4) {
    transition-delay: 0.25s;
}

/* 6. Hero Carousel Styles */
.hero-carousel-section {
    position: relative;
    min-height: 500px;
}

@media (max-width: 768px) {
    .hero-carousel-section {
        min-height: 400px;
    }
}

.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    will-change: opacity;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.3) 0%,
        rgba(15, 23, 42, 0.5) 50%,
        rgba(15, 23, 42, 0.6) 100%
    );
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.4) 0%,
        rgba(15, 23, 42, 0.55) 50%,
        rgba(15, 23, 42, 0.65) 100%
    );
    backdrop-filter: blur(0.5px);
}

/* Carousel Dots */
.carousel-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 0.75rem;
}

.carousel-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.carousel-dot.active {
    background-color: rgba(255, 255, 255, 0.95);
    width: 2rem;
    border-radius: 0.5rem;
}