/* animation-framework.css - 100% CLASS-BASED SYSTEM */

/* =================
   CORE ANIMATION FRAMEWORK - CLASS-BASED ONLY
   ================= */

/* Performance optimizations */
.animate-element {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* =================
   CRITICAL: ALL SECTIONS VISIBLE BY DEFAULT
   ================= */

/* MAKE ALL SECTIONS VISIBLE FIRST - CLASS-BASED */
section,
.section,
.hero-section,
.header-section,
.about-us-section,
.contact-section,
.footer-section,
.offerings-section,
.services-section {
    opacity: 1 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
}

/* =================
   SCROLL ANIMATION SYSTEM - 100% CLASS-BASED
   ================= */

/* Base scroll animations */
.scroll-animate {
    transition: all var(--duration-slow, 600ms) var(--ease-smooth, ease);
    opacity: 1;
    transform: translateY(0);
}

/* Hide scroll animations ONLY in non-hero sections that aren't in view */
.scroll-animate:not(.hero-section .scroll-animate):not(.in-view) {
    opacity: 0;
    transform: translateY(var(--scroll-offset-normal, 30px));
}

/* Hero section elements stay visible initially */
.hero-section .scroll-animate {
    opacity: 1;
    transform: translateY(0);
}

/* When in view, show element */
.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* =================
   SCROLL ANIMATION VARIANTS - CLASS-BASED
   ================= */

/* Fade animations */
.scroll-animate-fade {
    transition: opacity var(--duration-slow, 600ms) var(--ease-smooth, ease);
    opacity: 1;
}

.scroll-animate-fade:not(.hero-section .scroll-animate-fade):not(.in-view) {
    opacity: 0;
}

.scroll-animate-fade.in-view {
    opacity: 1;
}

/* Slide up animations */
.scroll-animate-slide-up {
    transition: all var(--duration-slow, 600ms) var(--ease-smooth, ease);
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate-slide-up:not(.hero-section .scroll-animate-slide-up):not(.in-view) {
    opacity: 0;
    transform: translateY(var(--scroll-offset-medium, 50px));
}

.scroll-animate-slide-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Slide left animations */
.scroll-animate-slide-left {
    transition: all var(--duration-slow, 600ms) var(--ease-smooth, ease);
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-slide-left:not(.hero-section .scroll-animate-slide-left):not(.in-view) {
    opacity: 0;
    transform: translateX(calc(-1 * var(--scroll-offset-medium, 50px)));
}

.scroll-animate-slide-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Slide right animations */
.scroll-animate-slide-right {
    transition: all var(--duration-slow, 600ms) var(--ease-smooth, ease);
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-slide-right:not(.hero-section .scroll-animate-slide-right):not(.in-view) {
    opacity: 0;
    transform: translateX(var(--scroll-offset-medium, 50px));
}

.scroll-animate-slide-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Scale animations */
.scroll-animate-scale {
    transition: all var(--duration-slow, 600ms) var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
    opacity: 1;
    transform: scale(1);
}

.scroll-animate-scale:not(.hero-section .scroll-animate-scale):not(.in-view) {
    opacity: 0;
    transform: scale(0.9);
}

.scroll-animate-scale.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Rotate animations */
.scroll-animate-rotate {
    transition: all var(--duration-slower, 750ms) var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
    opacity: 1;
    transform: rotate(0) scale(1);
}

.scroll-animate-rotate:not(.hero-section .scroll-animate-rotate):not(.in-view) {
    opacity: 0;
    transform: rotate(-5deg) scale(0.95);
}

.scroll-animate-rotate.in-view {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* =================
   SECTION ANIMATION SYSTEM - CLASS-BASED
   ================= */

/* Base section animation */
.section-animate {
    transition: all var(--duration-ultra-slow, 1200ms) var(--ease-smooth, ease);
    opacity: 1;
    transform: translateY(0);
}

/* Hide section animations for non-hero sections */
.section-animate:not(.hero-section):not(.in-view) {
    opacity: 0;
    transform: translateY(var(--scroll-offset-large, 80px));
}

.section-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Section animation variants */
.section-fade {
    transition: opacity var(--duration-ultra-slow, 1200ms) var(--ease-smooth, ease);
    opacity: 1;
}

.section-fade:not(.hero-section):not(.in-view) {
    opacity: 0;
}

.section-fade.in-view {
    opacity: 1;
}

.section-slide-up {
    transition: all var(--duration-ultra-slow, 1200ms) var(--ease-smooth, ease);
    opacity: 1;
    transform: translateY(0);
}

.section-slide-up:not(.hero-section):not(.in-view) {
    opacity: 0;
    transform: translateY(var(--scroll-offset-large, 80px));
}

.section-slide-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.section-scale-in {
    transition: all var(--duration-ultra-slow, 1200ms) var(--ease-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275));
    opacity: 1;
    transform: scale(1);
}

.section-scale-in:not(.hero-section):not(.in-view) {
    opacity: 0;
    transform: scale(0.9);
}

.section-scale-in.in-view {
    opacity: 1;
    transform: scale(1);
}

/* =================
   STAGGER ANIMATION SYSTEM - CLASS-BASED
   ================= */

.stagger-container {
    /* Container organizes children */
}

.stagger-item {
    transition: all var(--duration-normal, 400ms) var(--ease-smooth, ease);
    transition-delay: calc(var(--stagger-index, 0) * var(--stagger-base, 100ms));
    opacity: 1;
    transform: translateY(0);
}

/* Hide stagger items in non-hero sections */
.stagger-item:not(.hero-section .stagger-item):not(.in-view) {
    opacity: 0;
    transform: translateY(var(--scroll-offset-small, 20px));
}

.stagger-container.in-view .stagger-item {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger variants */
.stagger-item-fast {
    transition-delay: calc(var(--stagger-index, 0) * var(--stagger-fast, 50ms));
}

.stagger-item-slow {
    transition-delay: calc(var(--stagger-index, 0) * var(--stagger-slow, 150ms));
}

.stagger-item-scale {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.stagger-item-scale:not(.hero-section .stagger-item-scale):not(.in-view) {
    opacity: 0;
    transform: translateY(var(--scroll-offset-small, 20px)) scale(0.95);
}

.stagger-container.in-view .stagger-item-scale {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Auto-generate stagger delays for up to 20 items */
.stagger-item:nth-child(1) { --stagger-index: 0; }
.stagger-item:nth-child(2) { --stagger-index: 1; }
.stagger-item:nth-child(3) { --stagger-index: 2; }
.stagger-item:nth-child(4) { --stagger-index: 3; }
.stagger-item:nth-child(5) { --stagger-index: 4; }
.stagger-item:nth-child(6) { --stagger-index: 5; }
.stagger-item:nth-child(7) { --stagger-index: 6; }
.stagger-item:nth-child(8) { --stagger-index: 7; }
.stagger-item:nth-child(9) { --stagger-index: 8; }
.stagger-item:nth-child(10) { --stagger-index: 9; }
.stagger-item:nth-child(11) { --stagger-index: 10; }
.stagger-item:nth-child(12) { --stagger-index: 11; }
.stagger-item:nth-child(13) { --stagger-index: 12; }
.stagger-item:nth-child(14) { --stagger-index: 13; }
.stagger-item:nth-child(15) { --stagger-index: 14; }
.stagger-item:nth-child(16) { --stagger-index: 15; }
.stagger-item:nth-child(17) { --stagger-index: 16; }
.stagger-item:nth-child(18) { --stagger-index: 17; }
.stagger-item:nth-child(19) { --stagger-index: 18; }
.stagger-item:nth-child(20) { --stagger-index: 19; }

/* =================
   HERO SECTION SPECIAL HANDLING - CLASS-BASED
   ================= */

/* Hero section stagger items should animate on load */
.hero-section .stagger-item {
    opacity: 0;
    transform: translateY(var(--scroll-offset-small, 20px));
}

.hero-section .stagger-container.in-view .stagger-item {
    opacity: 1;
    transform: translateY(0);
}

/* Hero section scroll animations */
.hero-section .scroll-animate {
    opacity: 0;
    transform: translateY(var(--scroll-offset-small, 20px));
}

.hero-section.in-view .scroll-animate,
.hero-section .scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* =================
   INTERACTIVE ANIMATIONS - CLASS-BASED
   ================= */

.interactive {
    transition: all var(--duration-normal, 300ms) var(--ease-smooth, ease);
    cursor: pointer;
}

.hover-lift {
    transition: all var(--duration-normal, 300ms) var(--ease-smooth, ease);
}

.hover-lift:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hover-scale {
    transition: transform var(--duration-normal, 300ms) var(--ease-smooth, ease);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: all var(--duration-normal, 300ms) var(--ease-smooth, ease);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

.hover-rotate {
    transition: transform var(--duration-normal, 300ms) var(--ease-smooth, ease);
}

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

.hover-tilt {
    transition: transform var(--duration-normal, 300ms) var(--ease-smooth, ease);
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
}

/* Active states */
.interactive:active {
    transform: scale(0.95);
    transition-duration: var(--duration-fast, 150ms);
}

/* =================
   LOADING ANIMATIONS - CLASS-BASED
   ================= */

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-30px); }
    70% { transform: translateY(-15px); }
    90% { transform: translateY(-4px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

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

/* Loading classes */
.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* =================
   ACCESSIBILITY - CLASS-BASED
   ================= */

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Reset all animation classes */
    .scroll-animate,
    .scroll-animate-fade,
    .scroll-animate-slide-up,
    .scroll-animate-slide-left,
    .scroll-animate-slide-right,
    .scroll-animate-scale,
    .scroll-animate-rotate,
    .stagger-item,
    .section-animate,
    .section-fade,
    .section-slide-up,
    .section-scale-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Disable hover effects */
    .hover-lift:hover,
    .hover-scale:hover,
    .hover-glow:hover,
    .hover-rotate:hover,
    .hover-tilt:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* =================
   DEBUG MODE - CLASS-BASED
   ================= */

.debug-animations {
    position: relative;
}

.debug-animations .scroll-animate:not(.in-view) {
    outline: 2px dashed orange !important;
}

.debug-animations .scroll-animate.in-view {
    outline: 2px solid green !important;
}

.debug-animations .section-animate:not(.in-view) {
    outline: 2px dashed red !important;
}

.debug-animations .section-animate.in-view {
    outline: 2px solid red !important;
}

.debug-animations .stagger-container:not(.in-view) {
    outline: 2px dashed blue !important;
}

.debug-animations .stagger-container.in-view {
    outline: 2px solid blue !important;
}

.debug-animations .hero-section {
    outline: 3px solid purple !important;
}

.debug-animations::before {
    content: 'Debug Mode: Orange=Waiting, Green=Scroll Animated, Red=Section Animated, Blue=Stagger, Purple=Hero';
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    font-size: 12px;
    z-index: 9999;
    border-radius: 4px;
    max-width: 300px;
    line-height: 1.3;
}