.block__first {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    background: transparent;
}

.neon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 10%;
}

.glow {
    height: 100%;
    width: 100%;
    position: absolute;
    /* background: radial-gradient(circle at center, #75ff002b 0%, transparent 56%); */
    top: 10%;
}

.neon__name {
    --threed-color: #1f4e00;
    --border-color: #6fff31;
    --border-width: 1px;
    --color: #173517;
    /* --shadow-color: #618050; */

    color: var(--color);
    font-size: 160px;
    font-weight: 700;
    
    display: flex;
    scale: 1.15;
    justify-content: center;
    align-items: center;
    animation: neonFlicker 3s ease-in-out infinite;
    /* filter: blur(1px); */
    /* filter: drop-shadow(0px 0px 116px var(--shadow-color)); */

}

.neon__name span {
    text-shadow: 0px 0px 20px #9bcca7;
    font-family: "Alegreya Sans SC";
    -webkit-text-stroke: var(--border-width) var(--border-color);
    scale: 1.1 0.7;
    font-weight: 300;
}

.neon__ring {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: pulseRing 4s infinite alternate;
}

.neon__ring--big {
    width: min(85vw, 540px);
    height: min(76vw, 460px);
    border: 6px solid #fff;
    box-shadow: 0 0 35px 30px rgb(44 159 49 / 65%),0 0 35px 30px rgb(44 159 49 / 65%) inset;
    animation: ringRotate 24s infinite linear, ringFlicker 3s ease-in-out infinite;
}

.neon__ring--medium {
    width: min(97vw, 600px);
    height: min(64vw, 450px);
    border: 4.5px solid #fff;
    box-shadow: 0 0 35px 20px rgb(44 159 49 / 65%),0 0 35px 20px rgb(44 159 49 / 65%) inset;
    animation: ringRotateRev 20s infinite linear, ringFlicker 3.2s ease-in-out infinite;
}

.neon__ring--small {
    width: min(48vw, 320px);
    height: min(62vw, 420px);
    border: 3px solid #fff;
    box-shadow: 0 0 35px 10px rgb(44 159 49 / 65%),0 0 35px 10px rgb(44 159 49 / 65%) inset;
    animation: ringRotate 18s infinite linear reverse, ringFlicker 2.8s ease-in-out infinite;
}

@media (max-width: 768px) {
    .neon__ring--big {
        box-shadow: 0 0 19px 10px rgba(211, 255, 213, 0.45), 0 0 19px 10px rgba(208, 255, 210, 0.45) inset;
        border: 3px solid #fff;
    }
    
    .neon__ring--medium {
        box-shadow: 0 0 19px 10px rgba(211, 255, 213, 0.45), 0 0 19px 10px rgba(208, 255, 210, 0.45) inset;
        border: 2px solid #fff;
    }
    
    .neon__ring--small {
        box-shadow: 0 0 19px 10px rgba(211, 255, 213, 0.45), 0 0 19px 10px rgba(208, 255, 210, 0.45) inset;
        border: 1px solid #fff;
    }
}

