:root {
  --background: #504B38;
  --foreground: #B9B28A;

  --line-width: 2px;

  --page-padding:
    clamp(1.5rem, 4vw, 5rem);
}


* {
  box-sizing: border-box;
}

html {
  background: var(--background);
  color: var(--foreground);
}

body {
  margin: 0;

  min-height: 100vh;

  background: var(--background);
  color: #F7F1DE;

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
}


.hero {
  position: relative;

  width: 100vw;
  height: 100svh;

  overflow: visible;

  background: var(--background);
}

@media (max-width: 600px) {
  .hero{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .scroll-indicator{
    display: none;
  }
}


.drawing-container {
  position: absolute;

  inset: 0;

  width:100%;
  height:100%;
  z-index: 1;

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

  pointer-events: none;
}

.drawing-container svg {
  display:block;

  width: 100%;
  height: 100%;

}


.drawing-container .background {
  fill: var(--background);
}

.drawing-container .yosemite-line {
  fill: none;

  stroke: var(--foreground);

  stroke-width: var(--line-width);

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}



.hero-content {
  position: relative;

  z-index: 2;

  width: 100%;

  padding:
    clamp(4rem, 9vh, 8rem)
    var(--page-padding);

  pointer-events: auto;
}

.location {
  margin: 0 0 1rem;

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.25em;

  opacity: 0;

  transform: translateY(10px);
}

h1 {
  margin: 0;

  max-width: 1000px;

  font-size:
    clamp(4rem, 11vw, 11rem);

  font-weight: 300;

  line-height: 0.78;

  letter-spacing: -0.065em;

  opacity: 0;

  transform: translateY(25px);
}

h1 span {
  display: block;
}

.intro {
  max-width: 28rem;

  margin-top: 2rem;

  font-size:
    clamp(0.95rem, 1.5vw, 1.2rem);

  line-height: 1.6;

  opacity: 0;

  transform: translateY(15px);
}

.intro a{
  color: #EBE5C2;
  text-decoration: none;

  background: #622b1460;

  padding: 0.2em 0.2em;
  border-radius: 3px;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.intro a:hover {
  background: #622B14;
  color:#CCD67F
}


.scroll-indicator {
  position: absolute;

  right: var(--page-padding);
  bottom: 2rem;

  z-index: 3;

  width: 110px;
  height: 110px;

  opacity: 0;
}

.scroll-circle {
  width: 100%;
  height: 100%;

  overflow: visible;

  animation:
    rotateCircle
    18s
    linear
    infinite;
}

.circle-text {
  fill: var(--foreground);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 2.2px;
}

@keyframes rotateCircle {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


.text-visible {
  animation:
    revealText
    1.2s
    cubic-bezier(.22, 1, .36, 1)
    forwards;
}

@keyframes revealText {

  to {
    opacity: 1;

    transform: translateY(0);
  }

}

@media (max-width: 700px) {

  .hero-content {
    padding-top: 5rem;
  }

  h1 {
    font-size:
      clamp(4rem, 20vw, 7rem);
  }

}


@media (
  prefers-reduced-motion: reduce
) {

  .yosemite-line {
    stroke-dasharray:
      none !important;

    stroke-dashoffset:
      0 !important;

    transition:
      none !important;
  }

  .location,
  h1,
  .intro,
  .scroll-indicator {
    opacity: 1;

    transform: none;

    animation: none;
  }

}