/*
 * aico-sales-site-live-demo.css
 *
 * 販売サイト（ai-content-ops-sales）専用のライブデモ表示レイヤー。
 * 3デザインパック本体のCSS（body.aico-design-pack-*でスコープ）とは独立しており、
 * サイト全体でどのプリセットがアクティブでも常に動作する。
 * 各デザインパックの購入者向けの実際の見た目（*-pack.cssで実装済み）とは別に、
 * 販売サイト上で「動きそのもの」を常時見せるための専用実装。
 *
 * 外部フォント・外部CDNは使用しない。
 */

/* ============================================================
   共通：スライダー
   ============================================================ */

.aico-livedemo-slider {
	position: relative;
	margin: 1.6em 0;
}

.aico-livedemo-slider-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	/* v1.6.1: 矢印ボタン・ドットで操作できるため、ブラウザ既定の横スクロールバーは
	   非表示にする（ページ中央に唐突なスクロールバーが見える「謎のスクロール」の
	   一因だったため）。ドラッグ/スワイプでのスクロール自体は引き続き可能 */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* v1.7.1: トラックパッドの横スワイプでスライダーの端（最初/最後のカード）まで
	   到達すると、残りのスクロール量が親要素（ページ全体）へ伝播（スクロール
	   チェイニング）し、ブラウザの「戻る/進む」スワイプナビゲーションや、実際には
	   存在しないページの横方向の弾性（rubber-band）挙動を誘発することがある。
	   これがdocument.documentElement.scrollWidthには現れない「謎のスクロール」の
	   正体のひとつ。overscroll-behavior-xでチェイニングをこのスライダー自身の中で
	   食い止める（矢印/ドット/キーボード操作には影響しない） */
	overscroll-behavior-x: contain;
}

.aico-livedemo-slider-track::-webkit-scrollbar {
	display: none;
}

/* v1.5.0: 「3枚とも画面に収まって動きが分からない」問題を解消するため、
   主役カード1枚を大きく（コンテナ幅の82%、上限560px）表示し、次のカードが
   右端に少しだけ覗く比率に変更。これにより必ずスクロール可能な余白ができ、
   ボタン操作で「動いた」と分かる */
.aico-livedemo-slider-track > * {
	flex: 0 0 min(700px, 82%);
	scroll-snap-align: center;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.aico-livedemo-slider-track > *:not(.aico-livedemo-slide-active) {
	opacity: 0.55;
	transform: scale(0.94);
}

.aico-livedemo-slider-track > .aico-livedemo-slide-active {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.aico-livedemo-slider-track > * {
		transition: none;
	}
}

.aico-livedemo-slider-prev,
.aico-livedemo-slider-next {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: #ffffff;
	color: #1e293b;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
	z-index: 2;
}

.aico-livedemo-slider-prev {
	left: -10px;
}

.aico-livedemo-slider-next {
	right: -10px;
}

.aico-livedemo-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
}

.aico-livedemo-slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #cbd5e1;
	cursor: pointer;
}

.aico-livedemo-slider-dot.is-active {
	width: 22px;
	border-radius: 4px;
}

.aico-livedemo-slider:focus-visible {
	outline: 2px solid #0ea5e9;
	outline-offset: 4px;
}

/* パック別アクセントカラー */
.aico-livedemo-slider.is-affiliate .aico-livedemo-slider-prev:hover,
.aico-livedemo-slider.is-affiliate .aico-livedemo-slider-next:hover,
.aico-livedemo-slider.is-affiliate .aico-livedemo-slider-dot.is-active {
	background: #d97706;
	color: #ffffff;
}

.aico-livedemo-slider.is-news .aico-livedemo-slider-prev:hover,
.aico-livedemo-slider.is-news .aico-livedemo-slider-next:hover,
.aico-livedemo-slider.is-news .aico-livedemo-slider-dot.is-active {
	background: #1e293b;
	color: #ffffff;
}

