/**
 * Holographic Text Effect
 * iOS Safari Compatible Version
 * 
 * Effect is ONLY inside letter glyphs.
 * Uses simple gradients without calc() for iOS compatibility.
 */

/* ============================================
   BASE: Core text-clip properties
   ============================================ */
.holo-text {
    /* Background gradient - using simple values iOS can handle */
    background: linear-gradient(135deg,
            #ff6b9d 0%,
            #c44cff 15%,
            #6b9dff 30%,
            #6bffff 45%,
            #9dff6b 60%,
            #ffeb3b 75%,
            #ff6b9d 100%);
    background-size: 300% 300%;
    background-position: 0% 50%;

    /* Clip to text - WebKit first for Safari */
    -webkit-background-clip: text;
    background-clip: text;

    /* Make text transparent */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* No other effects */
    text-shadow: none;
    box-shadow: none;
    border: none;
    outline: none;
    display: inline;

    /* Smooth transition for hover effect */
    transition: background-position 0.3s ease;
}

/* Hover state - shift the gradient */
.holo-text:hover {
    background-position: 100% 50%;
}

/* Active/touch state */
.holo-text:active {
    background-position: 50% 100%;
}

/* Remove pseudo-elements */
.holo-text::before,
.holo-text::after {
    content: none !important;
    display: none !important;
}

/* ============================================
   CLASSIC: Rainbow bands
   ============================================ */
.holo-text.holo-text--classic {
    background: linear-gradient(135deg,
            #e040fb 0%,
            #7c4dff 10%,
            #536dfe 20%,
            #448aff 30%,
            #40c4ff 40%,
            #18ffff 50%,
            #64ffda 60%,
            #69f0ae 70%,
            #b2ff59 80%,
            #eeff41 90%,
            #e040fb 100%);
    background-size: 300% 300%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ============================================
   GLITTER: Shimmer effect
   ============================================ */
.holo-text.holo-text--glitter {
    background: linear-gradient(120deg,
            #ff80ab 0%,
            #ea80fc 12%,
            #b388ff 25%,
            #8c9eff 37%,
            #82b1ff 50%,
            #80d8ff 62%,
            #84ffff 75%,
            #a7ffeb 87%,
            #ff80ab 100%);
    background-size: 400% 400%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ============================================
   ICE: Cool crystal tones
   ============================================ */
.holo-text.holo-text--ice {
    background: linear-gradient(150deg,
            #b388ff 0%,
            #8c9eff 15%,
            #82b1ff 30%,
            #80d8ff 45%,
            #84ffff 60%,
            #a7ffeb 75%,
            #b388ff 100%);
    background-size: 300% 300%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}