:root {
	--bg-0: #060715;
	--bg-1: #0b1130;

	--neon-c: #00e5ff;
	--neon-p: #ff2bd6;
	--neon-v: #7c4dff;

	--text: #e9eeff;

	--glow-c: 0 0 18px rgba(0, 229, 255, .22), 0 0 32px rgba(0, 229, 255, .10);
	--glow-p: 0 0 18px rgba(255, 43, 214, .18), 0 0 42px rgba(255, 43, 214, .10);
	--glow-v: 0 0 18px rgba(124, 77, 255, .18), 0 0 42px rgba(124, 77, 255, .10);
	--glow-mix: 0 0 18px rgba(0, 229, 255, .18), 0 0 36px rgba(124, 77, 255, .14), 0 0 54px rgba(255, 43, 214, .10);
}

html,
body {
	height: 100%;
	background: var(--bg-0);
}

body {
	margin: 0;
	color: var(--text);
	background:
		radial-gradient(1400px 800px at 70% 8%,
			rgba(0, 229, 255, .18) 0%,
			rgba(0, 229, 255, .10) 28%,
			rgba(0, 229, 255, .04) 48%,
			rgba(0, 229, 255, .001) 68%),
		radial-gradient(1300px 760px at 18% 32%,
			rgba(255, 43, 214, .14) 0%,
			rgba(255, 43, 214, .08) 30%,
			rgba(255, 43, 214, .03) 50%,
			rgba(255, 43, 214, .001) 70%),
		radial-gradient(1200px 720px at 52% 92%,
			rgba(124, 77, 255, .16) 0%,
			rgba(124, 77, 255, .08) 32%,
			rgba(124, 77, 255, .03) 52%,
			rgba(124, 77, 255, .001) 72%),
		linear-gradient(180deg,
			var(--bg-0) 0%,
			#080c26 50%,
			var(--bg-0) 100%);

	background-size: 100% 300%;
	background-repeat: repeat-y;
	overflow-x: hidden;
	font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

a {
	color: inherit;
}

a:hover {
	color: #fff;
	text-decoration: none;
}

/* =========================
      Background FX (global)
    ========================== */
.fx-grid {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -3;
	opacity: .42;
	background:
		linear-gradient(to right, rgba(0, 229, 255, .06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(124, 77, 255, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(60% 60% at 50% 30%, #000 55%, transparent 75%);
	animation: gridDrift 14s linear infinite;
	transform: translate3d(0, 0, 0);
}

@keyframes gridDrift {
	0% {
		background-position: 0 0, 0 0;
	}

	100% {
		background-position: 220px 0, 0 220px;
	}
}

.fx-orbs {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -2;
}

.fx-orbs::before,
.fx-orbs::after {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(0, 229, 255, .22), transparent 60%);
	opacity: .9;
	animation: orbFloat 10s ease-in-out infinite;
	transform: translate3d(0, 0, 0);
}

.fx-orbs::after {
	width: 640px;
	height: 640px;
	right: -220px;
	top: 120px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 43, 214, .14), transparent 62%);
	animation-duration: 13s;
	animation-delay: -3s;
}

.fx-orbs::before {
	left: -240px;
	top: 220px;
}

@keyframes orbFloat {

	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	50% {
		transform: translate3d(0, -22px, 0) scale(1.03);
	}
}

/* =========================
      Layout
    ========================== */
.section {
	padding: clamp(56px, 6vw, 72px) 0;
	position: relative;
	background: transparent;
	/* セクション背景は透明で統一 */
	overflow: visible;
}

.section-carousel {
	padding: clamp(28px, 4vw, 40px) 0;
}

/* セクション区切り線は廃止（シームレス化） */
.section::before {
	display: none !important;
}

/* すべてのセクションに共通の“薄い霞”を敷いて境目を消す */
.section::after {
	content: "";
	position: absolute;
	inset: -1px 0;
	/* 1px 伸ばして境目の段差を吸収 */
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(1000px 520px at 14% 18%, rgba(0, 229, 255, .08), transparent 62%),
		radial-gradient(1000px 520px at 84% 74%, rgba(255, 43, 214, .06), transparent 62%),
		radial-gradient(900px 520px at 50% 50%, rgba(124, 77, 255, .05), transparent 66%),
		linear-gradient(180deg, rgba(6, 7, 21, .06), rgba(6, 7, 21, .10));
	opacity: .55;
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.section>* {
	position: relative;
	z-index: 1;
}

.container-narrow {
	max-width: 980px;
}

/* =========================
      Reveal
    ========================== */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .85s ease, transform .85s cubic-bezier(.2, .8, .2, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal.zoom {
	transform: scale(.96);
}

.reveal.zoom.is-visible {
	transform: scale(1);
}

.reveal.left {
	transform: translateX(-18px);
}

.reveal.left.is-visible {
	transform: translateX(0);
}

/* =========================
      Shared panels
    ========================== */
@keyframes holoSpin {
	to {
		transform: rotate(360deg);
	}
}

.neo-panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: rgba(12, 18, 45, .34);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateZ(0);
	clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
	border: 1px solid rgba(255, 255, 255, .06);
}

@supports not (clip-path: polygon(0 0)) {
	.neo-panel {
		clip-path: none;
		border-radius: 22px;
	}
}

.neo-panel>* {
	position: relative;
	z-index: 1;
}

.neo-frame-rotate::before {
	content: "";
	position: absolute;
	inset: -2px;
	padding: 2px;
	background: conic-gradient(from 120deg,
			rgba(0, 229, 255, .95),
			rgba(124, 77, 255, .85),
			rgba(255, 43, 214, .78),
			rgba(0, 229, 255, .95));
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .95;
	animation: holoSpin 6.8s linear infinite;
	pointer-events: none;
	z-index: 0;
}

.hover-lift {
	transition: transform .18s ease, filter .18s ease;
}

.hover-lift:hover {
	transform: translateY(-2px);
	filter: brightness(1.06) saturate(1.05);
}

/* =========================
      ① TOP LOGO
    ========================== */
.top-logo-wrap {
	padding: 0;
}

.top-logo-panel {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px clamp(14px, 3vw, 34px);
	background:
		radial-gradient(900px 180px at 30% 0%, rgba(0, 229, 255, .16), transparent 60%),
		linear-gradient(135deg, rgba(124, 77, 255, .10), rgba(0, 0, 0, .0) 45%, rgba(255, 43, 214, .08));
	border-top: 1px solid rgba(255, 255, 255, .06);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 0 18px rgba(0, 229, 255, .12);
	overflow: hidden;
	position: relative;
}

.top-logo-panel::after {
	content: "";
	position: absolute;
	inset: -60%;
	pointer-events: none;
	opacity: .9;
}

.top-logo {
	height: clamp(22px, 2.8vw, 32px);
	width: auto;
	z-index: 1;
	filter: drop-shadow(0 0 14px rgba(0, 229, 255, .22)) drop-shadow(0 0 22px rgba(124, 77, 255, .14));
}

/* =========================
      ② TITLE
    ========================== */
.title-bleed {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	isolation: isolate;
}

.title-bleed::before {
	content: "";
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(900px 520px at 10% 20%, rgba(0, 229, 255, .14), transparent 60%),
		radial-gradient(900px 520px at 80% 70%, rgba(255, 43, 214, .10), transparent 60%);
	z-index: 0;
	pointer-events: none;
}

.title-media {
	width: 100%;
	height: auto;
	display: block;
	background: transparent;
	filter: contrast(1.03) saturate(1.06);
}

.title-anim {
	opacity: 0;
	transform: translateY(18px);
	animation: titleIn 1.05s cubic-bezier(.2, .9, .2, 1) .12s forwards;
}

@keyframes titleIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* overlay wrapper keeps position ratio */
.overlay-wrap {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(160px, 33vw, 520px);
	max-width: 72vw;
	pointer-events: none;
	z-index: 3;
	isolation: isolate;

	will-change: transform, opacity;
	animation:
		overlayAppear 1.05s cubic-bezier(.12, .96, .22, 1) .05s both,
		overlayFloat 3.0s ease-in-out 1.10s infinite;
}

/* 出現アニメーション（最終状態がoverlayFloatの0%と同一になるよう調整） */
@keyframes overlayAppear {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(2.25) rotate(-7deg);
		filter: blur(10px) brightness(1.1);
	}

	60% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.8) rotate(1.2deg);
		filter: blur(0px) brightness(1.05);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
		filter: blur(0px) brightness(1);
	}
}

