/* CRT Obrazovka, Sklo, Efekty, Film Strip, Zoom Slider a Animácie */
@layer components {
    .search {
        & .search__screen-container {
            display: flex;
            gap: var(--space-m);
            align-items: stretch;
            position: relative;

            @media (max-width: 768px) {
                flex-grow: 1; /* Kontajner obrazovky vyplní dostupný priestor */
                min-height: 0; /* Umožní scrollovanie vnútri flex potomka */
                overflow: hidden;
                flex-direction: column;
            }
        }

        & .search__screen {
            margin: 10px;
            position: relative;
            flex-grow: 1;
            aspect-ratio: 4 / 3;
            background: var(--color-screen-bg);
            border-radius: 10% / 10%;
            overflow: hidden;
            border: 15px solid #1a1a1a;
            box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9);

            @media (max-width: 768px) {
                aspect-ratio: auto;
                flex-grow: 1; /* Obrazovka vyplní kontajner */
                min-height: 0; /* Dôležité pre flexibilitu */
                margin: 5px;
                border-width: 8px;
            }

            & .search__screen-glass {
                position: absolute;
                inset: 0;
                z-index: 15; /* Zvýšené, aby odlesk bol nad všetkým */
                background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.3) 100%);
                pointer-events: none;

                /* Sklenený odlesk (Glare) */
                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 25%, #7272726e 50%, #ffffff00 100%);
                    pointer-events: none;
                }
            }

            & .search__screen-content {
                position: relative;
                z-index: 2;
                height: 100%;
                color: var(--color-phosphor);
                text-shadow:
                        0 0 5px var(--color-phosphor-glow),
                        1px 0 1px rgba(255,0,0,0.5),
                        -1px 0 1px rgba(0,0,255,0.5); /* Chromatická aberácia */
                padding: 1cm;
                overflow-y: auto;
                scrollbar-width: none;
                animation: flicker 0.15s infinite;

                @media (max-width: 768px) {
                    padding: 0.5cm;
                }

                &::-webkit-scrollbar {
                    display: none;
                }
            }

            & .search__scanlines {
                position: absolute;
                inset: 0;
                z-index: 3;
                background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
                background-size: 100% 4px, 3px 100%;
                pointer-events: none;
                mix-blend-mode: overlay;
            }

            & .search__noise {
                position: absolute;
                inset: 0;
                z-index: 4;
                opacity: 0.05;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
                pointer-events: none;
            }

            & .search__vignette {
                position: absolute;
                inset: 0;
                z-index: 6;
                background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
                pointer-events: none;
            }

            & .search__bulge {
                position: absolute;
                inset: 0;
                z-index: 7;
                pointer-events: none;
                background: radial-gradient(circle at center, rgb(163 195 168 / 44%) 0%, transparent 70%);
                /* Simulácia zaoblenia pomocou tieňa na okrajoch */
                box-shadow: inset 0 0 100px rgb(109 109 109 / 80%);
            }

            & .search__fingerprints {
                position: absolute;
                inset: 0;
                z-index: 8;
                opacity: 0.25;
                pointer-events: none;
                background: radial-gradient(circle at 80% 85%, rgba(255, 255, 255, 0.4) 0%, transparent 20%),
                radial-gradient(circle at 15% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 15%),
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 35%),
                radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.2) 0%, transparent 15%);
                filter: blur(8px);
                mix-blend-mode: screen;
            }

            & .search__scratches {
                position: absolute;
                inset: 0;
                z-index: 9;
                opacity: 0.1;
                pointer-events: none;
                background-image: linear-gradient(45deg, transparent 49%, #fff 50%, transparent 51%),
                linear-gradient(110deg, transparent 49%, #fff 50%, transparent 51%);
                background-size: 100px 100px, 200px 200px;
                background-repeat: no-repeat;
                background-position: 20% 30%, 70% 60%;
            }

            & .search__flash {
                position: absolute;
                inset: 0;
                z-index: 10;
                background: #fff;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.1s ease-in;

                &[data-active="true"] {
                    opacity: 1;
                    transition: opacity 0.05s ease-out;
                }
            }
        }

        /* Film Strip */
        & .search__film-strip {
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: transform 0.3s ease-out, filter 0.3s ease-out;

            &[data-reset="true"] {
                filter: blur(10px);
            }
        }

        & .search__film-divider {
            height: 20px;
            background: #000;
        }

        /* Zoom Slider */
        & .search__zoom-container {
            width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-s);
            padding: var(--space-s);
            border-radius: 4px;

            @media (max-width: 768px) {
                width: 100%;
                flex-direction: row;
                justify-content: center;
                gap: var(--space-m);
                padding-block: var(--space-s);
            }

            & .search__zoom-label {
                /* Štýlovanie ZOOM popisu ako Dymo štítku */
                display: inline-block;
                background: #000;
                color: #fff;
                padding: 2px 8px;
                border-radius: 2px;
                font-family: var(--font-retro);
                font-size: 10px;
                font-weight: bold;
                letter-spacing: 1px;
                box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
                text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.1);
                margin-bottom: 4px;

                @media (max-width: 768px) {
                    margin-bottom: 0;
                }
            }

            & .search__slider {
                appearance: none;
                width: 155px;
                height: 10px;
                background: #333;
                outline: none;
                transform: rotate(-90deg) translateY(-1px);
                margin-top: 93px;
                border-radius: 5px;

                @media (max-width: 768px) {
                    transform: none;
                    margin-top: 0;
                    width: 60%;
                }

                &::-webkit-slider-thumb {
                    appearance: none;
                    width: 25px;
                    height: 25px;
                    background: #888;
                    border: 2px solid #aaa;
                    cursor: pointer;
                    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
                }
            }
        }
    }

    @keyframes flicker {
        0%, 100% { opacity: 1; }
        33% { opacity: 0.98; }
        66% { opacity: 0.99; }
        77% { opacity: 0.97; }
    }
}