/* ==========================================================
   LEGENDE NA PRELOMU TISOČLETJA — INTRO
   Usklajeno z sl_intro_* HTML strukturo.
   Brez JS.
   ========================================================== */

.sl_intro {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    container-type: inline-size;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: var(--color_White);
    background: var(--color_Black);
}

    .sl_intro,
    .sl_intro * {
        box-sizing: border-box;
    }

        .sl_intro hr {
            margin: 0;
            padding: 0;
            border: 0;
            opacity: .5;
        }

.sl_intro_circles,
.sl_intro_road,
.sl_intro_house,
.sl_intro_statue,
.sl_intro_lights,
.sl_intro_background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sl_intro_circles {
    z-index: 0;
    opacity: .5;
}

.sl_intro_road,
.sl_intro_house,
.sl_intro_statue {
    z-index: 3;
}

.sl_intro_lights {
    z-index: 4;
}

.sl_intro_text {
    z-index: 5;
}

.sl_intro_circles svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sl_intro_circle_large {
    fill: none;
    stroke: var(--color_White);
    stroke-width: 1;
    stroke-dasharray: 1753;
    stroke-dashoffset: 1753;
    animation: sl_intro_circle_draw 1.5s ease forwards;
}

@keyframes sl_intro_circle_draw {
    to {
        stroke-dashoffset: 0;
    }
}

.sl_intro_road_line,
.sl_intro_house_line_1,
.sl_intro_house_line_2,
.sl_intro_house_line_3,
.sl_intro_house_line_4,
.sl_intro_house_line_5,
.sl_intro_house_line_6,
.sl_intro_house_line_7,
.sl_intro_house_line_8,
.sl_intro_statue_line_1,
.sl_intro_statue_line_2,
.sl_intro_statue_line_3,
.sl_intro_statue_line_4,
.sl_intro_statue_line_5,
.sl_intro_statue_line_6,
.sl_intro_statue_line_7,
.sl_intro_statue_line_8,
.sl_intro_statue_line_9,
.sl_intro_statue_line_10,
.sl_intro_statue_line_11,
.sl_intro_statue_line_12,
.sl_intro_statue_line_13,
.sl_intro_statue_line_14,
.sl_intro_statue_line_15,
.sl_intro_statue_line_16,
.sl_intro_light_line_1,
.sl_intro_light_line_2,
.sl_intro_light_line_3,
.sl_intro_light_line_4 {
    position: absolute;
    width: 0;
    height: var(--space_0_25);
    background: var(--color_White);
    transform-origin: bottom left;
    animation: sl_intro_line_draw var(--draw-duration, .12s) linear var(--draw-delay) forwards;
}

@keyframes sl_intro_line_draw {
    to {
        width: var(--draw-width);
    }
}

.sl_intro_road_line {
    left: 18.5%;
    top: 87.5%;
    --draw-width: 48%;
    --draw-delay: 2.10s;
    transform: rotate(10deg);
}

.sl_intro_house_line_1 {
    left: 2%;
    top: 36%;
    --draw-width: 25%;
    --draw-delay: 1.50s;
    transform-origin: top left;
    transform: rotate(-10deg);
}

.sl_intro_house_line_2 {
    left: 26.5%;
    top: 32%;
    --draw-width: 19%;
    --draw-delay: 1.62s;
    transform: rotate(142deg);
}

.sl_intro_house_line_3 {
    left: 2%;
    top: 59%;
    --draw-width: 10%;
    --draw-delay: 1.74s;
    transform: rotate(4deg);
}

.sl_intro_house_line_4 {
    left: 13%;
    top: 74%;
    --draw-width: 30%;
    --draw-delay: 1.86s;
    transform: rotate(-90deg);
}

.sl_intro_house_line_5 {
    left: 0;
    top: 45%;
    --draw-width: 10%;
    --draw-delay: 1.98s;
    transform: rotate(-8deg);
}

