/** POP IN **/
.close-pop-in {
    position: absolute;
    top: -40px;
    right: -20px;
	color: #FFF;
    font-size: 35px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: none;
    opacity: 1;
    z-index: 12;
	cursor: pointer;
}

.scratch-card {
  position: fixed;
  right: 35px;
  bottom: clamp(15px, 2.2vw, 35px);
  width: clamp(250px, 28vw, 550px);
  max-width:600px;
  aspect-ratio:1/1;
  touch-action:none;
  z-index: 12;
}


@media (max-width: 1024px) {
	.scratch-card {
		left: 50%;
    	right: inherit;
    	transform: translate(-50%, 0);
	}
}

.scratch-content {
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:5%;
  box-shadow:
   0 1px 1px hsl(0deg 0% 0% / 0.075),
   0 2px 2px hsl(0deg 0% 0% / 0.075),
   0 4px 4px hsl(0deg 0% 0% / 0.075),
   0 8px 8px hsl(0deg 0% 0% / 0.075),
   0 16px 16px hsl(0deg 0% 0% / 0.075) ;
}
.scratch-content img{
  width:100%;
  height:100%;
}
.scratch-link {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center; 
  justify-content:center;
  font-size:28px;
  font-weight:bold;
  color:white;
  text-decoration:none;
  pointer-events:none;
  opacity:.6;
  transition:.3s;
}
.scratch-link.active{
  pointer-events:auto;
  opacity:1;
}
.scratch-card canvas{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width: 100%;
  overflow:hidden;
  border-radius:5%;

}
.scratch-card .fadeout{
  animation:fade .7s forwards;
}
@keyframes fade{
  to{opacity:0}
}