/**
 * auth-animations.css
 *
 * Minimal motion for Ndovesha auth pages (login & signup):
 *
 *   1. Looping typewriter caret on .brand-headline (driven by
 *      auth-animations.js — repeats every ~3 seconds).
 *   2. A soft pulsing glow border on the primary .auth-btn so the CTA
 *      breathes gently without distracting from the form.
 *
 * Everything else (form fields, sub-text, product pills, badge, logo,
 * header) renders immediately on page load. Per design:
 *   "remove animations on the form field side, apart from the buttons
 *    being popping the border... left side: only the typing on the
 *    heading, repeating every 3s".
 *
 * Accessibility:
 *   - Respects prefers-reduced-motion (caret blink + glow pulse off).
 *   - Caret carries aria-hidden="true" (set by JS).
 *   - No animation affects form field usability or tab order.
 */

/* ------------------------------------------------------------------ */
/* Keyframes                                                           */
/* ------------------------------------------------------------------ */

@keyframes auth-caret-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes auth-btn-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(254, 191, 15, 0.55); }
    50%      { box-shadow: 0 0 0 14px rgba(254, 191, 15, 0); }
}

/* ------------------------------------------------------------------ */
/* Typewriter caret (inserted by JS into .brand-headline spans)        */
/* ------------------------------------------------------------------ */

.typewriter-caret {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    background: #FEBF0F;
    margin-left: 4px;
    vertical-align: middle;
    transform: translateY(-0.05em);
    animation: auth-caret-blink 0.75s step-end infinite;
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(254, 191, 15, 0.5);
}

/* ------------------------------------------------------------------ */
/* Pulsing glow on primary CTA buttons (JS adds .ready on load)        */
/* ------------------------------------------------------------------ */

.auth-btn.ready {
    animation: auth-btn-glow 2.4s ease-out 0.4s infinite;
}

/* Pause the glow while the user is interacting with the button so the
   pulse doesn't fight with the hover/focus shadow in the inline CSS. */
.auth-btn.ready:hover,
.auth-btn.ready:focus,
.auth-btn.ready:active {
    animation-play-state: paused;
}

/* ------------------------------------------------------------------ */
/* Accessibility — reduced motion                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .typewriter-caret {
        animation: none !important;
        opacity: 0 !important;
    }
    .auth-btn.ready {
        animation: none !important;
    }
}