@keyframes overlayFloat {

	0%,
	100% {
		transform: translate(-50%, -50%) translateY(0) scale(1) rotate(0deg);
	}

	50% {
		transform: translate(-50%, -50%) translateY(-14px) scale(1) rotate(0deg);
	}
}

.overlay-logo {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 3;
	filter:
		drop-shadow(0 0 30px rgba(0, 229, 255, .60)) drop-shadow(0 0 70px rgba(124, 77, 255, .30)) drop-shadow(0 0 92px rgba(255, 43, 214, .22));
	animation: logoBloom 2.1s ease-in-out .7s infinite;
}

@keyframes logoBloom {

	0%,
	100% {
		filter:
			drop-shadow(0 0 30px rgba(0, 229, 255, .60)) drop-shadow(0 0 70px rgba(124, 77, 255, .30)) drop-shadow(0 0 92px rgba(255, 43, 214, .22));
	}

	50% {
		filter:
			drop-shadow(0 0 48px rgba(0, 229, 255, .85)) drop-shadow(0 0 92px rgba(255, 43, 214, .28)) drop-shadow(0 0 118px rgba(124, 77, 255, .34));
	}
}


.catch-wrap {
	position: relative;
	padding: clamp(14px, 2.6vw, 22px) 0;
	text-align: center;
}

.catch-copy {
	font-weight: 950;
	letter-spacing: .08em;
	font-size: clamp(1.15rem, 3.4vw, 1.95rem);
	line-height: 1.4;
	margin: 0;
	color: rgba(233, 238, 255, .94);
	text-shadow:
		0 0 18px rgba(0, 229, 255, .18),
		0 0 42px rgba(255, 43, 214, .16),
		0 0 70px rgba(124, 77, 255, .14);
}

.catch-copy .glitch {
	position: relative;
	display: inline-block;
}

.catch-copy .glitch::before,
.catch-copy .glitch::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: .55;
	mix-blend-mode: screen;
	pointer-events: none;
}

.catch-copy .glitch::before {
	transform: translate(1.5px, 0);
	color: rgba(0, 229, 255, .85);
	animation: glitchShift 2.4s infinite;
}

.catch-copy .glitch::after {
	transform: translate(-1.5px, 0);
	color: rgba(255, 43, 214, .75);
	animation: glitchShift 2.4s infinite reverse;
}

@keyframes glitchShift {

	0%,
	100% {
		clip-path: inset(0 0 0 0);
	}

	10% {
		clip-path: inset(6% 0 62% 0);
	}

	20% {
		clip-path: inset(52% 0 18% 0);
	}

	30% {
		clip-path: inset(18% 0 46% 0);
	}

	40% {
		clip-path: inset(62% 0 8% 0);
	}

	50% {
		clip-path: inset(24% 0 48% 0);
	}

	60% {
		clip-path: inset(44% 0 20% 0);
	}

	70% {
		clip-path: inset(10% 0 64% 0);
	}

	80% {
		clip-path: inset(56% 0 14% 0);
	}

	90% {
		clip-path: inset(30% 0 40% 0);
	}
}

.section-head-img {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}

.section-head-img img {
	height: clamp(44px, 6.2vw, 68px);
	width: auto;
	max-width: 88vw;
	filter: drop-shadow(0 0 18px rgba(0, 229, 255, .22)) drop-shadow(0 0 32px rgba(124, 77, 255, .14));
}

/* =========================
      ③ CAROUSEL
    ========================== */
