/*
 * Business outline diagram (page_business.php "about" section).
 *
 * Layout depends on container query units (cqw). Browsers without
 * cqw support fall back to the static SVG (.business-outline__fallback).
 * Entrance animations only run under prefers-reduced-motion: no-preference;
 * everything is visible by default, JS adds .is-outline-enhanced to hide
 * elements just before playing the sequence.
 */

.business-outline {
	width: 100%;
	margin: 0;
}

/* Beats .about-section__img img (0,1,1) from the shared bundle. */
.business-outline img.business-outline__fallback {
	display: block;
	width: 100%;
	height: auto;
}

.business-outline__stage {
	display: none;
}

.business-outline img,
.business-outline:hover img {
	-webkit-transition: none;
	transition: none;
	-webkit-transform: none;
	transform: none;
}

@supports (width: 1cqw) {
	.business-outline img.business-outline__fallback {
		display: none;
	}

	.business-outline__stage {
		position: relative;
		display: block;
		width: 100%;
		aspect-ratio: 1000 / 552;
		container-type: inline-size;
		color: #fff;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 700;
		overflow: hidden;
	}

	.business-outline__stage::before,
	.business-outline__stage::after {
		position: absolute;
		top: 12.86%;
		height: 72.28%;
		background: #f5f5f5;
		content: "";
	}

	.business-outline__stage::before {
		left: 0;
		width: 58%;
	}

	.business-outline__stage::after {
		right: 0;
		width: 38.5%;
	}

	.business-outline__party {
		position: absolute;
		top: 3.8%;
		z-index: 4;
		height: 9.06%;
		background: #1a1a1a;
		font-size: 1.92cqw;
		letter-spacing: 0;
	}

	.business-outline__party-label {
		position: absolute;
		top: 50%;
		left: 44%;
		white-space: nowrap;
		transform: translateY(-50%);
	}

	.business-outline__party--management {
		left: 0;
		width: 58%;
	}

	.business-outline__party--owner {
		right: 0;
		width: 38.5%;
	}

	.business-outline__person {
		position: absolute;
		top: -30%;
		width: 8cqw;
		height: auto;
		border-radius: 50%;
		filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.15));
	}

	.business-outline__party--management .business-outline__person {
		left: 26.7%;
	}

	.business-outline__party--owner .business-outline__person {
		left: 17.4%;
	}

	.business-outline__source,
	.business-outline__platform,
	.business-outline__owner {
		position: absolute;
	}

	.business-outline__source {
		top: 20.65%;
		left: 0;
		z-index: 2;
		width: 26.3%;
		height: 57.25%;
	}

	.business-outline__database {
		position: absolute;
		top: 16.8%;
		left: 18.6%;
		width: 60.8%;
		height: auto;
	}

	.business-outline__formats {
		position: absolute;
		top: 66.4%;
		left: 29.6%;
		display: flex;
		align-items: center;
		gap: 1.1cqw;
	}

	.business-outline__format {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		color: #1a1a1a;
		line-height: 1;
	}

	.business-outline__format svg {
		display: block;
		width: 4.7cqw;
		height: 4.7cqw;
		overflow: visible;
	}

	.business-outline__format span {
		margin-top: 0.2cqw;
		font-size: 1.15cqw;
		font-weight: 700;
		letter-spacing: 0.08em;
	}

	.business-outline__format--csv svg {
		width: 4.2cqw;
		height: 4.2cqw;
	}

	.business-outline__format--csv span {
		margin-top: 0.5cqw;
	}

	.business-outline__platform {
		top: 20.65%;
		left: 26.3%;
		z-index: 1;
		width: 69.3%;
		height: 57.25%;
		border-radius: 2.6cqw;
		background: #2e6cff;
	}

	.business-outline__desktop {
		position: absolute;
		top: 15.2%;
		left: 8.5%;
		width: 32.3%;
		height: auto;
	}

	.business-outline__brand {
		position: absolute;
		top: 75.6%;
		left: 30.7%;
		width: 29.1%;
	}

	.business-outline__logo {
		width: 100%;
		height: auto;
	}

	.business-outline__owner {
		top: 20.65%;
		right: 0;
		z-index: 2;
		width: 38.5%;
		height: 57.25%;
		overflow: visible;
	}

	.business-outline__devices {
		position: absolute;
		top: 17.7%;
		left: 10.9%;
		width: 72.7%;
		height: auto;
	}

	.business-outline__badge {
		position: absolute;
		z-index: 4;
		display: grid;
		align-content: center;
		width: 11.6%;
		aspect-ratio: 1;
		margin: 0;
		border-radius: 50%;
		background: #1a1a1a;
		font-size: 1.28cqw;
		line-height: 1.25;
		text-align: center;
	}

	.business-outline__badge span {
		display: block;
		font-size: 0.8em;
	}

	.business-outline__badge--import {
		top: 6%;
		left: -5.8%;
		width: 11.7%;
	}

	.business-outline__badge--sync {
		top: 6%;
		left: -14%;
		width: 21%;
	}

	.business-outline__label {
		position: absolute;
		top: 122.8%;
		left: 0;
		display: grid;
		width: 45.7%;
		height: 15.8%;
		margin: 0;
		place-items: center;
		background: #2e6cff;
		font-size: 1.44cqw;
		line-height: 1.2;
		white-space: nowrap;
	}

	.business-outline__label::before {
		position: absolute;
		bottom: 100%;
		left: 50%;
		width: 9.5%;
		aspect-ratio: 30 / 26.25;
		background: #2e6cff;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
		content: "";
		transform: translateX(-50%);
	}

	.business-outline__source .business-outline__label {
		left: 0;
		width: 87.8%;
	}

	.business-outline__source .business-outline__label::before {
		width: 13%;
	}

	.business-outline__label--dark {
		background: #1a1a1a;
	}

	.business-outline__label--dark::before {
		background: #1a1a1a;
	}

	.business-outline__owner .business-outline__label {
		left: 0;
		width: 100%;
	}

	.business-outline__owner .business-outline__label::before {
		width: 7.8%;
	}

	.business-outline__flows {
		position: absolute;
		inset: 0;
		z-index: 3;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.business-outline__flow {
		fill: #1a1a1a;
	}

	@media (prefers-reduced-motion: no-preference) {
		@keyframes businessOutlineFadeUp {
			from {
				opacity: 0;
				transform: translateY(1.2cqw);
			}

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

		@keyframes businessOutlineFadeScale {
			from {
				opacity: 0;
				transform: translateY(1.2cqw) scale(0.96);
			}

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

		@keyframes businessOutlineLabelDrop {
			from {
				opacity: 0;
				transform: translateY(-1.4cqw) scale(0.96);
			}

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

		@keyframes businessOutlinePanelIn {
			from {
				opacity: 0;
				transform: scale(0.96);
			}

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

		/* Reveals from the computed (hidden) clip toward the pointing side,
		   so the arrowhead keeps its shape while the shaft grows. */
		@keyframes businessOutlineArrowReveal {
			to {
				clip-path: inset(-5% -5% -5% -5%);
			}
		}

		@keyframes businessOutlineBadgePop {
			from {
				opacity: 0;
				transform: translateY(0.8cqw) scale(0.7);
			}

			70% {
				opacity: 1;
				transform: translateY(0) scale(1.06);
			}

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

		/* Sequence timing. Adjust a step here and later steps keep their spacing. */
		.business-outline__stage {
			--outline-ease: cubic-bezier(0.22, 1, 0.36, 1);
			--outline-t-frame: 0.1s;
			--outline-t-party: 0.2s;
			--outline-t-source: 0.5s;
			--outline-t-platform: 0.8s;
			--outline-t-desktop: 0.95s;
			--outline-t-flow-import: 1.3s;
			--outline-t-badge-import: 1.5s;
			--outline-t-devices: 1.75s;
			--outline-t-flow-owner: 2.05s;
			--outline-t-flow-management: 2.3s;
			--outline-t-badge-sync: 2.55s;
			--outline-t-label-source: 2.85s;
			--outline-t-label-platform: 3s;
			--outline-t-label-owner: 3.15s;
		}

		/* Hidden states before the sequence plays. */
		.business-outline__stage.is-outline-enhanced::before,
		.business-outline__stage.is-outline-enhanced::after,
		.business-outline__stage.is-outline-enhanced .business-outline__party,
		.business-outline__stage.is-outline-enhanced .business-outline__database,
		.business-outline__stage.is-outline-enhanced .business-outline__formats,
		.business-outline__stage.is-outline-enhanced .business-outline__platform,
		.business-outline__stage.is-outline-enhanced .business-outline__desktop,
		.business-outline__stage.is-outline-enhanced .business-outline__brand,
		.business-outline__stage.is-outline-enhanced .business-outline__devices,
		.business-outline__stage.is-outline-enhanced .business-outline__badge,
		.business-outline__stage.is-outline-enhanced .business-outline__label {
			opacity: 0;
		}

		.business-outline__stage.is-outline-enhanced::before,
		.business-outline__stage.is-outline-enhanced::after {
			transform: translateY(1.2cqw);
		}

		.business-outline__stage.is-outline-enhanced .business-outline__party {
			transform: translateY(-1.2cqw);
		}

		.business-outline__stage.is-outline-enhanced .business-outline__database,
		.business-outline__stage.is-outline-enhanced .business-outline__formats,
		.business-outline__stage.is-outline-enhanced .business-outline__desktop,
		.business-outline__stage.is-outline-enhanced .business-outline__brand,
		.business-outline__stage.is-outline-enhanced .business-outline__devices {
			transform: translateY(1.2cqw) scale(0.96);
		}

		.business-outline__stage.is-outline-enhanced .business-outline__label {
			transform: translateY(-1.4cqw) scale(0.96);
		}

		.business-outline__stage.is-outline-enhanced .business-outline__platform {
			transform: scale(0.96);
			transform-origin: center center;
		}

		.business-outline__stage.is-outline-enhanced .business-outline__badge {
			transform: translateY(0.8cqw) scale(0.7);
		}

		.business-outline__stage.is-outline-enhanced .business-outline__flow--import,
		.business-outline__stage.is-outline-enhanced .business-outline__flow--to-owner {
			clip-path: inset(-5% 100% -5% -5%);
		}

		.business-outline__stage.is-outline-enhanced .business-outline__flow--to-management {
			clip-path: inset(-5% -5% -5% 100%);
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated::before,
		.business-outline__stage.is-outline-enhanced.is-outline-animated::after {
			animation: businessOutlineFadeUp 0.5s var(--outline-ease) var(--outline-t-frame) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__party {
			animation: businessOutlineFadeUp 0.48s var(--outline-ease) var(--outline-t-party) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__database,
		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__formats {
			animation: businessOutlineFadeScale 0.46s var(--outline-ease) var(--outline-t-source) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__platform {
			animation: businessOutlinePanelIn 0.56s var(--outline-ease) var(--outline-t-platform) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__desktop,
		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__brand {
			animation: businessOutlineFadeScale 0.48s var(--outline-ease) var(--outline-t-desktop) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__flow--import {
			animation: businessOutlineArrowReveal 0.35s var(--outline-ease) var(--outline-t-flow-import) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__badge--import {
			animation: businessOutlineBadgePop 0.45s var(--outline-ease) var(--outline-t-badge-import) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__devices {
			animation: businessOutlineFadeScale 0.48s var(--outline-ease) var(--outline-t-devices) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__flow--to-owner {
			animation: businessOutlineArrowReveal 0.32s var(--outline-ease) var(--outline-t-flow-owner) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__flow--to-management {
			animation: businessOutlineArrowReveal 0.32s var(--outline-ease) var(--outline-t-flow-management) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__badge--sync {
			animation: businessOutlineBadgePop 0.45s var(--outline-ease) var(--outline-t-badge-sync) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__source .business-outline__label {
			animation: businessOutlineLabelDrop 0.46s var(--outline-ease) var(--outline-t-label-source) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__platform .business-outline__label {
			animation: businessOutlineLabelDrop 0.46s var(--outline-ease) var(--outline-t-label-platform) forwards;
		}

		.business-outline__stage.is-outline-enhanced.is-outline-animated .business-outline__owner .business-outline__label {
			animation: businessOutlineLabelDrop 0.46s var(--outline-ease) var(--outline-t-label-owner) forwards;
		}

		/* JS swaps .is-outline-animated for .is-outline-done when the sequence
		   ends, releasing the animation fills so hover transitions apply. */
		.business-outline__stage.is-outline-done::before,
		.business-outline__stage.is-outline-done::after,
		.business-outline__stage.is-outline-done .business-outline__party,
		.business-outline__stage.is-outline-done .business-outline__database,
		.business-outline__stage.is-outline-done .business-outline__formats,
		.business-outline__stage.is-outline-done .business-outline__platform,
		.business-outline__stage.is-outline-done .business-outline__desktop,
		.business-outline__stage.is-outline-done .business-outline__brand,
		.business-outline__stage.is-outline-done .business-outline__devices,
		.business-outline__stage.is-outline-done .business-outline__badge,
		.business-outline__stage.is-outline-done .business-outline__label {
			opacity: 1;
			transform: none;
			animation: none;
		}

		.business-outline__stage.is-outline-done .business-outline__flow {
			clip-path: none;
			animation: none;
		}
	}

	@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
		.business-outline__stage.is-outline-done img.business-outline__person,
		.business-outline__stage.is-outline-done img.business-outline__database,
		.business-outline__stage.is-outline-done img.business-outline__desktop,
		.business-outline__stage.is-outline-done .business-outline__brand,
		.business-outline__stage.is-outline-done img.business-outline__devices,
		.business-outline__stage.is-outline-done .business-outline__badge,
		.business-outline__stage.is-outline-done .business-outline__format {
			-webkit-transition: transform 0.18s ease;
			transition: transform 0.18s ease;
			transform-origin: center center;
		}

		.business-outline__stage.is-outline-done img.business-outline__person:hover,
		.business-outline__stage.is-outline-done img.business-outline__database:hover,
		.business-outline__stage.is-outline-done img.business-outline__desktop:hover,
		.business-outline__stage.is-outline-done .business-outline__brand:hover,
		.business-outline__stage.is-outline-done img.business-outline__devices:hover,
		.business-outline__stage.is-outline-done .business-outline__badge:hover,
		.business-outline__stage.is-outline-done .business-outline__format:hover {
			transform: scale(1.1);
		}
	}
}