/* Shared jagged sticker primitives — used by sticker-playground and panel-test */

@keyframes sticker-frame {
  0%,
  49.99% {
    transform: translate3d(var(--f1-x, 0), var(--f1-y, 0), 0) rotate(var(--f1-r, 0deg));
  }

  50%,
  100% {
    transform: translate3d(var(--f2-x, 0), var(--f2-y, 0), 0) rotate(var(--f2-r, 0deg));
  }
}

@keyframes shadow-frame {
  0%,
  49.99% {
    transform: translate(var(--shadow-a, 6px), var(--shadow-a, 6px));
  }

  50%,
  100% {
    transform: translate(var(--shadow-b, 8px), var(--shadow-b, 8px));
  }
}

@keyframes star-frame {
  0%,
  49.99% {
    transform: rotate(-8deg) scale(1);
  }

  50%,
  100% {
    transform: rotate(6deg) scale(1.08);
  }
}

.sticker-idle {
  animation: sticker-frame calc(var(--frame-ms, 600ms) * 2) steps(1, end) infinite;
  animation-delay: var(--anim-delay, 0ms);
}

.sticker-idle--star {
  animation: star-frame calc(var(--frame-ms, 600ms) * 2) steps(1, end) infinite;
  animation-delay: var(--anim-delay, 0ms);
}

.sticker-paused .sticker-idle,
.sticker-paused .sticker-idle--star,
.sticker-paused .img-sticker__shadow {
  animation-play-state: paused;
}

/* --- Jagged shell --- */

.jagged {
  position: relative;
  display: block;
  width: 100%;
}

.jagged__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.jagged__shadow-path {
  fill: var(--black, #050505);
}

.jagged__fill-path {
  fill: var(--white, #f5f5f5);
}

.jagged__accent-path {
  fill: var(--stroke, #e91e8c);
  opacity: 0.95;
}

.jagged__content {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.35rem;
  color: var(--black, #050505);
}

.jagged__content h3 {
  margin: 0 0 0.3rem;
  font-family: 'Rubik', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.jagged__content p {
  margin: 0;
  line-height: 1.45;
  font-size: 0.88rem;
}

/* --- Image sticker --- */

.img-sticker {
  position: relative;
  width: min(100%, 680px);
  margin: 0;
}

.img-sticker__shadow,
.img-sticker__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.img-sticker__shadow {
  z-index: 0;
  background: var(--black, #050505);
  clip-path: var(--clip-current, var(--clip-a));
  transform: translate(var(--shadow-a, 6px), var(--shadow-a, 6px));
  animation: shadow-frame calc(var(--frame-ms, 600ms) * 2) steps(1, end) infinite;
  animation-delay: var(--anim-delay, 0ms);
}

.img-sticker__frame {
  z-index: 1;
  box-shadow:
    0 0 0 4px var(--black, #050505),
    0 0 0 9px var(--stroke, #e91e8c);
  clip-path: var(--clip-current, var(--clip-a));
}

.img-sticker__photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  clip-path: var(--clip-current, var(--clip-a));
}

.img-sticker__star {
  position: absolute;
  z-index: 3;
  font-size: 1.35rem;
  color: var(--lime, #c8f542);
  text-shadow:
    2px 0 0 var(--black, #050505),
    -2px 0 0 var(--black, #050505),
    0 2px 0 var(--black, #050505),
    0 -2px 0 var(--black, #050505);
  pointer-events: none;
}

.img-sticker__star--tl {
  top: -0.55rem;
  left: 5%;
}

.img-sticker__star--br {
  bottom: -0.45rem;
  right: 7%;
  font-size: 1.05rem;
}