:root {
  color-scheme: dark;
  --gold: #f5a915;
  --gold-light: #fff3ba;
  --cream: #fff0c8;
  --red: #ca0904;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  background: #000;
  color: var(--cream);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.landing {
  display: grid;
  min-height: 100svh;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(255, 132, 0, 0.22), transparent 28rem),
    #000;
}

.hero {
  position: relative;
  width: min(100%, calc(100svh * 0.563), 943px);
  min-height: 100svh;
  overflow: hidden;
  background: #030100;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: image-set(
    url("./assets/india-ornate-bg.webp") type("image/webp"),
    url("./assets/india-ornate-bg.png") type("image/png")
  );
  background-position: center;
  background-size: cover;
}

.hero::before,
.hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.hero::before {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 18%, transparent 72%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.76));
}

.hero::after {
  z-index: 4;
  background: radial-gradient(ellipse at 50% 55%, transparent 0 58%, rgba(0, 0, 0, 0.48) 100%);
}

.hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  padding: clamp(1.2rem, 3.6svh, 3rem) clamp(0.9rem, 4.8vw, 2.8rem) 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand {
  display: block;
  width: min(96%, 51rem);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

#page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.character {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: clamp(7.25rem, 15.4svh, 10.8rem);
  display: block;
  width: min(55vw, 30.5rem);
  max-width: 58%;
  height: auto;
  filter:
    drop-shadow(0 1.4rem 1.2rem rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 1.4rem rgba(255, 136, 10, 0.25));
  transform: translateX(50%);
}

.cta {
  position: absolute;
  z-index: 5;
  right: clamp(1rem, 8.7%, 5rem);
  bottom: clamp(1rem, 3.4svh, 2.9rem);
  left: clamp(1rem, 8.7%, 5rem);
  display: inline-flex;
  min-height: clamp(4.1rem, 8.7svh, 6.9rem);
  align-items: center;
  justify-content: center;
  border: clamp(0.14rem, 0.36vw, 0.22rem) solid #ffdf7e;
  border-radius: clamp(0.9rem, 2.5vw, 1.45rem);
  background:
    linear-gradient(180deg, rgba(255, 78, 28, 0.72), transparent 24%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 238, 151, 0.3), transparent 55%),
    linear-gradient(180deg, #e1180b 0%, #9d0602 43%, #360000 100%);
  box-shadow:
    inset 0 0 0 0.16rem rgba(255, 38, 18, 0.92),
    inset 0 0 1.3rem rgba(255, 177, 40, 0.32),
    0 0 0.34rem rgba(255, 249, 185, 0.92),
    0 0 1.15rem rgba(255, 95, 0, 0.95),
    0 0 2.1rem rgba(255, 35, 0, 0.52),
    0 0.9rem 1.8rem rgba(0, 0, 0, 0.86);
  color: var(--cream);
  font-size: clamp(2.85rem, 9.9vw, 5.2rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0.045em 0 #8b3e00,
    0 0.08em 0 #1b0000,
    0 0 0.28em rgba(255, 228, 134, 0.42);
  transition:
    transform 160ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
}

.cta span {
  transform: translateY(-0.12em);
}

.cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.cta:focus-visible {
  outline: 0.2rem solid #fff;
  outline-offset: 0.35rem;
}

@media (max-width: 560px) {
  .hero {
    width: 100%;
  }

  .hero-copy {
    padding-top: clamp(1.25rem, 3svh, 1.8rem);
  }

  .brand {
    width: min(98%, 24rem);
  }

  .character {
    bottom: clamp(6.15rem, 13.4svh, 7.65rem);
    width: min(68vw, 19rem);
    max-width: 70%;
  }

  .cta {
    right: 1rem;
    bottom: clamp(0.85rem, 2.4svh, 1.3rem);
    left: 1rem;
    min-height: clamp(3.8rem, 7.9svh, 4.55rem);
    border-radius: 0.85rem;
    font-size: clamp(2.3rem, 9.9vw, 3.05rem);
  }
}

@media (max-height: 730px) {
  .brand {
    width: min(92%, 36rem);
  }

  .character {
    bottom: clamp(5.7rem, 12.6svh, 7.5rem);
    width: min(49svh, 30rem);
  }

  .cta {
    min-height: clamp(3.6rem, 8svh, 4.8rem);
    font-size: clamp(2.25rem, 7.3svh, 3.65rem);
  }
}