/* Global utility classes */
.hidden {
    display: none !important;
}

/* Reusable animated gradient background class */
.animated-gradient-bg {
    position: relative;
    background: var(--overlay-bg);
    overflow: hidden;
}

/* Reusable gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #f093fb 80%, #ffd89b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .gradient-text {
    background: linear-gradient(135deg, #a5b4fc 0%, #c084fc 40%, #fbbf24 80%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gradient-text {
        background: linear-gradient(135deg, #a5b4fc 0%, #c084fc 40%, #fbbf24 80%, #f59e0b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Base gradient layer */
.animated-gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at top left, rgba(60, 80, 180, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(220, 60, 60, 0.7) 0%, transparent 50%);
    background-size: 150% 150%;
    animation: gradientMove1 12s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

[data-theme="dark"] .animated-gradient-bg::before {
    background: 
        radial-gradient(ellipse at top left, rgba(120, 150, 255, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(255, 120, 120, 0.5) 0%, transparent 50%);
    background-size: 150% 150%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .animated-gradient-bg::before {
        background: 
            radial-gradient(ellipse at top left, rgba(120, 150, 255, 0.5) 0%, transparent 50%),
            radial-gradient(ellipse at bottom right, rgba(255, 120, 120, 0.5) 0%, transparent 50%);
        background-size: 150% 150%;
    }
}

/* Second gradient layer with different timing */
.animated-gradient-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at bottom left, rgba(200, 80, 120, 0.65) 0%, transparent 40%),
        radial-gradient(circle at top right, rgba(50, 150, 220, 0.65) 0%, transparent 40%);
    background-size: 180% 180%;
    animation: gradientMove2 18s ease-in-out 2s infinite;
    z-index: 0;
    pointer-events: none;
}

[data-theme="dark"] .animated-gradient-bg::after {
    background: 
        radial-gradient(circle at bottom left, rgba(255, 150, 200, 0.45) 0%, transparent 40%),
        radial-gradient(circle at top right, rgba(100, 200, 255, 0.45) 0%, transparent 40%);
    background-size: 180% 180%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .animated-gradient-bg::after {
        background: 
            radial-gradient(circle at bottom left, rgba(255, 150, 200, 0.45) 0%, transparent 40%),
            radial-gradient(circle at top right, rgba(100, 200, 255, 0.45) 0%, transparent 40%);
        background-size: 180% 180%;
    }
}

/* Opaque modal background layer (solid background behind animated gradients) */
.opaque-modal-bg {
    background: var(--container-bg);
}

/* Common full-screen overlay class for all screens */
.full-screen-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
}