/*
 * Mechanik 80 — hero geometry lock v9.12.0
 * One source photograph, additive period cars and a monitor-safe control stack.
 */

/*
 * Both scenes retain the exact pixels and perspective of the supplied school
 * photograph. The archive raster only changes colour treatment and adds cars.
 */
.m80-hero__photo--past {
  background-color: #b98b47 !important;
  background-image: var(--m80-hero-past,url("../images/hero-school-archive-v9.12.png")) !important;
  filter: var(--m80-hero-past-filter,none) !important;
}
.m80-hero__photo--now {
  background-image: var(--m80-hero-now,url("../images/hero-school-shared-v9.8.png")) !important;
  filter: none !important;
}
.m80-hero__photo--past picture > img { filter: none !important; }
.m80-hero__photo--now picture > img {
  filter: saturate(1.035) contrast(1.015) brightness(1.025) !important;
}
.m80-hero__photo--past::before {
  display: none !important;
  content: none !important;
}
.m80-hero__photo--past::after {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  content: "" !important;
  background: url("../images/archive-damage-texture.png") center / cover no-repeat !important;
  mix-blend-mode: multiply !important;
  opacity: .2 !important;
  pointer-events: none !important;
}
.m80-hero__vintage-cars { display: none !important; }
.m80-hero__shade {
  background:
    linear-gradient(180deg,rgba(3,12,24,.07) 0%,rgba(3,12,24,0) 43%,rgba(3,12,24,.08) 68%,rgba(3,12,24,.54) 100%),
    linear-gradient(90deg,rgba(3,12,24,.2) 0%,rgba(3,12,24,.08) 32%,transparent 55%,transparent 84%,rgba(3,12,24,.06) 100%) !important;
}

/*
 * The logo/gears and the comparison panel form one stack. Their relationship
 * no longer depends on viewport height, so unusual monitors cannot make the
 * range control collide with the anniversary mark.
 */
.m80-hero {
  --m80-hero-cluster-y: clamp(240px,15vw,270px);
  --m80-hero-control-offset: 171px;
}
.m80-hero__mechanism,
.m80-hero__logo {
  top: var(--m80-hero-cluster-y) !important;
  left: 50% !important;
}
.m80-hero__compare,
.m80-js .m80-hero__compare[data-reveal],
.m80-js .m80-hero__compare[data-reveal].is-inview {
  top: calc(var(--m80-hero-cluster-y) + var(--m80-hero-control-offset)) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(370px,calc(100vw - 34px)) !important;
  transform: translateX(-50%) !important;
}
.m80-hero__compare-hint {
  top: calc(100% + 12px) !important;
  right: 4px !important;
  bottom: auto !important;
}

@media (max-width: 1280px) {
  .m80-hero {
    --m80-hero-cluster-y: 205px;
    --m80-hero-control-offset: 145px;
  }
  .m80-hero__photo--past {
    background-image: var(--m80-hero-past-mobile,url("../images/hero-school-archive-mobile-v9.12.png")) !important;
  }
  .m80-hero__photo--now {
    background-image: var(--m80-hero-now-mobile,url("../images/hero-school-shared-mobile-v9.8.png")) !important;
  }
  .m80-hero__compare,
  .m80-js .m80-hero__compare[data-reveal],
  .m80-js .m80-hero__compare[data-reveal].is-inview {
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    transform: none !important;
  }
}

@media (max-width: 620px) {
  .m80-hero {
    --m80-hero-cluster-y: 176px;
    --m80-hero-control-offset: 132px;
  }
  .m80-hero__compare,
  .m80-js .m80-hero__compare[data-reveal],
  .m80-js .m80-hero__compare[data-reveal].is-inview {
    right: 12px !important;
    left: 12px !important;
  }
  .m80-hero__compare-hint {
    top: calc(100% + 9px) !important;
    right: 2px !important;
  }
  .m80-hero__shade {
    background:
      linear-gradient(180deg,rgba(3,12,24,.04),transparent 42%,rgba(3,12,24,.1) 68%,rgba(3,12,24,.58) 100%),
      linear-gradient(90deg,rgba(3,12,24,.12),transparent 61%) !important;
  }
}