/* ============================================
   KARVY ICE MANUFACTURING - ANIMATIONS CSS
   animations.css
   ============================================ */

/* ============================================
   1. KEYFRAME DEFINITIONS
   ============================================ */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scale In Up (for cards) */
@keyframes scaleInUp {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Slide In Left */
@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* Slide In Right */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Pulse */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.04); }
}

/* Bounce */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

/* Shimmer / Skeleton */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Count Up Highlight */
@keyframes countPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); color: var(--color-accent); }
    100% { transform: scale(1); }
}

/* Ripple */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Draw Line (for horizontal rules / underlines) */
@keyframes drawLine {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

/* Blink Cursor */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Glow Pulse (for CTA buttons) */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(10,122,183,0.3);
    }
    50% {
        box-shadow: 0 4px 24px rgba(10,122,183,0.55);
    }
}

/* Check Mark Draw */
@keyframes checkDraw {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* ============================================
   2. SCROLL-TRIGGERED ANIMATION BASE CLASSES
   These are set to invisible by default.
   JavaScript (main.js) adds .animated
   class when element enters viewport.
   ============================================ */

.anim-fade-in,
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-scale-in,
.anim-scale-up {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-fade-in     { transform: none; }
.anim-fade-up     { transform: translateY(30px); }
.anim-fade-down   { transform: translateY(-20px); }
.anim-fade-left   { transform: translateX(-30px); }
.anim-fade-right  { transform: translateX(30px); }
.anim-scale-in    { transform: scale(0.92); }
.anim-scale-up    { transform: scale(0.95) translateY(20px); }

/* Animated state — added by IntersectionObserver */
.anim-fade-in.animated,
.anim-fade-up.animated,
.anim-fade-down.animated,
.anim-fade-left.animated,
.anim-fade-right.animated,
.anim-scale-in.animated,
.anim-scale-up.animated {
    opacity: 1;
    transform: none;
}

/* Staggered delay utilities */
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }
.anim-delay-5 { transition-delay: 0.5s; }
.anim-delay-6 { transition-delay: 0.6s; }
.anim-delay-7 { transition-delay: 0.7s; }
.anim-delay-8 { transition-delay: 0.8s; }

/* ============================================
   3. HERO SECTION ENTRANCE ANIMATIONS
   ============================================ */
.hero-content .hero-title {
    animation: fadeInUp 0.8s ease both;
    animation-delay: 0.2s;
}

.hero-content .hero-subtitle {
    animation: fadeInUp 0.8s ease both;
    animation-delay: 0.4s;
}

.hero-content .hero-cta {
    animation: fadeInUp 0.8s ease both;
    animation-delay: 0.55s;
}

.hero-content .hero-stats {
    animation: fadeInUp 0.8s ease both;
    animation-delay: 0.7s;
}

/* Page Hero entrance */
.page-hero-content h1 {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.1s;
}

.page-hero-content p {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.25s;
}

.page-hero-content .breadcrumb {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.35s;
}

/* ============================================
   4. HEADER SCROLL ANIMATION
   ============================================ */
.header {
    animation: fadeInDown 0.5s ease both;
}

/* ============================================
   5. CARD HOVER MICRO-ANIMATIONS
   ============================================ */

/* Product card image zoom already in style.css via transition */

/* Industry card icon bounce on hover */
.industry-card:hover .industry-icon {
    animation: bounce 0.6s ease;
}

/* Download card icon pulse on hover */
.download-card:hover .download-card-icon svg {
    animation: pulse 0.5s ease;
}

/* Feature box icon float on hover */
.feature-box:hover .feature-icon {
    animation: float 1.2s ease infinite;
}

/* ============================================
   6. BUTTON ANIMATIONS
   ============================================ */

/* Primary button glow on hover */
.btn-primary:hover {
    animation: glowPulse 1.5s ease infinite;
}

/* Button ripple effect */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.btn:active::after {
    width: 200px;
    height: 200px;
    opacity: 0;
}

/* ============================================
   7. NAVIGATION ANIMATIONS
   ============================================ */

/* Mobile nav slide in */
.nav-menu.open {
    animation: fadeInDown 0.3s ease both;
}

/* Nav link underline slide */
.nav-menu a {
    position: relative;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 12px;
    right: 12px;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
    border-radius: var(--radius-full);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    transform: scaleX(1);
}

/* ============================================
   8. FAQ ACCORDION ANIMATIONS
   ============================================ */

/* Icon rotate handled in style.css via transform */

/* Answer panel smooth height — driven by JS maxHeight */
.faq-answer {
    transition:
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.3s ease,
        padding-bottom 0.3s ease,
        border-top-color 0.2s ease;
}

/* Question text colour transition */
.faq-question {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Opened item border glow */
.faq-item.open {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ============================================
   9. FORM ANIMATIONS
   ============================================ */

/* Input focus glow transition — drives from style.css */
.form-group input,
.form-group textarea,
.form-group select {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

/* Success message entrance */
.form-success[style*="flex"] {
    animation: scaleIn 0.4s ease both;
}

/* Error message entrance */
.form-error[style*="flex"] {
    animation: fadeInDown 0.35s ease both;
}

/* Field error slide in */
.field-error {
    animation: fadeInDown 0.25s ease both;
}

/* Spinner (already defined in style.css — driven here for clarity) */
.spinner {
    animation: spin 0.9s linear infinite;
}

/* ============================================
   10. SCROLL-TO-TOP BUTTON
   ============================================ */
.scroll-top {
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background-color 0.2s ease;
}

/* ============================================
   11. STAT COUNTER ANIMATION
   ============================================ */

/* When stat numbers are counted up by JS */
.stat-number.counting {
    animation: countPop 0.4s ease;
}

/* ============================================
   12. PAGE TRANSITION (optional)
   ============================================ */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-primary);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition-overlay.active {
    opacity: 1;
}

/* ============================================
   13. THANK YOU PAGE CHECK ICON
   ============================================ */
.thank-you-icon {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.2s;
}

.thank-you-content h1 {
    animation: fadeInUp 0.6s ease both;
    animation-delay: 0.4s;
}

.thank-you-subtitle {
    animation: fadeInUp 0.6s ease both;
    animation-delay: 0.5s;
}

.thank-you-note {
    animation: fadeInUp 0.6s ease both;
    animation-delay: 0.6s;
}

.next-steps {
    animation: fadeInUp 0.6s ease both;
    animation-delay: 0.7s;
}
/* ============================================
   14. SKELETON LOADERS
   Used while content/images are loading
   ============================================ */
   .skeleton {
    background: linear-gradient(
        90deg,
        var(--color-light) 25%,
        var(--color-light-border) 50%,
        var(--color-light) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.full { width: 100%; }

.skeleton-heading {
    height: 28px;
    width: 55%;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-lg);
}

.skeleton-btn {
    height: 44px;
    width: 140px;
    border-radius: var(--radius-md);
}

/* ============================================
   15. IMAGE LAZY LOAD FADE IN
   ============================================ */
img.lazy {
    opacity: 0;
    transition: opacity 0.5s ease;
}

img.lazy.loaded {
    opacity: 1;
}

/* ============================================
   16. SECTION ENTRANCE HELPERS
   Applied to sections in HTML via class names
   ============================================ */

/* Section header animated entrance */
.section-header.anim-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.section-header.anim-fade-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Card grid children stagger */
.products-grid .product-card,
.industries-grid .industry-card,
.features-grid .feature-box,
.downloads-grid .download-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.products-grid.animated .product-card,
.industries-grid.animated .industry-card,
.features-grid.animated .feature-box,
.downloads-grid.animated .download-card {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children with nth-child delays */
.products-grid.animated .product-card:nth-child(1),
.industries-grid.animated .industry-card:nth-child(1),
.features-grid.animated .feature-box:nth-child(1),
.downloads-grid.animated .download-card:nth-child(1) { transition-delay: 0s; }

.products-grid.animated .product-card:nth-child(2),
.industries-grid.animated .industry-card:nth-child(2),
.features-grid.animated .feature-box:nth-child(2),
.downloads-grid.animated .download-card:nth-child(2) { transition-delay: 0.1s; }

.products-grid.animated .product-card:nth-child(3),
.industries-grid.animated .industry-card:nth-child(3),
.features-grid.animated .feature-box:nth-child(3),
.downloads-grid.animated .download-card:nth-child(3) { transition-delay: 0.2s; }

.products-grid.animated .product-card:nth-child(4),
.industries-grid.animated .industry-card:nth-child(4),
.features-grid.animated .feature-box:nth-child(4),
.downloads-grid.animated .download-card:nth-child(4) { transition-delay: 0.3s; }

.products-grid.animated .product-card:nth-child(5),
.industries-grid.animated .industry-card:nth-child(5),
.features-grid.animated .feature-box:nth-child(5),
.downloads-grid.animated .download-card:nth-child(5) { transition-delay: 0.4s; }

.products-grid.animated .product-card:nth-child(6),
.industries-grid.animated .industry-card:nth-child(6),
.features-grid.animated .feature-box:nth-child(6),
.downloads-grid.animated .download-card:nth-child(6) { transition-delay: 0.5s; }

.products-grid.animated .product-card:nth-child(7),
.industries-grid.animated .industry-card:nth-child(7),
.downloads-grid.animated .download-card:nth-child(7) { transition-delay: 0.6s; }

.products-grid.animated .product-card:nth-child(8),
.downloads-grid.animated .download-card:nth-child(8) { transition-delay: 0.7s; }

/* FAQ items stagger */
.faq-list .faq-item {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.faq-list.animated .faq-item {
    opacity: 1;
    transform: translateX(0);
}

.faq-list.animated .faq-item:nth-child(1) { transition-delay: 0s; }
.faq-list.animated .faq-item:nth-child(2) { transition-delay: 0.07s; }
.faq-list.animated .faq-item:nth-child(3) { transition-delay: 0.14s; }
.faq-list.animated .faq-item:nth-child(4) { transition-delay: 0.21s; }
.faq-list.animated .faq-item:nth-child(5) { transition-delay: 0.28s; }
.faq-list.animated .faq-item:nth-child(6) { transition-delay: 0.35s; }

/* Next steps stagger (thank you page) */
.next-steps-grid .next-step-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.next-steps-grid.animated .next-step-item {
    opacity: 1;
    transform: translateY(0);
}

.next-steps-grid.animated .next-step-item:nth-child(1) { transition-delay: 0.1s; }
.next-steps-grid.animated .next-step-item:nth-child(2) { transition-delay: 0.2s; }
.next-steps-grid.animated .next-step-item:nth-child(3) { transition-delay: 0.3s; }
.next-steps-grid.animated .next-step-item:nth-child(4) { transition-delay: 0.4s; }

/* Explore links stagger */
.explore-links .explore-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.explore-links.animated .explore-card {
    opacity: 1;
    transform: translateY(0);
}

.explore-links.animated .explore-card:nth-child(1) { transition-delay: 0.05s; }
.explore-links.animated .explore-card:nth-child(2) { transition-delay: 0.1s; }
.explore-links.animated .explore-card:nth-child(3) { transition-delay: 0.15s; }
.explore-links.animated .explore-card:nth-child(4) { transition-delay: 0.2s; }

/* Timeline items */
.timeline-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline.animated .timeline-item {
    opacity: 1;
    transform: translateX(0);
}

.timeline.animated .timeline-item:nth-child(1) { transition-delay: 0s; }
.timeline.animated .timeline-item:nth-child(2) { transition-delay: 0.1s; }
.timeline.animated .timeline-item:nth-child(3) { transition-delay: 0.2s; }
.timeline.animated .timeline-item:nth-child(4) { transition-delay: 0.3s; }
.timeline.animated .timeline-item:nth-child(5) { transition-delay: 0.4s; }

/* Two-column stagger */
.two-column > *:first-child {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.two-column > *:last-child {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.15s;
}

.two-column.animated > *:first-child,
.two-column.animated > *:last-child {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   17. QUICK CONTACT STRIP ENTRANCE
   ============================================ */
.quick-contact-strip {
    animation: fadeInDown 0.5s ease both;
}

/* ============================================
   18. WHATSAPP FLOAT BUTTON PULSE
   (if a floating WhatsApp button is added)
   ============================================ */
.whatsapp-float {
    animation: glowPulse 2s ease infinite;
}

.whatsapp-float:hover {
    animation: none;
}

/* ============================================
   19. PROGRESS / LOADING BAR
   (Top page loading bar — optional)
   ============================================ */
.page-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--color-primary),
        var(--color-primary-light)
    );
    z-index: 2000;
    transition: width 0.2s ease;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ============================================
   20. RTL ANIMATION DIRECTION OVERRIDES
   ============================================ */
[dir="rtl"] .anim-fade-left  { transform: translateX(30px); }
[dir="rtl"] .anim-fade-right { transform: translateX(-30px); }

[dir="rtl"] .anim-fade-left.animated,
[dir="rtl"] .anim-fade-right.animated {
    transform: translateX(0);
}

[dir="rtl"] .two-column > *:first-child { transform: translateX(24px); }
[dir="rtl"] .two-column > *:last-child  { transform: translateX(-24px); }

[dir="rtl"] .two-column.animated > *:first-child,
[dir="rtl"] .two-column.animated > *:last-child {
    transform: translateX(0);
}

[dir="rtl"] .faq-list .faq-item { transform: translateX(16px); }
[dir="rtl"] .faq-list.animated .faq-item { transform: translateX(0); }

[dir="rtl"] .timeline-item { transform: translateX(20px); }
[dir="rtl"] .timeline.animated .timeline-item { transform: translateX(0); }

/* ============================================
   21. REDUCED MOTION OVERRIDES
   Must be last to ensure it takes priority
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    /* Kill all keyframe animations */
    .hero-content .hero-title,
    .hero-content .hero-subtitle,
    .hero-content .hero-cta,
    .hero-content .hero-stats,
    .page-hero-content h1,
    .page-hero-content p,
    .page-hero-content .breadcrumb,
    .header,
    .thank-you-icon,
    .thank-you-content h1,
    .thank-you-subtitle,
    .thank-you-note,
    .next-steps,
    .quick-contact-strip {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Kill scroll animations */
    .anim-fade-in,
    .anim-fade-up,
    .anim-fade-down,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale-in,
    .anim-scale-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Kill card stagger animations */
    .products-grid .product-card,
    .industries-grid .industry-card,
    .features-grid .feature-box,
    .downloads-grid .download-card,
    .faq-list .faq-item,
    .next-steps-grid .next-step-item,
    .explore-links .explore-card,
    .timeline-item,
    .two-column > *:first-child,
    .two-column > *:last-child {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Kill hover micro-animations */
    .industry-card:hover .industry-icon,
    .download-card:hover .download-card-icon svg,
    .feature-box:hover .feature-icon {
        animation: none !important;
    }

    /* Kill button glow */
    .btn-primary:hover {
        animation: none !important;
    }

    /* Keep FAQ accordion functional (height transition only) */
    .faq-answer {
        transition: max-height 0.1s ease, padding 0.1s ease !important;
    }

    /* Spinner still needs to spin for usability */
    .spinner {
        animation: spin 0.9s linear infinite !important;
    }

}