/* ========================================
   ANIMATIONS - Loading, Scroll Reveal, Floating
   Pure CSS — No libraries
   ======================================== */

/* ========================================
   KEYFRAMES
   ======================================== */

/* Fade in from below */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in from the left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in from the right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Simple fade */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Continuous floating (for decorative elements) */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Gentle pulsing scale (for circles) */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

/* Scale in from center */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered bar slide-in (for value items) */
@keyframes slideInBar {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ========================================
   SCROLL REVEAL SYSTEM
   ======================================== */

/* --- BASE CLASS: Elements are hidden until triggered --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- VISIBLE STATE: Added by IntersectionObserver --- */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- DIRECTIONAL VARIANTS --- */
.animate-on-scroll.from-left {
    transform: translateX(-40px);
}

.animate-on-scroll.from-left.is-visible {
    transform: translateX(0);
}

.animate-on-scroll.from-right {
    transform: translateX(40px);
}

.animate-on-scroll.from-right.is-visible {
    transform: translateX(0);
}

/* --- LONG SLIDE VARIANTS (for Index News) --- */
.animate-on-scroll.long-slide-left {
    transform: translateX(-400px);
    transition-duration: 1.5s;
}

.animate-on-scroll.long-slide-left.is-visible {
    transform: translateX(0);
}

.animate-on-scroll.long-slide-right {
    transform: translateX(400px);
    transition-duration: 1.5s;
}

.animate-on-scroll.long-slide-right.is-visible {
    transform: translateX(0);
}

/* Mobile responsive for long slides: Reduce distance */
@media (max-width: 768px) {
    .animate-on-scroll.long-slide-left {
        transform: translateX(-30px);
    }

    .animate-on-scroll.long-slide-right {
        transform: translateX(30px);
    }
}

/* --- SLOW FADE UP (for Recruit Image) --- */
.animate-on-scroll.slow-fade-up {
    transform: translateY(150px);
    transition-duration: 1.5s;
}

.animate-on-scroll.slow-fade-up.is-visible {
    transform: translateY(0);
}

/* --- SUBTLE SCALE IN (for Hero Logo) --- */
.animate-on-scroll.subtle-scale-in {
    transform: scale(0.95);
    opacity: 0;
    transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.animate-on-scroll.subtle-scale-in.is-visible {
    transform: scale(1);
    opacity: 1;
}

.animate-on-scroll.scale-in {
    transform: scale(0.9);
}

.animate-on-scroll.scale-in.is-visible {
    transform: scale(1);
}

/* --- STAGGER DELAYS (for lists like Values) --- */
.animate-on-scroll.delay-100 {
    transition-delay: 0.1s;
}

.animate-on-scroll.delay-200 {
    transition-delay: 0.2s;
}

.animate-on-scroll.delay-300 {
    transition-delay: 0.3s;
}

.animate-on-scroll.delay-400 {
    transition-delay: 0.4s;
}

.animate-on-scroll.delay-500 {
    transition-delay: 0.5s;
}

.animate-on-scroll.delay-600 {
    transition-delay: 0.6s;
}


/* ========================================
   HERO ENTRANCE ANIMATIONS
   (Triggered immediately on load, not scroll)
   ======================================== */

/* Hero text entrance */
.hero-text.animate-hero {
    opacity: 0;
    transform: translateY(30px);
}

.hero-text.animate-hero.is-loaded {
    animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.3s;
}

/* Hero image entrance */
.hero-image.animate-hero {
    opacity: 0;
    transform: translateX(40px);
}

.hero-image.animate-hero.is-loaded {
    animation: fadeInRight 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.5s;
}


/* ========================================
   CONTINUOUS FLOATING DECORATIVES
   ======================================== */

/* Floating squares - continuous gentle bob */
.decorative-square.is-floating {
    animation: float 4s ease-in-out infinite;
}

.decorative-square.square-2.is-floating {
    animation-delay: 1s;
}

.decorative-square.square-3.is-floating {
    animation-delay: 2s;
}

/* Pulsing circles - continuous gentle scale */
.hero-background-circle.is-floating {
    animation: pulse 5s ease-in-out infinite;
}

.hero-background-circle-top.is-floating {
    animation: pulse 6s ease-in-out infinite;
    animation-delay: 1.5s;
}

.hero-background-circle-right.is-floating {
    animation: pulse 5.5s ease-in-out infinite;
    animation-delay: 0.8s;
}


/* ========================================
   BUTTON HOVER MICRO-ANIMATIONS
   ======================================== */
.btn-primary {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 77, 153, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 77, 153, 0.2);
}

/* News item hover */
.news-item {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.news-item:hover {
    background-color: #f8fafc;
    transform: translateX(4px);
}


/* ========================================
   REDUCE MOTION (Accessibility)
   ======================================== */
@media (prefers-reduced-motion: reduce) {

    .animate-on-scroll,
    .animate-hero,
    .decorative-square,
    .hero-background-circle,
    .hero-background-circle-top,
    .hero-background-circle-right {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- PULSE BUTTON (for Contact) --- */
@keyframes pulseButton {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

.pulse-button {
    animation: pulseButton 2s infinite;
}