/* Home Hero product reveal: enter from the left without changing layout.
   The Hero surface continues to use the global theme tokens. */

/* The legacy Hero typography tokens are intentionally dark-stage values.
   Re-map them in light mode so copy and the secondary action retain the
   same contrast as the rest of the light-theme pages. */
html[data-theme="light"] .home-hero {
  --hero-ink: var(--ink);
  --hero-muted: var(--muted);
  --hero-accent: var(--copper);
}

html[data-theme="light"] .home-hero .hero-actions .button {
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
}

html[data-theme="light"] .home-hero .hero-actions .button-primary {
  border-color: var(--copper);
}

html[data-theme="light"] .home-hero .hero-actions .button-ghost {
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
}

.home-hero-products {
  --home-hero-products-reveal-offset: clamp(72px, 8vw, 160px);
  animation: none;
  transition:
    opacity .65s ease var(--reveal-delay, 0s),
    transform .65s ease var(--reveal-delay, 0s),
    visibility 0s linear var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

/* The shell starts as a smooth curved silhouette — a soft upper-half
   ellipse with a copper glow — before the products slide into place. */
.home-hero-products:not(.is-ready) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(-1 * var(--home-hero-products-reveal-offset)), 0, 0);
  -webkit-mask-image: radial-gradient(140% 95% at 50% 18%, #000 62%, transparent 78%);
  mask-image: radial-gradient(140% 95% at 50% 18%, #000 62%, transparent 78%);
}

.home-hero-products.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  -webkit-mask-image: none;
  mask-image: none;
}

/* The original curved composition: the in-shell peanut cluster follows the
   upper-half ellipse and carries a copper glow that matches the reference. */
.home-hero-products > .home-hero-product--shell > img {
  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));
}

.home-hero-products:not(.is-ready) > .home-hero-product--shell > img {
  filter:
    drop-shadow(0 0 26px color-mix(in srgb, var(--copper) 46%, transparent))
    drop-shadow(0 0 56px color-mix(in srgb, var(--copper) 28%, transparent));
}

/* Make this group reveal the sole Home Hero entrance animation. The legacy
 * child keyframes are disabled while preserving the shared hover/focus state. */
.home-hero-products.reveal .home-hero-product {
  opacity: 1;
  animation: none;
}

.home-hero-products.reveal.is-ready .home-hero-product {
  animation: none;
}

.home-hero-products.reveal .home-hero-product:not(:hover):not(:focus-visible) {
  transform: none;
}

/* Match the smaller product staging areas used at tablet and phone widths. */
@media (max-width: 900px) {
  .home-hero-products {
    --home-hero-products-reveal-offset: clamp(48px, 12vw, 110px);
  }
}

@media (max-width: 560px) {
  .home-hero-products {
    --home-hero-products-reveal-offset: clamp(28px, 14vw, 72px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-products,
  .home-hero-products:not(.is-ready),
  .home-hero-products.is-ready {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ── Traveler visibility driven by the scroll traveler ─────────────────
   Opacity is intentionally owned by the existing JS interpolation. Keeping
   CSS from replacing that value is what allows the process → certificates
   fade to remain continuous instead of jumping at a waypoint. */
.shell-traveler-active .product-shell-traveler {
  transition: filter .45s ease;
}

/* Defensive terminal guard: after the existing traveler completes the archive
   segment, no delayed frame or competing style may reveal it again. */
body[data-shell-terminal="true"] .product-shell-traveler {
  opacity: 0 !important;
}