/* ============================================================
   MAOLY CORTEZ – DIGITAL ATELIER
   Global Stylesheet
============================================================ */

html {
    scroll-behavior: smooth;
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar-track {
    background: #161718;
}

::-webkit-scrollbar-thumb {
    background: #CDBDB5;
}



/* ── HEADER SCROLL STATE ────────────────────────────────── */
.header-scrolled {
    background-color: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.05);
}

/* ── IMAGE ZOOM ─────────────────────────────────────────── */
.img-zoom-container {
    overflow: hidden;
}

.img-zoom {
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.img-zoom-container:hover .img-zoom {
    transform: scale(1.06);
}

/* ── MARQUEE ────────────────────────────────────────────── */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee 35s linear infinite;
    will-change: transform;
}

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

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

/* ── HERO ANIMATIONS ────────────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

.hero-script {
    animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero-headline {
    animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

/* ── SCROLL LINE INDICATOR ──────────────────────────────── */
@keyframes scrollPulse {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
    }

    40% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }

    60% {
        transform: scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: 0;
    }
}

.scroll-line {
    animation: scrollPulse 2.2s ease-in-out infinite;
}

/* ── FAQ TRANSITION ─────────────────────────────────────── */
.faq-answer {
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── TEMA CARDS STAGGER (REMOVED) ───────────────────────── */

/* ── BACK TO TOP ────────────────────────────────────────── */
#backToTop {
    transition: opacity 0.4s ease, visibility 0.4s ease, background 0.3s ease;
}

/* ── SELECTION ──────────────────────────────────────────── */
::selection {
    background: #3B3A38;
    color: #D8D5CF;
}