/* Subtle grid background */
.grid-bg {
    background-image:
            linear-gradient(to right, rgba(34, 197, 94, 0.06) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(34, 197, 94, 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
    background-position: center;
}

/* Scanline overlay */
.scanline::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.00),
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.00)
    );
    mix-blend-mode: overlay;
    opacity: 0.35;
    animation: scan 8s linear infinite;
}

@keyframes scan {
    0% { transform: translateY(-25%); }
    100% { transform: translateY(25%); }
}
.typewriter{
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;

    border-right: 2px solid currentColor;

    width: 0;
    animation: typing 1.8s steps(16, end) .2s forwards,
    caret .7s step-end infinite;
}

/* 16 = number of characters in "Dakshitha Perera" */
@keyframes typing{
    from { width: 0; }
    to   { width: 16ch; }
}

@keyframes caret{
    50% { border-right-color: transparent; }
}
.name-rotate{
    position: relative;
    display: inline-block;
    perspective: 800px;
}

.name-rotate span{
    display: inline-block;
    backface-visibility: hidden;
    transition: transform .6s cubic-bezier(.4,0,.2,1),
    opacity .4s ease;
}

/* front (real name) */
.name-rotate .front{
    transform: rotateX(0deg);
}

/* back (alias) */
.name-rotate .back{
    position: absolute;
    inset: 0;
    transform: rotateX(-90deg);
    opacity: 0;
}

/* hover swap */
.name-rotate:hover .front{
    transform: rotateX(90deg);
    opacity: 0;
}

.name-rotate:hover .back{
    transform: rotateX(0deg);
    opacity: 1;
}

/* keep cursor aligned */
.typewriter{
    border-right: 2px solid currentColor;
}