/* ============================================================================
   hero-fx.css  (Stage 2F-HOME-ONLY-REPAIR-C, Fix B)
   The HI MUSICIAN typing/glitch pieces the clean parent Sakura v3.3.9 DROPPED but
   the OLD SITE had. Migrated VERBATIM from old-site (prod) style.css. The glitch
   itself (.glitch / :before / :after / glitch-loop keyframes) is already identical
   in the parent and is NOT duplicated here.

   Root cause of the reported abnormality:
   - "typing 卡死/invisible": parent's .center-text has NO color; while typing (before
     the glitch class is added) the text inherited a dark colour and was invisible on
     the cover, so the type-out looked frozen. Prod .center-text is color:white (7016).
   - cursor showed as a literal "|": parent has NO .typing rule, so <span class="typing">
     rendered the raw pipe. Prod styles it as a 3px blinking block (8944) via @keyframes
     wink (which parent also lacks).
   ============================================================================ */

/* prod style.css 7011: white hero title so the typing is visible from the first char */
.center-text { color: white; -webkit-user-select: none; user-select: none; }

/* prod style.css 8944: the typing caret = 3px light-blue blinking block (the "|" is
   pushed off-screen by text-indent), blinking via @keyframes wink */
.typing {
    display: inline-block;
    margin-left: 3px;
    background-color: #B0F0FF;
    width: 3px;
    text-indent: -9999px;
    animation: wink 1.5s infinite;
}

/* prod style.css: caret blink */
@keyframes wink {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes wink {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}


/* WW mobile hero one-line fix: phones wrapped the 80px "HI, MUSICIAN" to two lines and the
   glitch overlay (:before/:after via attr(data-text), absolute) only aligned line 1 -> MUSICIAN
   lost the effect. clamp()+nowrap keeps it on ONE line at any width so glitch/typing covers it all. */
@media (max-width: 700px) {
    .center-text {
        font-size: clamp(28px, 11vw, 48px) !important;
        white-space: nowrap;
    }
}