/* =========================================================
   もえりん バナー用CSS（WordPress専用・クリーン版）
   HTML側の .wp-pink-banner-scope をそのまま使用
   写真：左／ロゴ：右　写真6枚を横スクロール
   ========================================================= */

.wp-pink-banner-scope {
  --pink-main: #ff63b5;
  --pink-light: #ffd5ed;
  --pink-deep: #df3193;
  --white: #fff;
  width: 100%;
  direction: ltr;
}

.wp-pink-banner-scope,
.wp-pink-banner-scope * {
  box-sizing: border-box;
}

.wp-pink-banner-scope .pink-banner-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none !important;
  line-height: 0;
}

.wp-pink-banner-scope .pink-banner-link:hover,
.wp-pink-banner-scope .pink-banner-link:focus {
  text-decoration: none !important;
}

/* バナー本体 */
.wp-pink-banner-scope .pink-banner {
  position: relative;
  isolation: isolate;
  direction: ltr;
  display: grid;
  grid-template-columns: 49.5% 50.5%;
  grid-template-areas: "photos logo";
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 850 / 320;
  margin: 0 auto;
  padding: 1.05%;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 25px;
  background:
    radial-gradient(ellipse at 75% 18%, rgba(255,255,255,.9) 0, rgba(255,255,255,.24) 18%, transparent 42%),
    radial-gradient(ellipse at 18% 82%, rgba(255,255,255,.2), transparent 35%),
    linear-gradient(125deg, #ffb8df 0%, #ff73bf 28%, #f64eaa 58%, #ffb9e2 100%);
  box-shadow:
    0 0 0 3px #f34cae,
    0 0 0 7px rgba(255,255,255,.78),
    0 10px 30px rgba(177,35,112,.28),
    inset 0 0 24px rgba(255,255,255,.5);
}

/* 背景の光沢。レイアウトには影響させない */
.wp-pink-banner-scope .pink-banner::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -40%;
  pointer-events: none;
  background: conic-gradient(from 15deg,
    transparent 0 8%, rgba(255,255,255,.2) 10%, transparent 13% 25%,
    rgba(255,255,255,.13) 27%, transparent 30% 48%,
    rgba(255,255,255,.18) 50%, transparent 53% 73%,
    rgba(255,255,255,.12) 76%, transparent 79%);
  animation: moerin-halo-turn 42s linear infinite;
}

.wp-pink-banner-scope .pink-banner::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,239,180,.9) 0 1.2px, transparent 2.4px);
  background-size: 43px 41px, 67px 61px;
  background-position: 5px 8px, 23px 29px;
  animation: moerin-dust-drift 18s linear infinite;
}

/* 左側：写真スクロール */
.wp-pink-banner-scope .photo-stage {
  grid-area: photos;
  position: relative;
  z-index: 2;
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wp-pink-banner-scope .photo-track {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 600%;
  height: 100%;
  animation: moerin-photo-scroll 54s linear infinite;
  will-change: transform;
}

.wp-pink-banner-scope .photo-slot {
  display: block;
  width: 97%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.98);
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.55), 0 4px 12px rgba(173,54,111,.18);
  transform-origin: 50% 55%;
  backface-visibility: hidden;
  animation: moerin-photo-showoff 3.2s ease-in-out infinite;
}

.wp-pink-banner-scope .photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.wp-pink-banner-scope .photo-slot:nth-child(6n + 1) { animation-delay: 0s; }
.wp-pink-banner-scope .photo-slot:nth-child(6n + 2) { animation-delay: -.53s; }
.wp-pink-banner-scope .photo-slot:nth-child(6n + 3) { animation-delay: -1.06s; }
.wp-pink-banner-scope .photo-slot:nth-child(6n + 4) { animation-delay: -1.59s; }
.wp-pink-banner-scope .photo-slot:nth-child(6n + 5) { animation-delay: -2.12s; }
.wp-pink-banner-scope .photo-slot:nth-child(6n + 6) { animation-delay: -2.65s; }

.wp-pink-banner-scope .photo-stage:hover .photo-track {
  animation-play-state: paused;
}

.wp-pink-banner-scope .photo-stage::before,
.wp-pink-banner-scope .photo-stage::after {
  content: "✦";
  position: absolute;
  z-index: 5;
  color: #fff9d9;
  font-size: clamp(16px, 3vw, 30px);
  pointer-events: none;
  text-shadow: 0 0 6px #fff, 0 0 15px #fff3b0, 0 0 24px #fff;
  animation: moerin-photo-flash 1.8s ease-in-out infinite;
}
.wp-pink-banner-scope .photo-stage::before { top: 5%; left: 45%; }
.wp-pink-banner-scope .photo-stage::after { right: 3%; bottom: 7%; animation-delay: -.9s; }

