@charset "utf-8";

.hero {
  overflow: hidden;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url("/assets/images/home/bg1.png") no-repeat center / cover;
}

.heading .accent {
  color: #fff;
  font-weight: 800;
  letter-spacing: 2.16px;
  padding-bottom: 32rem;
  font-size: clamp(32rem, calc(16rem + 3vw), 54rem);
  line-height: clamp(40rem, calc(24rem + 4vw), 80rem);
}

.eyebrow {
  color: #fff;
  font-weight: 800;
  letter-spacing: 2.16px;
  font-size: clamp(32rem, calc(15rem + 2.8vw), 54rem);
  line-height: clamp(40rem, calc(24rem + 4vw), 80rem);
}

p.sub.se-visible {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.56rem;
  font-size: clamp(20rem, calc(10rem + 1.4vw), 28rem);
  line-height: clamp(28rem, calc(20rem + 1.5vw), 40rem);
}

.hero-text {
  display: flex;
  flex-direction: column;
  position: relative;
}

.hero {
  position: relative;
  overflow: hidden;
  --fade-ms: 900ms;
  --zoom-ms: 2200ms;
  --zoom-from: 1.08;
}

.hero .bg-layer {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transform: scale(var(--zoom-from));
  transition: opacity var(--fade-ms) ease;
  will-change: opacity, transform;
}
.hero .bg-layer.is-show {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero .bg-layer {
    transition: none;
    transform: none;
  }
}