/* Decorative layers only: the foreground and its typography never move. */
.hero-depth { position: relative; isolation: isolate; min-width: 0; width: 100%; --depth-x: 0px; --depth-y: 0px; }
.hero-depth .hero-workspace { position: relative; z-index: 2; width: 100%; max-width: none; }
.hero-depth-layer { position: absolute; inset: 0; border: 1px solid #dce4ee; border-radius: 21px; pointer-events: none; transition: transform 420ms cubic-bezier(.22,1,.36,1); }
.hero-depth-far { z-index: 0; background: #e7edf4; transform: translate(calc(14px + var(--depth-x) * 1.5), calc(-16px + var(--depth-y) * 1.5)) rotate(1deg); }
.hero-depth-near { z-index: 1; background: #f0f4f8; border-color: #d6e0ea; transform: translate(calc(7px + var(--depth-x)), calc(-8px + var(--depth-y))) rotate(.45deg); }

/* One sweep per hover or keyboard focus. No loop, timer or extra hit target. */
.hero-actions .button-primary { position: relative; overflow: hidden; isolation: isolate; }
.hero-actions .button-primary::after { content: ''; position: absolute; pointer-events: none; inset: -20% auto -20% 0; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-180%) skewX(-18deg); opacity: 0; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-actions .button-primary:hover::after, .hero-actions .button-primary:focus-visible::after { animation: hero-button-sheen 780ms ease-out both; }
}
@keyframes hero-button-sheen {
  0% { opacity: 0; transform: translateX(-180%) skewX(-18deg); }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(480%) skewX(-18deg); }
}
@media (max-width: 1050px) { .hero-depth { max-width: 500px; } }
@media (max-width: 760px), (pointer: coarse) {
  .hero-depth { max-width: 540px; margin-inline: auto; }
  .hero-depth-layer { transition: none; }
  .hero-depth-far { inset: 0 3px; transform: translate(5px,-9px); }
  .hero-depth-near { inset: 0 1px; transform: translate(3px,-4px); }
  .hero-actions .button-primary::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-depth-layer { transition: none; }
  .hero-depth-far { transform: translate(14px,-16px); }
  .hero-depth-near { transform: translate(7px,-8px); }
  .hero-actions .button-primary::after { display: none; animation: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hero-depth-far { transform: translate(5px,-9px); }
  .hero-depth-near { transform: translate(3px,-4px); }
}