.gear {
    transition: transform 0.1s ease-out;
}
html, body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}
.navbar {
    transition: all 0.3s ease-in-out;
}
.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-shrink .nav-links {
    font-size: 0.875rem;
}
.navbar-shrink .donate-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

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

.spinning-gear {
    animation: spin-gear 36s linear infinite; 
    /* transform: matrix(4,0,0,4,-110,-300); */
    /* transform-origin: -110px, -300px; */
    transform-origin: center;
}

.logo-container {
    position: relative;
    width: 400px;
    height: 500px;
}

.svg-layer {
    position: absolute;
    /* top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    /* opacity: 30%; */
}

/* Method for inline SVG approach */
.inline-container svg {
    width: 400px;
    height: 500px;
}

/* Hover effects */
.gear-container:hover .spinning-gear {
    /* animation-duration: 2s; */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

.shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    /* Similar syntax to box-shadow */
}

button, .obot_button {
    font-family: 'JetBrains Mono', sans-serif !important;
}

/* Ambient Canvas Background - Flowing Pipes Effect */
.robotics-bg {
    position: relative;
    overflow: hidden;
}

#ambient-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Reduced motion accessibility */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

html.reduce-motion .gear {
    animation: none !important;
}

html.reduce-motion #ambient-canvas {
    display: none !important;
}

html.reduce-motion .carousel-track-desktop,
html.reduce-motion .carousel-track-mobile {
    transition: none !important;
}