.product-shader {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: clamp(26rem, 68svh, 42rem);
  overflow: hidden;
  color: #fff;
  background: radial-gradient(ellipse at 50% 100%, #151224, transparent 60%), #000;
  text-align: center;
}
.product-shader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .74;
  pointer-events: none;
}
.product-shader::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #000e 0%, #000a 30%, transparent 68%);
  content: "";
  pointer-events: none;
}
:root[data-theme="dark"] .product-shader { background: var(--background); }
:root[data-theme="dark"] .product-shader-canvas { mix-blend-mode: screen; }
:root[data-theme="dark"] .product-shader::after { background: radial-gradient(ellipse at center, var(--background) 0%, transparent 68%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .product-shader { background: var(--background); }
  :root:not([data-theme]) .product-shader-canvas { mix-blend-mode: screen; }
  :root:not([data-theme]) .product-shader::after { background: radial-gradient(ellipse at center, var(--background) 0%, transparent 68%); }
}
.product-shader-curve {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  width: 100%;
  height: clamp(34px, 7vw, 100px);
  fill: var(--background);
  pointer-events: none;
}
.product-shader-curve--top { inset-block-start: -1px; }
.product-shader-curve--bottom {
  inset-block-end: -1px;
  transform: rotate(180deg);
}
main:has(> .product-shader:last-child) + .site-footer { border-block-start: 0; }
.product-shader-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-24) var(--space-5);
}
.product-shader-content h2 {
  color: #fff;
  font-family: var(--font-brand);
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 750;
  letter-spacing: -.07em;
  line-height: 1;
  text-shadow: 0 3px 24px #000;
}
.product-shader-badge {
  --badge-signal: #81e8f5;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target);
  padding-inline: var(--space-4);
  border: 1px solid #70747d;
  border-radius: var(--radius-pill);
  background: #141519;
  color: #fff;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transition: border-color var(--duration), background var(--duration);
}
.product-shader-badge:hover { border-color: #b8d5da; background: #24282e; text-decoration: none; }
.product-shader-badge:focus-visible { outline: 2px solid var(--badge-signal); outline-offset: 4px; }
.product-shader-badge .arrow { width: 16px; height: 16px; }
.product-shader-dot {
  position: relative;
  width: 6px;
  height: 6px;
  margin-inline-end: var(--space-1);
  border-radius: 50%;
  background: var(--badge-signal);
}
.product-shader-dot::after {
  position: absolute;
  inset: 0;
  border: 1px solid var(--badge-signal);
  border-radius: inherit;
  content: "";
  animation: product-shader-ping 3s ease-out infinite paused;
}
.product-shader-trace {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: calc(50% - 152px);
  color: var(--badge-signal);
  overflow: visible;
  pointer-events: none;
}
.product-shader-trace path { stroke: currentColor; stroke-width: 1; opacity: .32; }
.product-shader-trace .product-shader-signal {
  opacity: 1;
  stroke-dasharray: 16 84;
  animation: product-shader-signal 3s linear infinite paused;
}
[data-shader-playing] .product-shader-signal,
[data-shader-playing] .product-shader-dot::after { animation-play-state: running; }
@keyframes product-shader-signal { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -84; } }
@keyframes product-shader-ping {
  0%, 52% { transform: scale(1); opacity: .8; }
  86%, 100% { transform: scale(3.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .product-shader-canvas, .product-shader-signal, .product-shader-dot::after { display: none; }
}