.hero-cinematic {
  isolation: isolate;
  min-height: max(760px, 100svh);
  background: #071b31;
}

.hero-cinematic::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: -2.5%;
  background: url("/media/02-paving-feed-1920.webp") 42% center / cover no-repeat;
  transform: scale(1.035);
  animation: hero-cinema 20s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-cinematic::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 27, 49, .2) 0%, rgba(7, 27, 49, .06) 45%, rgba(7, 27, 49, .92) 100%),
    linear-gradient(90deg, rgba(7, 27, 49, .06) 0%, rgba(7, 27, 49, .38) 43%, rgba(7, 27, 49, .98) 100%);
}

html[dir="ltr"] .hero-cinematic::after {
  background:
    linear-gradient(180deg, rgba(7, 27, 49, .2) 0%, rgba(7, 27, 49, .06) 45%, rgba(7, 27, 49, .92) 100%),
    linear-gradient(270deg, rgba(7, 27, 49, .06) 0%, rgba(7, 27, 49, .42) 48%, rgba(7, 27, 49, .98) 100%);
}

.hero-cinematic .hero-grid {
  z-index: -1;
  opacity: .72;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.hero-cinematic .hero-glow {
  z-index: -1;
  opacity: .62;
}

.hero-cinematic .hero-content {
  min-height: calc(100svh - 180px);
  padding-top: 34px;
}

.hero-cinematic .hero-copy {
  position: relative;
  z-index: 3;
  padding: 42px 0 42px 26px;
}

.hero-cinematic .hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -44px 0 -90px;
  background: radial-gradient(ellipse at center, rgba(7, 27, 49, .72), transparent 70%);
  pointer-events: none;
}

.hero-cinematic .hero-copy > p {
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .32);
}

.hero-cinematic .hero-copy h1 {
  text-wrap: balance;
  text-shadow: 0 4px 32px rgba(0, 0, 0, .26);
}

.hero-cinematic .hero-copy h1 em {
  display: inline-block;
  margin-inline-start: .12em;
}

.hero-cinematic .hero-visual {
  pointer-events: none;
}

.hero-cinematic .road-frame {
  inset: 4% 0 7% 0;
  background:
    linear-gradient(135deg, transparent 0 52%, rgba(255, 255, 255, .035) 52% 52.25%, transparent 52.25%),
    linear-gradient(145deg, rgba(7, 27, 49, .02), rgba(7, 27, 49, .2));
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 70px rgba(7, 27, 49, .12), 0 25px 80px rgba(0, 0, 0, .12);
}

.hero-cinematic .road-frame::before {
  border-color: rgba(241, 90, 36, .52);
}

.hero-cinematic .road-axis {
  background: linear-gradient(90deg, transparent, rgba(7, 27, 49, .24), transparent);
}

.hero-cinematic .location-point {
  animation: location-pulse 2.8s ease-out infinite;
}

.hero-cinematic .visual-label {
  box-shadow: 0 18px 45px rgba(7, 27, 49, .3);
}

@keyframes hero-cinema {
  from { transform: scale(1.035) translate3d(0, 0, 0); }
  to { transform: scale(1.085) translate3d(-.8%, -.35%, 0); }
}

@keyframes location-pulse {
  0%, 100% { box-shadow: 0 0 0 18px rgba(240, 74, 24, .05); }
  50% { box-shadow: 0 0 0 30px rgba(240, 74, 24, .01); }
}

@media (max-width: 980px) {
  .hero-cinematic { min-height: auto; }
  .hero-cinematic::before {
    background-image: url("/media/02-paving-feed-960.webp");
    background-position: 35% center;
  }
  .hero-cinematic .hero-content { min-height: auto; }
  .hero-cinematic .hero-copy { padding-inline: 0; }
  .hero-cinematic .hero-copy::before { inset: -30px -24px; }
  .hero-cinematic .hero-visual { height: 300px; }
  .hero-cinematic .road-frame { inset: 0; }
}

@media (max-width: 620px) {
  .hero-cinematic::before { background-position: 36% center; }
  .hero-cinematic::after {
    background:
      linear-gradient(180deg, rgba(7, 27, 49, .42) 0%, rgba(7, 27, 49, .78) 43%, rgba(7, 27, 49, .96) 100%),
      linear-gradient(90deg, rgba(7, 27, 49, .2), rgba(7, 27, 49, .72));
  }
  .hero-cinematic .hero-content { padding-block: 64px 36px; }
  .hero-cinematic .hero-copy { padding-top: 34px; }
  .hero-cinematic .hero-copy h1 em { margin-inline-start: .08em; }
  .hero-cinematic .hero-visual { height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cinematic::before,
  .hero-cinematic .location-point { animation: none; }
}