/*  
* Style by D3NN7
* and Patrick Hlauke (https://codepen.io/patrickhlauke/pen/YaoBop)
*/

@keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
    }
    to {
      text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
    }
  }

.text-flicker {
    animation-duration: 0.01s;
    animation-name: textflicker;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.crt-filter::before,
.crt-filter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1.5px,
        rgba(0, 0, 0, 0.30) 1.5px,
        rgba(0, 0, 0, 0.30) 3px
    );
    pointer-events: none;
    z-index: 5;
    animation: crt-scanline-flicker 0.32s steps(2) infinite;
}

img.crt-image {
    animation: crt-image-glitch 4s steps(1) infinite;
    box-shadow:
        3px 0 0 rgba(255, 71, 87, 0.3),
        -3px 0 0 rgba(0, 217, 255, 0.3);
}


@keyframes crt-scanline-flicker {
    0%,
    100% {
        opacity: 0.30;
    }
    50% {
        opacity: 0.17;
    }
}

@keyframes chromatic-jitter {
    0%,
    100% {
        box-shadow:
            3px 0 0 rgba(255, 71, 87, 0.3),
            -3px 0 0 rgba(0, 217, 255, 0.3);
    }
    50% {
        box-shadow:
            4px 1px 0 rgba(255, 71, 87, 0.4),
            -4px -1px 0 rgba(0, 217, 255, 0.4);
    }
}

.chromatic-jitter {
    animation: chromatic-jitter 3s steps(1) infinite;
}

/* @media (prefers-reduced-motion: reduce) {
    .crt-filter::before,
    .crt-filter::after {
        animation: none;
    }

    img.crt-image {
        animation: none;
    }
}*/

:root {
    --glitch-red: #ff4757;
    --glitch-cyan: #00d9ff;

    --color-pink: #ff6b9d;
    --color-success: #00ff87;
    --color-warning: #fffa65;

    --highlight-color: #a10d3f;
    --inactive-color: #555;
}
  
html {
         font-family: "Pixelated MS Sans Serif", Arial;
         color: #eee;
         font-size: 1em;
         line-height: 1;
         text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
         letter-spacing: 0.125em;
    }

    h1 { 
    font-size: 5em; 
    text-align: center;
  }

  a {
    color: white;
  }

body {
    background-color:hsla(0,0%,0%,1);
}

#background {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color:hsla(0,0%,0%,1);
    background-image:
    radial-gradient(at 80% 70%, hsla(206,42%,7%,1) 0px, transparent 50%),
    radial-gradient(at 4% 55%, hsla(28,0%,0%,1) 0px, transparent 50%),
    radial-gradient(at 24% 70%, hsla(195,25%,15%,1) 0px, transparent 50%);
}

#monitor-vignette {

    aspect-ratio: 4 / 3;
    width: 60%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    border-radius: 24px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    perspective: 200px; 
}

#monitor-vignette {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)), url(images/screen_frame.png) no-repeat center/contain;
    box-shadow: 
        inset 0 0 80px rgba(0, 0, 0, 1);

}
#glass-container {
    width: 80%; /* Tożsame z szerokością monitor-screen */
    aspect-ratio: 4/3;
    position: absolute;
    /* Centralne ustawienie w stosunku do rodzica (monitor-vignette) */
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;


    background: 
        linear-gradient(167deg,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.50) 46%,
            rgba(255, 255, 255, 0.0) 47%,
            rgba(255, 255, 255, 0.0) 48%,
            rgba(255, 255, 255, 0.50) 49%,
            rgba(255, 255, 255, 0.0) 52%
        );
        
    mask-image: url(images/glass_texture.png);
    mask-mode: luminance;
    mask-size: cover;
    /* box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.10); */

}

#monitor-screen {
    aspect-ratio: 4 / 3;
    
    width: 80%; 
    height: auto;
    
    position: relative;
    overflow: hidden;
    border-radius: 16px; 
    box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
    filter: blur(0.3px) brightness(1.1) contrast(1.1);
    
    /* Twoja transformacja zachowana */
    transform: translateZ(0) rotateX(0.3deg) rotateY(-0.3deg);
    transition: transform 0.2s ease-out;
}

#monitor-screen::before, #monitor-screen::after{
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    pointer-events: none;
    z-index: 100;
    border-radius: 16px; 


    background:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 20%,
            rgba(255, 255, 255, 0.10) 30%, 
            rgba(255, 255, 255, 0.0) 40%,
            rgba(255, 255, 255, 0.12) 80%
        ),
        
        radial-gradient(
            circle at center,
            transparent 50%,
            rgba(0, 0, 0, 0.6) 100%
        );

    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.5);

    opacity: 0.8;
}

#crt-container {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    pointer-events: none;
    z-index: 99;
}   


/* Accessibility mode: disable animations */
.disable-animations .crt-filter::before,
.disable-animations .crt-filter::after,
.disable-animations img.crt-image {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 0.25 !important; /* Reduce intensity of scanlines and glitch */
}

.disable-animations .textflicker,
.disable-animations #monitor-screen {
    animation: none !important;
    text-shadow: none !important;
    transform: none !important;
    transition: none !important;
}