/*
 * TEREM – Animációk
 * Dekoratív animációk és @keyframes.
 * A11y toggle kikapcsolja ezt az egész fájlt (stylesheet.disabled = true).
 * Hover transition-ök a style.css-ben vannak – azokat NEM érinti.
 */


/* ============================================
   1. HERO – belépő animációk
   ============================================ */
@keyframes heroEmerge {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title       { animation: heroEmerge 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s both; }
.hero-description { animation: heroEmerge 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.9s both; }
.hero-section .wp-block-buttons { animation: heroEmerge 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) 1.4s both; }

/* Scroll indicator */
.scroll-indicator { animation: heroFadeIn 0.9s ease 1.2s both; }


@keyframes heroBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    60% { transform: translateY(-3px); }
}

.scroll-indicator svg {
    animation: heroBounce 2s infinite;
}


/* ============================================
   SCROLL REVEAL
   ============================================ */

.reveal {
    opacity: 0;
    transform: translateY(30px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease, transform 1.2s ease;
}



/* ============================================
   2. KÁRTYA – dekoratív hover emelkedés
   ============================================ */

.card-animation {
    transition: transform 0.3s, box-shadow 0.3s;
}

.card-animation:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--lg);
}


/* ============================================
   3. NAV – sárga aláhúzás (balról jobbra)
   ============================================ */

.site-header .wp-block-navigation-item > a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--wp--preset--color--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.site-header .wp-block-navigation-item > a:hover::after {
    transform: scaleX(1);
}

@media (max-width: 781px) {
    .site-header .wp-block-navigation-item > a::after {
        display: none;
    }
}


/* ============================================
   Következő szekciók ide kerülnek majd:
   4. SZÓJÁTÉK – flip kártyák
   5. TESTIMONIALS – slider
   6. INDULÓ KÉPZÉSEK – marquee
   stb.
   ============================================ */