/* Animations */
@keyframes ringRotate {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ringRotateRev {
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes pulseRing {
    100% { transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes neonFlicker {
    /* Обычная пульсация */
    0%, 100% { opacity: 1; }
    50% { opacity: 1; }
    
    /* Моргание (отключение на доли секунды каждые ~10 секунд) */
    /* Первое отключение */
    90.0% { opacity: 1; }
    90.2% { opacity: 0.05; }
    90.45% { opacity: 0.03; }
    90.7% { opacity: 1; }
    
    /* Второе отключение подряд (эффект скачка напряжения) */
    91.9% { opacity: 1; }
    92.0% { opacity: 0.05; }
    92.2% { opacity: 0.02; }
    92.35% { opacity: 1; }
}

@keyframes ringFlicker {
    0%, 100% { 
        opacity: 1;
        border-color: rgba(215, 255, 202, 0.7);
    }
    50% { 
        opacity: 0.88;
        border-color: rgba(215, 255, 202, 0.7);
    }
    
    /* Синхронное моргание с текстом */
    90.0% { opacity: 1; }
    90.2% { opacity: 0.05; }
    90.45% { opacity: 0.03; }
    90.7% { opacity: 1; }
    
    91.9% { opacity: 1; }
    92.0% { opacity: 0.05; }
    92.2% { opacity: 0.02; }
    92.35% { opacity: 1; }
}

.tv-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.4"/%3E%3C/svg%3E');
  background-repeat: repeat;
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: static-move 0.15s steps(2) infinite;
}

.tv-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f310f30;
    pointer-events: none;
    mix-blend-mode: multiply;
    mask-image: radial-gradient(circle at center, black 60%, transparent 95%);
}

@keyframes static-move {
    100% { background-size: 200% 200%; opacity: 1; }
}



.neon__name--mobile {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/* Responsive */
@media (max-width: 768px) {
    .neon__name { scale: 0.7; }
    .neon__name--desktop {
        display: none;
    }
    .neon__name--mobile { 
        display: flex;
    }
}
@media (max-width: 590px) {
    .neon__name { scale: 0.6; }
}
@media (max-width: 500px) {
    .neon__name { scale: 0.5; }
}
@media (max-width: 420px) {
    .neon__name {
        scale: 0.45;
    }
}

.neon__name span:nth-child(1) {
    /* O */
    text-shadow: 
        /* 0px 0px 20px var(--threed-color),  */
        /* 0px 0px 20px var(--threed-color),  */
        21px 0px 0px var(--threed-color), 
        17px 0px 0px var(--threed-color), 
        13px 0px 0px var(--threed-color), 
        6px 0px 0px var(--threed-color),
        
        0px 0px 15px var(--border-color)
        /* 0px 0px 90px rgba(255, 255, 255, 0.6), */
        /* 0px 0px 120px rgba(255, 255, 255, 0.3) */
        ;
    z-index: 2;
}
.neon__name span:nth-child(2) {
    /* V */
    text-shadow: 
        /* 0px 0px 20px var(--threed-color),  */
        /* 0px 0px 20px var(--threed-color),  */
        17px 0px 0px var(--threed-color), 
        10px 0px 0px var(--threed-color), 
        4px 0px 0px var(--threed-color),
        
        0px 0px 15px var(--border-color)
        /* 0px 0px 80px rgba(255, 255, 255, 0.6), */
        /* 0px 0px 110px rgba(255, 255, 255, 0.3) */
        ;
    z-index: 3;
    font-size: 170px;
}
.neon__name span:nth-child(3) {
    /* E */
    text-shadow: 
        /* 0px 0px 20px var(--threed-color),  */
        /* 0px 0px 20px var(--threed-color),  */
        13px 0px 0px var(--threed-color), 
        10px 0px 0px var(--threed-color), 
        5px 0px 0px var(--threed-color),
        
        0px 0px 15px var(--border-color)
        /* 0px 0px 85px rgba(255, 255, 255, 0.6), */
        /* 0px 0px 115px rgba(255, 255, 255, 0.3) */
        ;
    z-index: 4;
    font-size: 175px;
}
.neon__name span:nth-child(4) {
    /* R */
    text-shadow: 
        /* 0px 0px 20px var(--threed-color),  */
        /* 0px 0px 20px var(--threed-color),  */
        3px 0px 0px var(--threed-color),
        6px 0px 0px var(--threed-color),
        
        0px 0px 15px var(--border-color)
        /* 0px 0px 75px rgba(255, 255, 255, 0.6), */
        /* 0px 0px 105px rgba(255, 255, 255, 0.3) */
        ;
    z-index: 5;
    font-size: 180px;
}
.neon__name span:nth-child(5) {
    /* W */
    text-shadow: 
        /* 0px 0px 20px var(--threed-color),  */
        /* 0px 0px 20px var(--threed-color), */
        -10px 0px 0px var(--threed-color), 
        -5px 0px 0px var(--threed-color),
        
        0px 0px 15px var(--border-color)
        /* 0px 0px 90px rgba(255, 255, 255, 0.6), */
        /* 0px 0px 120px rgba(255, 255, 255, 0.3) */
        ;
    z-index: 4;
    font-size: 175px;
}
.neon__name span:nth-child(6) {
    /* E */
    text-shadow: 
        /* 0px 0px 20px var(--threed-color),  */
        /* 0px 0px 20px var(--threed-color),  */
        -17px 0px 0px var(--threed-color), 
        -10px 0px 0px var(--threed-color), 
        -4px 0px 0px var(--threed-color),
        
        0px 0px 15px var(--border-color)
        /* 0px 0px 80px rgba(255, 255, 255, 0.6), */
        /* 0px 0px 110px rgba(255, 255, 255, 0.3) */
        ;
    z-index: 3;
    font-size: 170px;
}
.neon__name span:nth-child(7) {
    /* B */
    text-shadow: 
        /* 0px 0px 20px var(--threed-color), */
        /* 0px 0px 20px var(--threed-color),  */
        -21px 0px 0px var(--threed-color), 
        -17px 0px 0px var(--threed-color), 
        -13px 0px 0px var(--threed-color), 
        -6px 0px 0px var(--threed-color),
        
        0px 0px 15px var(--border-color)
        /* 0px 0px 90px rgba(255, 255, 255, 0.6), */
        /* 0px 0px 120px rgba(255, 255, 255, 0.3); */
        ;
    z-index: 2;
}


.matrix-ring {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    white-space: pre;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(50, 255, 100, 0.25);
    text-shadow: 0 0 5px #0f0, 0 0 2px #0f0;
    overflow: hidden;
    z-index: 0;
    opacity: 0.7;
}
/* вращающиеся строки кода */
.matrix-ring--big-code {
    width: min(92vw, 600px);
    height: min(92vw, 600px);
    font-size: 14px;
    animation: ringRotateMatrix 25s infinite linear;
}
.matrix-ring--medium-code {
    width: min(78vw, 500px);
    height: min(78vw, 500px);
    font-size: 11px;
    animation: ringRotateMatrixRev 22s infinite linear;
}
.matrix-ring--small-code {
    width: min(55vw, 400px);
    height: min(55vw, 400px);
    font-size: 9px;
    animation: ringRotateMatrix 19s infinite linear reverse;
}
/* лента символов внутри колец (псевдоэлементы с кодом) */
.matrix-ring::before {
    content: attr(data-code);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%, -50%) rotate(0deg);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #f00;
    opacity: 0.65;
    text-shadow: 0 0 3px #2eff7a;
    white-space: normal;
    word-break: break-word;
    padding: 20px;
    line-height: 1.5;
    letter-spacing: 2px;
}


/* АНИМАЦИИ колец */
@keyframes ringRotate {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ringRotateRev {
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes ringRotateMatrix {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ringRotateMatrixRev {
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes pulseRing {
    100% { transform: translate(-50%, -50%) scale(1.02); }
}