/* ========================================
   HERO – PARALLAX HÁTTÉR
======================================== */

#hero {
    isolation: isolate;
}

#hero-parallax {
    position: absolute;
    inset: -35% 0;
    z-index: -2;

    background-image: url('../src/images/background1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: translate3d(0, 0, 0);
    will-change: transform;
}

#hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.30);
    pointer-events: none;
}


/* ========================================
   BEMUTATKOZÓ SZEKCIÓ
======================================== */

#intro-section {
    position: relative;
    overflow: hidden;
}

#intro-section .intro-reveal {
    opacity: 0;
    transform: translate3d(0, 38px, 0);
    filter: blur(15px);

    transition:
        opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1050ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, transform, filter;
}

#intro-section.is-visible .intro-reveal {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}


/* Animációs késleltetések */

#intro-section .intro-line-one {
    transition-delay: 100ms;
}

#intro-section .intro-line-two {
    transition-delay: 280ms;
}


/* Arany elválasztó */

#intro-section .intro-divider {
    width: 0;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: #c5a059;

    transition:
        width 1000ms cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 420ms;
}

#intro-section.is-visible .intro-divider {
    width: 72px;
}


/* Leírás */

#intro-section .intro-description {
    transition-delay: 520ms;
}


/* ========================================
   FOTÓK MEGJELENÉSE GÖRGETÉSKOR
======================================== */

.photo-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(.985);
    transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* ========================================
   MOZGÁSCSÖKKENTÉS
======================================== */

@media (prefers-reduced-motion: reduce) {

    #hero-parallax {
        will-change: auto;
    }

    #intro-section .intro-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .photo-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #intro-section .intro-divider {
        width: 72px;
        transition: none;
    }
}