.carousel-shell {
	position: relative;
	padding: clamp(14px, 2.8vw, 22px);
	background:
		radial-gradient(900px 520px at 18% 18%, rgba(0, 229, 255, .12), transparent 62%),
		radial-gradient(900px 520px at 88% 86%, rgba(255, 43, 214, .10), transparent 62%),
		linear-gradient(180deg, rgba(8, 12, 34, .72), rgba(8, 12, 34, .38));
	box-shadow: var(--glow-mix);
	overflow: hidden;
	isolation: isolate;

	/* 形状 */
	clip-path: polygon(0 44px,
			44px 0,
			calc(100% - 44px) 0,
			100% 44px,
			100% calc(100% - 44px),
			calc(100% - 44px) 100%,
			44px 100%,
			0 calc(100% - 44px));
	border: 1px solid rgba(255, 255, 255, .08);
}

@supports not (clip-path: polygon(0 0)) {
	.carousel-shell {
		clip-path: none;
		border-radius: 18px;
	}
}

.carousel-shell::before {
	content: "";
	position: absolute;
	inset: -2px;
	padding: 2px;
	background: linear-gradient(90deg,
			rgba(0, 229, 255, .92),
			rgba(124, 77, 255, .82),
			rgba(255, 43, 214, .72),
			rgba(0, 229, 255, .92));
	background-size: 260% 100%;
	animation: railFlow 2.3s linear infinite;
	pointer-events: none;
	z-index: 0;

	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .92;
}

@keyframes railFlow {
	0% {
		background-position: 0% 0;
	}

	100% {
		background-position: 260% 0;
	}
}

.carousel-shell::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(90deg, rgba(233, 238, 255, .05) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(180deg, rgba(233, 238, 255, .05) 0 1px, transparent 1px 12px),
		linear-gradient(120deg, transparent 35%, rgba(233, 238, 255, .08) 45%, transparent 55%);
	opacity: .14;
	mix-blend-mode: screen;
	animation: shellScan 2.0s linear infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes shellScan {
	0% {
		background-position: 0 0, 0 0, -30% 0;
	}

	100% {
		background-position: 170px 0, 0 170px, 130% 0;
	}
}

.carousel-shell .fx-flash {
	position: absolute;
	inset: -18%;
	opacity: 0;
	pointer-events: none;
	z-index: 3;
	mix-blend-mode: screen;
	background:
		radial-gradient(520px 220px at 25% 20%, rgba(0, 229, 255, .40), transparent 70%),
		radial-gradient(520px 220px at 80% 80%, rgba(255, 43, 214, .28), transparent 72%),
		repeating-linear-gradient(90deg, rgba(233, 238, 255, .18) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(180deg, rgba(233, 238, 255, .12) 0 1px, transparent 1px 6px);
	filter: saturate(1.1);
	transform: translateZ(0);
}

.carousel-shell.is-flash .fx-flash {
	animation: flashFlicker 240ms ease-out both;
}

@keyframes flashFlicker {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) skewX(0deg);
	}

	22% {
		opacity: .92;
		transform: translate3d(-6px, 0, 0) skewX(-9deg);
	}

	55% {
		opacity: .35;
		transform: translate3d(5px, 0, 0) skewX(7deg);
	}

	100% {
		opacity: 0;
		transform: translate3d(0, 0, 0) skewX(0deg);
	}
}

.caro-screen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(0, 0, 0, .18);
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 0 30px rgba(0, 229, 255, .14), 0 0 54px rgba(255, 43, 214, .10);

	clip-path: polygon(0 28px,
			28px 0,
			calc(100% - 28px) 0,
			100% 28px,
			100% calc(100% - 28px),
			calc(100% - 28px) 100%,
			28px 100%,
			0 calc(100% - 28px));
	isolation: isolate;
}

@supports not (aspect-ratio: 16 / 9) {
	.caro-screen {
		height: 0;
		padding-top: 56.25%;
	}

	.caro-screen>img {
		position: absolute;
		inset: 0;
	}
}

@supports not (clip-path: polygon(0 0)) {
	.caro-screen {
		clip-path: none;
		border-radius: 16px;
	}
}

.caro-screen>img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.08) saturate(1.18);
	transform: scale(1.06);
}

.carousel-item.active .caro-screen>img {
	animation: screenDrift 6.2s ease-in-out forwards;
}

@keyframes screenDrift {
	0% {
		transform: scale(1.06) translate3d(0, 0, 0);
	}

	55% {
		transform: scale(1.10) translate3d(-1.2%, -0.8%, 0);
	}

	100% {
		transform: scale(1.08) translate3d(-0.5%, -0.3%, 0);
	}
}

.caro-screen::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(760px 340px at 18% 12%, rgba(0, 229, 255, .14), transparent 62%),
		radial-gradient(760px 340px at 92% 92%, rgba(255, 43, 214, .12), transparent 64%),
		repeating-linear-gradient(180deg, rgba(233, 238, 255, .06) 0 1px, transparent 1px 8px);
	opacity: .24;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 1;
}

.caro-screen::after {
	content: "";
	position: absolute;
	inset: -18% 0;
	background:
		linear-gradient(180deg,
			transparent 0%,
			rgba(0, 229, 255, .08) 40%,
			rgba(0, 229, 255, .20) 50%,
			rgba(0, 229, 255, .08) 60%,
			transparent 100%);
	transform: translateY(-30%);
	mix-blend-mode: screen;
	opacity: .45;
	animation: caroScan 2.1s ease-in-out infinite;
	pointer-events: none;
	z-index: 2;
}

@keyframes caroScan {
	0% {
		transform: translateY(-35%);
		opacity: .18;
	}

	50% {
		transform: translateY(10%);
		opacity: .55;
	}

	100% {
		transform: translateY(35%);
		opacity: .18;
	}
}

.caro-hud {
	position: absolute;
	left: 6px;
	bottom: 12px;
	max-width: 90%;
	padding: 6px 14px;
	background: rgba(6, 7, 21, .22);
	border: 1px solid rgba(255, 255, 255, .10);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
	box-shadow: 0 0 22px rgba(0, 229, 255, .10);
	z-index: 3;
	overflow: hidden;
	isolation: isolate;

	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity .14s ease, transform .14s ease;
}

