/* Holographic stickers — 5 comparable foil methods */

.hs-defs {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.hs-reduced[hidden] { display: none; }
html.hs-rm .hs-reduced[hidden] { display: inline; }

.hs-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-8);
  align-items: end;
}

.hs-card {
  display: grid;
  gap: var(--s-3);
  --mx: 0.5;
  --my: 0.5;
  --px: 50%;
  --py: 50%;
}

.hs-card__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hs-ar, 1);
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: crosshair;
  border-radius: 10px;
  background:
    repeating-conic-gradient(#e8e4dc 0% 25%, #f4f1ea 0% 50%)
    0 0 / 18px 18px;
  overflow: hidden;
}

.hs-card__label {
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
}

.hs-card__label b {
  color: var(--fg);
  font-weight: 500;
}

.hs-sticker {
  display: block;
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

/* ── 01 CSS-only foil ───────────────────────────────────────────────────── */

.hs-css {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.hs-css .hs-sticker { z-index: 1; }

.hs-css__foil {
  position: absolute;
  inset: 6%;
  z-index: 2;
  pointer-events: none;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      calc(115deg + (var(--mx) - 0.5) * 80deg),
      #ff4d6d 0%,
      #ffd166 14%,
      #06d6a0 28%,
      #118ab2 42%,
      #9b5de5 56%,
      #ff4d6d 70%
    ),
    conic-gradient(
      from calc(var(--mx) * 360deg) at var(--px) var(--py),
      #ff006e,
      #8338ec,
      #3a86ff,
      #06d6a0,
      #ffbe0b,
      #ff006e
    );
  background-size: 220% 220%, 160% 160%;
  background-position:
    calc(var(--mx) * 100%) calc(var(--my) * 100%),
    calc(var(--mx) * 80%) calc(var(--my) * 80%);
  mix-blend-mode: color-dodge;
  opacity: 0.55;
  -webkit-mask-image: var(--hs-mask);
  mask-image: var(--hs-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: opacity 0.25s ease;
}

.hs-card:hover .hs-css__foil,
.hs-card:focus-within .hs-css__foil {
  opacity: 0.85;
}

/* ── 02 SVG filter overlay ──────────────────────────────────────────────── */

.hs-svg {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.hs-svg__filtered {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

.hs-svg__wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* rainbow tint — soft foil wash, tracks cursor with specular */
.hs-svg__tint {
  position: absolute;
  inset: 6%;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(
      circle at var(--px) var(--py),
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.08) 28%,
      transparent 58%
    ),
    conic-gradient(
      from calc(var(--mx) * 360deg) at var(--px) var(--py),
      #e8899a,
      #e8c97a,
      #7bc4b0,
      #7aa8d4,
      #a894c9,
      #e8899a
    );
  mix-blend-mode: soft-light;
  opacity: 0.38;
  -webkit-mask-image: var(--hs-mask);
  mask-image: var(--hs-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: opacity 0.35s ease;
}

.hs-card:hover .hs-svg__tint,
.hs-card:focus-within .hs-svg__tint {
  opacity: 0.48;
}

html.hs-rm .hs-svg__tint {
  opacity: 0.22;
  transition: none;
}

/* ── 03 Canvas 2D ───────────────────────────────────────────────────────── */

.hs-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ── 04 CSS 3D tilt + sheen ─────────────────────────────────────────────── */

.hs-tilt-scene {
  width: 100%;
  height: 100%;
  perspective: 700px;
  display: grid;
  place-items: center;
}

.hs-tilt {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform:
    rotateX(calc((0.5 - var(--my)) * 22deg))
    rotateY(calc((var(--mx) - 0.5) * 28deg));
  transition: transform 0.08s linear;
  will-change: transform;
}

.hs-tilt::after {
  content: "";
  position: absolute;
  inset: 6%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    calc(105deg + (var(--mx) - 0.5) * 90deg),
    transparent 20%,
    rgba(255, 255, 255, 0.05) 38%,
    #ff6bcb 46%,
    #7afcff 50%,
    #ffe566 54%,
    rgba(255, 255, 255, 0.05) 62%,
    transparent 80%
  );
  background-size: 220% 220%;
  background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  -webkit-mask-image: var(--hs-mask);
  mask-image: var(--hs-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hs-tilt__glint {
  position: absolute;
  inset: 6%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--px) var(--py),
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.15) 18%,
    transparent 42%
  );
  mix-blend-mode: overlay;
  opacity: 0.75;
  -webkit-mask-image: var(--hs-mask);
  mask-image: var(--hs-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ── 05 WebGL + CSS fallback ────────────────────────────────────────────── */

.hs-gl {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.hs-dodge {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.hs-dodge__a,
.hs-dodge__b {
  position: absolute;
  inset: 6%;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-image: var(--hs-mask);
  mask-image: var(--hs-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hs-dodge__a {
  background:
    repeating-linear-gradient(
      -32deg,
      #ff0080 0 8px,
      #ffd000 8px 16px,
      #00e5a8 16px 24px,
      #00a8ff 24px 32px,
      #b14cff 32px 40px
    );
  background-size: 200% 200%;
  background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%);
  mix-blend-mode: color-dodge;
  opacity: 0.55;
}

.hs-dodge__b {
  background: radial-gradient(
    circle at var(--px) var(--py),
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 180, 255, 0.35) 22%,
    transparent 48%
  );
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

.hs-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-50);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 8px;
  pointer-events: none;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hs-tilt {
    transform: none !important;
    transition: none;
  }

  .hs-css__foil,
  .hs-svg__tint,
  .hs-tilt::after,
  .hs-tilt__glint,
  .hs-dodge__a,
  .hs-dodge__b {
    opacity: 0.28;
    background-position: 50% 50% !important;
  }

  .hs-css__foil,
  .hs-svg__tint,
  .hs-tilt::after {
    background-image: linear-gradient(
      125deg,
      transparent 30%,
      rgba(255, 200, 255, 0.35) 48%,
      rgba(180, 240, 255, 0.35) 52%,
      transparent 70%
    );
  }
}

@media (max-width: 640px) {
  .hs-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }
}