/* Navigation related breakpoints */
/* Grid related breakpoints */
@property --hero-cover-percent {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --hero-color-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@keyframes hero-heading-fill {
  0% {
    --hero-color-opacity: 1;
    --hero-cover-percent: 75%;
  }
  100% {
    --hero-color-opacity: 0.4;
    --hero-cover-percent: 0%;
  }
}
@property --hero-frog-percent {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --hero-frog-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@keyframes hero-frog-fill {
  0% {
    --hero-frog-opacity: 1;
    --hero-frog-percent: 78%;
  }
  100% {
    --hero-frog-opacity: 0.4;
    --hero-frog-percent: 0%;
  }
}
.site-hero {
  container-type: inline-size;
  background: linear-gradient(to bottom, var(--orange), var(--blue));
}

.site-hero__container {
  margin-bottom: 15%;
  color: var(--text-on-neutral-white);
  position: relative;
}
.site-hero__container::before {
  --color-bright: rgba(255, 255, 255, var(--hero-frog-opacity));
  --hero-frog-percent: 78%;
  aspect-ratio: 1;
  content: "";
  position: absolute;
  bottom: -15%;
  left: 75%;
  width: 26%;
  mask-image: url("images/logo.svg");
  mask-repeat: no-repeat;
  mask-position: center bottom;
  mask-size: contain;
  pointer-events: none;
  max-width: 28.125rem;
}
@supports (animation-timeline: scroll()) {
  .site-hero__container::before {
    background: linear-gradient(to top, black var(--hero-frog-percent), var(--color-bright) var(--hero-frog-percent)), url("images/guanacaste-tree.webp");
    background-size: auto, cover;
    background-position: center;
    animation-timeline: view();
    animation-range-start: exit -80%;
    animation-range-end: exit 30%;
    animation-name: hero-frog-fill;
    animation-fill-mode: both;
    animation-duration: 1ms;
    animation-timing-function: linear;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-hero__container::before {
    animation-name: none;
  }
}
@container (min-width: 700px) {
  .site-hero__container::before {
    bottom: auto;
    left: auto;
    right: 5%;
    top: 25%;
  }
}
@container (min-width: 700px) {
  .site-hero__container {
    margin-top: 3.75rem;
    margin-bottom: 10rem;
  }
}

.site-hero__title[class] {
  --color-bright: rgba(255, 255, 255, var(--hero-color-opacity));
  --hero-cover-percent: 70%;
  font-size: clamp(4rem, 2.5rem + 10vw, 13rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(to top, black var(--hero-cover-percent), var(--color-bright) var(--hero-cover-percent));
  background-clip: text;
}
@container (min-width: 700px) {
  .site-hero__title[class] {
    position: relative;
    z-index: 4;
    grid-column: 2/-2;
    pointer-events: none;
  }
}
@supports (animation-timeline: scroll()) {
  .site-hero__title[class] {
    background: linear-gradient(to top, black var(--hero-cover-percent), var(--color-bright) var(--hero-cover-percent)), url("images/guanacaste.png");
    background-size: auto, cover;
    background-clip: text;
    animation-timeline: view();
    animation-range-start: exit -30%;
    animation-range-end: exit 50%;
    animation-name: hero-heading-fill;
    animation-fill-mode: both;
    animation-duration: 1ms;
    animation-timing-function: linear;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-hero__title[class] {
    animation-name: none;
  }
}

@container (min-width: 700px) {
  .site-hero__cta[class] {
    grid-column: 2/span 5;
  }
}
.site-hero__cta[class] a {
  display: inline-flex;
  gap: 0.5rem;
  margin-block: auto -0.3125rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-on-neutral-white);
}

.site-hero__media-cta-icon {
  display: flex;
  width: 2rem;
  aspect-ratio: 1;
  background-color: var(--secondary);
  color: var(--text-on-secondary);
}
.site-hero__media-cta-icon:after {
  content: "";
  width: 50%;
  height: 50%;
  margin: auto;
  mask-image: url("images/arrow-right.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: currentColor;
}

.site-hero__media {
  position: relative;
}
@container (min-width: 700px) {
  .site-hero__media {
    position: absolute;
    right: 0;
    height: 100%;
    aspect-ratio: 1;
    overflow: clip;
  }
}
.site-hero__media img,
.site-hero__media video {
  width: 100%;
}
@container (min-width: 700px) {
  .site-hero__media img,
  .site-hero__media video {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }
}
.site-hero__media:after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--orange), var(--blue));
  opacity: 0.5;
  pointer-events: none;
}

.site-hero__play-pause {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  height: 5rem;
  width: 5rem;
  background: hsla(194, 66%, 80%, 0.8);
  border: solid 2px transparent;
  text-indent: -62.4375rem;
  overflow: hidden;
  transition: background 0.2s;
}
.site-hero__play-pause:hover {
  background: rgba(255, 255, 255, 0.8);
}
.site-hero__play-pause:focus {
  outline: solid 2px currentColor;
  border-radius: 0;
  outline-offset: -6px;
}
.site-hero__play-pause[aria-pressed=true]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: solid 15px currentColor;
  border-top: solid 10px transparent;
  border-bottom: solid 10px transparent;
}
.site-hero__play-pause[aria-pressed=false]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9375rem;
  height: 0.9375rem;
  transform: translate(-50%, -50%);
  border-left: solid 4px currentColor;
  border-right: solid 4px currentColor;
}