/* ==========================================================
   AN Title Typewriter v2 — typewriter.css
   agriculturenovel.co
   ========================================================== */

/* ── Shared: click affordance on idle title ────────────── */
.an-tt-ready {
    cursor: pointer !important;
    position: relative;
}

.an-tt-ready::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #5a9e6f;
    border-radius: 2px;
    transition: width 0.35s ease;
}

.an-tt-ready:hover::after {
    width: 100%;
}

/* Lock: no pointer during animation */
.an-tt-active {
    cursor: default !important;
    pointer-events: none;
}

/* ── ANIMATION 1: Typewriter cursor ────────────────────── */
.an-tt-cursor {
    display: inline-block;
    width: 2px;
    height: 0.82em;
    background: #5a9e6f;
    margin-left: 3px;
    vertical-align: middle;
    border-radius: 1px;
    animation: an-tt-blink 0.55s step-end infinite;
    transition: opacity 0.4s ease;
}

.an-tt-cursor.fade {
    opacity: 0;
}

@keyframes an-tt-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── ANIMATION 2: Scramble — each letter wrapper ────────── */
.an-tt-char {
    display: inline;
    transition: color 0.08s ease;
}

.an-tt-char.scrambling {
    color: #5a9e6f;
}

/* ── ANIMATION 3: Glitch ────────────────────────────────── */
.an-tt-glitching {
    position: relative;
    animation: an-tt-glitch-shake 0.08s infinite;
}

@keyframes an-tt-glitch-shake {
    0%   { transform: translate(0,       0); }
    20%  { transform: translate(-2px,  1px); }
    40%  { transform: translate( 2px, -1px); }
    60%  { transform: translate(-1px,  2px); }
    80%  { transform: translate( 1px, -2px); }
    100% { transform: translate(0,       0); }
}

/* ── ANIMATION 4: Wave — each letter cascades in ────────── */
.an-tt-wave-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.an-tt-wave-char.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Space chars in wave (non-breaking) */
.an-tt-wave-char.space {
    display: inline;
}

/* ── Reduced-motion: kill everything ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .an-tt-cursor    { animation: none; opacity: 1; }
    .an-tt-glitching { animation: none; }
    .an-tt-wave-char { transition: none; }
}