@supports not (clip-path: polygon(0 0)) {
	.caro-hud {
		clip-path: none;
		border-radius: 14px;
	}
}

.caro-hud::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 229, 255, .85), rgba(255, 43, 214, .55)) 0 0 / 100% 2px no-repeat,
		repeating-linear-gradient(135deg, rgba(233, 238, 255, .06) 0 2px, transparent 2px 14px);
	opacity: .55;
	pointer-events: none;
	z-index: 0;
}

.caro-h {
	margin: 0 0;
	font-weight: 950;
	letter-spacing: .0em;
	font-size: clamp(0.9rem, 1.8vw, 1.2rem);
	text-shadow: 0 0 18px rgba(0, 229, 255, .16), 0 0 32px rgba(255, 43, 214, .10);
	position: relative;
	z-index: 1;
}

.caro-p {
	margin: 0;
	color: rgba(233, 238, 255, .84);
	line-height: 1.2;
	font-size: 1.02rem;
	position: relative;
	z-index: 1;
}

/* キャプションは “自動で消えてから出る” を廃止し、JSで制御 */
@keyframes hudPop {
	from {
		opacity: 0;
		transform: translateY(10px) scale(.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.caro-hud.hud-reset {
	opacity: 0 !important;
	transform: translateY(10px) scale(.985) !important;
}

.caro-hud.hud-play {
	animation: hudPop .58s cubic-bezier(.2, .9, .2, 1) both;
}

/* スライド中はキャプション非表示 */
#gameCarousel.is-sliding .caro-hud {
	opacity: 0 !important;
	transform: translateY(10px) scale(.985) !important;
	animation: none !important;
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next {
	width: 13%;
	opacity: 1;
}

.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
	width: 3.15rem;
	height: 3.15rem;
	border-radius: 0;
	background-color: rgba(8, 14, 40, .30);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 0 26px rgba(0, 229, 255, .14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	background-size: 62% 62%;
	clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.carousel .carousel-control-next:hover .carousel-control-next-icon {
	transform: translateY(-1px) scale(1.05);
	border-color: rgba(255, 255, 255, .24);
	box-shadow: 0 0 34px rgba(0, 229, 255, .22), 0 0 58px rgba(255, 43, 214, .14);
}

.carousel-indicators [data-bs-target] {
	width: 26px;
	height: 3px;
	border-radius: 0;
	background: rgba(233, 238, 255, .18);
	border: 1px solid rgba(0, 229, 255, .22);
	box-shadow: 0 0 10px rgba(0, 229, 255, .10);
	margin: 0 7px;
	transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
	opacity: .9;
}

.carousel-indicators .active {
	background: rgba(0, 229, 255, .82);
	transform: scaleX(1.28);
	box-shadow: 0 0 16px rgba(0, 229, 255, .26), 0 0 28px rgba(255, 43, 214, .14);
	opacity: 1;
}

/* =========================
      ④ STEAM
    ========================== */
.steam-cta-container {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 10px 0 50px;
	position: relative;
	z-index: 10;
}

.steam-btn-base {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	font-weight: 900;
	letter-spacing: 0.15em;
	transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
	z-index: 1;
}

.steam-btn-base svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.p2-energy-box {
	position: relative;
	padding: 3px;
	background: rgba(255, 255, 255, 0.1);
	clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
	overflow: hidden;
}

.p2-energy-box::before {
	content: '';
	position: absolute;
	inset: -100%;
	background: conic-gradient(from 0deg,
			transparent 0%,
			var(--neon-c) 25%,
			var(--neon-v) 50%,
			var(--neon-p) 75%,
			transparent 100%);
	animation: energyFlow 4s linear infinite;
}

@keyframes energyFlow {
	to {
		transform: rotate(360deg);
	}
}

.p2-energy-flow {
	font-size: 1.1rem;
	padding: 16px 42px;
	color: #fff;
	background: #0b1130;
	clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
	display: flex;
	align-items: center;
}

.p2-energy-flow:hover {
	background: transparent;
	text-shadow: 0 0 10px #fff;
}

/* =========================
      ④ FEATURES (seamless edges)
    ========================== */
.features {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--parY: 0px;
}

/* セクション端を自然に溶かすマスク */
.fade-edges {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.features-bg-shadow,
.features-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: url("./../img/foo.png") right top/contain no-repeat;
	transform: translate3d(var(--x, 0px), var(--parY, 0px), 0) scale(var(--s, 1));
	opacity: .14;
	/* 0→小さく常時出して境目を消す */
	transition: opacity .95s ease, transform .95s cubic-bezier(.2, .9, .2, 1);
}

.features-bg-shadow {
	z-index: -3;
	--x: 420px;
	--s: .985;
	filter: blur(18px) brightness(0) saturate(0);
	mix-blend-mode: multiply;
	opacity: .10;
}

.features-bg {
	z-index: -2;
	--x: -420px;
	--s: .985;
	filter: saturate(1.10) contrast(1.05) brightness(1.06);
}

.features.bg-in .features-bg {
	opacity: .44;
	--x: 0px;
	--s: 1;
}

.features.bg-in .features-bg-shadow {
	opacity: .30;
	--x: 42px;
	--s: 1;
	transform: translate3d(var(--x, 22px), calc(var(--parY, 0px) + 12px), 0) scale(var(--s, 1));
}

.features-vignette {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(900px 520px at 15% 25%, rgba(0, 229, 255, .12), transparent 60%),
		radial-gradient(900px 520px at 85% 65%, rgba(255, 43, 214, .10), transparent 60%),
		linear-gradient(180deg, rgba(6, 7, 21, .15), rgba(6, 7, 21, .35));
	opacity: .45;
	transition: opacity .8s ease;
}

.features.bg-in .features-vignette {
	opacity: 1;
}

.feature-row {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 22px;
	align-items: center;
	margin-bottom: clamp(34px, 4vw, 64px);
	position: relative;
}

.feature-row:nth-child(even) {
	grid-template-columns: .95fr 1.05fr;
}

@media (max-width: 991.98px) {

	.feature-row,
	.feature-row:nth-child(even) {
		grid-template-columns: 1fr;
	}

	.feature-row:nth-child(even) .feature-media {
		order: 0;
	}

	.feature-row:nth-child(even) .feature-copy {
		order: 1;
	}
}

.feature-connector {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 260px;
	height: 2px;
	transform: translate(-50%, -50%);
	background: linear-gradient(90deg,
			rgba(0, 229, 255, 0),
			rgba(0, 229, 255, .75),
			rgba(255, 43, 214, .45),
			rgba(255, 43, 214, 0));
	opacity: .65;
	pointer-events: none;
	filter: drop-shadow(0 0 10px rgba(0, 229, 255, .14));
}

.feature-connector::before {
	content: "";
	position: absolute;
	inset: -6px 0;
	background:
		linear-gradient(90deg,
			transparent 0%,
			rgba(233, 238, 255, .18) 40%,
			rgba(233, 238, 255, 0) 60%,
			transparent 100%);
	opacity: .6;
	transform: translateX(-40%);
	animation: pulseRun 1.55s ease-in-out infinite;
	mix-blend-mode: screen;
}

.feature-connector::after {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	width: 12px;
	height: 12px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: radial-gradient(circle, rgba(0, 229, 255, .95), rgba(0, 229, 255, .15));
	box-shadow:
		0 0 16px rgba(0, 229, 255, .22),
		254px 0 0 0 rgba(255, 43, 214, .14),
		254px 0 14px rgba(255, 43, 214, .18);
}

@keyframes pulseRun {

	0%,
	20% {
		transform: translateX(-40%);
		opacity: .2;
	}

	60% {
		transform: translateX(40%);
		opacity: .75;
	}

	100% {
		transform: translateX(40%);
		opacity: .2;
	}
}

@media (max-width: 991.98px) {
	.feature-connector {
		display: none;
	}
}

.video-panel {
	box-shadow: var(--glow-c);
	background: linear-gradient(180deg, rgba(6, 7, 21, .62), rgba(6, 7, 21, .35));
	padding: clamp(16px, 2.8vw, 24px);
}

.video-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 280px at 22% 18%, rgba(0, 229, 255, .10), transparent 62%),
		radial-gradient(700px 280px at 86% 82%, rgba(255, 43, 214, .08), transparent 64%),
		repeating-linear-gradient(180deg, rgba(233, 238, 255, .05) 0 1px, transparent 1px 8px);
	opacity: .20;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 0;
}

.video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(0, 0, 0, .18);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 0 24px rgba(0, 229, 255, .18), 0 0 48px rgba(124, 77, 255, .12);
}

@supports not (aspect-ratio: 16 / 9) {
	.video-frame {
		height: 0;
		padding-top: 56.25%;
	}

	.video-frame video {
		position: absolute;
		inset: 0;
	}
}

.video-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.05) saturate(1.06);
}

