/**
 * Hero Word Animation - Enterprise-Grade
 *
 * ANTI-CLS (Cumulative Layout Shift) Strategy:
 * - Fixed-width container prevents reflow
 * - GPU-accelerated properties only (opacity, transform)
 * - No width/height changes during animation
 * - Absolute positioning for word items
 *
 * Performance Optimizations:
 * - Uses transform instead of position changes
 * - Hardware acceleration with translate3d
 * - will-change hint for browser optimization
 * - Respects prefers-reduced-motion
 */

/* ============================================
   FIXED-WIDTH CONTAINER (PREVENTS LAYOUT SHIFT)
   ============================================ */

.word-container {
    /*
     * CRITICAL: Fixed inline-block width prevents CLS
     * Width calculated based on longest word with buffer
     * Adjust this value based on your font-size and words
     */
    display: inline-block;
    position: relative;
    height: 1.2em;
    vertical-align: middle;
    bottom: 0.19em;

    overflow: visible;

    text-align: center;
    white-space: nowrap;

    /* Smooth width transition */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   WORD ITEM POSITIONING
   ============================================ */

.word-item {

    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    transform: translate3d(0, 20%, 0);
    transition:
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Hint browser to optimize these properties */
    will-change: opacity, transform;

    /* Prevent text selection during animation */
    user-select: none;
    -webkit-user-select: none;
}

/* Active word state */
.word-item.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    user-select: text;
    -webkit-user-select: text;
}

/* Exiting word state (slides up slightly) */
.word-item.exiting {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Desktop: maintain wider container */
@media (min-width: 1024px) {
    /* Dynamic width handled by JS */
}

/* Tablet: slightly smaller */
@media (max-width: 1023px) and (min-width: 768px) {
    /* Dynamic width handled by JS */
}

/* Mobile: compact but still fixed */
@media (max-width: 767px) {
    .word-container {
        height: 1.3em;
        /* Slightly taller for mobile fonts */
    }

    .word-item {
        /* Faster animation on mobile */
        transition-duration: 0.35s;
    }
}

/* Small mobile: very compact */
@media (max-width: 480px) {
    /* Dynamic width handled by JS */
}

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

@media (prefers-reduced-motion: reduce) {
    .word-item {
        /* Disable slide animation, keep fade only */
        transform: translate3d(0, 0, 0) !important;
        transition: opacity 0.2s ease !important;
    }

    .word-item.active {
        opacity: 1;
    }

    .word-item.exiting {
        opacity: 0;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .word-container {
        width: auto;
        overflow: visible;
    }

    .word-item {
        position: static;
        opacity: 0 !important;
    }

    .word-item.active {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   FALLBACK FOR NO-JS
   ============================================ */

.no-js .word-item {
    position: static;
    opacity: 0;
}

.no-js .word-item.active {
    opacity: 1;
}

/* ============================================
   PERFORMANCE OPTIMIZATION HINTS
   ============================================ */

/*
 * Force hardware acceleration on the container
 * Creates a new layer for smoother animations
 */
.word-container {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* top: 0.11em; Removed to fix baseline */
}

/* Prevent font rendering shifts */
.word-item {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* top: 0.11em; Removed to fix baseline */
}