/* WebRhinoc REAL Code Typing Content Patch v2
   This is not a slow fade.
   The page content is written live while scrolling.
   Once written, it stays visible.
*/

html.wr-code-reveal-ready main .wr-reveal-group{
    opacity:0;
    transform:translateY(14px);
}

html.wr-code-reveal-ready main .wr-reveal-group.wr-group-visible{
    opacity:1;
    transform:translateY(0);
    transition:
        opacity .22s ease,
        transform .42s cubic-bezier(.2,.8,.2,1);
}

/* Text is hidden because JS clears it, then types it back. */
.wr-live-type{
    position:relative;
}

.wr-live-type.wr-is-typing::after{
    content:"";
    display:inline-block;
    width:.52em;
    height:1em;
    margin-left:.08em;
    border-radius:2px;
    transform:translateY(.12em);
    background:linear-gradient(180deg, #c79549, #1e5b47);
    animation:wrLiveCursor .72s steps(2,end) infinite;
}

@keyframes wrLiveCursor{
    0%,45%{opacity:1;}
    46%,100%{opacity:0;}
}

/* Code feeling: each block receives a short command line flash. */
.wr-reveal-group{
    position:relative;
}

.wr-reveal-group.wr-group-visible::before{
    content:attr(data-wr-code-label);
    position:absolute;
    left:0;
    top:-18px;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size:10px;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(163,119,58,.72);
    opacity:0;
    pointer-events:none;
    animation:wrCommandFlash 1.25s ease forwards;
}

@keyframes wrCommandFlash{
    0%{opacity:0; transform:translateY(5px);}
    18%,62%{opacity:1; transform:translateY(0);}
    100%{opacity:0; transform:translateY(-5px);}
}

/* Cards do not just fade — they unlock first, then their text writes. */
.wr-card-shell{
    opacity:0;
    transform:translateY(18px) scale(.985);
}

.wr-card-shell.wr-card-visible{
    opacity:1;
    transform:translateY(0) scale(1);
    transition:
        opacity .24s ease,
        transform .42s cubic-bezier(.2,.8,.2,1);
}

/* Small premium scan line while text is being written */
.wr-live-type.wr-is-typing{
    background:
        linear-gradient(90deg, rgba(199,149,73,.10), transparent 72%);
    background-size:200% 100%;
    animation:wrTypeScan 1.4s linear infinite;
}

@keyframes wrTypeScan{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
}

/* Buttons keep their shape while text is empty */
a.wr-live-type,
button.wr-live-type{
    white-space:nowrap;
}

/* If user prefers less motion, still show everything normally */
@media (prefers-reduced-motion: reduce){
    html.wr-code-reveal-ready main .wr-reveal-group,
    .wr-card-shell{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }

    .wr-live-type.wr-is-typing::after{
        display:none!important;
    }
}