html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    font-family: neue-haas-grotesk-display, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
    font-display: block;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

.stage {
  position: relative;
    min-width: 716px;
  width: 716px;
  height: 1008px;
    background: black;
    cursor: pointer;
    overflow: hidden;
  visibility: hidden;
}

.svg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 716px;
    height: 1008px;
}

.content {
    position: relative;
    width: 102%;
    height: 100%;
    z-index: 1;
    perspective: 500px;
    overflow: hidden;
}

.band {
    position: absolute;
    z-index: 1;
    top: 495px;
    left: -11px;
    margin: 0;
    font-weight: 600;
    color: #B90207;
    font-size: 170px;
    letter-spacing: -2px;
    line-height: 1;
    transform-style: preserve-3d;
}

.bandChar {
    backface-visibility: hidden;
}

p {    
    position: absolute;
    top: 462px;
    margin: 0;
    color: #00000A;
    // font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.1;
    
    span {
        display: block;
    }
}
    
.guests {
    left: 25px;
}

.date {
    left: 203px;
}

.location {
    left: 418px;
}

console.clear();

select = e => document.querySelector(e);
selectAll = e => document.querySelectorAll(e);
const stage = select('.stage');
let gltl = gsap.timeline({ delay: 1 });
let bandST = new SplitText('.band', {type:"chars", charsClass:"bandChar", position: "absolute" }); 

function animate() {
    let tl = gsap.timeline({
        delay: 0.2,
        repeat: -1,
        repeatDelay: 1.5
    });
    
    gsap.set('.bandChar', {
        transformOrigin: "center center -200px"
    });
    
    tl.from('.bandChar', {
        rotationX: 90,
        y: -100,
        stagger: 0.05,
        duration: 4,
        ease: 'elastic(1.8, 1.5)'
    })
    
    .from('p span', {
        x: function(i) {
            if(i%2 == 0) {
                return -90;
            }
            return 90;
        },
        y: 30,
        opacity: 0,
        ease: 'expo',
        duration: 2
    }, "-=3.7")
    
    .from('.bars rect:nth-of-type(even)', {
        scaleX: 0,
        x: -50,
        duration: 6,
        ease: "rough({ template: power3.out, strength: 0.5, points: 150, taper: 'in', randomize: true, clamp: true})",
        stagger: {
            each: 0.1,
            from: 'edges'
        },
        transformOrigin: "top right"
    }, "-=3.1")
    
    .from('.bars rect:nth-of-type(odd)', {
        scaleX: 0,
        x: 50,
        duration: 6,
        ease: "rough({ template: power3.out, strength: 0.5, points: 150, taper: 'in', randomize: true, clamp: true})",
        stagger: {
            each: 0.1,
            from: 'edges'
        }
    }, "-=6.6")
    
    .to('.bars rect:nth-of-type(even)', {
        scaleX: 0,
        x: -50,
        duration: 5,
        ease: 'elastic(3, 1.8)',
        stagger: {
            each: 0.1,
            from: 'edges'
        },
        transformOrigin: "top right"
    }, "+=0.1")
    
    .to('.bars rect:nth-of-type(odd)', {
        scaleX: 0,
        x: -50,
        duration: 5,
        ease: 'elastic(3, 1.8)',
        stagger: {
            each: 0.1,
            from: 'edges'
        }
    }, "-=5.4")
    
    .to('p span', {
        x: function(i) {
            if(i%2 == 0) {
                return 90;
            }
            return -90;
        },
        y: -30,
        opacity: 0,
        ease: 'power4.in',
        duration: 4
    }, "-=4.5")
    
    .to('.bandChar', {
        rotationX: "-=90",
        y: -100,
        stagger: 0.05,
        // scale: 0,
        duration: 5,
        ease: 'expo.in'
    }, "-=5")
    
    return tl;
}

function init() {
    gsap.set(stage, { autoAlpha: 1 });
    stage.onclick = () => {
        gltl.restart();
    }
    
    gltl.add(animate());
}

function resize() {
  let vh = window.innerHeight;
  let sh = stage.offsetHeight;
  let scaleFactor = vh/sh;
  if(scaleFactor<1) {
    gsap.set(stage, { scale: scaleFactor });
  }
  else {
        gsap.set(stage, { scale: 1 });
    }
}

window.onresize = resize;

window.onload = () => {
  init();
    resize();
    // GSDevTools.create();
};