.brand-introduction {
  position: relative;
  min-height: 54rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, #080b0b 0%, #0c1211 48%, #071a19 100%);
}

.brand-introduction::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(90deg, transparent 0 49.95%, rgb(213 179 106 / 12%) 50%, transparent 50.05%),
    linear-gradient(180deg, rgb(213 179 106 / 7%), transparent 28%);
}

.brand-introduction__halo {
  position: absolute;
  top: 9%;
  left: 6%;
  z-index: -1;
  width: min(48rem, 72vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(7 74 69 / 30%), transparent 68%);
  filter: blur(20px);
  opacity: 0.7;
}

.brand-introduction__inner {
  display: grid;
  min-height: 54rem;
  grid-template-columns: minmax(24rem, 0.9fr) minmax(28rem, 1.1fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
  padding-block: clamp(7rem, 12vw, 11rem);
}

.brand-introduction__emblem {
  display: grid;
  align-items: center;
  grid-template-columns:
    minmax(2rem, 1fr)
    clamp(21rem, 30vw, 28rem)
    minmax(2rem, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.brand-introduction__line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(213 179 106 / 62%));
  transform: scaleX(1);
  transform-origin: right center;
}

.brand-introduction__line:last-child {
  background: linear-gradient(90deg, rgb(213 179 106 / 62%), transparent);
  transform-origin: left center;
}

.brand-introduction__logo-frame {
  position: relative;
  display: grid;
  place-items: center;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.brand-introduction__logo-frame::before {
  position: absolute;
  inset: 8% -26%;
  z-index: -1;
  content: "";
  background: radial-gradient(circle, rgb(213 179 106 / 16%), transparent 68%);
  filter: blur(10px);
}

.brand-introduction__logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-introduction__copy {
  max-width: 46rem;
}

.brand-introduction__eyebrow,
.brand-introduction__heading,
.brand-introduction__signature,
.brand-introduction__lead,
.brand-introduction__note {
  opacity: 1;
  transform: translateY(0);
}

.brand-introduction.is-motion-ready .brand-introduction__line {
  transform: scaleX(0);
}

.brand-introduction.is-motion-ready .brand-introduction__logo-frame {
  opacity: 0;
  transform: translateY(2.5rem) scale(0.94);
}

.brand-introduction.is-motion-ready .brand-introduction__eyebrow,
.brand-introduction.is-motion-ready .brand-introduction__heading,
.brand-introduction.is-motion-ready .brand-introduction__signature,
.brand-introduction.is-motion-ready .brand-introduction__lead,
.brand-introduction.is-motion-ready .brand-introduction__note {
  opacity: 0;
  transform: translateY(1.6rem);
}

.brand-introduction__heading {
  max-width: 11ch;
  margin-top: 1.1rem;
  font-size: clamp(3.5rem, 6.5vw, 5.6rem);
  line-height: 0.86;
}

.brand-introduction__signature {
  margin-top: 1.8rem;
  color: var(--color-champagne-500);
  font-family: var(--font-brand);
  font-size: 0.66rem;
  letter-spacing: 0.38em;
}

.brand-introduction__lead {
  max-width: 42rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  color: rgb(242 234 221 / 86%);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.45;
}

.brand-introduction__note {
  max-width: 36rem;
  margin-top: 1.7rem;
  padding-left: 1.35rem;
  color: rgb(242 234 221 / 58%);
  font-size: 0.9rem;
  border-left: 1px solid rgb(213 179 106 / 44%);
}

.brand-introduction.is-intro-visible .brand-introduction__line {
  transform: scaleX(1);
  transition: transform 1100ms 120ms var(--ease-luxury);
}

.brand-introduction.is-intro-visible .brand-introduction__logo-frame {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 800ms 180ms var(--ease-luxury),
    transform 1100ms 180ms var(--ease-luxury);
}

.brand-introduction.is-intro-visible .brand-introduction__eyebrow,
.brand-introduction.is-intro-visible .brand-introduction__heading,
.brand-introduction.is-intro-visible .brand-introduction__signature,
.brand-introduction.is-intro-visible .brand-introduction__lead,
.brand-introduction.is-intro-visible .brand-introduction__note {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 720ms var(--ease-luxury),
    transform 900ms var(--ease-luxury);
}

.brand-introduction.is-intro-visible .brand-introduction__eyebrow {
  transition-delay: 260ms;
}

.brand-introduction.is-intro-visible .brand-introduction__heading {
  transition-delay: 340ms;
}

.brand-introduction.is-intro-visible .brand-introduction__signature {
  transition-delay: 440ms;
}

.brand-introduction.is-intro-visible .brand-introduction__lead {
  transition-delay: 520ms;
}

.brand-introduction.is-intro-visible .brand-introduction__note {
  transition-delay: 620ms;
}

@media (max-width: 1119px) {
  .brand-introduction,
  .brand-introduction__inner {
    min-height: auto;
  }

  .brand-introduction__inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .brand-introduction__emblem {
    width: min(100%, 44rem);
    grid-template-columns:
      minmax(2rem, 1fr)
      clamp(20rem, 42vw, 22rem)
      minmax(2rem, 1fr);
  }

  .brand-introduction__heading {
    max-width: 11ch;
  }
}

@media (max-width: 599px) {
  .brand-introduction__inner {
    gap: 3rem;
    padding-block: 6rem;
  }

  .brand-introduction__emblem {
    grid-template-columns:
      minmax(1rem, 1fr)
      clamp(15rem, 68vw, 17rem)
      minmax(1rem, 1fr);
  }

  .brand-introduction__logo {
    max-width: 100%;
  }

  .brand-introduction__heading {
    font-size: clamp(3rem, 16vw, 4.6rem);
  }

  .brand-introduction__lead {
    font-size: 1.28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-introduction__line {
    transform: scaleX(1);
  }

  .brand-introduction__logo-frame,
  .brand-introduction__eyebrow,
  .brand-introduction__heading,
  .brand-introduction__signature,
  .brand-introduction__lead,
  .brand-introduction__note {
    opacity: 1;
    transform: none;
  }
}