@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

:root {
  --1-color: #b72a5c;
  --2-color: #72246b;
  --3-color: #f7f7f7;
  --4-color: #ffcdd2;
  --5-color: #e1bee7;
  --6-color: #333333;
  --7-color: #ffffff;
}

/* Reset styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global styles */
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--7-color);
  background-color: var(--3-color);
}

/* Main content styles */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

.hero {
  flex-grow: 1;
  background-image: url('../images/bg01.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
}

.hero-content {
  max-width: 960px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 10px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.word {
	font-family: 'Anton', sans-serif;
	perspective: 1000px; 
  margin-bottom: 20px;
  margin-top: 40px;
  letter-spacing: 17px;
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 200px;
	user-select: none;
	line-height: .8;
  text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}

.word span:nth-child(1).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(145deg, rgba(240, 240, 240, 0.7), rgba(220, 220, 220, 0.6));
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), -4px -4px 8px rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  outline: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, rgba(255, 255, 255, 0) 50%);
  transition: transform 0.5s ease-in-out;
  transform: translate(-50%, -50%) scale(0);
}

.btn:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2), -6px -6px 12px rgba(255, 255, 255, 0.8);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: inset 4px 4px 6px rgba(0, 0, 0, 0.2), inset -4px -4px 6px rgba(255, 255, 255, 0.8);
}


@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(2).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span:nth-child(3).active {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}
	
	24% {
		transform: rotateX(150deg);
	}
	
	36% {
		transform: rotateX(200deg);
	}
	
	48% {
		transform: rotateX(175deg);
	}
	
	60%, 85% {
		transform: rotateX(180deg);
	}
	
	100% {
		transform: rotateX(0deg);
	}
}

.word span:nth-child(4).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

.word span:nth-child(5).active {
	animation: toplong 1.5s linear;
}

@keyframes toplong {
	10%, 40% {
		transform: translateY(-48vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}

.word span:nth-child(6).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span:nth-child(7).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

@media (max-width: 768px) {
  .hero {
    height: 80vh; /* Reduce height on smaller screens */
    padding: 20px;
  }

  .hero-content {
    max-width: 90%;
  }

  .hero h1 {
    font-size: 2rem;
    letter-spacing: 5px; /* Reduce spacing for smaller screens */
  }

  .word span {
    font-size: 100px; /* Reduce size to fit smaller screens */
    letter-spacing: 5px;
  }

  .btn {
    padding: 0.6rem 1.2rem; /* Adjust button padding */
    font-size: 0.9rem; /* Smaller font for buttons */
  }

  .content-box img {
    max-width: 80%; /* Scale logo to fit smaller screens */
    height: auto;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 70vh;
  }

  .hero h1 {
    font-size: 1.5rem;
    letter-spacing: 3px;
  }

  .word span {
    font-size: 70px; /* Make animation text even smaller */
    letter-spacing: 3px;
  }

  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }

  .content-box img {
    max-width: 70%;
  }
}