.feature-copy {
	padding: clamp(16px, 3vw, 22px);
	background:
		radial-gradient(900px 520px at 25% 10%, rgba(255, 43, 214, .12), transparent 60%),
		radial-gradient(900px 520px at 85% 80%, rgba(124, 77, 255, .10), transparent 62%),
		linear-gradient(180deg, rgba(10, 14, 34, .66), rgba(10, 14, 34, .36));
	box-shadow: var(--glow-p);
	clip-path: polygon(0 16px, 16px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, .06);
}

@supports not (clip-path: polygon(0 0)) {
	.feature-copy {
		clip-path: none;
		border-radius: 22px;
	}
}

.feature-copy::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 43, 214, .70), rgba(0, 229, 255, .35)) 0 0 / 100% 3px no-repeat,
		repeating-linear-gradient(135deg, rgba(233, 238, 255, .06) 0 2px, transparent 2px 14px);
	opacity: .60;
	pointer-events: none;
	z-index: 0;
}

.feature-copy::after {
	content: "";
	position: absolute;
	inset: -14% 0;
	background:
		linear-gradient(180deg,
			transparent 0%,
			rgba(0, 229, 255, .10) 40%,
			rgba(0, 229, 255, .26) 50%,
			rgba(0, 229, 255, .10) 60%,
			transparent 100%);
	transform: translateY(-30%);
	mix-blend-mode: screen;
	opacity: .55;
	animation: scanDownFeature 2.9s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes scanDownFeature {
	0% {
		transform: translateY(-35%);
		opacity: .22;
	}

	50% {
		transform: translateY(10%);
		opacity: .65;
	}

	100% {
		transform: translateY(35%);
		opacity: .22;
	}
}

.feature-copy h3 {
	font-weight: 950;
	letter-spacing: .06em;
	line-height: 1.35;
	margin: 0 0 10px;
	text-shadow: 0 0 18px rgba(0, 229, 255, .18), 0 0 36px rgba(124, 77, 255, .18);
	font-size: clamp(1.15rem, 2.6vw, 1.55rem);
	position: relative;
	z-index: 1;
}

.feature-copy p {
	margin: 0;
	color: rgba(233, 238, 255, .82);
	line-height: 1.95;
	font-size: 1.02rem;
	position: relative;
	z-index: 1;
}

/* =========================
      ⑤ STORY (seamless edges)
    ========================== */
.story {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--parY: 0px;
}

.story-bg-shadow,
.story-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: url("./../img/bar.png") left center/contain no-repeat;
	transform: translate3d(var(--x, 0px), var(--parY, 0px), 0) scale(var(--s, 1));
	opacity: .12;
	/* 0→小さく常時出して境目を消す */
	transition: opacity .95s ease, transform .95s cubic-bezier(.2, .9, .2, 1);
}

.story-bg-shadow {
	z-index: -3;
	--x: -420px;
	--s: .985;
	filter: blur(18px) brightness(0) saturate(0);
	mix-blend-mode: multiply;
	opacity: .08;
}

.story-bg {
	z-index: -2;
	--x: 420px;
	--s: .985;
	filter: saturate(1.10) contrast(1.05) brightness(1.06);
}

