/* --------------------------------------------------
	LeadUx.css - エフェクト完成版（スライド・ダーク・グリッチ強化）
-------------------------------------------------- */

/* 基本コンテナ */
.lead-container {
	position: relative;
	width: 96%;
	max-width: 980px;
	margin: 15px auto;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	aspect-ratio: 4 / 1; 
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	cursor: pointer;
	user-select: none;
}

/* 背景レイヤー共通 */
.lead-container [class*="-bg-wrapper"],
.lead-container .bg-layer,
.lead-container .slide-track {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	display: flex;
	z-index: 1;
}

/* パネル共通 */
.lead-container [class*="-bg-panel"],
.lead-container .bg-panel,
.lead-container .slide-panel {
	flex: 0 0 25%;
	height: 100%;
	overflow: hidden;
}

.lead-container img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* オーバーレイ共通 */
.lead-container [class*="-overlay"],
.lead-container .overlay-layer {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
}

/* テキスト共通 */
.lead-container [class*="-overlay"] div,
.lead-container .preview-title {
	color: #ffffff;
	font-weight: bold;
	font-size: 1.1rem;
	line-height: 1.4;
	margin-bottom: 12px;
	text-shadow: 2px 2px 8px rgba(0,0,0,1);
	z-index: 11;
}

/* ボタン共通アニメーション */
@keyframes btn-pop-soft {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); }
}

.lead-container [class*="-btn"] {
	padding: 8px 28px;
	border-radius: 50px;
	font-weight: bold;
	font-size: 1rem;
	color: #fff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.5);
	z-index: 12;
	animation: btn-pop-soft 2s infinite ease-in-out;
}

/* --- 1. PATTERN_BLUR (すりガラス：変更なし) --- */
.pattern-blur .blur-bg-wrapper { filter: blur(5px) brightness(0.85); }
.pattern-blur .blur-overlay { background: rgba(0,0,0,0.25); }
.pattern-blur .blur-btn { background: linear-gradient(to bottom, #ff5e91, #ff2c7d); }

/* --- 2. PATTERN_SLIDE (スライド：修正) --- */
@keyframes slide-loop-anim {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
/* SetLeadの wrapper と Surveyの track の両方をアニメーションさせる */
.pattern-slide [class*="-bg-wrapper"],
.pattern-slide .slide-track {
	width: 200% !important; /* 横幅を2倍にして流す */
	display: flex !important;
	animation: slide-loop-anim 15s linear infinite !important;
}
.pattern-slide [class*="-bg-panel"],
.pattern-slide .slide-panel {
	flex: 0 0 12.5% !important; /* 8パネル分（4枚×2セット分） */
	border-right: 1px solid rgba(0,0,0,0.2);
}
.pattern-slide .slide-overlay { background: rgba(0,0,0,0.3); }
.pattern-slide .slide-btn { background: #007bff; border: 1px solid #fff; }

/* --- 3. PATTERN_MOSAIC (モザイク：変更なし) --- */
@keyframes mosaic-pulse {
	0%, 100% { filter: blur(2px) contrast(1.1); }
	50% { filter: blur(12px) contrast(1.3); }
}
.pattern-mosaic .mosaic-bg-wrapper { animation: mosaic-pulse 4s infinite ease-in-out; }
.pattern-mosaic .mosaic-overlay { background: rgba(0,0,0,0.2); }
.pattern-mosaic .mosaic-btn { background: linear-gradient(to bottom, #ffeb3b, #fbc02d); color: #000; border: 1px solid #000; }

/* --- 4. PATTERN_DARK (ダークネオン：スキャンバー復活) --- */
@keyframes dark-scan-anim {
	0% { top: -100%; }
	100% { top: 100%; }
}
.pattern-dark .dark-bg-wrapper { filter: brightness(0.65) contrast(1.1); }
.pattern-dark [class*="-overlay"] { 
	background: linear-gradient(transparent, rgba(0,0,20,0.5)); 
	overflow: hidden; /* バーを枠内に収める */
}
/* スキャンバーの復活 */
.pattern-dark [class*="-overlay"]::after {
	content: ""; position: absolute; left: 0; width: 100%; height: 30px;
	background: linear-gradient(transparent, rgba(0, 229, 255, 0.4), transparent);
	animation: dark-scan-anim 3s infinite linear;
	z-index: 11;
}
.pattern-dark .dark-btn {
	background: #000; border: 2px solid #00e5ff; color: #00e5ff;
	box-shadow: 0 0 10px #00e5ff; text-shadow: 0 0 5px #00e5ff;
}

/* --- 5. PATTERN_PULSE (ハートビート：変更なし) --- */
.pattern-pulse .pulse-overlay { background: rgba(255, 20, 147, 0.15); }
.pattern-pulse .pulse-btn { background: #ff0055; box-shadow: 0 0 20px rgba(255, 0, 85, 0.4); }

/* --- 6. PATTERN_GLITCH (グリッチ：揺れ幅を大きく調整) --- */
@keyframes glitch-gentle-heavy {
	0%, 100% { transform: translateX(0); opacity: 1; }
	91% { transform: translateX(0); }
	93% { transform: translateX(-6px); opacity: 0.9; } /* 揺れ幅拡大 */
	95% { transform: translateX(6px); opacity: 1; }  /* 揺れ幅拡大 */
	97% { transform: translateX(-3px); }
}
.pattern-glitch .glitch-bg-panel img { filter: brightness(0.8) contrast(1.1); }
.pattern-glitch .glitch-overlay { background: rgba(0, 0, 0, 0.4); }
.pattern-glitch .glitch-title {
	color: #fff !important;
	animation: glitch-gentle-heavy 4s infinite; /* 揺れを強化 */
	text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}
.pattern-glitch .glitch-btn {
	background: #444; border: 1px solid #ccc; color: #fff;
}

/* スマホ用調整 */
@media screen and (max-width: 767px) {
    .lead-container {
        aspect-ratio: 3 / 1;
    }
    .lead-container [class*="-overlay"] div { font-size: 0.8rem; margin-bottom: 6px; }
    .lead-container [class*="-btn"] { padding: 6px 20px; font-size: 0.85rem; }
    .glitch-sub { display: none; }
    .lead-container .preview-title { font-size: 0.8rem; }
    /* three square images */
    .lead-container [class*="-bg-panel"], .lead-container .bg-panel, .lead-container .slide-panel {
        flex: 0 0 33.33%;
        aspect-ratio: 1 / 1;
    }
    .lead-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* スライド：スマホで正方形3枚
       トラックは200%幅なので、コンテナ幅の33.33% = トラック幅の16.67%
       コンテナが3:1なので 幅W/3 = 高さW/3 → 自然に正方形になる */
    .pattern-slide .slide-panel,
    .pattern-slide [class*="-bg-panel"] {
        flex: 0 0 16.67% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
    }
}