@charset "utf-8";
/* Title: Nice Industries Marketing Site Backgrounds
** Description: Reusable backgrounds for Nice Industries Marketing Site
** Author: Jessica Greenwalt
** Created: 11-14-2025
** Updated: 11-14-2025
************************************** */

/* = Highlighter Drawing Fill
** ----------------------- */
.bg-hdf {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

line {
    stroke-width: 150;
    stroke-linecap: butt;
    stroke-dasharray: 1400; /* adjust according to length */
    stroke-dashoffset: 1400;
    filter: blur(1px) brightness(1.2);
    opacity: 0.6;
    animation-fill-mode: forwards;
}

line.yellow {
    stroke: #ffe600;
}
line.green {
    stroke: #5DF900;
}
line.blue {
    stroke: #41ffff;
}
line.orange {
    stroke: #ffa406;
}
line.pink {
    stroke: #ff34b7;
}

.line1 {
    animation: drawLine 2s ease forwards;
}
.line2 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.25s;
}
.line3 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.75s;
}
.line4 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.6s;
}

/* Green Lines */
.line5 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.75s;
}
.line6 {
    animation: drawLine 2s ease forwards;
    animation-delay: 2.25s;
}
.line7 {
    animation: drawLine 2s ease forwards;
    animation-delay: 3s;
}
.line8 {
    animation: drawLine 2s ease forwards;
    animation-delay: 3.25s;
}

/* Blue Lines */
.line9 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.5s;
}
.line10 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1s;
}
.line11 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.5s;
}
.line12 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.8s;
}

/* Orange Lines */
.line13 {
    animation: drawLine 2s ease forwards;
}
.line14 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.6s;
}
.line15 {
    animation: drawLine 2s ease forwards;
    animation-delay: 0.75s;
}
.line16 {
    animation: drawLine 2s ease forwards;
    animation-delay: 1.6s;
}

/* Pink Lines */
.line17 {
    animation: drawLine 2s ease forwards;
    animation-delay: 2.3s;
}
.line18 {
    animation: drawLine 2s ease forwards;
    animation-delay: 2.8s;
}
.line19 {
    animation: drawLine 2s ease forwards;
    animation-delay: 3s;
}
.line20 {
    animation: drawLine 2s ease forwards;
    animation-delay: 4s;
}

/* Yellow Lines */
.line21 {
    animation: drawLine 2s ease forwards;
    animation-delay: 4.4s;
}
.line22 {
    animation: drawLine 2s ease forwards;
    animation-delay: 5s;
}
.line23 {
    animation: drawLine 2s ease forwards;
    animation-delay: 5.4s;
}
.line24 {
    animation: drawLine 2s ease forwards;
    animation-delay: 6.2s;
}



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