/* =========================
   HERO — MEDIA SYSTEM
========================= */

.hero {
  position: relative;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  z-index: 1;
}

.hero__media {
  position: absolute;
  inset: 0;

  overflow: hidden;
}


/* =========================
   HERO IMAGE
========================= */

.hero__image,
.hero__image img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}


/* =========================
   DESKTOP HERO IMAGE
========================= */

.hero__image img {
  object-fit: cover;

  /* DESKTOP FRAMING */
  object-position: center 22%;

  display: block;
}


/* =========================
   HERO ANIMATION
========================= */

.hero__image {
  opacity: 0;

  transform: scale(1);

  transition:
    opacity 1.2s ease-in-out,
    transform 1.2s ease-in-out;
}

.hero__image--active {
  opacity: 1;

  transform: scale(1);
}


/* =========================
   MOBILE HERO
========================= */

@media (max-width: 768px) {

  .hero {
    height: 92svh;
    min-height: 680px;
  }

  .hero__image img {

    /* MOBILE IMAGE */
    object-fit: cover;

    /* MOBILE FRAMING */
    object-position: center top;
  }

  .hero__image {
    transform: scale(1);
  }

  .hero__image--active {
    transform: scale(1);
  }

}


/* =========================
   HERO CONTENT
========================= */

.hero__content {
  position: absolute;
  top: 52%;
  left: 50%;

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

  z-index: 3;
}


/* =========================
   HERO CTA
========================= */

.hero__cta {
  position: relative;
  overflow: hidden;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 145px;
  height: 46px;

  padding: 0 24px;

  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;

  color: #fff;

  background: transparent;

  border: 1.5px solid rgba(255, 255, 255, 0.85);

  cursor: pointer;

  transition:
    color 0.3s ease,
    font-size 0.3s ease,
    letter-spacing 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.hero__cta span {
  position: relative;
  z-index: 2;
}

.hero__cta::after {
  content: "";

  position: absolute;
  inset: 0;

  width: 140%;

  background: rgba(255, 255, 255, 0.95);

  transform: translateX(-120%) skewX(-20deg);

  transition: transform 0.55s ease;

  pointer-events: none;
}

.hero__cta:hover::after {
  transform: translateX(120%) skewX(-20deg);
}

.hero__cta:hover {
  color: #000000;

  font-size: 12.5px;
  font-weight: 600;

  letter-spacing: 0.16em;

  border-color: rgba(255, 255, 255, 1);

  transform: translateY(-2px);

  box-shadow:
    0 8px 24px rgba(255,255,255,0.12);
}


/* =========================
   HOME DROP
========================= */

.home-drop {
  padding: 80px 0;
}

.drop-banner {
  width: 100%;
  overflow: hidden;
}

.drop-banner__image {
  display: block;
  width: 100%;
  height: auto;
}