/**
 * Holographic Text Effect
 * Updated to match widget class output: .holo.holo-classic, .holo.holo-glitter, .holo.holo-ice
 */

/* ============================================
   BASE: Core text-clip properties
   ============================================ */
.holo {
    display: inline-block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ============================================
   CLASSIC: Rainbow bands
   ============================================ */
.holo.holo-classic {
    background-image: linear-gradient(var(--angle, 135deg),
            #ff0080, #ff4500, #ff8c00, #ffd700,
            #00ff80, #00ffff, #0080ff, #8000ff, #ff00ff,
            #ff0080, #ff4500, #ff8c00, #ffd700,
            #00ff80, #00ffff, #0080ff, #8000ff, #ff00ff,
            #ff0080);
    background-size: 300% 100%;
    background-position: var(--pos, 0% 50%);
}

/* ============================================
   GLITTER: Shimmer effect with sparkles
   ============================================ */
.holo.holo-glitter {
    background-image:
        radial-gradient(circle at var(--s1, 10% 20%), #fff 0%, transparent 2%),
        radial-gradient(circle at var(--s2, 30% 10%), #fff 0%, transparent 1.5%),
        radial-gradient(circle at var(--s3, 50% 35%), #fff 0%, transparent 2%),
        radial-gradient(circle at var(--s4, 70% 15%), #fff 0%, transparent 1.5%),
        radial-gradient(circle at var(--s5, 90% 30%), #fff 0%, transparent 2%),
        radial-gradient(circle at var(--s6, 20% 60%), #fff 0%, transparent 1.5%),
        radial-gradient(circle at var(--s7, 40% 70%), #fff 0%, transparent 2%),
        radial-gradient(circle at var(--s8, 60% 55%), #fff 0%, transparent 1.5%),
        radial-gradient(circle at var(--s9, 80% 75%), #fff 0%, transparent 2%),
        linear-gradient(var(--angle, 120deg),
            #ff0080, #ff4020, #ff8000, #ffc000,
            #80ff00, #00ffff, #0080ff, #8000ff,
            #ff0080, #ff4020, #ff8000, #ffc000,
            #80ff00, #00ffff, #0080ff, #8000ff, #ff0080);
    background-size: 180% 180%, 180% 180%, 180% 180%, 180% 180%, 180% 180%,
        180% 180%, 180% 180%, 180% 180%, 180% 180%, 300% 100%;
    background-position: var(--pos, 0% 50%);
}

/* ============================================
   ICE: Cool crystal tones
   ============================================ */
.holo.holo-ice {
    background-image:
        conic-gradient(from var(--r1, 0deg) at var(--f1, 20% 20%),
            #cc3300 0deg, #cc5500 60deg, #996600 120deg, #339933 180deg,
            #006666 240deg, #330099 300deg, #cc3300 360deg),
        conic-gradient(from var(--r2, 90deg) at var(--f2, 80% 30%),
            #006699 0deg, #003366 90deg, #330066 180deg, #660066 270deg, #006699 360deg),
        conic-gradient(from var(--r3, 180deg) at var(--f3, 50% 60%),
            #990066 0deg, #993300 90deg, #669900 180deg, #006699 270deg, #990066 360deg),
        linear-gradient(var(--angle, 150deg),
            #993300, #808040, #408040, #008080, #004080, #400080, #800040, #993300);
    background-size: 50% 50%, 55% 55%, 60% 60%, 100% 100%;
    background-position: var(--f1, 0% 0%), var(--f2, 100% 0%), var(--f3, 50% 100%), var(--pos, 0% 50%);
    background-blend-mode: screen, screen, overlay, normal;
}

/* Mobile: Make holo headings larger and bolder */
@media (max-width: 768px) {
    .imwp-section-title.holo {
        font-size: 2.5rem !important;
        font-weight: 900 !important;
    }
}