@import "general.css";

body{
  margin: 0;
  overflow: hidden;
  background-color: var(--background-color);
  font-family: bricolage-grotesque;
  color: var(--text-color);

  width: 100vw;
  height: 100vh;

  background: var(--background-color);
}

.scene-scale{
  position: fixed;

  left: 50%;
  top: 50%;

  width: calc(var(--design-width) * 1px);
  height: calc(var(--design-height) * 1px);

  transform:
    translate(-50%, -40%)
    scale(calc(var(--scale) * 1.25));

  transform-origin: center center;

  overflow: hidden;
}

.scene-content{
  width: 100%;
  height: 100%;

  position: relative;

  transition:
    opacity .6s ease,
    transform .6s ease;
}

.scene-content.hidden{
  opacity: 0;
  transform: translateY(-80px);

  pointer-events: none;
}

.scene-scale.hidden{
  opacity: 0;
  transform:
    scale(var(--scale))
    translateY(-80px);

  pointer-events: none;
}

.hero {
  position: relative;

  width: 1920px;
  height: 1080px;

  display: flex;
  justify-content: center;
  align-items: center;

  perspective: 1000px;

  overflow: hidden;
}

.character{
  position: relative;
  z-index: 3;

  width: 900px;
  top: -150px;
}

.bg-text {
  position: absolute;
  font-size: 390px;
  letter-spacing: 10px;
  font-weight: 900;

  color: var(--button-color);

  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.bg-text.left {
  transform: 
    translate(-18%, -65%) 
    rotate(8deg) 
    rotateY(-30deg) 
    skewX(10deg);
}

.bg-text.right {
  font-size: 330px;
  transform: 
    translate(18%, 20%) 
    rotate(5deg) 
    rotateY(30deg) 
    skewX(10deg);
}

.p-left,
.p-right {
  position: absolute;
  word-break: keep-all;
  max-width: 300px;
  font-size: larger;
}

.p-left {
  top: 50px;
  left: 300px;
  transform: 
    rotate(5deg) 
    rotateY(-20deg);
}

.p-right {
  top: 650px;
  left: 1350px;
  transform: 
    rotate(5deg) 
    rotateY(20deg);
}

.p-center{
  position: absolute;
  z-index: 2;
  font-size: 100px;
  word-spacing: 600px;
  font-family: 'rustic-roadway', cursive;
  transform: 
    translate(1%, -70%)
}

#ticket{
  width: 80vw;
  height: 72vh;

  position: fixed;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, calc(-50% + 80px))
    scale(.95);

  opacity: 0;

  background: var(--button-color);

  border-radius: 2vw;
  padding: 0.4vw;

  pointer-events: none;

  transition:
    opacity .6s ease,
    transform .6s ease;
}

#ticket.active{
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);

  pointer-events: auto;
}

#ticket::before,
#ticket::after {
  content: '';

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 5vw;
  height: 5vw;

  border-radius: 50%;
  z-index: 2;

  background-color: var(--background-color);
}

#ticket::before {
  left: -2.8vw;
  border: 0.35vw solid var(--button-color);
  border-top-color: transparent;
  border-left-color: transparent;

  transform: translateY(-50%) rotate(-45deg);
}

#ticket::after {
  right: -2.8vw;
  border: 0.35vw solid var(--button-color);
  border-top-color: transparent;
  border-left-color: transparent;

  transform: translateY(-50%) rotate(135deg);
}

.ticket-content-wrapper {
  width: 100%;
  height: 100%;

  position: relative;

  border-radius: 1.5vw;
  overflow: hidden;

  display: flex;
}

.ticket-left {
  flex: 2;
  background: var(--container-color);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.ticket-right {
  flex: 1;
  background: var(--button-color);

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  overflow: visible;
}

.ticket-right::before {
  content: '';

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 0;

  border-left: 0.3vw dashed var(--background-color);
}

.ticket-character {
  position: absolute;

  height: 170%;
  width: auto;

  left: -35vh;
  bottom: -70%;

  z-index: 10;

  pointer-events: none;
  user-select: none;
}

.ticket-left h2 {
  font-size: 4em;
}

.ticket-left p {
  font-size: 1.5em;
}

.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.ticket-left h2,
.ticket-left p,
.ticket-character {
  transition:
    opacity .25s ease,
    transform .25s ease;
}