/* Alap állapot: minden animáció rejtve indul */
.fade-up, .fade-down,
.fade-left, .fade-right,
.zoom-in, .zoom-out,
.slide-up, .slide-down, .flip-up,
.flip-down, .flip-left, .flip-right,
.rotate-in, .rotate-out, .hinge,
.swing, .perspective-fade, .bounce-in,
.elastic-in, .blur-in, .compress,
.expand {
    opacity: 0;
    transition: all 0.8s ease-out;
}

/* ===== Fade Up ===== */
.fade-up {
    transform: translateY(20px);
}
.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Fade Down ===== */
.fade-down {
    transform: translateY(-20px);
}
.fade-down.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Fade Left ===== */
.fade-left {
    transform: translateX(20px);
}
.fade-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Fade Right ===== */
.fade-right {
    transform: translateX(-20px);
}
.fade-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Zoom In ===== */
.zoom-in {
    transform: scale(0.8);
}
.zoom-in.active {
    opacity: 1;
    transform: scale(1);
}

/* ===== Zoom Out ===== */
.zoom-out {
    transform: scale(1.2);
}
.zoom-out.active {
    opacity: 1;
    transform: scale(1);
}

/* ===== Slide Up ===== */
.slide-up {
    transform: translateY(40px);
}
.slide-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Slide Down ===== */
.slide-down {
    transform: translateY(-40px);
}
.slide-down.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FLIP ANIMÁCIÓK
   ========================================================= */

/* Flip Up (forgatás X tengely körül, alulról felfelé) */
.flip-up {
    opacity: 0;
    transform-origin: bottom;
    transform: rotateX(90deg);
    transition: all 0.8s ease-out;
}
.flip-up.active {
    opacity: 1;
    transform: rotateX(0deg);
}

/* Flip Down (forgatás X tengely körül, felülről lefelé) */
.flip-down {
    opacity: 0;
    transform-origin: top;
    transform: rotateX(-90deg);
    transition: all 0.8s ease-out;
}
.flip-down.active {
    opacity: 1;
    transform: rotateX(0deg);
}

/* Flip Left (forgatás Y tengely körül, jobbról balra) */
.flip-left {
    opacity: 0;
    transform-origin: right;
    transform: rotateY(90deg);
    transition: all 0.8s ease-out;
}
.flip-left.active {
    opacity: 1;
    transform: rotateY(0deg);
}