.story.bg-in .story-bg {
	opacity: .44;
	--x: 0px;
	--s: 1;
}

.story.bg-in .story-bg-shadow {
	opacity: .28;
	--x: -42px;
	--s: 1;
	transform: translate3d(var(--x, -22px), calc(var(--parY, 0px) + 12px), 0) scale(var(--s, 1));
}

.story-vignette {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(900px 520px at 10% 35%, rgba(124, 77, 255, .10), transparent 60%),
		radial-gradient(900px 520px at 85% 60%, rgba(0, 229, 255, .09), transparent 60%),
		linear-gradient(180deg, rgba(6, 7, 21, .08), rgba(6, 7, 21, .28));
	opacity: .45;
	transition: opacity .8s ease;
}

.story.bg-in .story-vignette {
	opacity: 1;
}

.story-console {
	position: relative;
	padding: clamp(18px, 3vw, 26px);
	background:
		radial-gradient(900px 520px at 10% 35%, rgba(0, 229, 255, .10), transparent 60%),
		radial-gradient(900px 520px at 90% 65%, rgba(124, 77, 255, .10), transparent 60%),
		linear-gradient(180deg, rgba(6, 7, 21, .22), rgba(6, 7, 21, .06));
	border-top: 1px solid rgba(255, 255, 255, .10);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	overflow: hidden;
}

.story-console::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: linear-gradient(180deg, rgba(0, 229, 255, .95), rgba(255, 43, 214, .55));
	box-shadow: 0 0 22px rgba(0, 229, 255, .18);
	opacity: .9;
}

.story-console::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(180deg, rgba(233, 238, 255, .05) 0 1px, transparent 1px 8px),
		linear-gradient(120deg, transparent 35%, rgba(233, 238, 255, .06) 45%, transparent 55%);
	opacity: .14;
	mix-blend-mode: screen;
	animation: storyNoise 3.4s linear infinite;
	pointer-events: none;
}

@keyframes storyNoise {
	0% {
		background-position: 0 0, -30% 0;
	}

	100% {
		background-position: 0 160px, 130% 0;
	}
}

.story-console__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 10px;
	padding-left: 12px;
	position: relative;
	z-index: 1;
}

.story-console__dots {
	display: flex;
	gap: 6px;
}

.story-console__dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(233, 238, 255, .18);
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 0 14px rgba(0, 229, 255, .08);
	animation: dotBlink 2.8s ease-in-out infinite;
}

.story-console__dots span:nth-child(2) {
	animation-delay: -.6s;
}

.story-console__dots span:nth-child(3) {
	animation-delay: -1.2s;
}

@keyframes dotBlink {

	0%,
	100% {
		opacity: .55;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-1px);
	}
}

.story-text {
	color: rgba(233, 238, 255, .82);
	font-size: clamp(1rem, 2.2vw, 1.08rem);
	line-height: 1.95;
	margin: 0;
	position: relative;
	z-index: 1;
	padding-left: 12px;
}

.story-text p {
	margin: 0 0 10px;
}

.story-console .story-text p {
	opacity: 0;
	transform: translateY(10px);
}

.story-console.is-typing .story-text p {
	animation: lineIn .60s cubic-bezier(.2, .9, .2, 1) var(--d, 0ms) forwards;
}

@keyframes lineIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.story-cursor {
	display: inline-block;
	width: 10px;
	height: 1.05em;
	margin-left: .3rem;
	vertical-align: -0.12em;
	border-left: 2px solid rgba(0, 229, 255, .92);
	box-shadow: 0 0 14px rgba(0, 229, 255, .20), 0 0 26px rgba(255, 43, 214, .10);
	animation: cursorBlink 1.05s steps(2, end) infinite;
	opacity: .95;
}

@keyframes cursorBlink {

	0%,
	49% {
		opacity: 0;
	}

	50%,
	100% {
		opacity: 1;
	}
}

/* =========================
      ⑥ NEWS
    ========================== */
.news-list {
	display: grid;
	gap: 12px;
}

.news-item {
	padding: 14px 16px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background:
		linear-gradient(90deg, rgba(0, 229, 255, .10), transparent 30%),
		linear-gradient(180deg, rgba(12, 18, 45, .52), rgba(12, 18, 45, .38));
	border: 1px solid rgba(255, 255, 255, .06);
	box-shadow: 0 0 14px rgba(0, 229, 255, .10), 0 0 26px rgba(255, 43, 214, .08);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.news-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 229, 255, .80), rgba(255, 43, 214, .55)) 0 0 / 4px 100% no-repeat,
		radial-gradient(8px 8px at 2px 18px, rgba(0, 229, 255, 1), transparent 60%),
		radial-gradient(10px 10px at 2px calc(100% - 18px), rgba(255, 43, 214, 1), transparent 65%);
	opacity: .9;
	pointer-events: none;
	z-index: 0;
	animation: newsPulse 2.6s ease-in-out infinite;
}

@keyframes newsPulse {

	0%,
	100% {
		filter: saturate(1) brightness(1);
		opacity: .85;
	}

	50% {
		filter: saturate(1.15) brightness(1.08);
		opacity: 1;
	}
}

.news-item>* {
	position: relative;
	z-index: 1;
}

.news-date {
	font-weight: 950;
	letter-spacing: .08em;
	color: rgba(0, 229, 255, .9);
	text-shadow: 0 0 18px rgba(0, 229, 255, .16);
	white-space: nowrap;
	flex: 0 0 auto;
}

.news-text {
	margin: 0;
	color: rgba(233, 238, 255, .82);
	line-height: 1.7;
}

@media (max-width: 575.98px) {
	.news-item {
		flex-direction: column;
		gap: 6px;
	}
}

/* =========================
      ⑦ PRODUCT
    ========================== */
.spec-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 767.98px) {
	.spec-grid {
		grid-template-columns: 1fr;
	}
}

.spec-board {
	position: relative;
	padding: clamp(14px, 2.6vw, 18px);
	background:
		linear-gradient(90deg, rgba(0, 229, 255, .10), transparent 32%),
		linear-gradient(180deg, rgba(8, 12, 34, .34), rgba(8, 12, 34, .10));
	border-top: 1px solid rgba(255, 255, 255, .10);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	overflow: hidden;
	isolation: isolate;
}

