/* ============================================
   LIQUID MAIN STYLES
   Component Styles, Animations, and Layouts
   ============================================ */

/* === ANIMATED BACKGROUND === */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(
        135deg,
        var(--color-bg-primary) 0%,
        var(--color-bg-secondary) 25%,
        var(--color-bg-tertiary) 50%,
        var(--color-bg-accent) 75%,
        var(--color-bg-secondary) 100%
    );
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
    opacity: 0.4;
}

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

/* === GLASS MORPHISM COMPONENT === */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass:hover {
    background: var(--glass-bg-hover);
    border: 1px solid var(--glass-border-hover);
}

/* === ANIMATIONS === */

/* Floating Animation */
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.pulsing {
    animation: pulse 2s ease-in-out infinite;
}

/* === BUTTON COMPONENTS === */

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--color-accent-cyan) 0%,
        var(--color-accent-cyan-dark) 100%
    );
    color: var(--color-bg-primary);
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.btn-primary:hover {
    background: linear-gradient(
        135deg,
        var(--color-accent-cyan-light) 0%,
        var(--color-accent-cyan-darker) 100%
    );
    border-color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-cyan);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    border: 2px solid var(--color-border-interactive);
    transition: all var(--transition-base);
}

.btn-secondary:hover {
    border-color: var(--color-accent-cyan);
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-2px);
}

/* === COPY BUTTON FEEDBACK === */
.copy-feedback {
    transition: all var(--transition-base);
}

/* === COUNTER COMPONENT === */
.counter {
    display: inline-block;
}

/* === CONTENT WRAPPER === */
.content {
    position: relative;
    z-index: 1;
}

/* === WAVE ACCENT === */
.wave-accent {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-accent-cyan),
        var(--color-accent-cyan-dark),
        transparent
    );
    opacity: 0.7;
}

/* === TOKEN LOGO STYLING === */
.token-logo {
    transition: transform var(--transition-base);
}

.token-logo:hover {
    transform: scale(1.1);
}

/* Pool card hover effect for logos */
.glass:hover .token-logo {
    transform: scale(1.05);
}

/* === LOGO ACCENT FILTER === */
.logo-accent {
    filter: var(--filter-logo-accent);
}

/* === LOGO VERTICAL ALIGNMENT === */
.logo-offset {
    margin-top: -3rem;
}

.logo-offset-small {
    margin-top: -0.5rem;
}

/* === CONDIMENT FONT FIX === */
.condiment {
    /* Prevent text cutoff on mobile due to font overflow */
    padding: 0 0.2em;
    overflow: visible;
}

/* === HOLDERS SECTION === */

/* Tab Navigation */
.holder-tab {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    color: var(--color-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.holder-tab:hover {
    background: rgba(232, 232, 255, 0.03);
    color: var(--color-text-primary);
}

.holder-tab.active {
    color: var(--color-accent-cyan);
    border-bottom-color: var(--color-accent-cyan);
    background: rgba(0, 212, 255, 0.05);
}

/* Tab Content */
.holder-tab-content {
    display: none;
}

.holder-tab-content.active {
    display: block;
}

/* Holder List */
.holder-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Custom scrollbar */
.holder-list::-webkit-scrollbar {
    width: 8px;
}

.holder-list::-webkit-scrollbar-track {
    background: rgba(232, 232, 255, 0.05);
    border-radius: 4px;
}

.holder-list::-webkit-scrollbar-thumb {
    background: var(--color-accent-cyan);
    border-radius: 4px;
    opacity: 0.3;
}

.holder-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-cyan-light);
}

/* Holder Item */
.holder-item {
    display: grid;
    grid-template-columns: 3rem 1fr 2fr 5rem;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: rgba(232, 232, 255, 0.03);
    border: 1px solid rgba(232, 232, 255, 0.1);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.holder-item:hover {
    background: rgba(232, 232, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateX(4px);
}

/* Mobile responsive grid */
@media (max-width: 640px) {
    .holder-item {
        grid-template-columns: 2rem 1fr 4rem;
        gap: 0.5rem;
    }

    .holder-percentage {
        display: none;
    }
}

.holder-rank {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-accent-cyan);
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
}

.holder-address {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

.holder-address a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

.holder-address a:hover {
    color: var(--color-accent-cyan);
}

.holder-balance {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    text-align: right;
    color: var(--color-text-primary);
}

.holder-symbol {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}

.holder-percentage {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: right;
}

/* Loading and Error States */
.loading-holder,
.error-holder {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
}

.error-holder {
    color: #ff6b6b;
}