.wrapper {
  --width: 220px;
  --paper-width-multiplier: 0.95;
  --paper-height: 160px;
  --cut-size: 5px;
  --perspective: 200px;
  --paper-color: #ffeeb8;
  --text-color: #837e7d;

  position: relative;
  display: grid;
  place-items: center;

  width: var(--width);
  height: 60px;
  margin: 1rem;

  user-select: none;
  pointer-events: none;
}

.cutout-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 60px;
  transform-style: preserve-3d;
  perspective: var(--perspective);
}

.cutout {
  position: absolute;
  width: 100%;
  height: 60px;
  transform: rotateX(-10deg);
  box-sizing: border-box;

  border: 1px solid #0004;
  box-shadow:
    inset 0 1px 1px 0px #0017,
    inset 0 2px 2px 0px #0017,
    inset 0 4px 4px 0px #0017,
    inset 0 12px 12px 0px #0017,
    inset 0 24px 24px 0px #0017;
}

.paper-wrapper {
  position: absolute;
  width: calc(var(--width) * var(--paper-width-multiplier));
  height: var(--paper-height);
  top: 2px;
  filter: drop-shadow(0 1px 1px #0003) drop-shadow(0 6px 3px #0004)
    drop-shadow(0 16px 16px #0003);
  overflow: hidden;
}

.paper {
  position: absolute;
  width: 100%;
  height: 100%;

  border: none;

  background-color: var(--paper-color);
  background-image: repeating-linear-gradient(
    #00000020 calc(0.25 * var(--paper-height)),
    #00000035 calc(0.45 * var(--paper-height)),
    #0000 calc(0.75 * var(--paper-height)),
    #00000020 var(--paper-height)
  );
  background-position: 0 0;

  mask-image: linear-gradient(
      #000 calc(var(--paper-height) - var(--cut-size)),
      #0000 calc(var(--paper-height) - var(--cut-size) + 2px)
    ),
    conic-gradient(#000 135deg, #0000 135.5deg, #0000 224.5deg, #000 225deg);
  mask-position:
    0,
    0 calc(var(--paper-height) - var(--cut-size));
  mask-repeat: no-repeat, repeat-x;
  mask-size:
    100%,
    var(--cut-size) var(--cut-size);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.75rem 1rem;
  box-sizing: border-box;

  cursor: pointer;
  pointer-events: all;

  transition:
    transform 500ms ease,
    background-position 700ms ease;
}

.sec {
  height: 100%;

  transform: translateY(calc(-1 * var(--paper-height) + 50px));

  animation: wiggle 2.75s ease infinite;
}

.shadow-wrapper {
  position: absolute;
  width: 100%;
  height: 32px;
  top: 0;

  transform-style: preserve-3d;
  perspective: calc(var(--perspective) / 1.33);
}

.shadow {
  position: absolute;
  top: 1px;
  width: 100%;
  height: 32px;
  background-color: #0005;
  background-image: linear-gradient(#000, #0000 8px);
  mask-image: linear-gradient(#000 0, #0000 70%);
  transform: rotateX(-10deg);
}

.txt {
  font-family: "Syne", sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.05rem;
  color: var(--text-color);
  text-shadow:
    0 0.5px 1px #fffa,
    0 -0.5px 0.5px #0009;
  transition: opacity 250ms ease;
}

.paper:hover {
  transform: translateY(46px);
  background-position: 0 18px;

  .hov {
    opacity: 0;
  }
}

.paper:focus {
  transform: translateY(84px);
  background-position: 0 10px;

  .hov {
    opacity: 0;
  }
  .coupon {
    opacity: 0;
  }
}

.paper-wrapper:has(.paper:hover) .sec,
.paper-wrapper:has(.paper:focus) .sec {
  animation-iteration-count: 1;
}

@keyframes wiggle {
  8%,
  27% {
    transform: translateY(calc(-1 * var(--paper-height) + 50px));
  }
  20% {
    transform: translateY(calc(-1 * var(--paper-height) + 60px));
  }
}

.cutter-wrapper {
  position: absolute;
  width: 100%;
  height: 32px;
  top: 0;
  transform-style: preserve-3d;
  perspective: calc(var(--perspective) / 1.33);
  mix-blend-mode: screen;
}

.cutter {
  position: absolute;
  top: 1px;
  width: 100%;
  height: calc(var(--cut-size) + 3px);
  background-color: #ddd;
  background-image: linear-gradient(#000, #0000 8px);
  mask-image: linear-gradient(
      #000 calc(calc(var(--cut-size) + 3px) - var(--cut-size)),
      #0000 calc(calc(var(--cut-size) + 3px) - var(--cut-size) + 2px)
    ),
    conic-gradient(#000 135deg, #0000 135.5deg, #0000 224.5deg, #000 225deg);
  mask-position:
    0,
    calc(var(--cut-size) / 2) 3px;
  mask-repeat: no-repeat, repeat-x;
  mask-size:
    100%,
    var(--cut-size) var(--cut-size);

  transform: rotateX(-10deg);
}

.filter {
  position: absolute;
}