#sidebar {
    --tw-translate-x: -100%;
}

#menu-close-icon {
    display: none;
}

#menu-open:checked~#sidebar {
    --tw-translate-x: 0;
}

@media (min-width: 768px) {
    #sidebar {
        --tw-translate-x: 0;
    }
}

.bg-grid {
  background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
    linear-gradient(to bottom, #80808012 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-grid-black {
  background-image: linear-gradient(to right, #4f4f4f2e 1px, transparent 1px),
    linear-gradient(to bottom, #4f4f4f2e 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Elegant Animated Title Styles */
.animated-title-container {
    display: inline-block;
    vertical-align: baseline;
    overflow: hidden;
    height: 1.2em; /* Fixed height to contain sliding text */
    min-width: 350px; /* Ensure consistent width */
}

.animated-title-wrapper {
    display: block;
    animation: slideText 6s infinite;
}

.title-slide {
    display: block;
    white-space: nowrap;
    height: 1.2em;
    line-height: 1.2;
}

@keyframes slideText {
    0%, 40% {
        transform: translateY(0);
    }
    50%, 90% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Gradient Title - works in both light and dark mode */
.gradient-title {
    /* Fallback color for browsers that don't support gradients */
    color: rgb(236, 72, 153);
}

/* Apply gradient directly to the animated title elements */
.gradient-title .title-slide-1 {
    /* Fallback color */
    color: rgb(236, 72, 153);
    
    /* Create the gradient explicitly for each slide */
    background: linear-gradient(90deg, rgb(236, 72, 153) 0%, rgb(124, 58, 237) 100%);
    background: -webkit-linear-gradient(90deg, rgb(236, 72, 153) 0%, rgb(124, 58, 237) 100%);
    
    /* WebKit-specific clipping properties */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Force hardware acceleration for better WebKit rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Apply gradient directly to the animated title elements */
.gradient-title .title-slide-2 {
    /* Fallback color */
    color: rgb(236, 72, 153);
    
    /* Create the gradient explicitly for each slide */
    background: linear-gradient(90deg, rgb(72, 132, 236) 0%, rgb(58, 237, 91) 100%);
    background: -webkit-linear-gradient(90deg, rgb(72, 132, 236) 0%, rgb(58, 237, 91) 100%);
    
    /* WebKit-specific clipping properties */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Force hardware acceleration for better WebKit rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Ensure container and wrapper don't interfere with gradients */
.animated-title-container,
.animated-title-wrapper {
    /* Ensure these don't have any background or color properties that interfere */
    background: none;
    color: inherit;
}

/* Responsive width adjustments */
@media (max-width: 640px) {
    .animated-title-container {
        min-width: 280px;
    }
}