/* ========================================
   HARMAT SZAUNA – RÓLAM OLDAL
======================================== */


/* ========================================
   GÖRGETÉSI ANIMÁCIÓK
======================================== */

.about-reveal {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    filter: blur(4px);

    transition:
        opacity 900ms cubic-bezier(.22, 1, .36, 1),
        transform 1000ms cubic-bezier(.22, 1, .36, 1),
        filter 900ms cubic-bezier(.22, 1, .36, 1);
}

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

.about-delay-1 {
    transition-delay: 100ms;
}

.about-delay-2 {
    transition-delay: 220ms;
}

.about-delay-3 {
    transition-delay: 340ms;
}

.about-delay-4 {
    transition-delay: 460ms;
}


/* ========================================
   PORTRÉ ÉS KÉPEK
======================================== */

.about-photo {
    overflow: hidden;
}

.about-photo img {
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.about-photo:hover img {
    transform: scale(1.045);
}


/* ========================================
   ALAPELV KÁRTYÁK
======================================== */

.about-card {
    transition:
        transform 600ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 600ms ease;
}

.about-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 55px rgba(44, 24, 16, .15);
}

.about-card img {
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.about-card:hover img {
    transform: scale(1.055);
}


/* ========================================
   ARANY VONAL
======================================== */

.gold-line {
    width: 0;
    height: 1px;
    background: #c5a059;
    transition: width 1s cubic-bezier(.22, 1, .36, 1);
}

.gold-line.is-visible {
    width: 55px;
}


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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .about-reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .gold-line {
        width: 55px;
    }
}