/* Opening imagery belongs to its section rather than a floating picture card.
   Existing panoramic and transparent-product treatments retain their layout. */
[data-atlas-opening-photo] .atlas-editorial-figure,
[data-atlas-opening-photo] .software-hero-visual {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 97%, transparent);
}

/* The family stays together on the right; the copy has a solid, quiet surface.
   At narrower widths the whole photo sits below the copy without cropping. */
.vs-collection-hero[data-atlas-opening] {
  --atlas-opening-surface: #f6f3ed;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: var(--atlas-opening-surface);
}
.vs-collection-hero[data-atlas-opening] .vs-hero-grid {
  display: flex;
  align-items: center;
  min-height: 630px;
  padding-block: 64px;
}
.vs-collection-hero[data-atlas-opening] .vs-hero-grid > div {
  position: relative;
  z-index: 2;
  width: 43%;
  min-width: 0;
}
.vs-collection-hero[data-atlas-opening] h1 { font-size: clamp(43px, 4.7vw, 72px); }
.vs-collection-hero[data-atlas-opening] .vs-family-hero {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 38%;
  width: auto;
  max-width: none;
  margin: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%);
  mask-image: linear-gradient(90deg, transparent, #000 16%);
}
.vs-collection-hero[data-atlas-opening] .vs-family-hero a {
  height: 100%;
  border-radius: 0;
}
.vs-collection-hero[data-atlas-opening] .vs-family-hero img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
  mix-blend-mode: normal;
}
.vs-collection-hero[data-atlas-opening]::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--atlas-opening-surface) 0%, var(--atlas-opening-surface) 35%, #f6f3edeb 40%, transparent 49%);
}

/* NordVPN's scene is composed for the devices to sit on the right. Keep the
   complete laptop and phone visible while the left-hand copy stays readable. */
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: #102b3e;
  color: #fff;
}
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-grid {
  display: flex;
  align-items: center;
  min-height: 690px;
  padding-block: 62px;
}
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-copy {
  position: relative;
  z-index: 2;
  width: 45%;
  min-width: 0;
}
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] h1 {
  color: #fff;
  font-size: clamp(38px, 4.1vw, 62px);
  line-height: 1.08;
}
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] :is(.lede, .guide-meta, .breadcrumbs) { color: #dce9f2; }
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .eyebrow { color: #a9d9fc; }
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .breadcrumbs a { color: inherit; }
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .cta { background: #fff; color: #123248; border-color: #fff; }
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .cta.alt { background: transparent; color: #fff; border-color: #c7dbe7; }
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 25%;
  width: auto;
  max-width: none;
  margin: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%);
  mask-image: linear-gradient(90deg, transparent, #000 28%);
}
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-visual a { display: block; height: 100%; }
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-visual img {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right center;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
}
[data-view="/software/nordvpn/"] .software-hero[data-atlas-opening]::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #102b3e 0%, #102b3e 32%, #102b3eed 40%, transparent 61%);
}

@media (max-width: 1100px) {
  .vs-collection-hero[data-atlas-opening] .vs-hero-grid {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 0;
    padding-block: 38px 0;
  }
  .vs-collection-hero[data-atlas-opening] .vs-hero-grid > div { width: 100%; max-width: 740px; }
  .vs-collection-hero[data-atlas-opening] h1 { font-size: clamp(40px, 6vw, 62px); }
  .vs-collection-hero[data-atlas-opening] .vs-family-hero {
    position: relative;
    inset: auto;
    width: calc(100% + 36px);
    max-width: none;
    margin: 16px -18px 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 17%);
    mask-image: linear-gradient(180deg, transparent, #000 17%);
  }
  .vs-collection-hero[data-atlas-opening] .vs-family-hero img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
  }
  .vs-collection-hero[data-atlas-opening]::after { display: none; }
  [data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-grid {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 0;
    padding-block: 38px 0;
  }
  [data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-copy { width: 100%; max-width: 760px; }
  [data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] h1 { font-size: clamp(38px, 6vw, 60px); }
  [data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-visual {
    position: relative;
    inset: auto;
    width: calc(100% + 36px);
    max-width: none;
    margin: 18px -18px 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 17%);
    mask-image: linear-gradient(180deg, transparent, #000 17%);
  }
  [data-view="/software/nordvpn/"] .software-hero[data-atlas-opening] .software-hero-visual img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }
  [data-view="/software/nordvpn/"] .software-hero[data-atlas-opening]::after { display: none; }
}

/* Visibility is the default. CSS alone restarts the brief entrance when the
   existing router reveals a view; there is no observer, timer or hidden class. */
@keyframes atlas-opening-copy {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes atlas-opening-image {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-view]:not([hidden]) [data-atlas-opening] :is(h1, .lede, .eyebrow, .breadcrumbs, .actions, .trustline, .guide-meta, .vs-eyebrow, .spectrum-kicker, .tgim-wordmark),
  .network-intake-layout > div:first-child > :is(h1, .eyebrow, .hero-description),
  :is(.contractor-overview, .category-intro, .confirmation, main.container.section) > :is(h1, .eyebrow, .hero-description, p) {
    animation: atlas-opening-copy 520ms cubic-bezier(.2,.7,.2,1) both;
  }
  [data-view]:not([hidden]) [data-atlas-opening] [data-atlas-opening-image],
  .native-page-visual {
    animation: atlas-opening-image 620ms ease-out both;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-atlas-opening] :is(h1, .lede, .eyebrow, .breadcrumbs, .actions, .trustline, .guide-meta, .vs-eyebrow, .spectrum-kicker, .tgim-wordmark, [data-atlas-opening-image]),
  .native-page-visual {
    animation: none;
  }
}