@property --story-ring-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.comic-panel .comic-panel-icon {
  --story-ring-color: #d98b18;
  --story-ring-soft: rgba(217, 139, 24, 0.28);
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}

#happy-karena-usaha .comic-panel-icon {
  --story-ring-color: #4f7e2f;
  --story-ring-soft: rgba(79, 126, 47, 0.28);
}

#happy-itu-dekat .comic-panel-icon {
  --story-ring-color: #d9463d;
  --story-ring-soft: rgba(217, 70, 61, 0.28);
}

#happy-itu-liburan .comic-panel-icon {
  --story-ring-color: #df8a12;
  --story-ring-soft: rgba(223, 138, 18, 0.28);
}

.comic-panel .comic-panel-icon::before,
.comic-panel .comic-panel-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.comic-panel .comic-panel-icon::before {
  --story-ring-progress: 0deg;
  inset: -8px;
  z-index: 3;
  background: conic-gradient(
    from -82deg,
    var(--story-ring-color) 0deg var(--story-ring-progress),
    transparent var(--story-ring-progress) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: drop-shadow(0 1px 1px var(--story-ring-soft));
  transform: rotate(-7deg) scale(0.97);
  animation: story-icon-ring-draw 3.8s ease-in-out infinite;
}

.comic-panel .comic-panel-icon::after {
  inset: -12px;
  z-index: 2;
  border: 2px solid var(--story-ring-soft);
  border-top-color: transparent;
  border-left-color: transparent;
  opacity: 0;
  transform: rotate(18deg) scale(0.92);
  animation: story-icon-ring-echo 3.8s ease-in-out infinite;
}

.comic-panel .comic-panel-icon img {
  position: relative;
  z-index: 1;
  clip-path: circle(49% at 50% 50%);
}

@keyframes story-icon-ring-draw {
  0%, 12% {
    --story-ring-progress: 0deg;
    opacity: 0;
    transform: rotate(-7deg) scale(0.94);
  }
  18% {
    opacity: 0.9;
  }
  64%, 82% {
    --story-ring-progress: 360deg;
    opacity: 1;
    transform: rotate(3deg) scale(1);
  }
  100% {
    --story-ring-progress: 360deg;
    opacity: 0;
    transform: rotate(7deg) scale(1.02);
  }
}

@keyframes story-icon-ring-echo {
  0%, 48% {
    opacity: 0;
    transform: rotate(12deg) scale(0.9);
  }
  66%, 82% {
    opacity: 0.72;
    transform: rotate(22deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(28deg) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comic-panel .comic-panel-icon::before {
    --story-ring-progress: 360deg;
    animation: none;
    opacity: 1;
    transform: rotate(0deg);
  }

  .comic-panel .comic-panel-icon::after {
    animation: none;
    opacity: 0.55;
    transform: rotate(18deg);
  }
}