/* Flip Right (forgatás Y tengely körül, balról jobbra) */
.flip-right {
    opacity: 0;
    transform-origin: left;
    transform: rotateY(-90deg);
    transition: all 0.8s ease-out;
}
.flip-right.active {
    opacity: 1;
    transform: rotateY(0deg);
}
.rotate-in {
    opacity: 0;
    transform: rotate(-45deg) scale(0.8);
    transform-origin: center;
    transition: all 0.8s ease-out;
}
.rotate-in.active {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.rotate-out {
    opacity: 0;
    transform: rotate(45deg) scale(0.8);
    transform-origin: center;
    transition: all 0.8s ease-out;
}
.rotate-out.active {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.hinge {
    opacity: 0;
    transform-origin: top left;
    transform: rotate(80deg);
    transition: all 0.9s cubic-bezier(.18,.89,.32,1.28);
}
.hinge.active {
    opacity: 1;
    transform: rotate(0deg);
}
@keyframes w3-swing {
    0% { transform: rotate(15deg); }
    50% { transform: rotate(-10deg); }
    70% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

.swing {
    opacity: 0;
    transform-origin: top center;
    transform: rotate(15deg);
    transition: opacity 0.4s ease-out;
}
.swing.active {
    opacity: 1;
    animation: w3-swing 0.8s ease-out forwards;
}
.perspective-fade {
    opacity: 0;
    transform: perspective(800px) translateZ(-200px);
    transition: all 0.9s ease-out;
}
.perspective-fade.active {
    opacity: 1;
    transform: perspective(800px) translateZ(0);
}
@keyframes w3-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.bounce-in {
    opacity: 0;
    transform: scale(0.5);
}

.bounce-in.active {
    animation: w3-bounce-in 0.8s ease-out forwards;
}

@keyframes w3-elastic-in {
    0% { transform: scale(0.1); opacity: 0; }
    60% { transform: scale(1.2); }
    80% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.elastic-in {
    opacity: 0;
    transform: scale(0.1);
}
.elastic-in.active {
    animation: w3-elastic-in 1s ease-out forwards;
}
.blur-in {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}
.blur-in.active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
.compress {
    opacity: 0;
    transform: scaleY(0.3);
    transform-origin: center top;
    transition: all 0.7s ease-out;
}
.compress.active {
    opacity: 1;
    transform: scaleY(1);
}
.expand {
    opacity: 0;
    transform: scaleX(0.3);
    transform-origin: left center;
    transition: all 0.7s ease-out;
}
.expand.active {
    opacity: 1;
    transform: scaleX(1);
}


/* ===== DELAY ANIMÁCIÓK ===== */
.delay-100 { 
    transition-delay: .1s;
    animation-delay: .1s;
}

.delay-200 { 
    transition-delay: .2s;
    animation-delay: .2s;
}

.delay-300 { 
    transition-delay: .3s;
    animation-delay: .3s;
}

.delay-500 { 
    transition-delay: .5s;
    animation-delay: .5s;
}

.delay-700 { 
    transition-delay: .7s;
    animation-delay: .7s;
}

.delay-1000 { 
    transition-delay: 1s;
    animation-delay: 1s;
}


/* ===== SPEED ANIMÁCIÓK ===== */
.speed-slow { transition-duration: 1.5s !important; }
.speed-normal { transition-duration: 0.8s !important; }
.speed-fast { transition-duration: 0.4s !important; }

/* ===== MOUSEMOVE 3D TILT ===== */
.mouse-tilt {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
}

/* ===== STRONG 3D TILT ===== */
.tilt-strong {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

/* ===== EXTREME 3D TILT ===== */
.tilt-extreme {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* ===== PARALLAX TILT + ZOOM ===== */
.tilt-parallax {
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out;
}

/* ============================
   MOUSE ZOOM EFFECT
=============================== */
.mouse-zoom {
    transition: transform 0.2s ease-out;
    will-change: transform;
}

/* ============================
   MOUSE PULSE EFFECT
=============================== */
.mouse-pulse {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

@keyframes w3pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); }
    65%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

.mouse-pulse.pulsing {
    animation: w3pulse 0.35s ease-out;
}


/* Alap underline animáció: balról jobbra */
.animate-underline {
    position: relative;
    display: inline-block;      /* fontos, hogy a szöveg szélességére szűküljön */
}

.animate-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;                  /* ha túl közel van a szöveghez, nyugodtan tedd -2px-re */
    width: 100%;
    height: 2px;
    background: currentColor;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

.animate-underline.active::after {
    transform: scaleX(1);
}

/* Középről két irányba nyíló underline */
.animate-underline-center {
    position: relative;
    display: inline-block;
}

.animate-underline-center::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;

    /* MUST HAVE: translateX + scaleX együtt! */
    transform: translateX(-50%) scaleX(0);

    transform-origin: center center;
    transition: transform 0.45s ease-out;
}

.animate-underline-center.active::after {
    transform: translateX(-50%) scaleX(1);
}


/* Jobbról balra futó underline */
.animate-underline-reverse {
    position: relative;
    display: inline-block;
}

.animate-underline-reverse::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

.animate-underline-reverse.active::after {
    transform: scaleX(1);
}

/* ======================
   LOOP PULSE EFFECT
======================= */
.w3-pulse-loop {
    animation: w3pulseLoop 1.8s ease-in-out infinite;
}

@keyframes w3pulseLoop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ======================
   BREATHING EFFECT
======================= */
.w3-breathe {
    animation: w3breathe 2.8s ease-in-out infinite;
}

@keyframes w3breathe {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.08); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}