/* ==========================================================================
   anim-text.css — Text-specific scroll animations
   Namespace: .anim-text-*
   Trigger: IntersectionObserver + anim-text.js
   ========================================================================== */

/* -------------------------------------------------------------------
   1. Word Reveal — words appear one by one from below
   Usage: <h1 class="anim-text-reveal">Save Thousands on Energy</h1>
   JS splits into <span class="anim-text-word"> wrappers
   ------------------------------------------------------------------- */

.anim-text-reveal {
    overflow: hidden;
}

.anim-text-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger each word with increasing delay */
.anim-text-reveal.is-visible .anim-text-word {
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------------------
   2. Gradient Shimmer — shimmering gradient sweep across text
   Usage: <h2 class="anim-text-shimmer">Why Go Solar?</h2>
   ------------------------------------------------------------------- */

.anim-text-shimmer {
    background: linear-gradient(
        90deg,
        currentColor 0%,
        currentColor 40%,
        var(--color-accent, #3b82f6) 50%,
        currentColor 60%,
        currentColor 100%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.anim-text-shimmer.is-visible {
    animation: anim-text-shimmer-sweep 1.8s ease forwards;
}

@keyframes anim-text-shimmer-sweep {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

/* -------------------------------------------------------------------
   3. Counter — animate numbers from 0 to target
   Usage: <span class="anim-text-count" data-count-to="10000">0</span>
   JS handles the counting, CSS smooths the display
   ------------------------------------------------------------------- */

.anim-text-count {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    transition: transform 0.3s ease;
}

/* -------------------------------------------------------------------
   4. Typewriter — text types out character by character
   Usage: <p class="anim-text-type" data-type-speed="40">Your text here</p>
   JS handles typing, CSS provides cursor
   ------------------------------------------------------------------- */

.anim-text-type {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-accent, #3b82f6);
    width: 0;
    transition: none;
}

.anim-text-type.is-visible {
    animation: anim-text-type-cursor 0.7s step-end infinite;
}

.anim-text-type.is-done {
    border-right-color: transparent;
    animation: none;
}

@keyframes anim-text-type-cursor {
    from, to { border-color: var(--color-accent, #3b82f6); }
    50% { border-color: transparent; }
}

/* -------------------------------------------------------------------
   5. Fade-up lines — each line of a paragraph fades in
   Usage: <p class="anim-text-lines">Line one<br>Line two<br>Line three</p>
   JS wraps each line in a span
   ------------------------------------------------------------------- */

.anim-text-line {
    display: block;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.anim-text-lines.is-visible .anim-text-line {
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .anim-text-word,
    .anim-text-line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .anim-text-shimmer {
        -webkit-text-fill-color: currentColor;
        animation: none !important;
    }
    .anim-text-type {
        width: auto !important;
        border-right: none;
        animation: none !important;
    }
}