/* =========================================
   Light Ray Effect
   Pure CSS implementasyon, Canvas yok
   ========================================= */

:root {
    --lre-light-color: 100, 150, 255;
    --lre-light-blur: 60px;
    --lre-ray-1: rgba(var(--lre-light-color), .08);
    --lre-ray-2: rgba(var(--lre-light-color), .05);
    --lre-ray-3: rgba(var(--lre-light-color), .2);
    --lre-ray-4: rgba(var(--lre-light-color), .3);
    --lre-ray-5: rgba(var(--lre-light-color), .4);
}

#lre-canvas {
    display: none; /* canvas artık kullanılmıyor */
}

/* Sarmalayıcı div – body'ye sabitlenir */
#lre-wrap {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--lre-z-index, -1);
}

/* Ana ışık div'i */
#lre-wrap .lre-rays {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 70%;
    height: calc(100% + 50%);
    z-index: 1;
    opacity: 0;
    top: -80%;
    animation: lre-fade-in-down 2s ease-out forwards;

    --lre-stripes: repeating-linear-gradient(
        100deg,
        var(--lre-ray-1) 0,
        var(--lre-ray-1) 7%,
        transparent 10%,
        transparent 12%,
        var(--lre-ray-2) 16%
    );
    --lre-white-rays: repeating-linear-gradient(
        100deg,
        var(--lre-ray-3) 10%,
        var(--lre-ray-4) 15%,
        var(--lre-ray-1) 20%,
        var(--lre-ray-5) 25%,
        transparent 30%
    );

    background-image: var(--lre-stripes), var(--lre-white-rays);
    background-size:
        min(400%, 200vw) 200%,
        min(350%, 180vw) 150%;
    background-position: 50% 0, 50% 0;

    filter: blur(12px) opacity(.6) saturate(1.5);

    mask-image:
        radial-gradient(ellipse at 50% 0, black 30%, rgba(0,0,0,.7) 60%, transparent 90%),
        linear-gradient(to bottom, black 0, black 70%, transparent 100%),
        linear-gradient(to right, transparent 0, black 25%, black 75%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        radial-gradient(ellipse at 50% 0, black 30%, rgba(0,0,0,.7) 60%, transparent 90%),
        linear-gradient(to bottom, black 0, black 70%, transparent 100%),
        linear-gradient(to right, transparent 0, black 25%, black 75%, transparent 100%);
    -webkit-mask-composite: source-in;
}

/* Merkez glow – ::before */
#lre-wrap .lre-rays::before {
    content: "";
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: min(300%, 150vw);
    height: 120%;
    background: radial-gradient(
        ellipse at center top,
        rgba(var(--lre-light-color), .3),
        transparent 80%
    );
    filter: blur(var(--lre-light-blur));
    z-index: 0;
}

/* Hareketli üst katman – ::after */
#lre-wrap .lre-rays::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--lre-stripes), var(--lre-white-rays);
    background-size:
        min(350%, 180vw) 120%,
        min(300%, 150vw) 100%;
    animation: lre-animate 7.5s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    mask-image:
        radial-gradient(ellipse at 50% 0, black 30%, rgba(0,0,0,.7) 60%, transparent 90%),
        linear-gradient(to bottom, black 0, black 70%, transparent 100%),
        linear-gradient(to right, transparent 0, black 25%, black 75%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        radial-gradient(ellipse at 50% 0, black 30%, rgba(0,0,0,.7) 60%, transparent 90%),
        linear-gradient(to bottom, black 0, black 70%, transparent 100%),
        linear-gradient(to right, transparent 0, black 25%, black 75%, transparent 100%);
    -webkit-mask-composite: source-in;
}

/* Animasyonlar */
@keyframes lre-animate {
    0%   { background-position: 40% 0, 42% 0;   transform: scale(1)    rotate(0deg); }
    50%  { background-position: 50% 10%, 48% 8%; transform: scale(1.02) rotate(.5deg); }
    100% { background-position: 60% 0, 58% 0;   transform: scale(1)    rotate(-.5deg); }
}

@keyframes lre-fade-in-down {
    0%   { opacity: 0;   top: -80%; }
    100% { opacity: .8;  top: -50%; }
}

/* Mobil */
@media (max-width: 768px) {
    #lre-wrap .lre-rays {
        background-size:
            min(500%, 250vw) 200%,
            min(450%, 230vw) 150%;
    }
    #lre-wrap .lre-rays::before {
        width: min(350%, 180vw);
    }
    #lre-wrap .lre-rays::after {
        background-size:
            min(450%, 200vw) 120%,
            min(400%, 180vw) 100%;
    }
}