.aico-livedemo-slider.is-saas .aico-livedemo-slider-prev:hover,
.aico-livedemo-slider.is-saas .aico-livedemo-slider-next:hover,
.aico-livedemo-slider.is-saas .aico-livedemo-slider-dot.is-active {
	background: #0ea5e9;
	color: #ffffff;
}

/* スライドカード（共通の器。中身はパックごとの説明文） */
.aico-livedemo-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
	height: 100%;
	box-sizing: border-box;
}

.aico-livedemo-card h3,
.aico-livedemo-card h4 {
	margin-top: 0;
	margin-bottom: 8px;
}

.aico-livedemo-card p {
	margin: 0 0 12px;
	color: #475569;
	font-size: 0.92rem;
}

.aico-livedemo-card .aico-livedemo-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	color: #ffffff;
}

.aico-livedemo-slider.is-affiliate .aico-livedemo-card {
	border-top: 3px solid #d97706;
}
.aico-livedemo-slider.is-affiliate .aico-livedemo-card .aico-livedemo-btn {
	background: #d97706;
}
.aico-livedemo-slider.is-news .aico-livedemo-card {
	border-top: 3px solid #1e293b;
}
.aico-livedemo-slider.is-news .aico-livedemo-card .aico-livedemo-btn {
	background: #1e293b;
}
.aico-livedemo-slider.is-saas .aico-livedemo-card {
	border-top: 3px solid #0ea5e9;
	border-radius: 16px;
}
.aico-livedemo-slider.is-saas .aico-livedemo-card .aico-livedemo-btn {
	background: #0ea5e9;
	border-radius: 999px;
}

/* ============================================================
   共通：タブ
   ============================================================ */

.aico-livedemo-tabs {
	margin: 1.4em 0;
}

.aico-livedemo-tabs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	border-bottom: 2px solid #e2e8f0;
}

.aico-livedemo-tab {
	padding: 10px 20px;
	border: none;
	background: transparent;
	font-weight: 700;
	font-size: 0.92rem;
	color: #64748b;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.aico-livedemo-tab.is-active {
	color: #d97706;
	border-bottom-color: #d97706;
}

.aico-livedemo-tab:focus-visible {
	outline: 2px solid #d97706;
	outline-offset: 2px;
}

.aico-livedemo-tab-panel {
	padding: 4px 2px;
}

.aico-livedemo-tab-panel:not(.is-active) {
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px dashed #e2e8f0;
}

/* ============================================================
   共通：速報ティッカー
   ============================================================ */

.aico-livedemo-ticker {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: #1e293b;
	color: #ffffff;
	border-radius: 10px;
	margin: 1.2em 0;
}

.aico-livedemo-ticker-label {
	flex: none;
	font-size: 0.72rem;
	font-weight: 800;
	background: #dc2626;
	padding: 3px 10px;
	border-radius: 3px;
}

.aico-livedemo-ticker-body {
	flex: 1;
	position: relative;
	min-height: 1.4em;
	overflow: hidden;
}

.aico-livedemo-ticker-item {
	display: none;
	font-size: 0.9rem;
}

.aico-livedemo-ticker-item.is-active {
	display: block;
	animation: aico-livedemo-ticker-fade 0.4s ease;
}

@keyframes aico-livedemo-ticker-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.aico-livedemo-ticker-prev,
.aico-livedemo-ticker-next {
	flex: none;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #ffffff;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
}

/* ============================================================
   共通：Before/After切り替え
   ============================================================ */

.aico-livedemo-beforeafter {
	margin: 1.6em 0;
}

.aico-livedemo-ba-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.aico-livedemo-ba-toggle button {
	padding: 10px 22px;
	border-radius: 999px;
	border: 1.5px solid #cbd5e1;
	background: transparent;
	font-weight: 700;
	cursor: pointer;
}

.aico-livedemo-ba-toggle button.is-active {
	background: #0ea5e9;
	border-color: #0ea5e9;
	color: #ffffff;
}

