#wrap
 -6.times do
  .ticket

@font-face {
  font-family: "Cooper";
  src: url("https://assets.codepen.io/383755/cooper-black-webfont.woff")
    format("woff");
}

@font-face {
  font-family: "Aharoni";
  src: url("https://assets.codepen.io/383755/telefon.woff2") format("woff");
}

@font-face {
  font-family: "Bogart";
  src: url("https://assets.codepen.io/383755/bogart-semibold.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Dot";
  src: url("https://assets.codepen.io/383755/Dot-Matrix.ttf.woff") format("woff");
}

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Coustard:wght@900&display=swap");

$noise: url("data:image/png;base64,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");

* {
  box-sizing: border-box;
}

@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@function text-stroke($size: 2, $color: #fff, $correction: 0) {
  $radius: $size - $correction;
  $stroke: ();

  @for $i from -$size through $size {
    @for $k from -$size through $size {
      $x: $k;
      $y: $i;

      @if $k > 0 {
        $x: $k - 0.5;
      }
      @elseif $k < 0 {
        $x: $k + 0.5;
      }

      @if $i > 0 {
        $y: $i - 0.5;
      }
      @elseif $i < 0 {
        $y: $i + 0.5;
      }

      @if ($x * $x + $y * $y <= $radius * $radius) {
        $stroke: append($stroke, $i * 1px $k * 1px 0 $color, comma);
      }
    }
  }

  @return $stroke;
}

@mixin text-stroke($size: 2, $color: #fff, $correction: 0) {
  text-shadow: text-stroke($size, $color, $correction);
}

body {
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: "Oswald";
  cursor: pointer;
  --dark: #50303f;
  --font1: "Cooper";
  --font2: "Oswald";
  --font4: "Cooper";
  --font5: "Bogart";
  --font6: "Oswald";
  --font7: "Aharoni";
  --font8: "Coustard";
  --color1: #fe2fd9;
  --color2: #fa6c4b;
  --color3: #e5f31b;
  --color4: #5030da;
  --color5: #ff3641;
  --color6: #e5f31b;
  --color7: #fe2fd9;
  background: repeating-radial-gradient(
      circle at center,
      transparent 0px,
      #fff 0px,
      #fff 2px,
      transparent 2px,
      transparent 10px
    ),
    radial-gradient(circle at center, #fff 25vw, #e5f4d1);
  &:before {
    content: "click to remix";
    position: absolute;
    bottom: 5px;
    width: 100%;
    left: 0;
    text-align: center;
    color: var(--dark);
  }
  &.active {
    #wrap {
      .ticket {
        @for $i from 1 through 6 {
          &:nth-of-type(#{$i}) {
            z-index: #{6 - $i};
            .inner {
              &:before {
                transition-delay: #{0.15 + ($i/10)}s;
                opacity: 1;
              }
              > div {
                transition-delay: #{$i/10}s;
                &:before,
                &:after {
                  transition-delay: #{0.15 + ($i/10)}s;
                  box-shadow: inset -100px 0px 100px -200px rgba(0, 0, 0, 0.15),
                    inset 0 0 3rem -3rem var(--dark), inset 0 0 0 0.5rem var(--color1);
                }
                &:after {
                  box-shadow: inset 100px 0px 100px 100px rgba(0, 0, 0, 0.15),
                    inset 0 0 2rem 0.075rem var(--dark),
                    inset 0 0 0 0.5rem lighten(#e5f4d1, 5%);
                }
              }
            }
          }
        }
        .inner {
          > div {
            transform: translateY(0);
          }
        }
      }
    }
  }
  &.loaded {
    #wrap {
      opacity: 1;
    }
  }
  #wrap {
    width: clamp(662.5px, 80vw, 1325px);
    min-width: 662.5px;
    height: clamp(500px, 60vw, 1000px);
    min-height: 500px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 0rem;
    transition: 0.5s ease-in-out;
    transition-delay: 1s;
    opacity: 0;
    .ticket {
      position: relative;
      @for $i from 1 through 6 {
        &:nth-of-type(#{$i}) {
          z-index: #{8 - $i};
          .inner {
            &:before {
              transition: 0.5s cubic-bezier(0.5, 0.15, 0.35, 1);
              transition-delay: #{(6 - $i) / 10}s;
              opacity: 0;
            }
            > div {
              transition-delay: #{(6 - $i) / 10}s;
              &:before,
              &:after {
                transition-delay: #{0.15 + (6 - $i)/10}s;
              }
            }
          }
        }
      }
      .inner {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        padding: 1rem;
        clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%);
        transform-style: preserve-3d;
        perspective: 900px;
        &:before {
          content: "";
          position: absolute;
          width: 90%;
          height: 90%;
          top: 10%;
          left: 5%;
          background: rgba(0, 0, 0, 0.25);
          filter: blur(15px);
        }
        &.class1 {
          .details {
            grid-row: 1 / span 1;
          }
        }
        &.class2 {
          .seat {
            grid-row: 3 / span 1;
          }
        }
        &.class2,
        &.class3 {
          .band {
            background: radial-gradient(
                circle at center,
                #e5f4d1 35%,
                transparent 35%,
                var(--color1) 75%
              ),
              radial-gradient(
                  circle at center,
                  #e5f4d1 2px,
                  var(--color1) 1px,
                  var(--color1) 5px
                )
                50% 50% / 8px 8px repeat;
          }
        }
        &.class3 {
          .band {
            text-transform: uppercase;
          }
        }
        &.class5,
        &.class6 {
          > div {
            grid-template-columns: calc(33% - 0.125rem) calc(33% - 0.125rem) calc(
                33% - 0.125rem
              );
            > div {
              grid-column: span 3;

              &.band {
                strong {
                  span.word {
                    display: inline-block;
                    margin: 0 0.15vw;
                  }
                }
              }
              &.band,
              &.location {
                grid-column: 1 / span 2;
                grid-row: span 6;
                position: relative;
                strong {
                  width: 200%;
                  left: -50%;
                  height: 50%;
                  top: 25%;
                  position: absolute;
                  padding: 0 1rem;
                  transform: rotate(90deg);
                  word-break: break-word;
                }
              }
              &.location {
                grid-column: 3 / span 1;
                strong {
                  width: 400%;
                  height: 12.5%;
                  top: 45%;
                  left: -150%;
                  @include flex-center();
                  @include text-stroke(1, #e5f4d1);
                  &:before {
                    content: "";
                    position: absolute;
                    width: 90%;
                    left: 5%;
                    top: -5%;
                    height: 110%;
                    background: var(--color1);
                    -webkit-mask: $noise;
                    opacity: 0.75;
                  }
                  span {
                    display: block;
                    width: 100%;
                    font-size: clamp(10px, 1vw, 1vw);
                    &:first-of-type {
                      font-size: clamp(12px, 1.35vw, 1.35vw);
                      @include text-stroke(1, #e5f4d1);
                    }
                  }
                }
              }
            }
          }
        }
        &.class7 {
          .band {
            background: radial-gradient(
                circle at center,
                #e5f4d1 35%,
                transparent 35%,
                var(--color1) 75%
              ),
              repeating-linear-gradient(
                var(--rotate),
                #e5f4d1 2px,
                var(--color1) 2px,
                var(--color1) 10px,
                #e5f4d1 10px,
                #e5f4d1 12px
              );
          }
        }
        &.class9 {
          .band {
            strong {
              span.word {
                transform: skew(5deg);
              }
            }
          }
        }
        &.class10,
        &.class11 {
          .band {
            background: radial-gradient(
                circle at center,
                #e5f4d1 35%,
                transparent 35%,
                var(--color1) 75%
              ),
              repeating-linear-gradient(
                var(--rotate),
                #e5f4d1 2px,
                var(--color1) 2px,
                var(--color1) 10px,
                #e5f4d1 10px,
                #e5f4d1 12px
              );
          }
        }
        > div {
          display: grid;
          grid-template-columns: calc(100% - 0.25rem);
          grid-template-rows: repeat(10, 1fr);
          justify-content: center;
          height: 100%;
          background: var(--dark);
          grid-gap: 0.125rem;
          padding: 0.125rem 0;
          position: relative;
          transition: 0.5s cubic-bezier(0.5, 0.15, 0.35, 1);
          transform-style: preserve-3d;
          transform: rotateY(180deg);
          &:before,
          &:after {
            transform-style: preserve-3d;
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 2;
            box-shadow: inset -200px 0px 100px 100px rgba(0, 0, 0, 0.25),
              inset 0 0 3rem -2rem var(--dark), inset 0 0 0 0.5rem var(--color1);
            transition: box-shadow 0.5s cubic-bezier(0.5, 0.15, 0.35, 1);
          }
          &:before {
            background: #e5f4d1;
            -webkit-mask: $noise;
            opacity: 0.5;
            width: calc(100% + 0.5vw);
            height: calc(100% + 0.5vw);
            left: -0.25vw;
            top: -0.25vw;
            backface-visibility: hidden;
          }
          &:after {
            transform: rotateY(-180deg) translateZ(0.05px);
            background: lighten(#e5f4d1, 5%);
            box-shadow: inset 100px 0px 100px -200px rgba(0, 0, 0, 0.15),
              inset 0 0 6rem -6rem var(--dark), inset 0 0 0 0.5rem lighten(#e5f4d1, 5%);
          }
          > div {
            box-sizing: border-box;
            background: var(--color1);
            box-shadow: inherit;
            line-height: 1;
            grid-row: span 1;
            text-align: center;
            @include flex-center();
          }
        }
        .date {
          text-transform: uppercase;
          grid-row: span 2;
          @include flex-center();
          padding: 0.75vw 0;
          background: #e5f4d1;
          span {
            display: block;
            font-size: clamp(10px, 1vw, 1vw);
            width: 100%;
          }
          > span:nth-of-type(2) {
            font-size: clamp(16px, 2vw, 2vw);
            font-family: var(--font2);
          }
        }
        .band {
          grid-row: span 5;
          position: relative;
          font-family: var(--font1);
          overflow: hidden;
          background: radial-gradient(
              circle at center,
              #e5f4d1 37.5%,
              transparent 35%,
              var(--color1) 90%
            ),
            repeating-radial-gradient(
              circle at center,
              transparent 0px,
              #e5f4d1 0px,
              #e5f4d1 2px,
              var(--color1) 2px,
              var(--color1) 10px
            );
          strong {
            @include flex-center();
            position: absolute;
            width: 102.5%;
            height: 75%;
            left: -1.25%;
            top: 12.5%;
            padding: 0 0.5rem;
            transform: rotate(90deg);
            font-size: clamp(20px, 2.35vw, 2.35vw);
            word-break: break-word;
            line-height: 0.95;
            --words: var(--word-total);
            letter-spacing: 0.15rem;
            transform: scale(calc(1 + (var(--word-total) / 20)));
            > span.word {
              display: inline-block;
            }
            > span > span.word {
              display: block;
              @include text-stroke(1, #e5f4d1);
              font-size: clamp(
                18px,
                calc(7vw - (((var(--char-total) * 1) * (var(--words) / 1.5)) * 0.35vw)),
                2.75vw
              );
            }
          }
        }
        .details {
          display: flex;
          align-items: stretch;
          strong {
            width: 100%;
            display: flex;
            span {
              width: 50%;
              box-shadow: inset 0.05vw 0 0 var(--dark), inset -0.05vw 0 0 var(--dark);
              @include flex-center();
            }
          }
        }
        .location {
          strong span {
            font-size: 1vw;
            display: block;
            font-weight: 200;
            line-height: 1.25;
            &:first-of-type {
              font-size: clamp(8px, 1.25vw, 1.25vw);
              font-weight: 900;
            }
          }
        }
        .seat {
          display: flex;
          justify-content: space-between;
          background: #e5f4d1;
          strong {
            font-size: clamp(8px, 1.25vw, 1.25vw);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            width: 33.33%;
            padding: 0.5rem;
            &:nth-of-type(2) {
              box-shadow: 0.075rem 0 0 var(--dark), -0.075rem 0 0 var(--dark),
                inset 0.075rem 0 0 var(--dark), inset -0.075rem 0 0 var(--dark);
            }
            > span {
              display: block;
              margin: 0.25rem 0 0;
              width: 100%;
              font-size: clamp(16px, 2vw, 2vw);
              text-transform: uppercase;
              font-family: "Dot", cursive;
              font-weight: 100;
              color: var(--color2);
            }
          }
        }
      }
      &:nth-of-type(1) {
        grid-area: 3 / 1 / 7 / 3;
        .inner {
          transform-origin: 0% 0%;
          transform: rotate(-90deg);
        }
      }
      &:nth-of-type(2) {
        grid-area: 3 / 1 / 7 / 3;
      }
      &:nth-of-type(3) {
        grid-area: 3 / 3 / 7 / 5;
      }
      &:nth-of-type(4) {
        grid-area: 1 / 5 / 5 / 7;
      }
      &:nth-of-type(5) {
        grid-area: 1 / 7 / 5 / 9;
      }
      &:nth-of-type(6) {
        grid-area: 1 / 5 / 5 / 7;
        .inner {
          transform-origin: 0% 100%;
          transform: rotate(90deg);
        }
      }
    }
  }
}

const bands = [];
const cities = [];
const venues = [];
const row = "abcdefghijklmnopqrstuvwxyz";

let days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
let months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

function randomDate(start, end) {
  return new Date(
    start.getTime() + Math.random() * (end.getTime() - start.getTime())
  );
}

$(document).ready(function () {
  var lastFM =
    "https://ws.audioscrobbler.com/2.0/?api_key=5908c0487c4b5f26281c158dd83b59d6&format=json&method=user.getTopArtists&user=adamkuhn&period=overall&limit=200";
  var cityData =
    "https://random-data-api.com/api/address/random_address?size=50";
  $.getJSON(cityData, function (data) {
    $.each(data, function (i, item) {
      venues.push(data[i].community + " Theater");
      cities.push(data[i].city + ", " + data[i].state);
    });
    $.getJSON(lastFM, function (data) {
      $.each(data.topartists.artist, function (i, item) {
        bands.push(data.topartists.artist[i].name);
      });
      createTicket();
      $("body").addClass("loaded");
    });
  });
});

$(document).click(function () {
  createTicket();
});

function createTicket() {
  $("body").removeClass("active");
  setTimeout(() => {
    $(".ticket").each(function () {
      $(this).find(".inner").remove();
      let randBand = Math.floor(Math.random() * bands.length);
      let randCity = Math.floor(Math.random() * cities.length);
      let randVenue = Math.floor(Math.random() * venues.length);
      let randDate = randomDate(new Date(2021, 0, 1), new Date());
      $(this)
        .get(0)
        .style.setProperty(
          "--font1",
          "var(--font" + Math.floor(Math.random() * (7 - 1) + 4) + ")"
        );
      $(this)
        .get(0)
        .style.setProperty(
          "--font2",
          "var(--font" + Math.floor(Math.random() * (7 - 1) + 4) + ")"
        );
      $(this)
        .get(0)
        .style.setProperty(
          "--color1",
          "var(--color" + Math.floor(Math.random() * (6 - 1) + 3) + ")"
        );
      $(this)
        .get(0)
        .style.setProperty(
          "--rotate",
          Math.floor(Math.random() * (5 - 1) + 1) * 45 + "deg"
        );
      $(this).append(
        "<div class='inner class" +
          Math.floor(Math.random() * (8 - 1) + 1) +
          " class" +
          Math.floor(Math.random() * (8 - 1) + 7) +
          "'><div><div class='date'><span>" +
          days[randDate.getDay()] +
          "</span><span>" +
          months[randDate.getMonth()] +
          " " +
          randDate.getDate() +
          "</span><span>" +
          Math.floor(Math.random() * (12 - 1) + 1) +
          ":00 PM</span></div><div class='band'><strong data-splitting='words'><span>" +
          bands[randBand] +
          "</span></strong></div><div class='location'><strong><span>" +
          venues[randVenue] +
          "</span><span>" +
          cities[randCity] +
          "</span></strong></div><div class='seat'><strong>Section<span>" +
          Math.floor(Math.random() * (40 - 1) + 1) +
          "</span></strong><strong>Row<span>" +
          row[Math.floor(Math.random() * row.length)] +
          "</span></strong><strong>Seat<span>" +
          Math.floor(Math.random() * (40 - 1) + 1) +
          "</span></strong></div><div class='details'><strong><span>$" +
          Math.floor(Math.random() * (20 - 5) + 5) +
          ".00</span><span>All Ages</span></strong></div></div></div>"
      );
    });
    Splitting();
    $("span.word").attr("data-splitting", "chars");
    Splitting();
  }, 1000);
  setTimeout(() => {
    $("body").addClass("active");
  }, 1500);
}