/**
 * pm-effects — Frontend stílusok
 *
 * Tartalmazza az összes animáció, effekt és láthatóság kapcsoló CSS-t.
 * Betöltve: wp_enqueue_scripts (frontend) + editor — register.php kezeli.
 */

/* ========================= ANIMÁCIÓ CLIP FIX ======================== */

/* Az animate.css slideInLeft/Right a saját szélességére számítja a translateX-t
 * (-100% = elem szélessége px-ben). Így egy középre igazított 900px széles blokk
 * 250px-rel még a viewport-on BELÜL van a kezdőpozícióban → látható flash.
 *
 * Megoldás:
 *   1. A keyframe-eket felülírjuk viewport-arányos értékre (-150vw / 150vw),
 *      ami garantáltan kiviszi az elemet a viewport határain túlra.
 *   2. html { overflow-x: clip } megakadályozza a vízszintes görgetősávot.
 *      (position:fixed elemeket – pl. #nav-mobile – nem érinti.) */

html { overflow-x: clip; }

@keyframes slideInLeft {
    from { transform: translateX(-150vw); visibility: visible; }
    to   { transform: translateX(0); }
}
@keyframes slideInRight {
    from { transform: translateX(150vw); visibility: visible; }
    to   { transform: translateX(0); }
}

/* ========================= BELÉPŐ ANIMÁCIÓ ======================== */

/* Az .animated osztályú elemek rejtve vannak amíg a viewport-ba nem kerülnek
 * (FOUC-megelőzés: a JS scroll-trigger lefutásáig ne látszódjanak).
 * A frontend.js adja hozzá a .do-animation osztályt, ami elindítja az animációt. */
body .animated {
    animation-name: none;
    opacity: 0;
}
body .do-animation {
    animation-duration:        var(--animate-duration, 1s);
    animation-delay:           var(--animate-delay, 0s);
    animation-iteration-count: var(--animate-repeat, 1);
    animation-fill-mode:       both;
    opacity:                   1;
}

/* ========================= EGYEDI EFFEKTEK ======================== */

/* ---- Gépelő effekt ---- */
body .animated.typing-effect {
    opacity: 0; /* rejtve amíg a JS scroll-trigger nem fut */
}
body .typing-effect.do-animation {
    opacity: 1;
}

/* ---- Ragyogó szöveg ---- */
body .shining-text {
    position: relative;
    animation: pm-shine 5s infinite;
}
@keyframes pm-shine {
    0%   { text-shadow: 0 0 5px rgba(255,255,255,.1), 0 0 10px rgba(255,255,255,.1), 0 0 15px rgba(255,255,255,.1), 0 0 20px rgba(255,255,255,.1); }
    50%  { text-shadow: 0 0 10px rgba(255,255,255,.4), 0 0 20px rgba(255,255,255,.4), 0 0 30px rgba(255,255,255,.4), 0 0 40px rgba(255,255,255,.4); }
    100% { text-shadow: 0 0 5px rgba(255,255,255,.1), 0 0 10px rgba(255,255,255,.1), 0 0 15px rgba(255,255,255,.1), 0 0 20px rgba(255,255,255,.1); }
}

/* ---- Op Move Up ---- */
body .op-move-up:not(.do-animation) {
    opacity: 0;
}
body .op-move-up.do-animation {
    animation-name: opMoveUp100;
}
@keyframes opMoveUp100 {
    0%   { transform: translateY(100px); }
    100% { transform: translateY(0); }
}

/* ========================= HOVER EFFEKTEK ========================= */

/* Grow */
body .hover__scaleUp               { transition: transform 0.3s ease-in-out; }
body .hover__scaleUp:hover         { transform: scale(1.06); }

/* Shrink */
body .hover__scaleDown             { transition: transform 0.3s ease-in-out; }
body .hover__scaleDown:hover       { transform: scale(0.94); }

/* Float */
body .hover__float                 { transition: transform 0.3s ease-in-out; }
body .hover__float:hover           { animation: pm-hover-float 1.6s ease-in-out infinite; }
@keyframes pm-hover-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Sink */
body .hover__sink                  { transition: transform 0.3s ease-in-out; }
body .hover__sink:hover            { transform: translateY(5px); }

/* Pulse */
body .hover__pulse:hover           { animation: pm-hover-pulse 0.8s ease-in-out infinite; }
@keyframes pm-hover-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Shadow */
body .hover__shadow                { transition: transform 0.3s ease, box-shadow 0.3s ease; }
body .hover__shadow:hover          { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }

/* Rotate */
body .hover__rotate                { transition: transform 0.35s ease-in-out; }
body .hover__rotate:hover          { transform: rotate(4deg); }

/* Skew */
body .hover__skew                  { transition: transform 0.3s ease-in-out; }
body .hover__skew:hover            { transform: skewX(-8deg); }

/* Wobble */
body .hover__wobble:hover          { animation: pm-hover-wobble 0.7s ease-in-out; }
@keyframes pm-hover-wobble {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-8px); }
    30%      { transform: translateX(7px); }
    45%      { transform: translateX(-5px); }
    60%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
}

/* Buzz */
body .hover__buzz:hover            { animation: pm-hover-buzz 0.12s linear infinite; }
@keyframes pm-hover-buzz {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2px, 1px); }
    50%  { transform: translate(2px, -1px); }
    75%  { transform: translate(-1px, 2px); }
    100% { transform: translate(1px, -1px); }
}

/* ========================= LÁTHATÓSÁG ========================== */

@media screen and (min-width: 999px) {
    body .desktop-hidden {
        display: none !important;
        visibility: hidden !important;
    }
}
@media screen and (max-width: 998px) {
    body .mobile-hidden {
        display: none !important;
        visibility: hidden !important;
    }
}