.aico-livedemo-ba-toggle button:focus-visible {
	outline: 2px solid #0ea5e9;
	outline-offset: 2px;
}

.aico-livedemo-ba-panel-frame {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
}

.aico-livedemo-ba-panel {
	padding: 24px;
	opacity: 1;
	transition: opacity 0.25s ease;
}

/* v1.5.1: クロスフェード用。JSが現在表示中のパネルにこのクラスを付けてから
   一定時間後に切り替えることで、パッと切り替わるのではなく軽くフェードして見える */
.aico-livedemo-ba-panel.aico-livedemo-ba-fade-out {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.aico-livedemo-ba-panel {
		transition: none;
	}
}

.aico-livedemo-ba-panel.is-before {
	background: #f8fafc;
}

.aico-livedemo-ba-panel.is-after {
	background: linear-gradient(135deg, #eff6ff 0%, #ecfeff 100%);
}

.aico-livedemo-ba-panel:not(.is-active) {
	padding-top: 16px;
	margin-top: 0;
	border-top: 1px dashed #e2e8f0;
}

/* ============================================================
   v1.5.0: ヒーロー背景装飾（薄いグラデーション・ぼかし円）
   ============================================================ */

.aico-livedemo-hero-decorated {
	position: relative;
	overflow: hidden;
}

.aico-livedemo-hero-decorated::before,
.aico-livedemo-hero-decorated::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	pointer-events: none;
	z-index: 0;
}

.aico-livedemo-hero-decorated::before {
	width: 380px;
	height: 380px;
	top: -160px;
	right: -100px;
	background: radial-gradient(circle, rgba(14, 165, 233, 0.16) 0%, transparent 70%);
	animation: aico-livedemo-glow-drift-1 18s ease-in-out infinite;
}

.aico-livedemo-hero-decorated::after {
	width: 260px;
	height: 260px;
	bottom: -120px;
	left: -80px;
	background: radial-gradient(circle, rgba(109, 40, 217, 0.12) 0%, transparent 70%);
	animation: aico-livedemo-glow-drift-2 22s ease-in-out infinite;
}

/* v1.5.1: 光彩をごくゆっくり漂わせる（控えめな移動量・不透明度の変化のみ）。
   文字・CTAはz-index:1で常に光彩の上に重なるため可読性には影響しない */
@keyframes aico-livedemo-glow-drift-1 {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
	50% { transform: translate(-18px, 14px) scale(1.06); opacity: 0.85; }
}

