.cx-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.cx-stamp { position: absolute; width: 72px; height: 72px; pointer-events: none; }
.cx-stamp > i { display: block; width: 100%; height: 100%; background-position: center; background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 3px 5px #17261e38); opacity: 0; transform: scale(1.35) rotate(-16deg);
  transition: transform .5s cubic-bezier(.25, 1.6, .45, 1), opacity .25s ease-out; }

.cx-stamp.cx-in > i { opacity: 1; transform: scale(1) rotate(0deg); }

@supports (animation-timeline: view()) {
  .cx-stamp.cx-in > i { animation: cx-breathe linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
  @keyframes cx-breathe {
    0% { transform: scale(.9) rotate(-5deg); }
    50% { transform: scale(1.07) rotate(0deg); }
    100% { transform: scale(.92) rotate(5deg); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cx-stamp > i, .cx-stamp.cx-in > i { opacity: 1; transform: none; transition: none; animation: none; }
}
@media (max-width: 760px) { .cx-stamp { width: 56px; height: 56px; } }
@media print { .cx-layer { display: none; } }
.cx-s-rinjani { background-image: url(stamp-rinjani.svg); }
.cx-s-lake { background-image: url(stamp-lake.svg); }
.cx-s-village { background-image: url(stamp-village.svg); }
.cx-s-sunrise { background-image: url(stamp-sunrise.svg); }
.cx-s-whaleshark { background-image: url(stamp-whaleshark.svg); }
.cx-s-dragon { background-image: url(stamp-dragon.svg); }
.cx-s-padar { background-image: url(stamp-padar.svg); }
.cx-s-phinisi { background-image: url(stamp-phinisi.svg); }
.cx-s-manta { background-image: url(stamp-manta.svg); }