:root {
  --foreground: #f7f1de;
  --page-padding: clamp(1.5rem, 4vw, 5rem);
}

* {
  box-sizing: border-box;
}

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

body {
  background: #111;
  color: var(--foreground);

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

.hero {
  position: relative;

  width: 100%;
  height: 100svh;

  overflow: hidden;
}

.hero-background {
  position: absolute;

  inset: -30px;

  background-image:
    url("../assetts/IMG_9301.jpeg");

  background-size: cover;
  background-position: center;

  --parallax-x: 0px;
  --parallax-y: 0px;

  filter: blur(18px);

  transform: 
    translate(
      var(--parallax-x),
      var(--parallax-y)
    )
    scale(1);

  transition:
    filter 0.5s ease,
    transform 0.5s ease;

  z-index: 0;

  will-change: transform;
}

.hero-background.focused {
  filter: blur(0);
  transform: 
  translate(
      var(--parallax-x),
      var(--parallax-y)
    )
  scale(1);
  
}

.hero-background.parallax-ready {
  transition:
    transform 0.15s ease-out;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.20);

  z-index: 1;

  transition:
    background 1.8s ease;
}

.hero-overlay.focused {
  background: rgba(0, 0, 0, 0.08);
}

.hero-content {
  position: relative;

  width: 100%;
  height: 100%;

  z-index: 2;

  pointer-events: none;
}

#hero-title {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  margin: 0;

  font-size:
    clamp(6rem, 6vw, 6rem);

  font-weight: 300;

  letter-spacing: -0.055em;

  white-space: nowrap;

  transition:
    left 1.2s cubic-bezier(.22, 1, .36, 1),
    top 1.2s cubic-bezier(.22, 1, .36, 1),
    transform 1.2s cubic-bezier(.22, 1, .36, 1),
    font-size 1.2s cubic-bezier(.22, 1, .36, 1);
}

#hero-title.title-positioned {

  left: var(--page-padding);

  top: clamp(4rem, 9vh, 8rem);

  transform: translate(0, 0);

  font-size:
    clamp(6rem, 6vw, 6rem);
}

.cursor {
  display: inline-block;

  margin-left: 0.001em;

  font-weight: 200;

  animation:
    cursorBlink 0.75s
    step-end
    infinite;
}


.cursor.hidden {
  display: none;
}


@keyframes cursorBlink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.hero-info {
  position: absolute;

  left: var(--page-padding);

  top: clamp(11rem, 25vh, 18rem);

  max-width: 30rem;

  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity 1s ease,
    transform 1s
    cubic-bezier(.22, 1, .36, 1);

  pointer-events: auto;
}


.hero-info.visible {
  opacity: 1;

  transform:
    translateY(0);
}


.location {
  margin: 0 0 1rem;

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.25em;
}


.intro {
  margin-top: 1.25rem;

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

  line-height: 1.6;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.5);
}


.intro a {
  color: #ebe5c2;

  text-decoration: none;

  border-bottom:
    1px solid
    rgba(235, 229, 194, 0.6);

  pointer-events: auto;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}


.intro a:hover {
  color: white;

  border-color: white;
}

.scroll-indicator {
  position: absolute;

  right: var(--page-padding);

  bottom: 2rem;

  z-index: 3;

  width: 110px;
  height: 110px;

  opacity: 0;

  transition:
    opacity 1s ease;
}


.scroll-indicator.visible {
  opacity: 1;
}


.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);
  }

}

@media (max-width: 700px) {

  #hero-title {
    font-size:
      clamp(3rem, 14vw, 6rem);
  }


  #hero-title.title-positioned {

    top: 4rem;

    font-size:
      clamp(2.8rem, 12vw, 5rem);
  }


  .hero-info {
    top: 10rem;

    right: var(--page-padding);
  }


  .scroll-indicator {
    display: none;
  }

}

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

  .hero-background {
    filter: none;

    transform: none;

    transition: none;
  }


  #hero-title {
    left: var(--page-padding);
    top: 4rem;

    transform: none;

    transition: none;
  }


  .cursor {
    display: none;
  }


  .hero-info {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .scroll-indicator {
    opacity: 1;
  }

}