/* TMKR - Elegant animation system */

:root {
    --rb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rbFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rbFadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rbFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rbScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rbHeroTextFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rbGradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes rbBorderDance {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes rbShimmerSweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

@keyframes rbSoftPulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.03);
    }
}

/* Hero text */
.hero-animate {
    opacity: 0;
    animation: rbHeroTextFadeIn 0.8s var(--rb-ease) forwards;
}

.hero-animate-delay-1 { animation-delay: 0.15s; }
.hero-animate-delay-2 { animation-delay: 0.3s; }
.hero-animate-delay-3 { animation-delay: 0.45s; }
.hero-animate-delay-4 { animation-delay: 0.6s; }

/* Apple-like polish for headline gradient */
.gradient-text {
    background-size: 220% 220%;
    animation: rbGradientShift 8s ease-in-out infinite;
}

/* Hero badge shimmer */
.hero-badge {
    position: relative;
    overflow: hidden;
}

.hero-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-120%);
    animation: rbShimmerSweep 4.5s var(--rb-ease) infinite;
    pointer-events: none;
}

/* Scroll reveal */
.fade-in,
.fade-in-up,
.fade-in-left,
.fade-in-right,
.scale-in {
    opacity: 0;
    transform: translateY(24px);
}

.fade-in.active,
.fade-in-up.active,
.scale-in.active {
    animation: rbFadeInUp 0.7s var(--rb-ease) forwards;
}

.fade-in-left {
    transform: translateX(-24px);
}

.fade-in-right {
    transform: translateX(24px);
}

.fade-in-left.active {
    animation: rbFadeInLeft 0.7s var(--rb-ease) forwards;
}

.fade-in-right.active {
    animation: rbFadeInRight 0.7s var(--rb-ease) forwards;
}

.scale-in {
    transform: scale(0.96);
}

.scale-in.active {
    animation: rbScaleIn 0.65s var(--rb-ease) forwards;
}

/* Stagger delays */
.stagger-1.active { animation-delay: 0.05s; }
.stagger-2.active { animation-delay: 0.1s; }
.stagger-3.active { animation-delay: 0.15s; }
.stagger-4.active { animation-delay: 0.2s; }
.stagger-5.active { animation-delay: 0.25s; }
.stagger-6.active { animation-delay: 0.3s; }

/* Section transition */
.section-transition {
    opacity: 0;
    transform: translateY(28px);
}

.section-transition.visible {
    animation: rbFadeInUp 0.8s var(--rb-ease) forwards;
}

/* Background layers (static, refined) */
.animated-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
}

.animated-bg::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at 20% 80%, rgba(26, 111, 143, 0.22) 0%, transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(42, 167, 199, 0.18) 0%, transparent 55%),
                radial-gradient(circle at 40% 40%, rgba(229, 121, 47, 0.14) 0%, transparent 45%);
    animation: rbGradientShift 14s ease-in-out infinite;
}

.blob-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -2;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    mix-blend-mode: screen;
}

.blob-1 {
    width: 520px;
    height: 520px;
    background: linear-gradient(135deg, #1a6f8f 0%, #2aa7c7 100%);
    top: -12%;
    left: -10%;
}

.blob-2 {
    width: 440px;
    height: 440px;
    background: linear-gradient(135deg, #2aa7c7 0%, #e5792f 100%);
    bottom: -16%;
    right: -8%;
}

.blob-3 {
    width: 360px;
    height: 360px;
    background: linear-gradient(135deg, #e5792f 0%, #1a6f8f 100%);
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.floating-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
}

.orb-1 {
    width: 320px;
    height: 320px;
    background: rgba(26, 111, 143, 0.26);
    top: 12%;
    left: 10%;
}

.orb-2 {
    width: 260px;
    height: 260px;
    background: rgba(42, 167, 199, 0.24);
    top: 60%;
    right: 12%;
}

.orb-3 {
    width: 220px;
    height: 220px;
    background: rgba(229, 121, 47, 0.2);
    bottom: 18%;
    left: 32%;
}

.grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26, 111, 143, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 111, 143, 0.06) 1px, transparent 1px);
    background-size: 50px 50px;
}

.particles {
    display: none;
}

/* Disable heavy effects */
#particle-canvas {
    display: none;
}

.btn-magnetic {
    transform: none !important;
}

.btn-ripple .ripple {
    display: none;
}

.btn-shine::after {
    opacity: 0;
    animation: none;
}

.btn-shine:hover::after {
    opacity: 0.6;
    animation: rbBorderDance 2.6s linear infinite;
}

/* Subtle animated gradient for primary buttons */
.btn-primary {
    background-size: 200% 200%;
    animation: rbGradientShift 12s ease-in-out infinite;
}

.btn-primary:hover {
    animation-play-state: paused;
}

/* Subtle card glow on hover (Apple-like polish) */
.card-hover-glow {
    position: relative;
    overflow: hidden;
}

.card-hover-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(240px circle at var(--glow-x, 20%) var(--glow-y, 20%), rgba(255, 255, 255, 0.18), transparent 55%),
                radial-gradient(300px circle at 80% 80%, rgba(255, 255, 255, 0.08), transparent 60%);
    opacity: var(--glow-intensity, 0);
    transition: opacity 0.4s var(--rb-ease);
    pointer-events: none;
}

.card-hover-glow:hover::after {
    opacity: 0.9;
}

/* Subtle lift for 3D cards */
.card-3d {
    transition: transform 0.4s var(--rb-ease), box-shadow 0.4s var(--rb-ease);
}

.card-3d:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Soft pulse for hero background blobs */
.blob {
    animation: rbSoftPulse 10s ease-in-out infinite;
}

.blob-2 {
    animation-delay: 1.5s;
}

.blob-3 {
    animation-delay: 3s;
}

.icon-spin:hover svg,
.icon-spin:hover .icon {
    animation: none;
}

.service-icon-animated {
    animation: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animated-bg::before {
        animation: none;
    }

    .marquee-track {
        animation-duration: 40s !important;
        animation-iteration-count: infinite !important;
        animation-play-state: running !important;
    }
}