@keyframes aico-livedemo-glow-drift-2 {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
	50% { transform: translate(16px, -12px) scale(1.05); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
	.aico-livedemo-hero-decorated::before,
	.aico-livedemo-hero-decorated::after {
		animation: none;
	}
}

.aico-livedemo-hero-decorated > * {
	position: relative;
	z-index: 1;
}

/* ヒーロー内の「ガラス風カード」に載せる、大きめスクリーンショット/モックアップの
   スライドイン演出（横方向・左右どちらからでも指定可能） */
.aico-livedemo-hero-slidein {
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(6px);
	padding: 6px;
	opacity: 0;
	transform: translateX(48px);
}

.aico-livedemo-hero-slidein.from-left {
	transform: translateX(-48px);
}

.js .aico-livedemo-hero-slidein {
	transition: opacity 0.7s ease 0.2s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.js .aico-livedemo-hero-slidein.aico-livedemo-in {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.js .aico-livedemo-hero-slidein {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================
   ヒーロー登場演出（fade-in-up / 遅延表示 / CTAポップ / バッジ順番表示）
   ============================================================ */

.aico-livedemo-hero-anim {
	opacity: 0;
	transform: translateY(14px);
}

.js .aico-livedemo-hero-anim {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .aico-livedemo-hero-anim.aico-livedemo-in {
	opacity: 1;
	transform: translateY(0);
}

.js .aico-livedemo-hero-anim[data-delay="1"] {
	transition-delay: 0.12s;
}
.js .aico-livedemo-hero-anim[data-delay="2"] {
	transition-delay: 0.24s;
}
.js .aico-livedemo-hero-anim[data-delay="3"] {
	transition-delay: 0.36s;
}

.aico-livedemo-cta-pop {
	opacity: 0;
	transform: scale(0.94);
}

.js .aico-livedemo-cta-pop {
	transition: opacity 0.5s ease 0.4s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}

.js .aico-livedemo-cta-pop.aico-livedemo-in {
	opacity: 1;
	transform: scale(1);
}

.aico-livedemo-badge-item {
	opacity: 0;
	transform: translateY(8px);
}

.js .aico-livedemo-badge-item {
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.js .aico-livedemo-badge-item.aico-livedemo-in {
	opacity: 1;
	transform: translateY(0);
}

/* スクロール出現（カード類） */
.aico-livedemo-scroll-reveal {
	opacity: 0;
	transform: translateY(18px);
}

.js .aico-livedemo-scroll-reveal {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .aico-livedemo-scroll-reveal.aico-livedemo-in {
	opacity: 1;
	transform: translateY(0);
}

/* JSが読み込まれない場合、bodyにjsクラスが付かないため、
   上記の.js .aico-livedemo-*ルールが一切適用されず、常に通常表示のまま
   （opacity:0 かつ .jsクラスなしのケースに対応するため、非.js環境では
   デフォルトで不透明に戻す） */
.aico-livedemo-hero-anim,
.aico-livedemo-cta-pop,
.aico-livedemo-badge-item,
.aico-livedemo-scroll-reveal {
	opacity: 1;
	transform: none;
}

.js .aico-livedemo-hero-anim,
.js .aico-livedemo-cta-pop,
.js .aico-livedemo-badge-item,
.js .aico-livedemo-scroll-reveal {
	opacity: 0;
}

.js .aico-livedemo-hero-anim {
	transform: translateY(14px);
}
.js .aico-livedemo-cta-pop {
	transform: scale(0.94);
}
.js .aico-livedemo-badge-item {
	transform: translateY(8px);
}
.js .aico-livedemo-scroll-reveal {
	transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
	.js .aico-livedemo-hero-anim,
	.js .aico-livedemo-cta-pop,
	.js .aico-livedemo-badge-item,
	.js .aico-livedemo-scroll-reveal {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.aico-livedemo-ticker-item.is-active {
		animation: none;
	}
}

@media (max-width: 782px) {
	.aico-livedemo-slider-track > * {
		flex-basis: 220px;
	}
}

/* ============================================================
   v1.5.1: フッター直前の共通CTA帯（無料テーマ/デザインパック/
   Proプラグイン/全部入りパックへの導線をまとめた帯）
   ============================================================ */
.aico-livedemo-footer-cta-band {
	margin: 2.4em 0 0;
	padding: 40px 24px;
	border-radius: 16px;
	background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #0ea5e9 130%);
	text-align: center;
}

.aico-livedemo-footer-cta-band .aico-livedemo-footer-cta-eyebrow {
	margin: 0 0 8px;
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

.aico-livedemo-footer-cta-band .aico-livedemo-footer-cta-title {
	margin: 0 0 24px;
	color: #ffffff;
	font-size: 1.5rem;
}

.aico-livedemo-footer-cta-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	background: transparent;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link:hover,
.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}

.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link.is-primary {
	background: #ffffff;
	border-color: #ffffff;
	color: #0f172a;
}

.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link.is-primary:hover,
.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link.is-primary:focus-visible {
	background: #e2e8f0;
}

@media (max-width: 600px) {
	.aico-livedemo-footer-cta-band {
		padding: 28px 16px;
	}
	.aico-livedemo-footer-cta-links {
		flex-direction: column;
	}
	.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aico-livedemo-footer-cta-band a.aico-livedemo-footer-cta-link {
		transition: none;
	}
}