/* Hero carousel controls: animated blue arrows outside the image frame. */
.landing-hero {
  overflow: visible;
  background: transparent;
}

.landing-hero-control {
  top: 50%;
  width: 36px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #258bff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateY(-50%);
}

.landing-hero-control svg {
  width: 18px;
  height: 32px;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-dasharray: 7 3;
  animation: hero-arrow-outline-run 2.4s linear infinite;
  transition: stroke-width .18s ease, filter .18s ease;
}

@keyframes hero-arrow-outline-run {
  to { stroke-dashoffset: -20; }
}

.landing-hero-control:hover {
  border: 0;
  background: transparent;
  transform: translateY(-50%) scale(1.12);
}

.landing-hero-control:hover svg {
  stroke-width: 2.4;
  filter: drop-shadow(0 0 5px rgb(37 139 255 / 55%));
}

.landing-hero-control:focus-visible {
  outline: 2px solid #258bff;
  outline-offset: 4px;
}

@media (min-width: 681px) {
  .landing-hero { width: min(1180px, calc(100% - 112px)); }
  .landing-hero-control-prev { left: -42px; }
  .landing-hero-control-next { right: -42px; }
}

@media (max-width: 680px) {
  .landing-hero-control { display: none; }
}