/* Shared Styles for MySub App */

:root {
    --color-primary: 0 133 63;
    --color-primary-green: 17 212 82;
    --color-primary-dark: 13 166 64;
}

/* Tailwind Custom Configuration is handled in the HTML <script> tag for this CDN setup */

/* Material Symbols Settings */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

/* Ensure consistent height across devices */
body {
    height: 100%;
}


/* Hide Scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Heatmap Page Specific Animation */
.heatmap-cell {
    transition: all 0.2s ease;
}

/* Gradient Animation */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% }
    25% { background-position: 100% 50%; border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% }
    50% { background-position: 50% 100%; border-radius: 70% 30% 30% 70% / 70% 70% 30% 30% }
    75% { background-position: 0% 50%; border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% }
    100% { background-position: 0% 50%; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% }
}

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

.animate-gradient-bg {
    background-size: 200% 200%;
    animation: slow-pan 12s ease-in-out infinite;
}

/* More organic, floating movement */
/* Simulating "random walk" or "Brownian motion" via keyframes */
@keyframes random-drift {
    0% { background-position: 50% 50%; }
    20% { background-position: 20% 20%; } /* Top-Leftish */
    40% { background-position: 80% 30%; } /* Top-Rightish */
    60% { background-position: 30% 80%; } /* Bottom-Leftish */
    80% { background-position: 70% 90%; } /* Bottom-Rightish */
    100% { background-position: 50% 50%; }
}

/* Diagonal floating */
@keyframes float-diagonal {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes breathe {
    0%, 100% { filter: contrast(1.2) brightness(1.6) saturate(1.2); }
    50% { filter: contrast(1.2) brightness(2.2) saturate(1.4); }
}

/* Recap Animations */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

.animate-slide-in {
    animation: slideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
}
.heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 10;
}


/* Utility Animations */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: fade-up 0.4s ease-out forwards;
}