@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

body,
html {
  height: 100%;
  scroll-behavior: smooth;
}

/* Hero Section */
.hero {
  width: 100%;
  height: 100vh; /* Full viewport height */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;

  /* Mobile default */
  background-image: url('/hero-800px.webp');
}

@media (min-width: 801px) and (max-width: 1280px) {
  .hero {
    background-image: url('/hero-1280px.webp');
  }
}

@media (min-width: 1281px) {
  .hero {
    background-image: url('/hero-1920px.webp');
  }
}

/* Retina support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero {
    background-image: image-set(url('/hero-800px.webp') 1x, url('/hero-800px@2x.webp') 2x);
  }

  @media (min-width: 801px) and (max-width: 1280px) {
    .hero {
      background-image: image-set(url('/hero-1280px.webp') 1x, url('/hero-1280px@2x.webp') 2x);
    }
  }

  @media (min-width: 1281px) {
    .hero {
      background-image: image-set(url('/hero-1920px.webp') 1x, url('/hero-1920px@2x.webp') 2x);
    }
  }
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  z-index: 10;
}

@media (max-width: 768px) {
  .hero-content {
    justify-content: normal;
    padding-top: 30px;
  }
}

.hero-content a {
  color: var(--beige);
}

.hero-content.hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-text {
  max-width: 600px;
  margin: 0 auto;
  font-size: 120px;
  font-weight: 900;
  font-family: 'Montserrat', sans-serif;
  color: var(--beige);
  animation: fadeIn 1.5s ease-in-out;
}

.hero-logo {
  width: 250px;
  height: auto;
  border-radius: 20px;
  animation: fadeIn 1.5s ease-in-out;
}

.scroll-down {
  display: inline-block;
  margin-top: 30px;
  font-size: 2.5rem;
  color: var(--beige);
  text-decoration: none;
  animation:
    fadeIn 1.5s ease-in-out,
    bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.curved-text {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(50px);
}

.curved-text span {
  display: inline-block;
  transform-origin: bottom center;
  font-size: 24px;
}