/* ============================================
   PJHRO Smooth Animations
   ============================================ */

/* --- Keyframes --- */
@keyframes pjhiro-fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes pjhiro-scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pjhiro-blur-in {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0); }
}

@keyframes pjhiro-count-up {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Base Animation Classes --- */
.pjhiro-animate {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}

.pjhiro-animate.pjhiro-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    filter: blur(0);
}

/* Animation Directions */
.pjhiro-animate.pjhiro-fade-up {
    transform: translateY(30px);
}
.pjhiro-animate.pjhiro-fade-up.pjhiro-visible {
    transform: translateY(0);
}

.pjhiro-animate.pjhiro-fade-down {
    transform: translateY(-30px);
}
.pjhiro-animate.pjhiro-fade-down.pjhiro-visible {
    transform: translateY(0);
}

.pjhiro-animate.pjhiro-fade-left {
    transform: translateX(-30px);
}
.pjhiro-animate.pjhiro-fade-left.pjhiro-visible {
    transform: translateX(0);
}

.pjhiro-animate.pjhiro-fade-right {
    transform: translateX(30px);
}
.pjhiro-animate.pjhiro-fade-right.pjhiro-visible {
    transform: translateX(0);
}

.pjhiro-animate.pjhiro-scale-in {
    transform: scale(0.9);
}
.pjhiro-animate.pjhiro-scale-in.pjhiro-visible {
    transform: scale(1);
}

.pjhiro-animate.pjhiro-blur-in {
    filter: blur(8px);
}
.pjhiro-animate.pjhiro-blur-in.pjhiro-visible {
    filter: blur(0);
}

/* --- Staggered Children --- */
.pjhiro-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.pjhiro-stagger.pjhiro-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(9) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); }
.pjhiro-stagger.pjhiro-visible > *:nth-child(10) { transition-delay: 0.9s; opacity: 1; transform: translateY(0); }

/* --- Card Hover Effects --- */
.pjhiro-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pjhiro-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* --- Image Hover Effects --- */
.pjhiro-img-hover {
    overflow: hidden;
}
.pjhiro-img-hover img {
    transition: transform 0.5s ease;
}
.pjhiro-img-hover:hover img {
    transform: scale(1.05);
}

/* --- Button Hover Effects --- */
.pjhiro-btn-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.pjhiro-btn-hover:hover {
    transform: translateY(-2px);
}
.pjhiro-btn-hover:active {
    transform: translateY(0);
}

/* --- Stat Counter Animation --- */
.pjhiro-stat-number {
    transition: transform 0.3s ease;
}
.pjhiro-stat-number:hover {
    transform: scale(1.1);
}

/* --- Icon Bounce on Hover --- */
.pjhiro-icon-bounce {
    transition: transform 0.3s ease;
}
.pjhiro-icon-bounce:hover {
    transform: scale(1.15);
}

/* --- Underline Grow Effect --- */
.pjhiro-underline {
    position: relative;
    display: inline-block;
}
.pjhiro-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #ff7a11;
    transition: width 0.3s ease;
}
.pjhiro-underline:hover::after {
    width: 100%;
}

/* --- FAQ Toggle Animation --- */
.pjhiro-faq-item .pjhiro-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}
.pjhiro-faq-item.active .pjhiro-faq-answer {
    max-height: 500px;
    opacity: 1;
}
.pjhiro-faq-item .pjhiro-faq-icon {
    transition: transform 0.3s ease;
}
.pjhiro-faq-item.active .pjhiro-faq-icon {
    transform: rotate(180deg);
}

/* --- Floating Animation --- */
@keyframes pjhiro-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.pjhiro-float {
    animation: pjhiro-float 3s ease-in-out infinite;
}

/* --- Pulse Animation --- */
@keyframes pjhiro-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.pjhiro-pulse-soft {
    animation: pjhiro-pulse-soft 2s ease-in-out infinite;
}

/* --- Gradient Shift --- */
@keyframes pjhiro-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pjhiro-gradient-animate {
    background-size: 200% 200%;
    animation: pjhiro-gradient-shift 4s ease infinite;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .pjhiro-animate,
    .pjhiro-stagger > *,
    .pjhiro-card-hover,
    .pjhiro-img-hover img,
    .pjhiro-btn-hover,
    .pjhiro-faq-item .pjhiro-faq-answer {
        transition: none !important;
        animation: none !important;
    }
    .pjhiro-animate {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}