/**
 * Boost Theme Framework - Text Effects
 *
 * CSS-only and JS-enhanced text effects.
 * Loaded only when [data-boost-text] is present on page.
 *
 * Hover effects (menus/links):
 * - highlight: Underline left-to-right
 * - highlight-center: Underline from center
 * - highlight-right: Underline right-to-left
 * - fill-up: Color fills from bottom
 * - letter-spread: Letters expand
 * - blur-in: Blurred to clear
 * - outline-fill: Outline fills on hover
 * - text-shadow: Depth shadow appears
 *
 * Always effects (headings/decorative):
 * - gradient: Gradient text color
 * - glow: Neon glow
 * - shimmer: Metallic shine sweep
 * - outline: Text stroke only
 * - rainbow: Cycling rainbow gradient
 * - glitch: Digital distortion flicker
 *
 * View-triggered effects (scroll into view):
 * - fade-up: Fade + slide up
 * - slide-right: Slide from left
 * - rotate-in: Rotate + fade in
 * - stamp: Scale bounce in
 * - wave: Wave animation (JS)
 *
 * JS-powered effects:
 * - typewriter: Character-by-character typing
 * - counter: Animated number counting
 * - scramble: Random chars before reveal
 *
 * @package BoostThemeFramework\Effects
 */

/* /assets/css/effects/effects-text.css */

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    [data-boost-text] {
        animation: none !important;
        transition: none !important;
    }
}

/* =============================================================================
   GRADIENT TEXT
   ============================================================================= */

