/**
 * Create Hopes - Animations & Visual Polish Stylesheet
 */

/* 1. Header Scrolled Glass Effect */
header.header {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

header.header-scrolled {
    background: rgba(11, 12, 13, 0.88) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Light theme support for scrolled header on pages with white background */
body:not(.dark-theme):not(.black-theme) header.header-scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body:not(.dark-theme):not(.black-theme) header.header-scrolled .menu_links {
    color: #0B0C0D !important;
}

/* 2. Infinite Continuous Logo Marquee */
.createhopes-infinite-marquee,
.slide-track {
    display: flex !important;
    width: max-content !important;
    animation: createhopesMarquee 35s linear infinite !important;
    will-change: transform;
}

.createhopes-infinite-marquee:hover,
.slide-track:hover {
    animation-play-state: paused !important;
}

@keyframes createhopesMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* 3. Scroll Reveal Fade-Up */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-fade-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Tab Fade Transition */
@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 5. 3D Rolling Flip Button Hover Effect */
.header-module--buttonChange--18e23 {
    --height: 2.25rem;
    contain: layout style;
    display: inline-flex;
    flex-direction: column-reverse;
    line-height: calc(var(--height) - 2px) !important;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 0;
    cursor: pointer;
}

.header-module--buttonChange--18e23 span {
    contain: layout;
    display: block;
    position: relative;
    transform: translate3d(0, -10%, 0);
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.header-module--buttonChange--18e23:hover span {
    transform: translate3d(0, 90%, 0);
}

/* 6. Card Hover Elevations & Glow */
article, 
.client-card,
div[class*="rounded-2xl"]:not(button) {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

article:hover {
    transform: translateY(-3px);
}

/* 7. Accordion Transitions */
span[id^="faq-panel-"] {
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

button:has(span[id^="faq-panel-"]) svg {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}