:root {
  --glitch-shift: 6px;
}
@supports (scale: 1) {
  .glitch-target {
    transform: none;
    scale: 1;
    transition: scale 0.4s ease;
  }
  .purchase-button:hover .glitch-target {
    scale: 1.1;
  }

  .glitch-target:hover {
    scale: 1.1;
  }
}

.glitch-purchase-btn,
.glitch-purchase-btn::before,
.glitch-purchase-btn::after {
  display: block;
  width: 270px;
  height: 100px;
  background: url("/images/purchase-button.png") no-repeat center / cover;
  position: relative;
}

.glitch-btn,
.glitch-btn::before,
.glitch-btn::after {
  display: block;
  position: relative;
}

.glitch-btn {
  position: relative;
  overflow: hidden;
}

/* 擬似要素を2枚重ねてグリッチ */
.glitch-btn::before,
.glitch-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inset(50% 50% 50% 50%);
}

.glitch-btn::before {
  filter: hue-rotate(40deg) saturate(1.4);
  mix-blend-mode: screen;
}
.glitch-btn::after {
  filter: hue-rotate(-40deg) saturate(1.4);
  mix-blend-mode: screen;
}

.glitch-btn:hover::before,
.glitch-btn:hover::after {
  animation: glitch 1.4s steps(2, end) infinite;
}

@keyframes glitch {
  0% {
    clip-path: inset(80% -6px 0 0);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: inset(10% -6px 85% 0);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: inset(80% -6px 0 0);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: inset(10% -6px 85% 0);
    transform: translate(0, 5px);
  }
  40% {
    clip-path: inset(50% -6px 30% 0);
    transform: translate(-5px, 0);
  }
  50% {
    clip-path: inset(10% -6px 85% 0);
    transform: translate(5px, 0);
  }
  60% {
    clip-path: inset(40% -6px 43% 0);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: inset(50% -6px 30% 0);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: inset(80% -6px 5% 0);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: inset(80% -6px 0 0);
    transform: translate(-10px, 0);
  }
  100% {
    clip-path: inset(80% -6px 0 0);
    transform: translate(0, 0);
  }
}

/* テキストを画像の上に重ねる */
.button-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.button-text--bottom {
  bottom: 20%;
  font-size: 20px;
}
.text-glitch {
  position: absolute;
  z-index: 3;
}

/* 複製レイヤー（シアン/マゼンタの色ズレ） */
.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 20%;
  top: 20%;
  pointer-events: none;
  clip-path: inset(50% 50% 50% 50%);
  opacity: 0;
  white-space: pre-line;
}

.text-glitch::before {
  transform: translateX(var(--glitch-shift));
}
.text-glitch::after {
  transform: translateX(calc(-1 * var(--glitch-shift)));
}

/* hoverで発火（画像と同時に） */
.glitch-btn:hover .text-glitch::before,
.glitch-btn:hover .text-glitch::after {
  opacity: 1;
  animation: glitch 1.4s steps(2, end) infinite;
}

@keyframes text-glitch {
  0% {
    clip-path: inset(80% 0 0 0);
    transform: translate(calc(-1 * var(--glitch-shift)), calc(-1 * var(--glitch-shift)));
  }
  10% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(var(--glitch-shift), var(--glitch-shift));
  }
  20% {
    clip-path: inset(60% 0 20% 0);
    transform: translate(calc(-0.8 * var(--glitch-shift)), 0);
  }
  40% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(calc(0.8 * var(--glitch-shift)), calc(-0.6 * var(--glitch-shift)));
  }
  60% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(calc(-0.6 * var(--glitch-shift)), calc(0.8 * var(--glitch-shift)));
  }
  80% {
    clip-path: inset(70% 0 10% 0);
    transform: translate(var(--glitch-shift), 0);
  }
  100% {
    clip-path: inset(80% 0 0 0);
    transform: translate(0, 0);
  }
}

.download-button-wrapper {
  margin-top: 32px;
  position: relative;
  width: clamp(257px, calc(var(--aspect-base) * 360), 360px);
  height: clamp(34px, calc(var(--aspect-base) * 64), 64px);
  border-radius: 8px;
  overflow: hidden;
}

.glitch-skin,
.glitch-skin::before,
.glitch-skin::after {
  position: absolute;
  inset: 0;
  display: block;
  background: url("/images/btn_texture.svg") center / cover no-repeat;
  background-blend-mode: multiply;
}

.glitch-skin::before,
.glitch-skin::after {
  content: "";
  clip-path: inset(50% 50% 50% 50%);
  opacity: 0;
  background: #ff00ff;
  mix-blend-mode: screen;
  will-change: transform, clip-path;
  z-index: 2;
}
.glitch-btn:hover .glitch-skin::before {
  filter: hue-rotate(40deg) saturate(1.4);
  mix-blend-mode: screen;
}
.glitch-btn:hover .glitch-skin::after {
  filter: hue-rotate(-40deg) saturate(1.4);
  mix-blend-mode: screen;
}

@media (hover: hover) {
  .glitch-btn:hover .glitch-skin::before,
  .glitch-btn:hover .glitch-skin::after {
    opacity: 1;
    animation: glitch-slice 1.4s steps(2, end) infinite;
  }
}

@keyframes glitch-slice {
  0% {
    clip-path: inset(80% -6px 0 0);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: inset(10% -6px 85% 0);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: inset(70% -6px 10% 0);
    transform: translate(-10px, 10px);
  }
  40% {
    clip-path: inset(50% -6px 30% 0);
    transform: translate(-5px, 0px);
  }
  60% {
    clip-path: inset(40% -6px 43% 0);
    transform: translate(5px, 10px);
  }
  80% {
    clip-path: inset(80% -6px 5% 0);
    transform: translate(20px, -10px);
  }
  100% {
    clip-path: inset(80% -6px 0 0);
    transform: translate(0px, 0px);
  }
}

@media screen and (max-width: 960px) {
  .glitch-purchase-btn,
  .glitch-purchase-btn::before,
  .glitch-purchase-btn::after {
    display: block;
    width: 128px;
    height: 128px;
    background: url("/images/purchase-button-sp.png") no-repeat center / cover;
    position: relative;
  }
  .purchase-button .button-text--bottom {
    top: 45%;
    width: 100%;
  }
  .purchase-button .button-text {
    left: 50%;
  }
}