/**
 * Hero Text Animation - Typewriter effect for K12 hero title
 * "Find the perfect School" → "Find the perfect School Ride"
 *
 * Animation: Character-by-character reveal with validation bounce
 * Security: Pure CSS animations, no inline styles, safe DOM manipulation
 * Accessibility: Respects prefers-reduced-motion, screen reader friendly
 */

/* ================================================================
   CONTAINER & SPACING
   ================================================================ */

.hero-title #animatedText {
    white-space: nowrap;
}

/* ================================================================
   TYPEWRITER CURSOR EFFECT
   ================================================================ */

.dynamic-word::after {
    content: '|';
    opacity: 0;
    animation: blink 0.7s step-end infinite;
    margin-left: 2px;
}

.dynamic-word.typing::after {
    opacity: 1;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ================================================================
   CHARACTER FADE-IN (TYPEWRITER EFFECT)
   ================================================================ */

@keyframes charFadeIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Applied dynamically to each character span */

/* ================================================================
   VALIDATION BOUNCE EFFECT
   ================================================================ */

@keyframes validateWord {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(0.98);
    }
    75% {
        transform: scale(1.02);
    }
}

.dynamic-word.validating {
    animation: validateWord 0.5s ease-in-out;
}

/* ================================================================
   FADE TRANSITION FOR RESET
   ================================================================ */

.dynamic-word {
    transition: opacity 0.5s ease-out;
}

/* ================================================================
   SOLID COLOR TEXT FOR CRISP RENDERING
   ================================================================ */

.hero-title .static-word,
.hero-title .dynamic-word {
    color: #222222;  /* Solid dark gray - no gradient blur */
    display: inline-block;
    font-weight: 600;  /* Slightly bolder for crisp edges */

    /* Anti-aliasing for sharp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Ensure individual character spans inherit styling */
.hero-title .dynamic-word span {
    color: inherit;
    font-weight: inherit;

    /* Inherit anti-aliasing from parent */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ================================================================
   SCREEN READER ONLY CLASS
   ================================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ================================================================
   ACCESSIBILITY: REDUCED MOTION SUPPORT
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .dynamic-word::after,
    .dynamic-word,
    .dynamic-word * {
        animation: none !important;
        transition: none !important;
    }

    /* For reduced motion, show all content immediately */
    .dynamic-word {
        opacity: 1 !important;
    }
}

/* ================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================ */

/* GPU acceleration for smooth animations */
.dynamic-word,
.dynamic-word span {
    will-change: transform, opacity;
}

/* Cleanup after animation completes */
.dynamic-word.animation-complete {
    will-change: auto;
}