/* Visual details the Elementor UI cannot express: alpha masks, inline accents, hover scale.
   All colours/spacing/typography remain editable in the Elementor panel. */

.soso-hero h1 em,
.soso-story h2 em {
	font-style: normal;
	color: #b6ef39;
}

.soso-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #b6ef39;
	margin-right: 7px;
}

/* Hero mascot: square crop, max 700px, bottom alpha fade starts at 70%. */
.soso-hero-art {
	max-width: 700px;
	margin-left: auto;
}

.soso-mascot img {
	display: block;
	width: 100%;
	max-width: 700px;
	max-height: 680px;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
	-webkit-mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%);
	mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%);
}

@media (max-width: 767px) {
	.soso-hero-art {
		max-width: 520px;
		margin: 0 auto;
	}
}

/* Gallery cards */
.soso-card {
	cursor: pointer;
}

/* Square art box keeps the three captions on one baseline. */
.soso-card .soso-card-art {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	overflow: visible;
}

.soso-card .soso-card-art .elementor-widget-container,
.soso-card .soso-card-art figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.soso-card .soso-card-art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.soso-card:hover .soso-card-art img {
	transform: scale(1.04);
}

/* City art feathers on all four sides (gallery and enlarged view). */
.soso-card--city .soso-card-art img,
.soso-view--city .soso-view-art img {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #0003 3%, #000a 7%, #000 13%, #000 87%, #000a 93%, #0003 97%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #0005 2%, #000c 6%, #000 10%, #000 84%, #000a 92%, #0003 97%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0%, #0003 3%, #000a 7%, #000 13%, #000 87%, #000a 93%, #0003 97%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #0005 2%, #000c 6%, #000 10%, #000 84%, #000a 92%, #0003 97%, transparent 100%);
	mask-composite: intersect;
}

.soso-card--character .soso-card-art img,
.soso-view--character .soso-view-art img {
	-webkit-mask-image: linear-gradient(#000 70%, transparent 100%);
	mask-image: linear-gradient(#000 70%, transparent 100%);
}

.soso-card--signature .soso-card-art .elementor-widget-container,
.soso-card--signature .soso-card-art figure {
	display: flex;
	align-items: center;
	justify-content: center;
}

.soso-card--signature .soso-card-art img,
.soso-view--signature .soso-view-art img {
	width: 90%;
	height: auto;
	object-fit: contain;
	padding: 24px;
	margin: auto;
}


/* Artwork detail overlay. The panel itself is built in Elementor; these rules only
   cover the overlay behaviour, which the editor has no control for. */
.soso-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow: auto;
	background: #070a06dd;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.soso-overlay.is-open {
	display: flex;
}

.soso-overlay .soso-panel {
	width: min(860px, 92vw);
	max-height: 92vh;
	overflow: auto;
}

.soso-view {
	display: none;
}

.soso-view.is-active {
	display: block;
}

.soso-view-art img {
	display: block;
	margin: auto;
}

.soso-overlay :focus-visible,
.soso-card:focus-visible {
	outline: 3px solid #b6ef39;
	outline-offset: 5px;
}

/* In the Elementor editor the overlay sits in the flow with every view expanded,
   so all three can be edited without opening anything. */
.elementor-editor-active .soso-overlay {
	display: block;
	position: static;
	padding: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.elementor-editor-active .soso-view {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.soso-card .soso-card-art img {
		transition: none;
	}
	.soso-card:hover .soso-card-art img {
		transform: none;
	}
}