/* ==========================================================================
   PusztaPlay Theme - Animációk
   ========================================================================== */

/* ==========================================================================
   Alap animációk
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ==========================================================================
   Pulse animációk
   ========================================================================== */

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

@keyframes pulseGrow {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes pulseShrink {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
}

/* ==========================================================================
   Bounce animációk
   ========================================================================== */

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   Rotate animációk
   ========================================================================== */

@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        transform-origin: center;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1;
    }
}

/* ==========================================================================
   Flip animációk
   ========================================================================== */

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        transform: perspective(400px);
    }
}

/* ==========================================================================
   Zoom animációk
   ========================================================================== */

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

/* ==========================================================================
   Special effects
   ========================================================================== */

@keyframes lightSpeedIn {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        transform: scale(0.1) rotate(30deg);
        transform-origin: center bottom;
    }
    50% {
        transform: rotate(-10deg);
    }
    70% {
        transform: rotate(3deg);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Loading animációk
   ========================================================================== */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinPulse {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loadingBar {
    0% {
        width: 0;
    }
    50% {
        width: 70%;
    }
    100% {
        width: 100%;
    }
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ==========================================================================
   CSS animáció osztályok
   ========================================================================== */

/* Fade animációk */
.pp-animate-fadeIn {
    animation: fadeIn 0.6s ease forwards;
}

.pp-animate-fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}

.pp-animate-fadeInDown {
    animation: fadeInDown 0.6s ease forwards;
}

.pp-animate-fadeInLeft {
    animation: fadeInLeft 0.6s ease forwards;
}

.pp-animate-fadeInRight {
    animation: fadeInRight 0.6s ease forwards;
}

/* Slide animációk */
.pp-animate-slideInUp {
    animation: slideInUp 0.6s ease forwards;
}

.pp-animate-slideInDown {
    animation: slideInDown 0.6s ease forwards;
}

.pp-animate-slideInLeft {
    animation: slideInLeft 0.6s ease forwards;
}

.pp-animate-slideInRight {
    animation: slideInRight 0.6s ease forwards;
}

/* Pulse animációk */
.pp-animate-pulse {
    animation: pulse 2s infinite;
}

.pp-animate-pulse-grow {
    animation: pulseGrow 2s infinite;
}

.pp-animate-pulse-shrink {
    animation: pulseShrink 2s infinite;
}

/* Bounce animációk */
.pp-animate-bounce {
    animation: bounce 1s infinite;
}

.pp-animate-bounceIn {
    animation: bounceIn 0.75s forwards;
}

/* Rotate animációk */
.pp-animate-rotateIn {
    animation: rotateIn 0.75s forwards;
}

/* Flip animációk */
.pp-animate-flipInX {
    animation: flipInX 0.75s forwards;
}

.pp-animate-flipInY {
    animation: flipInY 0.75s forwards;
}

/* Zoom animációk */
.pp-animate-zoomIn {
    animation: zoomIn 0.75s forwards;
}

.pp-animate-zoomInUp {
    animation: zoomInUp 0.75s forwards;
}

/* Special effects */
.pp-animate-lightSpeedIn {
    animation: lightSpeedIn 0.75s forwards;
}

.pp-animate-jackInTheBox {
    animation: jackInTheBox 0.75s forwards;
}

.pp-animate-rollIn {
    animation: rollIn 0.75s forwards;
}

/* Loading animációk */
.pp-animate-spin {
    animation: spin 1s linear infinite;
}

.pp-animate-spinPulse {
    animation: spinPulse 1s ease-in-out infinite;
}

/* ==========================================================================
   Késleltetett animációk
   ========================================================================== */

.pp-delay-1 { animation-delay: 0.1s; }
.pp-delay-2 { animation-delay: 0.2s; }
.pp-delay-3 { animation-delay: 0.3s; }
.pp-delay-4 { animation-delay: 0.4s; }
.pp-delay-5 { animation-delay: 0.5s; }
.pp-delay-6 { animation-delay: 0.6s; }
.pp-delay-7 { animation-delay: 0.7s; }
.pp-delay-8 { animation-delay: 0.8s; }
.pp-delay-9 { animation-delay: 0.9s; }
.pp-delay-10 { animation-delay: 1.0s; }

/* ==========================================================================
   Hover animációk
   ========================================================================== */

/* Hover effektek */
.pp-hover-grow {
    transition: transform 0.3s ease;
}

.pp-hover-grow:hover {
    transform: scale(1.1);
}

.pp-hover-shrink {
    transition: transform 0.3s ease;
}

.pp-hover-shrink:hover {
    transform: scale(0.9);
}

.pp-hover-pulse {
    transition: transform 0.3s ease;
}

.pp-hover-pulse:hover {
    animation: pulse 1s infinite;
}

.pp-hover-bounce {
    transition: transform 0.3s ease;
}

.pp-hover-bounce:hover {
    animation: bounce 1s infinite;
}

.pp-hover-rotate {
    transition: transform 0.3s ease;
}

.pp-hover-rotate:hover {
    transform: rotate(15deg);
}

.pp-hover-skew {
    transition: transform 0.3s ease;
}

.pp-hover-skew:hover {
    transform: skew(-10deg);
}

/* Shadow hover effektek */
.pp-hover-shadow {
    transition: box-shadow 0.3s ease;
}

.pp-hover-shadow:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pp-hover-shadow-cyan {
    transition: box-shadow 0.3s ease;
}

.pp-hover-shadow-cyan:hover {
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.pp-hover-shadow-gold {
    transition: box-shadow 0.3s ease;
}

.pp-hover-shadow-gold:hover {
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

/* ==========================================================================
   Scroll animációk (JavaScript szükséges)
   ========================================================================== */

/* Scroll-triggered animációk */
.pp-scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.pp-scroll-animate.pp-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animációk */
.pp-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.pp-stagger.pp-visible > *:nth-child(1) { transition-delay: 0.1s; }
.pp-stagger.pp-visible > *:nth-child(2) { transition-delay: 0.2s; }
.pp-stagger.pp-visible > *:nth-child(3) { transition-delay: 0.3s; }
.pp-stagger.pp-visible > *:nth-child(4) { transition-delay: 0.4s; }
.pp-stagger.pp-visible > *:nth-child(5) { transition-delay: 0.5s; }
.pp-stagger.pp-visible > *:nth-child(6) { transition-delay: 0.6s; }

.pp-stagger.pp-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   CSS Transition osztályok
   ========================================================================== */

.pp-transition {
    transition: all 0.3s ease;
}

.pp-transition-fast {
    transition: all 0.15s ease;
}

.pp-transition-slow {
    transition: all 0.5s ease;
}

.pp-transition-transform {
    transition: transform 0.3s ease;
}

.pp-transition-opacity {
    transition: opacity 0.3s ease;
}

.pp-transition-color {
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* ==========================================================================
   Animáció preferenciák
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .pp-animate-fadeIn,
    .pp-animate-fadeInUp,
    .pp-animate-fadeInDown,
    .pp-animate-fadeInLeft,
    .pp-animate-fadeInRight,
    .pp-animate-slideInUp,
    .pp-animate-slideInDown,
    .pp-animate-slideInLeft,
    .pp-animate-slideInRight,
    .pp-animate-pulse,
    .pp-animate-pulse-grow,
    .pp-animate-pulse-shrink,
    .pp-animate-bounce,
    .pp-animate-bounceIn,
    .pp-animate-rotateIn,
    .pp-animate-flipInX,
    .pp-animate-flipInY,
    .pp-animate-zoomIn,
    .pp-animate-zoomInUp,
    .pp-animate-lightSpeedIn,
    .pp-animate-jackInTheBox,
    .pp-animate-rollIn,
    .pp-animate-spin,
    .pp-animate-spinPulse {
        animation: none !important;
    }
    
    .pp-scroll-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .pp-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .pp-hover-grow,
    .pp-hover-shrink,
    .pp-hover-pulse,
    .pp-hover-bounce,
    .pp-hover-rotate,
    .pp-hover-skew,
    .pp-hover-shadow,
    .pp-hover-shadow-cyan,
    .pp-hover-shadow-gold {
        transition: none;
    }
}