/**
 * 3D コズミックサイネージ（ヒーロー星空フェーズ・右配置）
 */

.hero-cosmic-signage {
	--cosmic-accent: var( --color-accent, #7eb8d4 );
	--cosmic-gold: var( --color-accent-gold, #c9b896 );
	--cosmic-soft: #a89cc8;
	--cosmic-panel-bg: rgba( 35, 35, 69, 0.9 );
	--cosmic-panel-edge: rgba( 126, 184, 212, 0.22 );
	--cosmic-border: rgba( 232, 232, 242, 0.12 );
	--cosmic-text: rgba( 255, 255, 255, 0.92 );
	--cosmic-text-muted: rgba( 160, 160, 184, 0.95 );
	--cosmic-side-bg: linear-gradient( 180deg, #1a1a35 0%, #2f3568 50%, #1a1a35 100% );
	--cosmic-font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
	--cosmic-radius: 8px;
	--cosmic-w: 520px;
	--cosmic-chrome-top: 42px;
	--cosmic-chrome-bottom: 40px;
	--cosmic-media-h: calc( var( --cosmic-w ) * 8 / 13 );
	--cosmic-h: calc( var( --cosmic-chrome-top ) + var( --cosmic-media-h ) + var( --cosmic-chrome-bottom ) );
	--cosmic-depth: 22px;
	--cosmic-side: 44px;
	--cosmic-scale: clamp( 0.42, 0.28 + 0.42vw, 0.88 );
	font-family: var( --font-sans );
	pointer-events: auto;
}

.hero-cosmic-signage__scene {
	perspective: 1200px;
	perspective-origin: 50% 50%;
	position: relative;
	z-index: 1;
}

.hero-cosmic-signage__wrap {
	transform-style: preserve-3d;
	animation: hero-cosmic-float 6s ease-in-out infinite;
	position: relative;
	transform: scale( var( --cosmic-scale ) );
	transform-origin: top right;
}

@keyframes hero-cosmic-float {
	0%,
	100% {
		transform: scale( var( --cosmic-scale ) ) translateY( 0 );
	}

	50% {
		transform: scale( var( --cosmic-scale ) ) translateY( -15px );
	}
}

.hero-cosmic-signage__box {
	width: var( --cosmic-w );
	height: var( --cosmic-h );
	transform-style: preserve-3d;
	position: relative;
	will-change: transform;
}

.hero-cosmic-signage__face {
	position: absolute;
	inset: 0;
	border-radius: var( --cosmic-radius );
	backface-visibility: hidden;
}

.hero-cosmic-signage__face--front {
	transform: translateZ( var( --cosmic-depth ) );
	background:
		linear-gradient( 145deg, rgba( 74, 55, 137, 0.18 ) 0%, transparent 42% ),
		var( --cosmic-panel-bg );
	backdrop-filter: blur( 10px );
	border: 1.5px solid rgba( 125, 147, 184, 0.25 );
	box-shadow: inset 0 0 20px rgba( 0, 240, 255, 0.05 );
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.hero-cosmic-signage__face--front::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var( --cosmic-panel-edge );
	margin: 6px;
	border-radius: calc( var( --cosmic-radius ) - 2px );
	pointer-events: none;
	opacity: 0.55;
}

.hero-cosmic-signage__face--front::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient( 1px 1px at 20% 30%, rgba( 255, 255, 255, 0.35 ), transparent ),
		radial-gradient( 1px 1px at 72% 18%, rgba( 255, 255, 255, 0.25 ), transparent ),
		radial-gradient( 1px 1px at 88% 62%, rgba( 255, 255, 255, 0.2 ), transparent ),
		radial-gradient( 1px 1px at 42% 78%, rgba( 255, 255, 255, 0.28 ), transparent );
	opacity: 0.5;
}

.hero-cosmic-signage__face--back {
	transform: rotateY( 180deg ) translateZ( var( --cosmic-depth ) );
	background: linear-gradient( 135deg, #1a1a35, #232345 );
	border: 1.5px solid var( --cosmic-border );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --cosmic-font-serif );
	font-size: 1.25rem;
	font-weight: 500;
	color: rgba( 126, 184, 212, 0.35 );
	letter-spacing: 0.2em;
}

.hero-cosmic-signage__face--left {
	width: var( --cosmic-side );
	height: var( --cosmic-h );
	left: calc( var( --cosmic-depth ) * -1 );
	transform: rotateY( -90deg ) translateZ( 0 );
	background: var( --cosmic-side-bg );
	border-radius: 6px 0 0 6px;
}

.hero-cosmic-signage__face--right {
	width: var( --cosmic-side );
	height: var( --cosmic-h );
	right: calc( var( --cosmic-depth ) * -1 );
	transform: rotateY( 90deg ) translateZ( var( --cosmic-w ) );
	background: var( --cosmic-side-bg );
	border-radius: 0 6px 6px 0;
}

.hero-cosmic-signage__face--top {
	height: var( --cosmic-side );
	top: calc( var( --cosmic-depth ) * -1 );
	transform: rotateX( 90deg ) translateZ( 0 );
	background: linear-gradient( 90deg, #1a1a35, #2f3568, #1a1a35 );
}

.hero-cosmic-signage__face--bottom {
	height: var( --cosmic-side );
	bottom: calc( var( --cosmic-depth ) * -1 );
	transform: rotateX( -90deg ) translateZ( var( --cosmic-h ) );
	background: linear-gradient( 90deg, #151528, #232345, #151528 );
}

.hero-cosmic-signage__header {
	flex-shrink: 0;
	box-sizing: border-box;
	min-height: var( --cosmic-chrome-top );
	padding: 12px 20px 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba( 27, 38, 59, 0.6 );
	z-index: 2;
}

.hero-cosmic-signage__brand {
	font-family: var( --cosmic-font-serif );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var( --cosmic-text );
}

.hero-cosmic-signage__badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.6875rem;
	color: var( --cosmic-accent );
	letter-spacing: 0.12em;
	font-weight: 600;
}

.hero-cosmic-signage__live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --cosmic-accent );
	box-shadow: 0 0 10px rgba( 126, 184, 212, 0.55 );
	animation: hero-cosmic-pulse 1.6s ease-in-out infinite;
}

@keyframes hero-cosmic-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale( 1 );
	}

	50% {
		opacity: 0.3;
		transform: scale( 0.8 );
	}
}

