/* Ethereum Address Visual Effects Component
   Reusable ethereum address effects for special user designations (Herald addresses)

   Usage contexts:
   - Herald sidebar (current herald address display)
   - Asset sidebar button (herald designation on dark backgrounds)
   - Style guide (effect demonstrations)
   - Future: User profiles, leaderboards, special badges

   Available classes:
   - .eth-address-aurora: Continuous flowing gradient effect (for light backgrounds)
   - .eth-address-aurora-light: Brighter aurora effect (for dark backgrounds)
   - .eth-address-static: Static gradient (no animation fallback)
*/

/* ===================================================
   ===================================================
   ETHEREUM AURORA EFFECTS
   - Inspired by the colorful, futuristic Ethereum aesthetic
   - Uses a slow, flowing gradient for a premium, modern feel
   - No shadows are used, ensuring clean rendering on all fonts
   ===================================================
   =================================================== */

/* ===================================================
   Aurora Flow (For Light Backgrounds)
   - Saturated, mid-tone colors for high contrast and legibility
   =================================================== */

.eth-address-aurora {
    font-weight: bold;
    cursor: pointer;
    color: transparent;

    /* Font smoothing for clean text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /*
       Seamless looping gradient with two complete color cycles.
       This ensures the color at 0% matches the color at 100%,
       eliminating the visible reset when the animation loops.
       Colors chosen for WCAG AA compliance against light backgrounds.
    */
    background-image: linear-gradient(
        90deg,
        var(--eth-aurora-color-1-light) 0%,     /* Cycle 1: Deep Periwinkle (start) */
        var(--eth-aurora-color-2-light) 16.67%, /* Cycle 1: Rich Magenta */
        var(--eth-aurora-color-3-light) 33.33%, /* Cycle 1: Ocean Teal */
        var(--eth-aurora-color-1-light) 50%,    /* Cycle 2: Deep Periwinkle (start) */
        var(--eth-aurora-color-2-light) 66.67%, /* Cycle 2: Rich Magenta */
        var(--eth-aurora-color-3-light) 83.33%, /* Cycle 2: Ocean Teal */
        var(--eth-aurora-color-1-light) 100%    /* Loop point (seamless) */
    );

    /* 200% allows gradient to span exactly 2 cycles for seamless looping */
    background-size: 200% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    /* GPU acceleration hint */
    will-change: background-position;

    /* Continuous left-to-right flow with seamless looping */
    animation: aurora-flow-continuous 3s linear infinite;
}

.eth-address-aurora:hover {
    color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
}

/* ===================================================
   Light Aurora Flow (For Dark Backgrounds)
   - Brighter, more luminous colors that pop on dark surfaces
   =================================================== */

.eth-address-aurora-light {
    font-weight: bold;
    cursor: pointer;
    color: transparent;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /*
       Light variant with two complete color cycles for seamless looping.
       Brighter, more luminous colors for excellent contrast on dark backgrounds.
    */
    background-image: linear-gradient(
        90deg,
        var(--eth-aurora-color-1-dark) 0%,     /* Cycle 1: Lavender Blue (start) */
        var(--eth-aurora-color-2-dark) 16.67%, /* Cycle 1: Light Fuchsia */
        var(--eth-aurora-color-3-dark) 33.33%, /* Cycle 1: Muted Aqua */
        var(--eth-aurora-color-1-dark) 50%,    /* Cycle 2: Lavender Blue (start) */
        var(--eth-aurora-color-2-dark) 66.67%, /* Cycle 2: Light Fuchsia */
        var(--eth-aurora-color-3-dark) 83.33%, /* Cycle 2: Muted Aqua */
        var(--eth-aurora-color-1-dark) 100%    /* Loop point (seamless) */
    );

    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    will-change: background-position;
    animation: aurora-flow-continuous 3s linear infinite;
}

.eth-address-aurora-light:hover {
    color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
}

/* ===================================================
   Static Aurora (No Animation Fallback)
   - For accessibility or as a simpler option
   =================================================== */

.eth-address-static {
    font-weight: bold;
    cursor: pointer;
    color: transparent;
    background-image: linear-gradient(120deg, var(--eth-aurora-color-1-light), var(--eth-aurora-color-2-light), var(--eth-aurora-color-3-light));
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.eth-address-static:hover {
    color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
}

/* Continuous left-to-right aurora flow with seamless looping */
@keyframes aurora-flow-continuous {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ===========================
   Accessibility & Fallbacks
   =========================== */

/* Respect user motion preferences (accessibility) */
@media (prefers-reduced-motion: reduce) {
    .username-eth-aurora,
    .eth-address-aurora-light {
        animation: none;
        /* Static gradient fallback (no animation) */
        background-image: linear-gradient(120deg, var(--eth-aurora-color-1-light), var(--eth-aurora-color-2-light), var(--eth-aurora-color-3-light));
        background-size: 100% 100%;
    }
}

/* Fallback for browsers without background-clip support */
@supports not (background-clip: text) {
    .username-eth-aurora,
    .eth-address-static {
        color: #5B5ECC;  /* Fallback to deep periwinkle (WCAG AA compliant) */
        background: none;
    }

    .eth-address-aurora-light {
        color: #B8BBFF;  /* Fallback to improved lavender */
        background: none;
    }
}

/* ===========================
   Context-Specific Overrides
   =========================== */

/* Prevent underlines when aurora effects are used inside buttons */
button:hover .eth-address-aurora,
button:hover .eth-address-aurora-light,
button:hover .eth-address-static,
.btn:hover .eth-address-aurora,
.btn:hover .eth-address-aurora-light,
.btn:hover .eth-address-static {
    text-decoration: none;
}