[data-boost-text="gradient"] {
    background: linear-gradient(135deg, var(--boost-accent, #6366f1), var(--boost-accent-alt, #8b5cf6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient text on dark/gradient backgrounds - use lighter colors */
.boost-cta--gradient [data-boost-text="gradient"],
.boost-faq--gradient [data-boost-text="gradient"],
.boost-hero--gradient [data-boost-text="gradient"],
.boost-content--gradient [data-boost-text="gradient"],
[data-boost-scheme="gradient"] [data-boost-text="gradient"] {
    background: linear-gradient(135deg, #fff 0%, #e0e7ff 50%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient text on dark backgrounds */
.boost-cta--dark [data-boost-text="gradient"],
.boost-faq--dark [data-boost-text="gradient"],
.boost-hero--dark [data-boost-text="gradient"],
.boost-content--dark [data-boost-text="gradient"],
[data-boost-scheme="dark"] [data-boost-text="gradient"] {
    background: linear-gradient(135deg, var(--boost-primary, #3b82f6), var(--boost-accent, #8b5cf6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =============================================================================
   HIGHLIGHT / UNDERLINE (hover-only)
   ============================================================================= */

[data-boost-text="highlight"],
[data-boost-text="highlight-center"],
[data-boost-text="highlight-right"] {
    position: relative;
    display: inline-block;
}

[data-boost-text="highlight"]::after,
[data-boost-text="highlight-center"]::after,
[data-boost-text="highlight-right"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0.15em;
    background: var(--boost-highlight-color, var(--boost-accent, #6366f1));
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* highlight: left-to-right */
[data-boost-text="highlight"]::after {
    left: 0;
}
[data-boost-text="highlight"]:hover::after {
    width: 100%;
}

/* highlight-center: expands from center */
[data-boost-text="highlight-center"]::after {
    left: 50%;
    transform: translateX(-50%);
}
[data-boost-text="highlight-center"]:hover::after {
    width: 100%;
}

/* highlight-right: right-to-left */
[data-boost-text="highlight-right"]::after {
    right: 0;
}
[data-boost-text="highlight-right"]:hover::after {
    width: 100%;
}

/* Variant: background highlight instead of underline */
[data-boost-text="highlight"][data-boost-text-style="background"]::after,
[data-boost-text="highlight-center"][data-boost-text-style="background"]::after,
[data-boost-text="highlight-right"][data-boost-text-style="background"]::after {
    bottom: 0.1em;
    height: 0.4em;
    opacity: 0.3;
    z-index: -1;
}

/* =============================================================================
   FILL-UP (hover: color fills from bottom to top)
   ============================================================================= */

[data-boost-text="fill-up"] {
    position: relative;
    display: inline-block;
    background: linear-gradient(to top, var(--boost-accent, #6366f1) 50%, currentColor 50%);
    background-size: 100% 200%;
    background-position: top;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background-position 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-text="fill-up"]:hover {
    background-position: bottom;
}

/* =============================================================================
   LETTER-SPREAD (hover: letters expand)
   ============================================================================= */

[data-boost-text="letter-spread"] {
    display: inline-block;
    letter-spacing: 0;
    transition: letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-text="letter-spread"]:hover {
    letter-spacing: 0.15em;
}

/* =============================================================================
   BLUR-IN (hover: blurred to clear)
   ============================================================================= */

[data-boost-text="blur-in"] {
    display: inline-block;
    filter: blur(3px);
    opacity: 0.7;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

[data-boost-text="blur-in"]:hover {
    filter: blur(0);
    opacity: 1;
}

/* =============================================================================
   FADE-UP (view-triggered: fade + slide up)
   ============================================================================= */

[data-boost-text="fade-up"] {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-text="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   SHIMMER (always: metallic shine sweeps across text)
   ============================================================================= */

[data-boost-text="shimmer"] {
    display: inline-block;
    background: linear-gradient(
        90deg,
        currentColor 0%,
        currentColor 40%,
        var(--boost-accent, #6366f1) 50%,
        currentColor 60%,
        currentColor 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: boost-text-shimmer 3s linear infinite;
}

@keyframes boost-text-shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* =============================================================================
   OUTLINE (always: text stroke, no fill)
   ============================================================================= */

[data-boost-text="outline"] {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px currentColor;
    paint-order: stroke fill;
}

/* Hover variant: fills on hover */
[data-boost-text="outline-fill"] {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px currentColor;
    paint-order: stroke fill;
    transition: -webkit-text-fill-color 0.3s ease;
}

[data-boost-text="outline-fill"]:hover {
    -webkit-text-fill-color: currentColor;
}

/* =============================================================================
   GLOW / NEON
   ============================================================================= */

[data-boost-text="glow"] {
    text-shadow: 
        0 0 10px var(--boost-accent, #6366f1),
        0 0 20px var(--boost-accent, #6366f1),
        0 0 40px var(--boost-accent, #6366f1);
}

/* Pulsing glow animation */
[data-boost-text="glow"][data-boost-text-animate="true"] {
    animation: boost-text-glow 2s ease-in-out infinite alternate;
}

@keyframes boost-text-glow {
    from {
        text-shadow: 
            0 0 5px var(--boost-accent, #6366f1),
            0 0 10px var(--boost-accent, #6366f1);
    }
    to {
        text-shadow: 
            0 0 10px var(--boost-accent, #6366f1),
            0 0 20px var(--boost-accent, #6366f1),
            0 0 40px var(--boost-accent, #6366f1);
    }
}

/* =============================================================================
   WAVE
   ============================================================================= */

[data-boost-text="wave"] {
    display: inline-block;
}

[data-boost-text="wave"] span {
    display: inline-block;
    animation: boost-text-wave 1s ease-in-out infinite;
}

@keyframes boost-text-wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.2em); }
}

/* Stagger animation for each character - set via JS */
[data-boost-text="wave"] span:nth-child(1) { animation-delay: 0s; }
[data-boost-text="wave"] span:nth-child(2) { animation-delay: 0.05s; }
[data-boost-text="wave"] span:nth-child(3) { animation-delay: 0.1s; }
[data-boost-text="wave"] span:nth-child(4) { animation-delay: 0.15s; }
[data-boost-text="wave"] span:nth-child(5) { animation-delay: 0.2s; }
[data-boost-text="wave"] span:nth-child(6) { animation-delay: 0.25s; }
[data-boost-text="wave"] span:nth-child(7) { animation-delay: 0.3s; }
[data-boost-text="wave"] span:nth-child(8) { animation-delay: 0.35s; }
[data-boost-text="wave"] span:nth-child(9) { animation-delay: 0.4s; }
[data-boost-text="wave"] span:nth-child(10) { animation-delay: 0.45s; }

/* =============================================================================
   TYPEWRITER (JS-powered, CSS cursor)
   ============================================================================= */

[data-boost-text="typewriter"] {
    display: inline;
}

[data-boost-text="typewriter"]::after {
    content: '|';
    display: inline-block;
    animation: boost-cursor-blink 0.7s step-end infinite;
    margin-left: 2px;
    font-weight: 100;
}

[data-boost-text="typewriter"][data-boost-text-cursor="false"]::after {
    display: none;
}

[data-boost-text="typewriter"].is-complete::after {
    display: none;
}

@keyframes boost-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =============================================================================
   COUNTER (JS-powered)
   ============================================================================= */

[data-boost-text="counter"] {
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   SCRAMBLE (JS-powered)
   ============================================================================= */

[data-boost-text="scramble"] {
    font-family: inherit;
}

/* =============================================================================
   TEXT-SHADOW (hover: depth shadow appears)
   ============================================================================= */

[data-boost-text="text-shadow"] {
    display: inline-block;
    text-shadow: none;
    transition: text-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-text="text-shadow"]:hover {
    text-shadow:
        2px 2px 0 var(--boost-accent, #6366f1),
        4px 4px 0 rgba(0,0,0,0.1);
}

/* =============================================================================
   GLITCH (always: distortion flicker)
   ============================================================================= */

[data-boost-text="glitch"] {
    position: relative;
    display: inline-block;
    animation: boost-text-glitch 3s infinite;
}

[data-boost-text="glitch"]::before,
[data-boost-text="glitch"]::after {
    content: attr(data-boost-text-content);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0);
}

[data-boost-text="glitch"]::before {
    color: var(--boost-accent, #6366f1);
    animation: boost-glitch-before 3s infinite;
}

[data-boost-text="glitch"]::after {
    color: var(--boost-accent-alt, #ec4899);
    animation: boost-glitch-after 3s infinite;
}

@keyframes boost-text-glitch {
    0%, 95%, 100% { transform: none; }
    96% { transform: translate(-2px, 1px); }
    97% { transform: translate(2px, -1px); }
}

@keyframes boost-glitch-before {
    0%, 94%, 100% { clip-path: inset(0); opacity: 0; }
    95% { clip-path: inset(20% 0 60% 0); opacity: 1; transform: translate(-3px); }
    97% { clip-path: inset(40% 0 20% 0); opacity: 1; transform: translate(3px); }
}

@keyframes boost-glitch-after {
    0%, 93%, 100% { clip-path: inset(0); opacity: 0; }
    94% { clip-path: inset(60% 0 10% 0); opacity: 1; transform: translate(2px); }
    96% { clip-path: inset(10% 0 70% 0); opacity: 1; transform: translate(-2px); }
}

/* =============================================================================
   RAINBOW (always: cycling rainbow gradient)
   ============================================================================= */

[data-boost-text="rainbow"] {
    display: inline-block;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ec4899, #ef4444);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: boost-text-rainbow 4s linear infinite;
}

@keyframes boost-text-rainbow {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* =============================================================================
   STAMP (view-triggered: scale bounce in)
   ============================================================================= */

[data-boost-text="stamp"] {
    display: inline-block;
    opacity: 0;
    transform: scale(2);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-boost-text="stamp"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* =============================================================================
   SLIDE-RIGHT (view-triggered: slide from left)
   ============================================================================= */

[data-boost-text="slide-right"] {
    display: inline-block;
    opacity: 0;
    transform: translateX(-1em);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-text="slide-right"].is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =============================================================================
   ROTATE-IN (view-triggered: rotate + fade)
   ============================================================================= */

[data-boost-text="rotate-in"] {
    display: inline-block;
    opacity: 0;
    transform: rotate(-5deg) translateY(0.3em);
    transform-origin: left bottom;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-text="rotate-in"].is-visible {
    opacity: 1;
    transform: rotate(0) translateY(0);
}