.sl_intro_house_line_6 {
    left: 26.5%;
    top: 32%;
    --draw-width: 7%;
    --draw-delay: 2.10s;
    transform: rotate(55deg);
}

.sl_intro_house_line_7 {
    left: 1%;
    top: 47%;
    --draw-width: 15%;
    --draw-delay: 2.34s;
    transform: rotate(45deg);
}

.sl_intro_house_line_8 {
    left: 13%;
    top: 76%;
    --draw-width: 10%;
    --draw-delay: 2.58s;
    transform: rotate(-2.5deg);
}

.sl_intro_statue_line_1 {
    left: 46.5%;
    top: 10.5%;
    --draw-width: 62%;
    --draw-delay: 1.62s;
    transform: rotate(98deg);
}

.sl_intro_statue_line_2 {
    left: 46.5%;
    top: 10.5%;
    --draw-width: 73%;
    --draw-delay: 1.74s;
    transform: rotate(81deg);
}

.sl_intro_statue_line_3 {
    left: 42.2%;
    top: 44%;
    --draw-width: 2.5%;
    --draw-delay: 2.10s;
    --draw-duration: .06s;
    transform: rotate(-6deg);
}

.sl_intro_statue_line_4 {
    left: 44.5%;
    top: 43.8%;
    --draw-width: 4%;
    --draw-delay: 2.16s;
    --draw-duration: .06s;
}

.sl_intro_statue_line_5 {
    left: 48.5%;
    top: 43.7%;
    --draw-width: 3.5%;
    --draw-delay: 2.22s;
    --draw-duration: .06s;
    transform: rotate(5deg);
}

.sl_intro_statue_line_6 {
    left: 43%;
    top: 36%;
    --draw-width: 2.5%;
    --draw-delay: 2.28s;
    --draw-duration: .06s;
    transform: rotate(-6deg);
}

.sl_intro_statue_line_7 {
    left: 45.5%;
    top: 35.7%;
    --draw-width: 3%;
    --draw-delay: 2.34s;
    --draw-duration: .06s;
}

.sl_intro_statue_line_8 {
    left: 48.5%;
    top: 35.7%;
    --draw-width: 2%;
    --draw-delay: 2.40s;
    --draw-duration: .06s;
    transform: rotate(6deg);
}

.sl_intro_statue_line_9 {
    left: 55%;
    top: 62.5%;
    --draw-width: 7%;
    --draw-delay: 2.34s;
    transform: rotate(180deg);
}

.sl_intro_statue_line_10 {
    left: 43%;
    top: 40%;
    --draw-width: 3%;
    --draw-delay: 2.46s;
    --draw-duration: .06s;
    transform: rotate(-6deg);
}

.sl_intro_statue_line_11 {
    left: 45%;
    top: 39.8%;
    --draw-width: 3.5%;
    --draw-delay: 2.52s;
    --draw-duration: .06s;
}

.sl_intro_statue_line_12 {
    left: 48.5%;
    top: 39.7%;
    --draw-width: 3%;
    --draw-delay: 2.58s;
    --draw-duration: .06s;
    transform: rotate(5deg);
}

.sl_intro_statue_line_13 {
    left: 56.5%;
    top: 83%;
    --draw-width: 7%;
    --draw-delay: 2.58s;
    transform: rotate(177deg);
}

.sl_intro_statue_line_14 {
    left: 53.5%;
    top: 53%;
    --draw-width: 5.5%;
    --draw-delay: 2.70s;
    transform: rotate(180deg);
}

.sl_intro_statue_line_15 {
    left: 56.5%;
    top: 72.5%;
    --draw-width: 7%;
    --draw-delay: 2.82s;
    --draw-duration: .09s;
    transform: rotate(180deg);
}

.sl_intro_statue_line_16 {
    left: 38.5%;
    top: 84%;
    --draw-width: 7%;
    --draw-delay: 2.85s;
    transform: rotate(3deg);
}

