@font-face {
  font-family: "Metropolis";
  src: url("../fonts/metropolis/Metropolis-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}

* {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

.main-container {
  width: 100%;
  min-height: 100vh;
  background: #000000;
  font-family: "Metropolis", sans-serif;
  font-weight: 800;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: url("../images/pointer-arrow.png"), pointer;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  width: 130px;
  height: 130px;
  z-index: 99999;
}

/* Prevent selection and tap highlights on all images */
img {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.characters {
  min-height: 780px;
  display: flex;
  justify-content: center;
  align-items: start;
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
  flex: 1;
}

.character-1,
.character-2,
.character-3 {
  position: relative;
}

/* Hover areas for video controls */
.video-hover-area {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 300px;
  z-index: 15;
}

.character-1-play-position {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 300px;
  z-index: 15;
}

video {
  height: 500px;
  width: auto;
  object-fit: cover;
  mix-blend-mode: screen;
  /* Prevent selection and tap highlights on videos */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.character-1 {
  margin-top: 28px;
  right: -200px;
  z-index: 2;
}

.character-2 {
  top: -90px;
  z-index: 1;
}

.character-3 {
  margin-top: 22px;
  top: -50px;
  left: -250px;
  z-index: 2;
}

/* Black overlay layer for characters */
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 34;
  pointer-events: none;
}

/* Responsive Design */
.video-hover-area-index {
  z-index: 99999;
}

.character-1-play-position {
  top: 4%;
  z-index: 20;
}

.character-3-play-position {
  top: 12%;
  left: 55%;
  z-index: 20;
  width: 140px;
  height: 345;
}

.characters h1 {
  color: #ffffff;
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 20;
  font-size: 48px;
  font-weight: 900;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  background-image: url("../images/caption-gradient-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  font-size: 100px;
  height: 360px;
  text-align: center;
  position: absolute;
  bottom: 125px;
  left: 0;
  right: 0;
  z-index: 50;
}
.content-text {
  font-size: 36px;
  text-align: center;
  margin-top: 20px;
}

/* Preload cursor images using CSS */
body::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  background-image: url("../images/pointer-hand.png"),
    url("../images/pointer-active.png");
}

#become-a-90-10er {
  background: #f78a8c;
  font-size: 22px;
  font-weight: 900;
  padding: 20px 30px;
  text-align: center;
  color: white;
  outline: none;
  border: none;
  border-radius: 8px;
  z-index: 99999;
  margin-top: 40px;
  cursor: url("../images/pointer-hand.png"), pointer;
  transition: all 0.3s ease;
  font-family: "Metropolis", sans-serif;
}

#become-a-90-10er:hover {
  cursor: url("../images/pointer-hand.png"), pointer;
  background: #fc9c9e;
}

#become-a-90-10er:active,
#become-a-90-10er.clicking {
  cursor: url("../images/pointer-active.png"), pointer !important;
}

/* Custom glowing cursor */
.cursor {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0,
    rgba(255, 255, 255, 0.3) 10%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.04) 60%,
    rgba(255, 255, 255, 0.02) 70%,
    rgba(255, 255, 255, 0) 100%,
    transparent 0
  );
  z-index: 99999;
  filter: blur(20px);
}

.cursor.hover {
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
    0 0 25px rgba(255, 255, 255, 0.6), 0 0 35px rgba(255, 255, 255, 0.4);
}

.torch {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    circle 350px at var(--x, 100%) var(--y, 100%),
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(0, 0, 0, 0) 80%
  );

  mix-blend-mode: overlay;
  transition: background 0.1s ease;
  z-index: 99998;
}

/* Mobile Hero Section */
.mobile-hero {
  display: none; /* Hidden on desktop */
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.mobile-hero img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

.mobile-content-heading {
  display: none;
}

@media (max-width: 1115px) {
  .content {
    font-size: 70px;
    bottom: 135px;
  }
}

/* Mobile Responsive Design */
@media (max-width: 786px) {
  /* Hide videos section on mobile */
  .background-overlay {
    display: none;
  }
  .characters {
    display: none;
  }

  /* Show mobile hero on mobile */
  .mobile-hero {
    display: block;
  }

  /* Adjust content for mobile */
  .content {
    background-image: none;
    height: 240px;
    bottom: 145px;
    font-size: 50px;
    position: relative;
    margin-top: auto;
  }

  .content-text {
    font-size: 21px;
  }
  .mobile-hero img {
    height: 450px;
  }
  .logo img {
    margin-top: 35px;
    width: 140px;
    height: 140px;
  }

  #become-a-90-10er {
    font-size: 14px;
    padding: 12px 20px;
  }

  /* Adjust button for mobile */
  #become-a-90-10er {
    font-size: 16px; /* Smaller than desktop 22px */
    padding: 15px 25px; /* Smaller than desktop 20px 30px */
    margin-top: 55px; /* Smaller than desktop 40px */
  }

  /* Hide torch and cursor effects on mobile */
  .torch {
    display: none !important;
  }

  .cursor {
    display: none !important;
  }
}

@media (max-width: 630px) {
  .content {
    background-image: none;
    font-size: 30px; /* Even smaller for small phones */
    height: 240px;
    bottom: 160px;
    position: relative;
    margin-top: auto;
  }
  .content-heading {
    display: none;
  }
  .mobile-hero {
    padding-left: 3px;
  }
  .mobile-hero img {
    height: 250px;
  }
  .logo img {
    margin-top: 30px;
    width: 140px;
    height: 140px;
  }

  #become-a-90-10er {
    width: 215px;
    height: 55px;
    font-size: 16px;
    border-radius: 5px;
  }

  .mobile-content-heading {
    display: flex;
    flex-direction: column;
    font-size: 46px;
    color: white;
    text-align: center;
    margin-top: 28px;
  }
}