/**
 * Clock Transition Smoothing
 * Prevents jarring greeting change when JavaScript updates from server time
 */

/* Smooth transition for greeting changes */
.header-greeting {
    transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Briefly fade during update to make change less jarring */
.header-greeting.updating {
    opacity: 0.7;
}

/* Smooth transitions for all clock elements */
.header-time,
.header-date {
    transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Optional: Hide clock initially until JavaScript loads */
/* Uncomment these lines if you still see flashing */
/*
.no-js .header-greeting {
    opacity: 0.8;
}

body:not(.no-js) .header-greeting {
    opacity: 1;
}
*/