@import url("https://fonts.googleapis.com/css?family=Caveat");

html,
body {
    //background: linear-gradient(to bottom, rgba(24,26,43,1) 0%, rgba(57,71,105,1) 73%, rgba(106,96,120,1) 100%);
    background: linear-gradient(
        to bottom,
        rgba(9, 5, 19, 1) 0%,
        rgba(150, 73, 135, 1) 75%,
        rgba(253, 188, 163, 1) 100%
    );
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stars {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    &:after,
    &:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEVHcEz///+flKJDAAAAAXRSTlMAQObYZgAAAIVJREFUeAHt2SEOwkAQhtFJKuqKRRGOgKzgUMgKRI/G0ZDoacNkN/ue/zJ+/ugBcI+01/EEAGBc04FkP58AVFoi7VaSLAEAAPB/j0hbK678AADMkXbZG03mGA0AAKsP3JgAAGDa88knsuZ8Mp1M6gEAPFtNrtEjtkh7lyRb3/PAWpS0BPgC0PMMdOEjXqoAAAAASUVORK5CYII=");
    }
    &:after {
        background-size: 100px;
        opacity: 0.4;
    }
    &:before {
        background-size: 200px;
        opacity: 0.6;
    }
    animation: rotation 360s infinite linear;
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

h1 {
    font-size: calc(1.5em + 5vw);
    color: #fff;
    font-family: "Caveat", sans-serif;
    text-align: center;
    padding: 0.5em;
    transform: rotate(-4deg) translateY(-15vh);
}

.mountains {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    min-width: 100%;
    height: 60px;
    fill: #000022;
}
.mountains--layer1 {
    z-index: 2;
}
.mountains--layer2 {
    fill: #9d5189;
    z-index: 0;
}

// Create the bursts
const B_CHILD = {
    fill: { "#ffffff": "#ef1cec" },
    delay: "rand(300, 359)",
    duration: 700,
    pathScale: "rand(0.8, 1)",
    isSwirl: true,
    swirlSize: "stagger(-2,2)",
    swirlFrequency: 1
};
const B_OPTS = {
    count: "rand(15,20)",
    top: "100%",
    children: {
        ...B_CHILD
    }
};
const burst1 = new mojs.Burst({
    ...B_OPTS,
    radius: { 0: "rand(150,170)" },
    x: -45,
    y: -335
});

const burst1_2 = new mojs.Burst({
    ...B_OPTS,
    radius: { 0: "rand(150,170)" },
    x: -45,
    y: -335,
    children: {
        ...B_CHILD,
        delay: "rand(260, 350)",
        pathScale: "rand(0.7, 0.8)",
        degreeShift: 20
    }
});

const burst2 = new mojs.Burst({
    ...B_OPTS,
    radius: { 0: "rand(100,150)" },
    x: 140,
    y: -315,
    children: {
        ...B_CHILD,
        fill: { "#ffffff": "#d8ff00" }
    }
});

const burst2_2 = new mojs.Burst({
    ...B_OPTS,
    radius: { 0: "rand(100,150)" },
    x: 140,
    y: -315,
    children: {
        ...B_CHILD,
        fill: { "#ffffff": "#d8ff00" },
        delay: "rand(260, 350)",
        pathScale: "rand(0.7, 0.8)",
        degreeShift: 20
    }
});

// Create interactive burst
const burst_tune = new mojs.Burst({
    ...B_OPTS,
    radius: { 0: "rand(100,150)" },
    left: 0,
    top: 0,
    x: 0,
    y: 0,
    children: {
        ...B_CHILD,
        delay: "rand(0, 50)",
        fill: { "#ffffff": "#d8ff00" }
    }
});
const burst_tune_2 = new mojs.Burst({
    ...B_OPTS,
    radius: { 0: "rand(100,150)" },
    left: 0,
    top: 0,
    children: {
        ...B_CHILD,
        fill: { "#ffffff": "#d8ff00" },
        delay: "rand(10, 150)",
        pathScale: "rand(0.7, 0.8)",
        degreeShift: 20
    }
});
document.addEventListener("click", function (e) {
    burst_tune.generate().tune({ x: e.pageX, y: e.pageY }).replay();
    burst_tune_2.generate().tune({ x: e.pageX, y: e.pageY }).replay();
});

// Create the firework lines
const FW_OPTS = {
    shape: "curve",
    fill: "none",
    isShowStart: false,
    strokeWidth: { 3: 0 },
    stroke: "#ffffff",
    strokeDasharray: "100%",
    strokeDashoffset: { "-100%": "100%" },
    duration: 1000
};
const fw1 = new mojs.Shape({
    ...FW_OPTS,
    radius: 170,
    radiusY: 20,
    top: "100%",
    y: -165,
    angle: 75,
    onStart: function () {
        burst1.replay(0);
        burst1_2.replay(0);
    }
});

const fw2 = new mojs.Shape({
    ...FW_OPTS,
    radius: 180,
    radiusY: 50,
    top: "100%",
    x: 50,
    y: -155,
    strokeDashoffset: { "100%": "-100%" },
    angle: -60,
    delay: 200,
    onStart: function () {
        burst2.replay(0);
        burst2_2.replay(0);
    }
});

// Underline under title
const underline = new mojs.Shape({
    parent: document.getElementById("title"),
    shape: "curve",
    strokeLinecap: "round",
    fill: "none",
    isShowStart: false,
    strokeWidth: { "1em": "5em" },
    stroke: "#ffffff",
    strokeDasharray: "200%",
    strokeDashoffset: { "200%": "100%" },
    radius: 150,
    radiusY: 10,
    y: "1.1em",
    angle: -10,
    duration: 2000,
    delay: 1000
}).then({
    strokeWidth: { "5em": "1em" },
    strokeDashoffset: { "100%": "-200%" },
    duration: 2000,
    delay: 10000
});
const timelineText = new mojs.Timeline({
    repeat: 2018
})
    .add(underline)
    .play();

// Fire off the explosions
const timeline = new mojs.Timeline({
    repeat: 2018
})
    .add([fw1, fw2])
    .play();

// Create sounds
// var explosion = new Audio("https://www.freesound.org/data/previews/21/21410_21830-lq.mp3"); // buffers automatically when created
// explosion.play();