@charset "utf-8";

/* ---------------------------------------- */
/* locationページ */

/* ---------------------------------------- */
/* キューブ */
@property --ry {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@property --rx {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

:root {
	--cube-size: clamp(200px, 30vw, 800px);
	--cube-depth: calc(var(--cube-size) / 2);
	--spin-speed: 6s;
	--bg-color: silver;

	/* 面の非表示を回避するためのチューニング */
	--tilt-z: 0.12deg;   /* 微傾き */
	--anti-cull: 0.06deg;/* 面の微ズレ */
	--epsilon: 1px;
	--img-z: 0.04px;
}
@media (max-width: 750px) { /* SP */
	:root {
		--cube-size: 50vw;
	}
}

.scene {
	perspective: calc(var(--cube-size) * 4);
	perspective-origin: 50% 50%;
	isolation: isolate;
	transform: translateZ(0);
}

.cube {
/*	will-change: transform;*/
	margin-top: calc(var(--cube-size) * 3 / 7);
	margin-bottom: calc(var(--cube-size) * 2 / 5);
	margin-inline: auto;
	position: relative;
	width: var(--cube-size);
	height: var(--cube-size);
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	animation: spin var(--spin-speed) linear infinite;
	overflow: visible;

	--ry: 0deg;
	--rx: 0deg;
	animation:
		spinY var(--spin-speed) linear infinite,
		rockX var(--spin-speed) ease-in-out infinite alternate;
	transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--tilt-z));
}
@media (max-width: 750px) { /* SP */
	.cube {
		margin-top: 15vw;
	}
}
.face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	outline: 1px solid transparent;
}
.face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: translateZ(var(--img-z));
	box-shadow: 0 0 0 2px rgba(255,255,255,1) inset;
}

.front  { transform: rotateY(calc(  0deg + var(--anti-cull))) translateZ(calc(var(--cube-depth) + var(--epsilon))); }
.back   { transform: rotateY(calc(180deg - var(--anti-cull))) translateZ(calc(var(--cube-depth) + var(--epsilon))); }
.right  { transform: rotateY(calc( 90deg + var(--anti-cull))) translateZ(calc(var(--cube-depth) + var(--epsilon))); }
.left   { transform: rotateY(calc(-90deg - var(--anti-cull))) translateZ(calc(var(--cube-depth) + var(--epsilon))); }
.top    { transform: rotateX(calc( 90deg + var(--anti-cull))) translateZ(calc(var(--cube-depth) + var(--epsilon))) rotate(90deg); }
.bottom { transform: rotateX(calc(-90deg - var(--anti-cull))) translateZ(calc(var(--cube-depth) + var(--epsilon))); }

@keyframes spinY {
	to { --ry: 1turn; }
}
@keyframes rockX {
	from { --rx: -25deg; } /* firefox = varがうまくいかない */
	to   { --rx: 25deg; }
}

/* ---------------------------------------- */
/* 背景 */
:root {
	--vignette-center: rgba(255,255,255,1); /* 内側 */
	--vignette-mid: rgba(200,255,200,0.1); /* 中間 */
	--vignette-edge: rgba(100,170,100,0.2); /* 外側 */
}

main {
/*	background-color: black;*/
	background: radial-gradient(
		ellipse 70% 50% at 50% 45%,
		var(--vignette-center) 25%,
		var(--vignette-mid) 60%,
		var(--vignette-edge) 100%
		);
	background-attachment: fixed;
	background-size: cover;
}

.mywp_page_basic__h1 {
	color: black;
	border-color: black;
}