.sl_intro_light_line_1 {
    left: 77.5%;
    top: 75.5%;
    --draw-width: 27%;
    --draw-delay: 1.50s;
    transform: rotate(-90.5deg);
}

.sl_intro_light_line_2 {
    left: 82.5%;
    top: 75.5%;
    --draw-width: 27%;
    --draw-delay: 1.98s;
    transform: rotate(-91.5deg);
}

.sl_intro_light_line_3 {
    left: 76%;
    top: 87.5%;
    --draw-width: 9%;
    --draw-delay: 2.73s;
    transform: rotate(-90deg);
}

.sl_intro_light_line_4 {
    left: 85.5%;
    top: 85%;
    --draw-width: 6%;
    --draw-delay: 2.85s;
    transform: rotate(-90deg);
}

.sl_intro_light_circle {
    position: absolute;
    left: 76%;
    top: 39%;
    width: 7%;
    height: 7%;
    z-index: 5;
    pointer-events: none;
}

    .sl_intro_light_circle svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.sl_intro_light_circle_line {
    fill: none;
    stroke: var(--color_White);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-linecap: butt;
    transform: rotate(120deg);
    transform-origin: 50% 50%;
    opacity: 0;
    animation: sl_intro_light_circle_draw .8s linear 2.1s forwards;
}

