/* Homepage photography only. Do not change shared/footer motion. */
.hero.hero--network .hero-media {
  animation: none;
  animation-timeline: auto;
  animation-range: normal;
  translate: none;
  transform: none;
}

.hero.hero--network .hero-media img {
  object-position: 62% 50%;
  transform-origin: 62% 50%;
  transform: none;
  animation: none;
}

/* Keep the original photograph's orientation in Arabic, too. Frame the
   connections on the open left side instead of flipping photographed markings. */
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1200px) {
  .hero.hero--network {
    --network-overlay-angle: 90deg;
  }

  [dir="rtl"] .hero.hero--network {
    --network-overlay-angle: 270deg;
  }

  .hero.hero--network::before {
    background:
      linear-gradient(var(--network-overlay-angle), #0b1f2cf5, #0b1f2ced 32%, #0b1f2cd1 52%, #0b1f2c29 78%, #0b1f2c14),
      linear-gradient(0deg, #0b1f2c80, #0b1f2c00 34%);
  }

  [dir="rtl"] .hero.hero--network .hero-media {
    left: 0;
    right: auto;
    width: 76%;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
    mask-image: linear-gradient(90deg, #000 70%, transparent);
  }

  [dir="rtl"] .hero.hero--network .hero-media img {
    object-position: 100% 50%;
    transform-origin: 72% 50%;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) and (orientation: landscape) {
  .hero.hero--network::before {
    background: linear-gradient(var(--network-overlay-angle), #0b1f2cf5, #0b1f2ce8 55%, #0b1f2cd1 72%, #0b1f2c29);
  }
}

@media (max-width: 1023px), (orientation: portrait) and (max-width: 1199px) {
  .hero.hero--network .hero-media img {
    object-position: 68% 42%;
    transform-origin: 68% 42%;
  }

  .hero.hero--network .hero-inner {
    padding-top: clamp(136px, 20svh, 200px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .hero.hero--network .hero-inner {
    padding-top: min(36svh, 480px);
  }
}

/* One restrained opening movement, then a still image. No continuous drift
   or scroll-linked parallax. Never move the text or call-to-action buttons. */
@media (prefers-reduced-motion: no-preference) {
  .hero.hero--network .hero-media img {
    animation: home-network-settle 4s cubic-bezier(.25, .8, .25, 1) both;
  }
}

@keyframes home-network-settle {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--network .hero-media,
  .hero.hero--network .hero-media img {
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }
}

/* Progressive enhancement: a fixed headline over three decorative photographs.
   Without JavaScript only the first photograph is visible and controls stay hidden. */
.hero.hero--network[data-hero-carousel] .hero-media .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}

.hero.hero--network[data-hero-carousel] .hero-media .hero-slide.is-active {
  opacity: 1;
}

.hero.hero--network[data-hero-carousel] .hero-media img {
  animation: none;
  transform: none;
}

.hero.hero--network[data-hero-carousel] .hero-slide--workplace img {
  object-position: 60% 50%;
}

.hero.hero--network[data-hero-carousel] .hero-slide--cloud img {
  object-position: 50% 45%;
}

.hero.hero--network[data-hero-carousel] .hero-inner {
  padding-bottom: 128px;
}

.hero-controls {
  position: absolute;
  inset-inline-start: var(--side);
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 2 * var(--side));
  padding: 6px;
  border: 1px solid #a9b7bc66;
  border-radius: 999px;
  color: var(--p-on-navy);
  background: #0b1f2ce8;
  box-shadow: 0 8px 28px #06131d26;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-controls[hidden] {
  display: none;
}

.hero-controls .hero-control {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s ease;
}

.hero-controls .hero-control--toggle {
  width: auto;
  padding-inline: 12px;
  background: #ffffff12;
}

.hero-controls .hero-control:focus-visible {
  outline: 2px solid var(--p-logo-teal);
  outline-offset: 2px;
}

.hero-slide-dot {
  width: 22px;
  height: 6px;
  border-radius: 99px;
  background: #b7c3c7;
  transform: scaleX(.273);
  transition: transform .3s ease, background-color .3s ease;
}

.hero-control[aria-current="true"] .hero-slide-dot {
  transform: scaleX(1);
  background: var(--p-logo-teal);
}

[data-hero-state="playing"] .hero-play-icon,
[data-hero-state="paused"] .hero-pause-icon {
  display: none;
}

[dir="rtl"] .hero-control--prev svg,
[dir="rtl"] .hero-control--next svg {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .hero-controls .hero-control:hover {
    background: #ffffff1f;
  }
}

@media (max-width: 1023px), (orientation: portrait) and (max-width: 1199px) {
  .hero.hero--network[data-hero-carousel] .hero-inner {
    --hero-gallery-copy-start: clamp(136px, 20svh, 200px);
    padding-top: var(--hero-gallery-copy-start);
    padding-bottom: 40px;
  }

  .hero.hero--network[data-hero-carousel] .hero-slide--workplace img {
    object-position: 55% 40%;
  }

  .hero.hero--network[data-hero-carousel] .hero-slide--cloud img {
    object-position: 50% 40%;
  }

  .hero-controls {
    top: calc(var(--hero-gallery-copy-start) - 76px);
    bottom: auto;
    gap: 0;
    padding: 2px;
  }

  .hero-controls .hero-control--toggle {
    width: 44px;
    padding: 0;
  }

  .hero-controls [data-hero-toggle-label] {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .hero.hero--network[data-hero-carousel] .hero-inner {
    --hero-gallery-copy-start: min(28svh, 320px);
    padding-bottom: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--network[data-hero-carousel] .hero-media .hero-slide,
  .hero-controls .hero-control,
  .hero-slide-dot {
    transition: none;
  }
}

@media print {
  .hero-controls { display: none; }
}