/* 右側：ロゴとキャプション */
.wp-pink-banner-scope .info-area {
  grid-area: logo;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 3%;
}

.wp-pink-banner-scope .center-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .7vw, 8px);
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: normal;
  filter: drop-shadow(0 3px 7px rgba(174,55,112,.25));
}

.wp-pink-banner-scope .center-mark img {
  display: block;
  width: 92%;
  height: 78%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

.wp-pink-banner-scope .logo-caption {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  font-weight: 900;
  font-size: clamp(10px, 1.8vw, 20px);
  line-height: 1.15;
  letter-spacing: .08em;
  text-shadow: 0 1px 3px #bd267b, 0 0 8px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.65);
}

/* バナー内のきらめき */
.wp-pink-banner-scope .sparkle {
  position: absolute;
  z-index: 6;
  width: var(--s, 12px);
  height: var(--s, 12px);
  left: var(--x);
  top: var(--y);
  pointer-events: none;
  color: #fff;
  opacity: .9;
  animation: moerin-twinkle var(--d, 2.6s) ease-in-out var(--delay, 0s) infinite;
}

.wp-pink-banner-scope .sparkle::before {
  content: "✦";
  display: block;
  font-size: var(--s, 12px);
  line-height: 1;
  text-shadow: 0 0 5px #fff, 0 0 12px #fff5c9, 0 0 18px #fff;
}

.wp-pink-banner-scope .glint {
  position: absolute;
  z-index: 3;
  top: -35%;
  left: -22%;
  width: 13%;
  height: 180%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  filter: blur(2px);
  animation: moerin-glint-pass 9s ease-in-out infinite;
  pointer-events: none;
}

/* アニメーション */
@keyframes moerin-photo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes moerin-photo-showoff {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1) saturate(1); }
  25% { transform: translateY(-4px) scale(1.025); filter: brightness(1.1) saturate(1.2); }
  55% { transform: translateY(2px) scale(.99); filter: brightness(1.06) saturate(1.25); }
  78% { transform: translateY(-3px) scale(1.035); filter: brightness(1.14) saturate(1.25); }
}

@keyframes moerin-photo-flash {
  0%, 100% { opacity: .18; transform: scale(.6) rotate(0); }
  50% { opacity: 1; transform: scale(1.45) rotate(70deg); }
}

@keyframes moerin-twinkle {
  0%, 100% { opacity: .35; transform: scale(.72) rotate(0); }
  50% { opacity: 1; transform: scale(1.22) rotate(24deg); }
}

@keyframes moerin-halo-turn { to { transform: rotate(360deg); } }

@keyframes moerin-dust-drift {
  from { background-position: 5px 8px, 23px 29px; }
  to { background-position: 48px -33px, -44px -32px; }
}

@keyframes moerin-glint-pass {
  0%, 18% { left: -22%; opacity: 0; }
  30% { opacity: .9; }
  62%, 100% { left: 112%; opacity: 0; }
}

/* スマートフォン */
@media (max-width: 700px) {
  .wp-pink-banner-scope .pink-banner { padding: 1.2%; }
  .wp-pink-banner-scope .photo-slot { border-width: 1px; }
  .wp-pink-banner-scope .info-area { padding: 2%; }
  .wp-pink-banner-scope .center-mark img { width: 96%; height: 78%; }
}

@media (max-width: 480px) {
  .wp-pink-banner-scope .pink-banner {
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(150px, 52vw) minmax(105px, 34vw);
    grid-template-areas: "photos" "logo";
    gap: 5px;
    padding: 7px;
  }
  .wp-pink-banner-scope .photo-stage,
  .wp-pink-banner-scope .info-area { width: 100%; }
  .wp-pink-banner-scope .info-area { padding: 2px 8%; }
  .wp-pink-banner-scope .center-mark img { width: min(88%, 300px); height: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-pink-banner-scope .pink-banner::before,
  .wp-pink-banner-scope .pink-banner::after,
  .wp-pink-banner-scope .sparkle,
  .wp-pink-banner-scope .glint,
  .wp-pink-banner-scope .photo-track,
  .wp-pink-banner-scope .photo-slot,
  .wp-pink-banner-scope .photo-stage::before,
  .wp-pink-banner-scope .photo-stage::after {
    animation: none !important;
  }
}