/*
 * Global Network component.
 *
 * 対応テンプレート: template-parts/components/global-network/global-network.php
 * 対応スクリプト:   template-parts/components/global-network/js/global-network.js
 *
 * セクション外枠から地図内部まで、このファイル内で完結させる。
 * JSが無効な環境では .is-armed が付かず、完成状態が静的に表示される。
 */

.global-network
{
	--gn-site-width: var(--site-width, 1320px);
	--gn-blue: var(--takagi-blue, #008bd2);
	--gn-deep-blue: var(--takagi-deep-blue, #006db6);
	--gn-gray: var(--takagi-gray, #717171);
	--gn-font-roboto: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--gn-map-stage-width: 116.5%;
	--gn-map-visible-ratio: 85.84%;

	/* padding-bottom: clamp(86px, 10vw, 132px); */
	
	/* background:
		linear-gradient(156deg, transparent 0 50%, #eefbfe 50% 63%, transparent 63%),
		linear-gradient(20deg, rgba(212, 241, 253, .45), rgba(255, 255, 255, 0) 46%); */
}

.global-network > .site-container
{
	width: calc(100% - 32px);
	max-width: var(--gn-site-width);
	margin-right: auto;
	margin-left: auto;
}

.global-network .section-heading
{
	text-align: center;
}

.global-network .section-heading h2
{
	margin: 0;
	font-size: clamp(25px, 3.2vw, 43px);
	line-height: 1.45;
}

.global-network .section-heading p
{
	display: inline-block;
	margin: 14px 0 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gn-gray);
	font-size: 1.4rem;
}

.global-network__text-chunk
{
	display: inline-block;
}

.global-network__map-wrap
{
	position: relative;
	display: grid;
	justify-items: start;
	width: 100%;
	/* max-width: var(--gn-site-width); */
	/* margin: clamp(26px, 4vw, 44px) auto 0; */
	margin: 0 auto 0;
	padding-top: clamp(28px, 4vw, 56px);
}

.global-network__label
{
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	color: rgba(191, 222, 245, .78);
	font-family: var(--gn-font-roboto);
	font-size: clamp(42px, 7vw, 92px);
	font-style: italic;
	font-weight: 400;
	line-height: .9;
	pointer-events: none;
}

.global-network__copy
{
	position: relative;
	z-index: 2;
	width: min(100%, 1100px);
	margin: clamp(-74px, -4.4vw, -38px) auto 0;
	color: #5e6a70;
	font-size: clamp(14px, .95vw, 16px);
	font-weight: 700;
	line-height: 2.05;
}

.global-network-map
{
	--gn-arc-color: var(--gn-blue);
	--gn-arc-width: 4;
	--gn-arc-opacity: .55;
	--gn-arc-outline-color: #ffffff;
	--gn-arc-outline-width: 2; /* アーチの外線の太さ */
	--gn-arc-outline-opacity: .5; /* アーチの外線の透明度 */
	--gn-arc-duration: 1.4s;
	--gn-arc-stagger: 0s;
	--gn-primary-link-color: var(--gn-blue); /* 日本―英国の基幹ライン色 */
	--gn-primary-link-width: 5; /* 基幹ライン本体の太さ */
	--gn-primary-link-opacity: .9; /* 基幹ライン本体の濃さ */
	--gn-primary-link-halo-color: rgba(0, 109, 182, .2); /* filterを使わない外側の強調色 */
	--gn-primary-link-halo-width: 20; /* 基幹ライン外側の太さ */
	--gn-dot-color: var(--gn-blue);
	--gn-dot-outline-color: #ffffff;
	--gn-dot-outline-width: 0;
	--gn-particle-color: var(--gn-blue); /* 走る球本体の色 */
	--gn-particle-halo-color: rgba(255, 255, 255, .44); /* filterを使わない軽量な光彩色 */
	--gn-particle-core-opacity: .96; /* 球本体の濃さ */
	--gn-particle-halo-opacity: .62; /* 球の外側に重ねる光彩の濃さ */
	--gn-bubble-duration: .55s;
	--gn-bubble-stagger: .14s;
	--gn-bubble-base-delay: 1.2s;
	--gn-bubble-float-y-a: -9px;
	--gn-bubble-float-y-b: 5px;
	--gn-bubble-float-duration: 7s;
	--gn-bubble-float-delay: 0s;
	--gn-bubble-pulse-duration: 8.5s;
	--gn-bubble-pulse-delay: 0s;
	--gn-bubble-pulse-min: .97;
	--gn-bubble-pulse-max: 1.03;
	--gn-bubble-photo-fade-duration: 2.6s;
	--gn-bubble-photo-fade-ease: cubic-bezier(.37, 0, .13, 1);
	--gn-bubble-photo-active-scale: 1.005;
	--gn-bubble-photo-idle-scale: 1.035;

	position: relative;
	z-index: 1;
	width: var(--gn-map-stage-width);
	/* max-width: var(--gn-site-width); */
	margin: 0 calc(100% - var(--gn-map-stage-width)) 0 0;
	justify-self: start;
}

.global-network-map__base
{
	display: block;
	width: 100%;
	height: auto;
	clip-path: inset(0 calc(100% - var(--gn-map-visible-ratio)) 0 0);
	opacity: .9;
}

.global-network-map__arcs
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.global-network-map__arc,
.global-network-map__arc-outline
{
	fill: none;
	stroke-linecap: round;
}

.global-network-map__arc-outline
{
	stroke: var(--gn-arc-outline-color);
	stroke-width: var(--gn-arc-outline-width);
	opacity: var(--gn-arc-outline-opacity);
}

.global-network-map__arc
{
	stroke: var(--gn-arc-color);
	stroke-width: var(--gn-arc-width);
	opacity: var(--gn-arc-opacity);
}

.global-network-map__primary-link-halo,
.global-network-map__primary-link-core
{
	fill: none;
	stroke-linecap: round;
}

.global-network-map__primary-link-halo
{
	stroke: var(--gn-primary-link-halo-color);
	stroke-width: var(--gn-primary-link-halo-width);
}

.global-network-map__primary-link-core
{
	stroke: var(--gn-primary-link-color);
	stroke-width: var(--gn-primary-link-width);
	opacity: var(--gn-primary-link-opacity);
}

.global-network-map__particle
{
	pointer-events: none;
}

.global-network-map__particle-halo, .global-network-map__particle-core{
	stroke-width: 0;
}

.global-network-map__particle-halo
{
	fill: var(--gn-particle-halo-color);
	opacity: var(--gn-particle-halo-opacity);
}

.global-network-map__particle-core
{
	fill: var(--gn-particle-color);
	opacity: var(--gn-particle-core-opacity);
	r: 8px;
}

.global-network-map__marker
{
	pointer-events: none;
}

.global-network-map__marker-halo,
.global-network-map__marker-glow,
.global-network-map__marker-core
{
	fill: var(--gn-dot-color);
}

.global-network-map__marker-halo
{
	opacity: .1;
}

.global-network-map__marker-glow
{
	opacity: .24;
}

.global-network-map__marker-core
{
	fill: var(--gn-dot-color);
	stroke: var(--gn-dot-outline-color);
	stroke-width: var(--gn-dot-outline-width);
	opacity: .94;
}

.global-network-map__dot
{
	fill: var(--gn-dot-color);
	stroke: var(--gn-dot-outline-color);
	stroke-width: var(--gn-dot-outline-width);
	opacity: .9;
}

.global-network-map__marker--hub .global-network-map__marker-halo
{
	opacity: .14;
}

.global-network-map__marker--hub .global-network-map__marker-glow
{
	opacity: .32;
}

/*
 * debug_mode専用。通常表示では要素自体をPHPから出力しない。
 * 地点IDと配列上のx/yを楕円の上へ表示する。
 */
.global-network-map__debug-marker-label
{
	fill: #1b2430;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: .02em;
	paint-order: stroke fill;
	pointer-events: none;
	stroke: rgba(255, 255, 255, .98);
	stroke-linejoin: round;
	stroke-width: 8px;
}

.global-network-map__debug-marker-coordinates
{
	fill: #c2185b;
	font-size: 23px;
	font-weight: 700;
}

.global-network-map--debug .global-network-map__marker-core
{
	stroke: #ff2f92;
	stroke-width: 4px;
}

.global-network-map__pin
{
	position: absolute;
	z-index: 2;
	color: var(--gn-deep-blue);
	font-family: var(--gn-font-roboto);
	font-size: clamp(8px, .8vw, 1rem);
	font-weight: 700;
	line-height: 1.2;
	text-shadow:
		0 0 2px #ffffff,
		0 0 5px #ffffff,
		0 0 9px rgba(255, 255, 255, .95);
}

.global-network-map__pin::before
{
	position: absolute;
	top: -3px;
	left: -4px;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--gn-deep-blue);
	border-radius: 50%;
}

.global-network-map__bubble
{
	position: absolute;
	z-index: 3;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
}

.global-network-map--debug .global-network-map__bubble
{
	outline: 2px dashed rgba(255, 47, 146, .9);
	outline-offset: 3px;
}

.global-network-map__debug-bubble-label
{
	position: absolute;
	z-index: 12;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-sizing: border-box;
	min-width: max-content;
	padding: 6px 8px;
	color: #ffffff;
	background: rgba(16, 24, 36, .9);
	border: 1px solid #ff65ad;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(8px, .62vw, 12px);
	line-height: 1.25;
	pointer-events: none;
	text-align: center;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.global-network-map__debug-bubble-label strong
{
	color: #ff8fc2;
	font-size: 1.1em;
}

.global-network-map__debug-bubble-label small
{
	font: inherit;
}

.global-network-map__bubble-motion,
.global-network-map__bubble-frame,
.global-network-map__bubble-image
{
	display: block;
	__display: none; /* JSが有効な環境では .is-armed が付いた時に表示される */
	width: 100%;
	height: 100%;
}

.global-network-map__bubble-motion
{
	will-change: transform;
}

.global-network-map__bubble-frame
{
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, .35);
	border-radius: 50%;
	transform-origin: center;
	will-change: transform;
}

.global-network-map__bubble-image
{
	position: absolute;
	inset: 0;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transform: scale(var(--gn-bubble-photo-idle-scale));
	transition:
		opacity var(--gn-bubble-photo-fade-duration) var(--gn-bubble-photo-fade-ease),
		transform calc(var(--gn-bubble-photo-fade-duration) + .45s) var(--gn-bubble-photo-fade-ease);
	will-change: opacity, transform;
}

.global-network-map__bubble-image--front
{
	z-index: 2;
	opacity: 1;
	transform: scale(var(--gn-bubble-photo-active-scale));
}

.global-network-map.is-armed .global-network-map__bubble-image--front:not(.is-active)
{
	opacity: 0;
	transform: scale(var(--gn-bubble-photo-idle-scale));
}

.global-network-map__bubble-image.is-active
{
	opacity: 1;
	transform: scale(var(--gn-bubble-photo-active-scale));
}

/* 入場アニメーション: JSが .is-armed を付けた時だけ初期非表示にする */
.global-network-map.is-armed .global-network-map__arc,
.global-network-map.is-armed .global-network-map__arc-outline,
.global-network-map.is-armed .global-network-map__primary-link-halo,
.global-network-map.is-armed .global-network-map__primary-link-core
{
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.global-network-map.is-armed .global-network-map__bubble
{
	opacity: 0;
	transform: translate(-50%, -50%) scale(.6);
}

.global-network-map.is-inview .global-network-map__arc,
.global-network-map.is-inview .global-network-map__arc-outline,
.global-network-map.is-inview .global-network-map__primary-link-halo,
.global-network-map.is-inview .global-network-map__primary-link-core
{
	animation: gn-arc-draw var(--gn-arc-duration) ease-out forwards;
	animation-delay: calc(var(--gn-i, 0) * var(--gn-arc-stagger));
}

.global-network-map.is-inview .global-network-map__bubble
{
	animation: gn-bubble-in var(--gn-bubble-duration) ease-out forwards;
	animation-delay: calc(var(--gn-bubble-base-delay) + var(--gn-i, 0) * var(--gn-bubble-stagger));
}

.global-network-map.is-inview .global-network-map__bubble-motion
{
	animation: gn-bubble-float var(--gn-bubble-float-duration) ease-in-out infinite;
	animation-delay: var(--gn-bubble-float-delay);
}

.global-network-map.is-inview .global-network-map__bubble-frame
{
	animation: gn-bubble-pulse var(--gn-bubble-pulse-duration) ease-in-out infinite;
	animation-delay: var(--gn-bubble-pulse-delay);
}

/* primary_hub_link上の球だけ変更 */
.global-network-map__particle--primary .global-network-map__particle-core
{
	fill: var(--gn-blue);
	r: 9px;
}
.global-network-map__particle--primary .global-network-map__particle-halo
{
	fill: rgba(255, 255, 255, .5);
	r: 18px;
	stroke-width: 0;
}


@keyframes gn-arc-draw
{
	to
	{
		stroke-dashoffset: 0;
	}
}

@keyframes gn-bubble-in
{
	from
	{
		opacity: 0;
		transform: translate(-50%, -50%) scale(.6);
	}

	to
	{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes gn-bubble-float
{
	0%,
	100%
	{
		transform: translate3d(0, 0, 0);
	}

	35%
	{
		transform: translate3d(0, var(--gn-bubble-float-y-a), 0);
	}

	70%
	{
		transform: translate3d(0, var(--gn-bubble-float-y-b), 0);
	}
}

@keyframes gn-bubble-pulse
{
	0%,
	100%
	{
		transform: scale(1);
	}

	42%
	{
		transform: scale(var(--gn-bubble-pulse-max));
	}

	75%
	{
		transform: scale(var(--gn-bubble-pulse-min));
	}
}

@media (prefers-reduced-motion: reduce)
{
	.global-network-map.is-armed .global-network-map__arc,
	.global-network-map.is-armed .global-network-map__arc-outline,
	.global-network-map.is-armed .global-network-map__primary-link-halo,
	.global-network-map.is-armed .global-network-map__primary-link-core
	{
		animation: none;
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}

	.global-network-map.is-armed .global-network-map__bubble
	{
		animation: none;
		opacity: 1;
		transform: translate(-50%, -50%);
	}

	.global-network-map.is-inview .global-network-map__bubble-motion,
	.global-network-map.is-inview .global-network-map__bubble-frame
	{
		animation: none;
	}
}

@media (max-width: 820px)
{
	.global-network__copy
	{
		width: 100%;
		margin-top: 18px;
	}
}

@media (max-width: 540px)
{
	.global-network .section-heading h2
	{
		font-size: 23px;
	}

	.global-network .section-heading p
	{
		font-size: 12px;
		line-height: 1.6;
	}

	.global-network__label
	{
		font-size: 38px;
	}

	.global-network__copy
	{
		font-size: 13px;
		line-height: 1.9;
	}

	.global-network-map__pin
	{
		font-size: 7px;
	}
}