/* =========================================
   ris-banner 本番アニメーション
   別案A · 影固定（フラッシュなし）
========================================= */
@keyframes ris-bg-breathe-subtle {
  0%, 100% { background-color: #bd241e; }
  50%      { background-color: #d4332e; }
}

@keyframes ris-notice-grow-pulse-subtle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@keyframes ris-notice-label-pulse {
  0%, 100% { color: #ffcf2b; }
  50%      { color: #ffe05a; }
}

@keyframes ris-glow-inner {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.45; }
}

@keyframes ris-title-block-glow-soft {
  0%, 100% {
    background-color: #ffcf2b;
  }
  50% {
    background-color: #ffe05a;
  }
}

.ris-banner--effect-ready {
  animation: ris-bg-breathe-subtle 3s ease-in-out infinite;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(139, 0, 0, 0.06),
    0 0 10px 1px rgba(212, 51, 46, 0.2);
}

.ris-banner--effect-ready .ris-banner__notice {
  animation: ris-notice-grow-pulse-subtle 2s ease-in-out infinite;
}

.ris-banner--effect-ready .ris-banner__notice-label {
  animation: ris-notice-label-pulse 2s ease-in-out infinite;
}

.ris-banner--effect-ready .ris-banner__effect-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 120% at 70% 50%, rgba(255, 220, 220, 0.22) 0%, transparent 65%);
  animation: ris-glow-inner 3s ease-in-out infinite;
}

@media screen and (max-width: 767px) {
  .ris-banner--effect-ready .ris-banner__effect-layer::before {
    background: radial-gradient(ellipse 100% 80% at 50% 25%, rgba(255, 220, 220, 0.22) 0%, transparent 65%);
  }

  .ris-banner--effect-ready .ris-banner__title {
    animation: ris-title-block-glow-soft 3s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ris-banner--effect-ready,
  .ris-banner--effect-ready .ris-banner__notice,
  .ris-banner--effect-ready .ris-banner__notice-label,
  .ris-banner--effect-ready .ris-banner__effect-layer::before,
  .ris-banner--effect-ready .ris-banner__title {
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  @media screen and (max-width: 767px) {
    .ris-banner--effect-ready .ris-banner__title {
      background-color: #ffcf2b;
    }
  }
}