.spec-board::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(0, 229, 255, .08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(124, 77, 255, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	opacity: .20;
	animation: gridDrift 12s linear infinite;
	pointer-events: none;
	z-index: 0;
}

.spec-board>* {
	position: relative;
	z-index: 1;
}

.spec-row {
	position: relative;
	padding: 14px 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-left: 3px solid rgba(255, 43, 214, .30);
	border-top: 1px solid rgba(255, 255, 255, .08);
	border-bottom: 1px solid rgba(0, 229, 255, .10);
	background: rgba(0, 0, 0, .06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overflow: hidden;
}

.spec-row::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 35%, rgba(233, 238, 255, .06) 45%, transparent 55%);
	opacity: .10;
	mix-blend-mode: screen;
	transform: translateX(-25%);
	animation: rowSweep 3.8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes rowSweep {

	0%,
	20% {
		transform: translateX(-30%);
		opacity: .05;
	}

	55% {
		transform: translateX(25%);
		opacity: .16;
	}

	100% {
		transform: translateX(25%);
		opacity: .06;
	}
}

.spec-icon {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .10);
	background: rgba(233, 238, 255, .06);
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

.spec-icon svg {
	width: 22px;
	height: 22px;
}

.spec .k {
	margin: 0;
	font-weight: 950;
	letter-spacing: .06em;
	position: relative;
	z-index: 1;
}

.spec .v {
	margin: 2px 0 0;
	color: rgba(233, 238, 255, .82);
	position: relative;
	z-index: 1;
}

.spec-board .spec-row {
	opacity: 0;
	transform: translateY(10px);
}

.spec-board.is-arming .spec-row {
	animation: specIn .55s cubic-bezier(.2, .9, .2, 1) var(--d, 0ms) forwards;
}

@keyframes specIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================
      Footer
    ========================== */
footer {
	padding: 26px 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28));
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links a {
	color: rgba(233, 238, 255, .78);
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(12, 18, 45, .34);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease;
}

.footer-links a:hover {
	color: rgba(255, 255, 255, .95);
	transform: translateY(-1px);
	border-color: rgba(0, 229, 255, .24);
	box-shadow: 0 0 18px rgba(0, 229, 255, .14), 0 0 32px rgba(124, 77, 255, .10);
}

.copyright {
	text-align: center;
	margin-top: 14px;
	color: rgba(174, 184, 230, .72);
	font-size: .9rem;
}

/* =========================
      Reduce Motion
    ========================== */