@keyframes sl_intro_light_circle_draw {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.sl_intro_light_circle_final {
    fill: none;
    stroke: var(--color_White);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    animation: sl_intro_light_circle_final .001s linear 2.9s forwards;
}

@keyframes sl_intro_light_circle_final {
    to {
        opacity: 1;
    }
}

.sl_intro_text {
    position: absolute;
    top: 26%;
    left: 47%;
    width: 53%;
    height: 12cqw;
    color: var(--color_White);
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    pointer-events: none;
}

.sl_intro_band_name {
    position: absolute;
    display: flex;
    left: 0;
    width: 100%;
    height: var(--space_40);
}

.sl_intro_band_letter {
    display: flex;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: 7.14cqw;
    font-weight: 700;
    letter-spacing: .75em;
    transform-origin: top left;
}

    .sl_intro_band_letter > div,
    .sl_intro_album_letter > div {
        margin: 0;
        padding: 0;
        color: inherit;
    }

.sl_intro_band_letter_1,
.sl_intro_band_letter_2 {
    position: absolute;
}

.sl_intro_band_letter_1,
.sl_intro_band_letter_2,
.sl_intro_band_letter_3,
.sl_intro_band_letter_4,
.sl_intro_band_letter_5,
.sl_intro_band_letter_6,
.sl_intro_band_letter_7 {
    opacity: 0;
    animation: sl_intro_band_letter_draw .3s ease var(--char-delay) forwards;
}

.sl_intro_band_letter_1 {
    --char-delay: 3.5s;
    --char-x: -100%;
}

.sl_intro_band_letter_2 {
    --char-delay: 3.8s;
    --char-x: 0%;
}

.sl_intro_band_letter_3 {
    --char-delay: 4.1s;
    --char-x: 110%;
}

.sl_intro_band_letter_4 {
    --char-delay: 4.4s;
    --char-x: 120%;
}

.sl_intro_band_letter_5 {
    --char-delay: 4.7s;
    --char-x: 100%;
}

.sl_intro_band_letter_6 {
    --char-delay: 5s;
    --char-x: 110%;
}

.sl_intro_band_letter_7 {
    --char-delay: 5.3s;
    --char-x: 190%;
}

@keyframes sl_intro_band_letter_draw {
    from {
        opacity: 0;
        transform: translateX(900%);
    }

    to {
        opacity: 1;
        transform: translateX(var(--char-x));
    }
}

.sl_intro_album_title {
    position: absolute;
    display: flex;
    justify-content: right;
    top: 7.2cqw;
    width: 100%;
    height: 3.5cqw;
    color: inherit;
}

.sl_intro_album_letter {
    position: absolute;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: 3.14cqw;
    transform-origin: top left;
    opacity: 0;
    animation: sl_intro_album_letter_draw 140ms ease var(--album-delay) forwards;
    --album-from: 900%;
}

.sl_intro_album_letter_01 {
    --album-delay: 5.60s;
    --album-from: 0%;
    --album-x: -2950%;
}

.sl_intro_album_letter_02 {
    --album-delay: 5.88s;
    --album-from: 0%;
    --album-x: -2850%;
}

.sl_intro_album_letter_03 {
    --album-delay: 6.02s;
    --album-x: -2330%;
}

.sl_intro_album_letter_04 {
    --album-delay: 6.16s;
    --album-x: -2630%;
}

.sl_intro_album_letter_05 {
    --album-delay: 6.30s;
    --album-x: -2260%;
}

.sl_intro_album_letter_06 {
    --album-delay: 6.44s;
    --album-x: -2170%;
}

.sl_intro_album_letter_07 {
    --album-delay: 6.58s;
    --album-x: -2300%;
}

.sl_intro_album_letter_08 {
    --album-delay: 6.72s;
    --album-x: -1930%;
}

.sl_intro_album_letter_09 {
    --album-delay: 6.86s;
    --album-x: -2030%;
}

.sl_intro_album_letter_10 {
    --album-delay: 7.00s;
    --album-x: -1900%;
}

.sl_intro_album_letter_11 {
    --album-delay: 7.14s;
    --album-x: -1625%;
}

.sl_intro_album_letter_12 {
    --album-delay: 7.28s;
    --album-x: -1670%;
}

.sl_intro_album_letter_13 {
    --album-delay: 7.42s;
    --album-x: -1870%;
}

.sl_intro_album_letter_14 {
    --album-delay: 7.56s;
    --album-x: -1240%;
}

.sl_intro_album_letter_15 {
    --album-delay: 7.70s;
    --album-x: -1010%;
}

.sl_intro_album_letter_16 {
    --album-delay: 7.84s;
    --album-x: -1100%;
}

.sl_intro_album_letter_17 {
    --album-delay: 7.98s;
    --album-x: -1180%;
}

.sl_intro_album_letter_18 {
    --album-delay: 8.12s;
    --album-x: -2400%;
}

.sl_intro_album_letter_19 {
    --album-delay: 8.26s;
    --album-x: -930%;
}

.sl_intro_album_letter_20 {
    --album-delay: 8.40s;
    --album-x: -690%;
}

.sl_intro_album_letter_21 {
    --album-delay: 8.54s;
    --album-x: -650%;
}

.sl_intro_album_letter_22 {
    --album-delay: 8.68s;
    --album-x: -720%;
}

.sl_intro_album_letter_23 {
    --album-delay: 8.82s;
    --album-x: -490%;
}

.sl_intro_album_letter_24 {
    --album-delay: 8.96s;
    --album-x: -425%;
}

.sl_intro_album_letter_25 {
    --album-delay: 9.10s;
    --album-x: -420%;
}

.sl_intro_album_letter_26 {
    --album-delay: 9.24s;
    --album-x: -230%;
}

@keyframes sl_intro_album_letter_draw {
    from {
        opacity: 0;
        transform: translateX(var(--album-from));
    }

    to {
        opacity: 1;
        transform: translateX(var(--album-x));
    }
}

.sl_intro_background {
    z-index: 2;
    display: flex;
    animation: sl_intro_background_show 4.5s linear forwards;
}

    .sl_intro_background img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

@keyframes sl_intro_background_show {
    0%, 66% {
        opacity: 0;
    }

    100% {
        opacity: .5;
    }
}

@media (max-width: 48em) {
    .sl_intro {
        width: 100%;
    }

    .sl_intro_band_letter {
        letter-spacing: 0;
    }
}