@charset "UTF-8";

.special-experience {
  overflow: hidden;
  padding-block: 19px 59px;
  background-color: var(--c-black);
  color: var(--c-text-inverse);
  text-align: center;
  word-break: keep-all;
}

.special-experience__media {
  position: relative;
  overflow: hidden;
}

.special-experience__stage {
  position: relative;
  left: 50%;
  width: min(155.47%, 1140px);
  aspect-ratio: 583 / 266.44;
  overflow: hidden;
  transform: translateX(-50%);
}

.special-experience__layer {
  position: absolute;
  top: -40.05%;
  left: 1.23%;
  width: 91.58%;
  height: 131.61%;
  object-fit: fill;
}

.special-experience__layer--bg {
  filter: blur(0.95px);
}

.special-experience__layer--car {
  pointer-events: none;
}

.special-experience__dim {
  position: absolute;
  pointer-events: none;
}

.special-experience__dim--top {
  top: 0;
  right: 0;
  left: 0;
  height: 64.6%;
  background-image: linear-gradient(
    to bottom,
    var(--c-black) 0%,
    var(--c-black) 3.6%,
    rgba(0, 0, 0, 0) 100%
  );
}

.special-experience__dim--bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: 25.9%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--c-black));
}

.special-experience__dim--left,
.special-experience__dim--right {
  top: 0;
  bottom: 0;
  width: 27.45%;
}

.special-experience__dim--left {
  left: 15.6%;
  background-image: linear-gradient(to right, var(--c-black), rgba(0, 0, 0, 0));
}

.special-experience__dim--right {
  right: 17.5%;
  background-image: linear-gradient(to left, var(--c-black), rgba(0, 0, 0, 0));
}

.special-experience__display {
  position: absolute;
  top: 11.64%;
  right: 0;
  left: 0;
  margin-top: -15px;
  font-size: min(14.93vw, 90px);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.special-experience__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-12);
  margin-top: 28px;
}

.special-experience__lead {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
}

@media (min-width: 1024px) {
  .special-experience { padding-block: var(--s-24) var(--s-64); }

  .special-experience__layer--bg { filter: blur(1.85px); }

  .special-experience__dim--left { left: 0.88%; }

  .special-experience__dim--right { right: 7.02%; }

  .special-experience__display {
    top: 14.59%;
    margin-top: -30px;
    font-size: min(7.9vw, 90px);
  }

  .special-experience__body { margin-top: -69px; }

  .special-experience__lead { font-size: 26px; }
}