@media (prefers-reduced-motion: reduce) {

	.fx-grid,
	.fx-orbs::before,
	.fx-orbs::after {
		animation: none !important;
	}

	.reveal {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.title-anim {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.overlay-wrap {
		animation: none !important;
		opacity: 1 !important;
		transform: translate(-50%, -50%) !important;
		filter: none !important;
	}

	.overlay-logo,
	.overlay-anim::before,
	.overlay-anim::after,
	.overlay-glitch {
		animation: none !important;
	}

	.neo-frame-rotate::before,
	.carousel-shell::before,
	.carousel-shell::after,
	.carousel-item.active .caro-screen>img,
	.caro-screen::after,
	.story-console::after,
	.news-item::before,
	.spec-board::before,
	.spec-row::after,
	.feature-connector::before {
		animation: none !important;
	}

	.features-bg,
	.features-bg-shadow,
	.story-bg,
	.story-bg-shadow {
		transition: none !important;
		opacity: .32 !important;
		transform: translate3d(0, 0, 0) scale(1) !important;
	}

	.story-console .story-text p,
	.spec-board .spec-row {
		opacity: 1 !important;
		transform: none !important;
	}

	.carousel-shell .fx-flash {
		display: none !important;
	}

	.story-cursor {
		animation: none !important;
		opacity: 1 !important;
	}

	.caro-hud.hud-reset {
		opacity: 1 !important;
		transform: none !important;
	}

	.caro-hud.hud-play {
		animation: none !important;
	}

	#gameCarousel.is-sliding .caro-hud {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* =========================
  Mobile safe mode
========================= */
@media (hover: none) and (pointer: coarse) and (max-width: 1366px) {

	/* fixed背景FXを停止 */
	.fx-grid,
	.fx-orbs {
		display: none !important;
	}

	/* ロゴの「マスク＋ブレンド＋SVGフィルタ＋無限アニメ」を停止 */
	.overlay-anim::before,
	.overlay-anim::after,
	.overlay-glitch {
		display: none !important;
		animation: none !important;
		filter: none !important;
		mix-blend-mode: normal !important;
	}

	/* 影・ぼかしを軽く（GPUメモリ節約） */
	.overlay-logo {
		animation: none !important;
		filter: drop-shadow(0 0 18px rgba(0, 229, 255, .45)) !important;
	}

	/* backdrop-filterはスマホで切る（効果大） */
	.neo-panel,
	.caro-hud,
	.footer-links a {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	/* scan系の無限アニメを止める */
	.caro-screen::after,
	.carousel-shell::before,
	.carousel-shell::after,
	.story-console::after {
		animation: none !important;
	}

	.neo-panel,
	.caro-hud,
	.footer-links a {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	body::after {
		content: "";
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 99999;
		width: 16px;
		height: 16px;
		pointer-events: none;
		opacity: .42;

		clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);

		background:
			radial-gradient(circle at 30% 25%, rgba(0, 229, 255, .85), transparent 55%),
			radial-gradient(circle at 70% 75%, rgba(255, 43, 214, .60), transparent 58%),
			linear-gradient(180deg, rgba(233, 238, 255, .16), rgba(233, 238, 255, .05));

		border: 1px solid rgba(233, 238, 255, .22);
		box-shadow:
			0 0 10px rgba(0, 229, 255, .18),
			0 0 14px rgba(255, 43, 214, .10);
	}
}

.wc {
	will-change: transform, opacity;
}













.steam-digital-outer {
	position: relative;
	width: 100%;
	margin: 35px 0;
	overflow: hidden;
	padding: 120px 0;
}

.steam-digital-section {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	z-index: 100;
}

.reveal.is-visible .digital-impact-flash {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	z-index: 15;
	animation: digital-burst-impact 0.6s cubic-bezier(0.15, 0.85, 0.35, 1) 0.3s forwards;
}

@keyframes digital-burst-impact {
	0% {
		opacity: 0;
		transform: scaleX(0) scaleY(1);
		filter: blur(0px);
	}

	20% {
		opacity: 1;
		transform: scaleX(1.5) scaleY(1.2);
		filter: blur(5px);
	}

	100% {
		opacity: 0;
		transform: scaleX(2) scaleY(0);
		filter: blur(20px);
	}
}

.btn-digital-glitch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding: 30px 80px;
	color: #fff;
	background: rgba(6, 7, 21, 0.9);
	border: 2px solid var(--neon-c);
	text-decoration: none;
	opacity: 0;
	z-index: 10;
	clip-path: polygon(25px 0, calc(100% - 1.5px) 0, calc(100% - 25px) 100%, 1.5px 100%);
	transition:
		background 0.15s ease-out,
		border-color 0.15s ease-out,
		box-shadow 0.15s ease-out,
		transform 0.15s cubic-bezier(0.2, 0, 0.2, 1);
}

.reveal.is-visible .btn-digital-glitch {
	animation:
		digital-appear 0.3s ease-out 0.3s forwards,
		digital-decay-jitter 0.8s steps(1) 0.6s forwards,
		digital-settle 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s forwards;
}

@keyframes digital-appear {
	0% {
		opacity: 0;
		transform: scale(0.3) rotateX(45deg);
		filter: brightness(10);
	}

	100% {
		opacity: 1;
		transform: scale(1) rotateX(0deg);
		filter: brightness(1);
	}
}

@keyframes digital-decay-jitter {
	0% {
		transform: translate(-25px, 12px);
		filter: hue-rotate(90deg) brightness(2);
	}

	10% {
		transform: translate(25px, -12px);
		opacity: 0.7;
	}

	20% {
		transform: translate(-18px, -8px);
		filter: contrast(2);
	}

	30% {
		transform: translate(18px, 8px);
	}

	40% {
		transform: translate(-10px, 4px);
		filter: hue-rotate(-90deg);
	}

	50% {
		transform: translate(10px, -4px);
		opacity: 0.8;
	}

	60% {
		transform: translate(-6px, 2px);
	}

	70% {
		transform: translate(3px, -1px);
		opacity: 0.9;
	}

	80% {
		transform: translate(-2px, 1px);
		filter: brightness(1.5);
	}

	90% {
		transform: translate(1px, -0.5px);
	}

	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}

@keyframes digital-settle {
	0% {
		filter: brightness(3);
		transform: scale(1.1);
		box-shadow: 0 0 120px var(--neon-c);
	}

	100% {
		filter: brightness(1);
		transform: scale(1);
		box-shadow: 0 0 30px rgba(0, 229, 255, 0.3);
	}
}

.icon-wishlist {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	overflow: visible;
}

.icon-wishlist line {
	stroke: #fff !important;
	stroke-width: 5.5;
	stroke-linecap: square;
	/* バウンスを取り除いた鋭いイージングに変更 */
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	transform-origin: 12px 12px;
}

.line-stem {
	transform: rotate(180deg) scaleX(1.5);
}

.line-top {
	transform: translateX(8px) rotate(-135deg) scaleX(1);
}

.line-bot {
	transform: translateX(8px) rotate(135deg) scaleX(1);
}

.line-extra {
	transform: rotate(0deg) scaleX(0);
	opacity: 0;
}

.btn-main-txt {
	font-size: 1.9rem;
	font-weight: 950;
	letter-spacing: 0.15em;
	transition: letter-spacing 0.15s ease-out, text-shadow 0.15s ease, color 0.15s ease;
}

.btn-sub-txt {
	font-size: 0.95rem;
	font-weight: 700;
	opacity: 0.9;
	margin-top: 4px;
	transition: color 0.15s ease;
}

.btn-digital-glitch:hover {
	background: transparent !important;
	border-color: var(--neon-p) !important;
	box-shadow:
		0 0 15px #fff,
		0 0 30px var(--neon-p),
		inset 0 0 20px var(--neon-p) !important;
	transform: scale(1.05) !important;
}

.btn-digital-glitch:hover .line-stem {
	transform: translateX(0) rotate(180deg) scaleX(1);
}

.btn-digital-glitch:hover .line-top {
	transform: translateX(0) rotate(-90deg) scaleX(1);
}

.btn-digital-glitch:hover .line-bot {
	transform: translateX(0) rotate(90deg) scaleX(1);
}

.btn-digital-glitch:hover .line-extra {
	transform: translateX(0) rotate(0deg) scaleX(1);
	opacity: 1;
}

.btn-digital-glitch:hover .icon-wishlist {
	animation: icon-quick-spin 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes icon-quick-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.btn-digital-glitch:hover .btn-main-txt {
	color: var(--neon-c);
	letter-spacing: 0.25em !important;
	text-shadow: 0 0 15px var(--neon-c);
}

.btn-digital-glitch:hover .btn-sub-txt {
	color: var(--neon-c);
}

.btn-digital-glitch:active {
	transform: scale(0.92) !important;
	filter: brightness(4) !important;
	transition: 0.05s !important;
}

.btn-digital-glitch::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px);
	background-size: 100% 4px;
	pointer-events: none;
}

.hud-line-v {
	position: absolute;
	width: 2px;
	height: 300vh;
	background: var(--neon-c);
	opacity: 0;
}

.reveal.is-visible .hud-line-v {
	animation: hud-line-snap 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes hud-line-snap {
	0% {
		opacity: 0;
		left: var(--start-x);
		transform: scaleY(0);
	}

	50% {
		opacity: 0.6;
	}

	100% {
		opacity: 0;
		left: var(--end-x);
		transform: scaleY(1);
	}
}