/* =============================================
 * PAGE HEADER ANIMATION — Styles
 * ============================================= */

.page-header {
    position: relative;
    overflow: hidden; /* contain the rolling ball */
}

/* Hide content initially to prevent flash */
.page-header h1 {
    opacity: 0;
    will-change: opacity, transform;
}
.page-header p.subtitle {
    opacity: 0;
    will-change: opacity, transform;
}

/* Individual animated letters/words */
.header-anim-letter {
    display: inline-block;
    will-change: transform, opacity;
}

/* The rolling SVG ball */
.header-anim-ball {
    position: absolute;
    width: 45px;
    height: 45px;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
    will-change: transform, opacity;
}

/* Light wave effect */
.header-light-wave {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 200, 83, 0.8);
    box-shadow: 0 0 12px rgba(0, 200, 83, 0.4);
    z-index: 4;
}

/* ── Fallback if JS fails ── */
.page-header.anim-ready h1,
.page-header.anim-ready p.subtitle {
    opacity: 1;
}