/* ── Product-shell scroll traveler ────────────────────────────────────────
 * A single fixed-position product-shell image whose position is
 * interpolated between image waypoints as the user scrolls.
 * Desktop ≥ 901 px only; smaller viewports keep the normal static images.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Traveler element ─────────────────────────────────────────────────── */
.product-shell-traveler {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  pointer-events: none;
  z-index: 9000;
  transform-origin: 0 0;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 18px 22px rgba(0, 0, 0, .35))
    drop-shadow(0 0 18px color-mix(in srgb, var(--copper) 38%, transparent))
    drop-shadow(0 0 36px color-mix(in srgb, var(--copper) 22%, transparent));
}

/* Traveler image itself */
.product-shell-traveler img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ── Layer presets (applied dynamically via data attribute) ─────────── */
.product-shell-traveler[data-layer="top"] {
  z-index: 9000;
}

/* The low layer is only active during the short image-occlusion window. */
.product-shell-traveler[data-layer="behind-process"] {
  z-index: 2;
}

.product-shell-traveler[data-layer="behind-certificates"] {
  z-index: 2;
}

.product-shell-traveler[data-layer="behind-archive"] {
  z-index: 2;
}

/* ── Hide original hero shell image while traveler is active ─────────
 * Only the shell product in the hero gets hidden; the rest stay. */
.shell-traveler-active [data-shell-waypoint="hero"] > img {
  opacity: 0 !important;
  /* The traveler is aligned to this live HERO frame before this rule is
     enabled. An opacity transition here would briefly render both images. */
  transition: none;
}

/* ── Elevate only the active image occluder. Do not put a z-index on a
 *    whole section/frame: doing that hides the traveler behind its copy,
 *    borders, and background as well. ─────────────────────────────── */
.shell-traveler-active[data-shell-occlusion="process"] [data-shell-occluder="process"],
.shell-traveler-active[data-shell-occlusion="certificates"] [data-shell-occluder="certificates"],
.shell-traveler-active[data-shell-occlusion="archive"] [data-shell-occluder="archive"] {
  position: relative;
  z-index: 4;
}

/* ── Disable on small viewports ─────────────────────────────────────── */
@media (max-width: 991.98px) {
  .product-shell-traveler {
    display: none !important;
  }

  .shell-traveler-active [data-shell-waypoint="hero"] > img {
    opacity: 1 !important;
  }
}

/* ── Respect reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .product-shell-traveler {
    display: none !important;
  }

  .shell-traveler-active [data-shell-waypoint="hero"] > img {
    opacity: 1 !important;
  }
}