@property --mth-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.mth-sticker-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
}

.mth-sticker-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mth-intro-sticker {
  position: absolute;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18))
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.10));

  --mth-fold: calc(var(--mth-minp) + var(--mth-span) * var(--mth-p));

  --mth-half-plane: polygon(
    calc((var(--mth-fold) * var(--mth-u0) + var(--mth-big) * var(--mth-w0)) * 1px)
      calc((var(--mth-fold) * var(--mth-u1) + var(--mth-big) * var(--mth-w1)) * 1px),

    calc((var(--mth-fold) * var(--mth-u0) - var(--mth-big) * var(--mth-w0)) * 1px)
      calc((var(--mth-fold) * var(--mth-u1) - var(--mth-big) * var(--mth-w1)) * 1px),

    calc((var(--mth-fold) * var(--mth-u0) - var(--mth-big) * var(--mth-w0) - var(--mth-big) * var(--mth-u0)) * 1px)
      calc((var(--mth-fold) * var(--mth-u1) - var(--mth-big) * var(--mth-w1) - var(--mth-big) * var(--mth-u1)) * 1px),

    calc((var(--mth-fold) * var(--mth-u0) + var(--mth-big) * var(--mth-w0) - var(--mth-big) * var(--mth-u0)) * 1px)
      calc((var(--mth-fold) * var(--mth-u1) + var(--mth-big) * var(--mth-w1) - var(--mth-big) * var(--mth-u1)) * 1px)
  );
}

.mth-intro-sticker__layer {
  position: absolute;
  inset: 0;
}

.mth-intro-sticker__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.mth-intro-sticker__flat,
.mth-intro-sticker__flap-clip {
  clip-path: var(--mth-half-plane);
}

.mth-intro-sticker__flap-inner {
  transform-origin: 0 0;
  transform: matrix(
    var(--mth-a),
    var(--mth-b),
    var(--mth-b),
    var(--mth-d),
    calc(2 * var(--mth-fold) * var(--mth-u0)),
    calc(2 * var(--mth-fold) * var(--mth-u1))
  );
}

.mth-intro-sticker__flap-fill {
  -webkit-mask-image: var(--mth-src);
  mask-image: var(--mth-src);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mask-mode: alpha;

  background-image: linear-gradient(
    calc(var(--mth-ca) * 1deg),
    #cdcdcd calc(var(--mth-p) * 100%),
    #f3f3f3 calc((var(--mth-p) + (1 - var(--mth-p)) * 0.1) * 100%),
    #ffffff calc((var(--mth-p) + (1 - var(--mth-p)) * 0.45) * 100%),
    #f0f0f0 calc((var(--mth-p) + (1 - var(--mth-p)) * 0.82) * 100%),
    #c6c6c6 100%
  );
}

.mth-intro-sticker__flap-shadow {
  filter: drop-shadow(
    calc(var(--mth-u0) * var(--mth-s) * -0.05 * (1 - var(--mth-p)) * 1px)
    calc((var(--mth-u1) * -0.05 + 0.04) * var(--mth-s) * (1 - var(--mth-p)) * 1px)
    calc(var(--mth-s) * 0.025 * 1px)
    rgba(0, 0, 0, calc(0.35 * (1 - var(--mth-p))))
  );
}

.mth-sticker-intro.is-leaving {
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mth-sticker-intro {
    display: none;
  }
}