/* --------------------------------------------------------------
   rays.css – световые лучи
   -------------------------------------------------------------- */

.rays-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: transparent;
    overflow: hidden;
}

/* первая полоса */
.rays-overlay::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -150%;
    width: 300%;
    height: 300%;
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 45%,
        rgba(255,255,255,0.15) 47%,
        rgba(255,255,255,0) 49%,
        rgba(255,255,255,0) 100%
    );
    mix-blend-mode: screen;
    opacity: 1;
    animation: ray-move-1 var(--ray-duration-1, 4.5s) linear infinite;
}

/* вторая полоса */
.rays-overlay::after {
    content: "";
    position: absolute;
    top: -150%;
    left: -150%;
    width: 300%;
    height: 300%;
    background: repeating-linear-gradient(
        -30deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,0.12) 42%,
        rgba(255,255,255,0) 44%,
        rgba(255,255,255,0) 100%
    );
    mix-blend-mode: screen;
    opacity: 1;
    animation: ray-move-2 var(--ray-duration-2, 5.2s) linear infinite;
}

/* третья полоса – отдельный элемент (нужен в разметке) */
.rays-overlay .ray-3 {
    position: absolute;
    top: -150%;
    left: -150%;
    width: 300%;
    height: 300%;
    background: repeating-linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 50%,
        rgba(255,255,255,0.10) 52%,
        rgba(255,255,255,0) 54%,
        rgba(255,255,255,0) 100%
    );
    mix-blend-mode: screen;
    opacity: 1;
    animation: ray-move-3 var(--ray-duration-3, 6s) linear infinite;
}

/* -------------------- анимации -------------------- */
@keyframes ray-move-1 {
    0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.4; }
    90%  { opacity: 0.4; }
    100% { transform: translate(50%, 50%) rotate(360deg); opacity: 0; }
}
@keyframes ray-move-2 {
    0%   { transform: translate(-70%, -30%) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.3; }
    90%  { opacity: 0.3; }
    100% { transform: translate(70%, 30%) rotate(360deg); opacity: 0; }
}
@keyframes ray-move-3 {
    0%   { transform: translate(-30%, -70%) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.35; }
    90%  { opacity: 0.35; }
    100% { transform: translate(30%, 70%) rotate(360deg); opacity: 0; }
}

/* скрытый слой */
.rays-overlay.hidden { display: none; }

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rays-overlay,
    .rays-overlay::before,
    .rays-overlay::after,
    .rays-overlay .ray-3 {
        animation: none !important;
        opacity: 0 !important;
    }
}