.hero-cosmic-signage__slides {
	flex: 0 0 auto;
	width: 100%;
	height: var( --cosmic-media-h );
	aspect-ratio: 13 / 8;
	position: relative;
	overflow: hidden;
	z-index: 2;
}

.hero-cosmic-signage__slide {
	position: absolute;
	inset: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	transform: translateX( 20px );
	transition:
		opacity 0.8s cubic-bezier( 0.25, 1, 0.5, 1 ),
		transform 0.8s cubic-bezier( 0.25, 1, 0.5, 1 );
	pointer-events: none;
}

.hero-cosmic-signage__slide.is-active {
	opacity: 1;
	transform: translateX( 0 );
	pointer-events: auto;
}

.hero-cosmic-signage__slide.is-exit {
	opacity: 0;
	transform: translateX( -20px );
}

.hero-cosmic-signage__slide-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.hero-cosmic-signage__slide-link:hover .hero-cosmic-signage__slide-img,
.hero-cosmic-signage__slide-link:focus-visible .hero-cosmic-signage__slide-img {
	opacity: 0.92;
}

.hero-cosmic-signage__slide-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: rgba( 10, 14, 28, 0.55 );
	transition: opacity 0.2s ease;
}

.hero-cosmic-signage__footer {
	flex-shrink: 0;
	box-sizing: border-box;
	min-height: var( --cosmic-chrome-bottom );
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid rgba( 27, 38, 59, 0.6 );
	z-index: 2;
}

.hero-cosmic-signage__dots {
	display: flex;
	gap: 6px;
}

.hero-cosmic-signage__dot {
	width: 5px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #243147;
	transition:
		background 0.4s,
		transform 0.3s,
		box-shadow 0.4s;
	cursor: pointer;
}

.hero-cosmic-signage__dot.is-active {
	background: var( --cosmic-accent );
	box-shadow: 0 0 8px rgba( 126, 184, 212, 0.45 );
	transform: scale( 1.3 );
}

.hero-cosmic-signage__bar-track {
	flex: 1;
	height: 2px;
	background: rgba( 36, 49, 71, 0.4 );
	border-radius: 2px;
	overflow: hidden;
}

.hero-cosmic-signage__bar-fill {
	height: 100%;
	width: 0%;
	background: var( --cosmic-accent );
	border-radius: 2px;
	transition: width linear;
	box-shadow: 0 0 8px rgba( 126, 184, 212, 0.35 );
}

.hero-cosmic-signage__timer {
	font-size: 0.6rem;
	font-variant-numeric: tabular-nums;
	color: #4b5e7d;
	letter-spacing: 1px;
	white-space: nowrap;
	width: 16px;
	text-align: right;
}

.hero-cosmic-signage__glow {
	position: absolute;
	width: 560px;
	height: calc( var( --cosmic-h ) + 40px );
	top: -20px;
	left: -20px;
	border-radius: 12px;
	filter: blur( 50px );
	opacity: 0.35;
	background: var( --cosmic-accent );
	z-index: -1;
	transition: background 1.2s cubic-bezier( 0.25, 1, 0.5, 1 );
	transform: translateZ( -15px );
	pointer-events: none;
}

.hero-cosmic-signage__screw {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3b4f70;
	box-shadow:
		inset 0 1px 2px rgba( 255, 255, 255, 0.2 ),
		0 0 4px rgba( 126, 184, 212, 0.2 );
	z-index: 20;
}

.hero-cosmic-signage__screw:nth-child(2) {
	top: 12px;
	left: 12px;
}

.hero-cosmic-signage__screw:nth-child(3) {
	top: 12px;
	right: 12px;
}

.hero-cosmic-signage__screw:nth-child(4) {
	bottom: 12px;
	left: 12px;
}

.hero-cosmic-signage__screw:nth-child(5) {
	bottom: 12px;
	right: 12px;
}

@media ( max-width: 767px ) {
	.hero-cosmic-signage {
		--cosmic-w: calc( 100vw - 2rem );
		--cosmic-side: 0px;
		--cosmic-depth: 0px;
		--cosmic-scale: 1;
	}

	.hero-cosmic-signage__scene {
		perspective: none;
	}

	.hero-cosmic-signage__wrap {
		animation: none;
		transform: none;
		transform-origin: top center;
		transform-style: flat;
	}

	.hero-cosmic-signage__box {
		transform-style: flat;
	}

	.hero-cosmic-signage__face--left,
	.hero-cosmic-signage__face--right {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hero-cosmic-signage__wrap {
		animation: none;
	}

	.hero-cosmic-signage__live-dot {
		animation: none;
	}
}