/* Kira Kira Remix Plugin Styles */

:root {
  --kk-rotate-x: 0deg;
  --kk-rotate-y: 0deg;
  --kk-pointer-x: 50%;
  --kk-pointer-y: 50%;
  --kk-shimmer-x: 50%;
  --kk-shimmer-y: 50%;
  --kk-rotate-angle: 0deg;
}

/* カードを包むコンテナ（3D空間） */
.kk-card-container {
  perspective: 1000px;
  display: inline-block;
  line-height: 0;
  position: relative;
  border-radius: 16px;
  overflow: visible;
  touch-action: none;
  /* タッチ操作によるスクロールを抑制 */
}

/* カード本体（回転するレイヤー） */
.kk-card {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: inherit;
  transform-style: preserve-3d;
  transform: rotateX(var(--kk-rotate-x)) rotateY(var(--kk-rotate-y));
  transition: transform 0.1s ease-out;
  overflow: hidden;
  display: block;
}

/* 対象となる画像 */
.kk-card img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: inherit;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ホログラムレイヤー (虹色の光沢) */
.kk-card-hologram {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: color-dodge;
  opacity: 0.33;
  pointer-events: none;
  z-index: 2;

  background-image:
    linear-gradient(115deg,
      transparent 30%,
      rgba(255, 0, 84, 0.3) 40%,
      rgba(255, 126, 0, 0.3) 45%,
      rgba(255, 230, 0, 0.3) 50%,
      rgba(21, 255, 0, 0.3) 55%,
      rgba(0, 217, 255, 0.3) 60%,
      rgba(4, 0, 255, 0.3) 70%,
      transparent 80%),
    conic-gradient(from var(--kk-rotate-angle) at 50% 50%,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(200, 200, 200, 0.1) 12%,
      rgba(255, 0, 84, 0.4) 25%,
      rgba(255, 230, 0, 0.4) 37%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(200, 200, 200, 0.1) 62%,
      rgba(0, 217, 255, 0.4) 75%,
      rgba(4, 0, 255, 0.4) 87%,
      rgba(255, 255, 255, 0.6) 100%);

  background-size: 800% 800%, 25px 25px;
  background-repeat: no-repeat, repeat;
  background-position: var(--kk-shimmer-x) var(--kk-shimmer-y), center center;
  transition: background-position 0.1s ease-out;
}

/* グレアレイヤー (白い光の反射) */
.kk-card-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: var(--kk-glare-opacity, 0);
  pointer-events: none;
  z-index: 3;

  background-image: radial-gradient(farthest-corner circle at var(--kk-pointer-x) var(--kk-pointer-y),
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.2) 33%,
      rgba(255, 255, 255, 0) 75%);
  transition: background-image 0.1s ease-out;
}