/* =========================================/* =========================================OKUSA EFFECT CSS（北斎影＋虹アニメーション）
   役割：演出専用（UI・構造には触れない）
========================================= */

/* =========================
   ベース：開発中カード
========================= */
.car-card.is-coming .car-card__media{
  position: relative;
  overflow: hidden;
}

/* =========================
   和紙っぽい質感
========================= */
.car-card.is-coming .car-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08;

  background-image:
    radial-gradient(rgba(0,0,0,.6) 1px, transparent 1px);
  background-size: 6px 6px;

  mix-blend-mode: multiply;
}

/* =========================
   虹グラデーション影
========================= */
.car-card.is-coming .car-card__media::after{
  content:"";
  position:absolute;
  inset: 12% 12% 15% 12%;

  pointer-events:none;

  background: linear-gradient(
    90deg,
    #ff004c,
    #ff7a00,
    #ffe600,
    #27ff6a,
    #00c6ff,
    #6a5cff,
    #ff00d4,
    #ff004c
  );

  background-size: 300% 300%;
  animation: hokusa-rainbow 6s ease infinite;

  filter: contrast(1.2) brightness(0.9);
  mix-blend-mode: multiply;
  opacity:.95;
}

/* =========================
   レインボーアニメ
========================= */
@keyframes hokusa-rainbow{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   シルエット（PNG版）
========================= */

/* カエル */
.car-card.is-coming.is-frog .car-card__media::after{
  -webkit-mask-image: url("https://stellaclean.jp/wp-content/uploads/2026/05/frog.png");
  mask-image: url("https://stellaclean.jp/wp-content/uploads/2026/05/frog.png");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ウサギ */
.car-card.is-coming.is-rabbit .car-card__media::after{
  -webkit-mask-image: url("https://stellaclean.jp/wp-content/uploads/2026/05/rabbit.png");
  mask-image: url("https://stellaclean.jp/wp-content/uploads/2026/05/rabbit.png");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

/* =========================
   ホバー
========================= */
.car-card.is-coming:hover .car-card__media::after{
  transform: scale(1.05);
}

/* =========================
   軽量モード
========================= */
@media (prefers-reduced-motion: reduce){
  .car-card.is-coming .car-card__media::after{
    animation: none;
  }
}

/* =========================
   フォールバック
========================= */
@supports not (mask-image: url("")) {
  .car-card.is-coming .car-card__media::after{
    border-radius:50%;
  }
}