/* in-japan.de Easter Egg – Torii + Schrein */

/* Spalte: Gruß oben, Szene füllt den restlichen Platz – so überlappen sie sich nie */
.ije {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

.ije-backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 110%, rgb(226 65 47 / 0.25), transparent 60%),
		linear-gradient(to bottom, rgb(8 12 32 / 0.86), rgb(14 18 44 / 0.96));
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.8s ease;
}

.ije--visible .ije-backdrop { opacity: 1; }

/* Himmel: config.php → 'sky' */
.ije--sky-evening .ije-backdrop {
	background:
		radial-gradient(ellipse at 80% 20%, rgb(255 150 90 / 0.35), transparent 55%),
		linear-gradient(to bottom, rgb(46 24 66 / 0.88), rgb(120 50 60 / 0.9) 60%, rgb(200 100 60 / 0.92));
}

.ije--sky-rain .ije-backdrop {
	background: linear-gradient(to bottom, rgb(36 44 58 / 0.9), rgb(22 28 38 / 0.96));
}

/* Mond, bei "evening" eine tief stehende Sonne, bei "rain" hinter Wolken */
.ije-moon { color: #fff6d8; }
.ije-moon-disc { fill: #fdf3d0; }
.ije--sky-evening .ije-moon { color: #ffb36b; }
.ije--sky-evening .ije-moon-disc { fill: #ffc98a; }
.ije--sky-rain .ije-moon { display: none; }

/* Schnee auf Torii, Schreindach und Laternen */
.ije-snowcap { display: none; }
.ije--snow .ije-snowcap { display: inline; }

.ije-fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Bühne unten, die Szene wird vom SVG-Rand abgeschnitten und "wächst" aus dem Bildschirmrand.
   Sie nimmt den Platz unter dem Gruß ein und skaliert sich hinein (preserveAspectRatio: xMidYMax meet). */
.ije-stage {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	width: min(100%, 720px);
	margin: 0 auto;
	line-height: 0;
}

.ije-scene {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ije-scene g {
	transform-box: view-box;
}

.ije-ground,
.ije-shrine,
.ije-torii,
.ije-lantern {
	transform: translateY(440px);
}

.ije-moon {
	opacity: 0;
	transform: translateY(30px);
}

.ije--visible .ije-ground  { transform: none; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.3, 1); }
.ije--visible .ije-shrine  { transform: none; transition: transform 1.6s cubic-bezier(0.2, 0.9, 0.3, 1) 0.55s; }
.ije--visible .ije-torii   { transform: none; transition: transform 1.3s cubic-bezier(0.3, 1.35, 0.5, 1) 0.2s; }
.ije--visible .ije-lantern--l { transform: none; transition: transform 1s cubic-bezier(0.3, 1.3, 0.5, 1) 1.1s; }
.ije--visible .ije-lantern--r { transform: none; transition: transform 1s cubic-bezier(0.3, 1.3, 0.5, 1) 1.25s; }
.ije--visible .ije-moon    { opacity: 1; transform: none; transition: opacity 1.5s ease 1.2s, transform 2s ease 1.2s; }

.ije-glow,
.ije-flame {
	opacity: 0;
}

.ije--visible .ije-glow  { animation: ije-glow 2.8s ease-in-out 2.1s infinite alternate both; }
.ije--visible .ije-flame { animation: ije-flicker 1.6s steps(1) 2.1s infinite both; }

@keyframes ije-glow {
	from { opacity: 0.55; }
	to   { opacity: 1; }
}

@keyframes ije-flicker {
	0%   { opacity: 1; }
	40%  { opacity: 0.85; }
	55%  { opacity: 1; }
	80%  { opacity: 0.92; }
}

/* Gruß */
.ije-greeting {
	position: relative;
	flex: none;
	padding: clamp(48px, 10vh, 120px) 16px clamp(12px, 3vh, 32px);
	text-align: center;
	color: #fff;
	pointer-events: none;
}

.ije-title {
	margin: 0;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, min(8vw, 10vh), 4.75rem); /* vh: auf flachen Laptop-Bildschirmen bleibt mehr Platz für die Szene */
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-shadow: 0 0 24px rgb(255 210 122 / 0.55), 0 2px 6px rgb(0 0 0 / 0.5);
}

.ije-word {
	white-space: nowrap;
}

.ije-letter {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.6em) scale(0.8);
	filter: blur(6px);
}

.ije--visible .ije-letter {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity 0.6s ease,
		transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1),
		filter 0.6s ease;
	transition-delay: calc(1.4s + var(--i) * 45ms);
}

.ije-sub {
	margin: 0.6em 0 0;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: clamp(1rem, 3.4vw, 1.6rem);
	letter-spacing: 0.15em;
	color: #ffd27a;
	opacity: 0;
	transform: translateY(10px);
}

.ije--visible .ije-sub {
	opacity: 0.95;
	transform: none;
	transition: opacity 1s ease 2.4s, transform 1s ease 2.4s;
}

.ije-sentence {
	max-width: 32em;
	margin: 1.4em auto 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(0.95rem, 2.6vw, 1.15rem);
	font-style: italic;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.85);
	text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
	opacity: 0;
	transform: translateY(10px);
}

.ije--visible .ije-sentence {
	opacity: 1;
	transform: none;
	transition: opacity 1.2s ease 3.2s, transform 1.2s ease 3.2s;
}

/* Schließen – "all: unset", damit Button-Styles des Themes nicht durchschlagen */
.ije .ije-close {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	display: grid !important;
	place-items: center;
	/* Maße hart setzen, falls Theme oder Plugins Buttons mit !important stylen */
	width: 44px !important;
	height: 44px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.3);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.4s ease 0.6s, background 0.2s ease, border-color 0.2s ease;
}

.ije .ije-close svg {
	display: block;
	width: 18px;
	height: 18px;
}

.ije--visible .ije-close { opacity: 1; }
.ije .ije-close:hover { background: rgb(0 0 0 / 0.55); border-color: rgb(255 255 255 / 0.6); }
.ije .ije-close:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }

/* Abgang: alles versinkt wieder */
.ije--leaving .ije-backdrop,
.ije--leaving .ije-fx,
.ije--leaving .ije-greeting,
.ije--leaving .ije-close {
	opacity: 0 !important;
	transition: opacity 0.7s ease !important;
}

.ije--leaving .ije-ground,
.ije--leaving .ije-shrine,
.ije--leaving .ije-torii,
.ije--leaving .ije-lantern {
	transform: translateY(440px) !important;
	transition: transform 0.8s cubic-bezier(0.6, 0, 0.8, 0.4) !important;
}

.ije--leaving .ije-moon {
	opacity: 0 !important;
	transition: opacity 0.5s ease !important;
}

/* Querformat auf dem Handy: weniger Abstand oben, damit die Szene genug Höhe behält */
@media (max-height: 500px) and (orientation: landscape) {
	.ije-greeting { padding-top: 16px; padding-right: 72px; padding-left: 72px; }
	.ije-title { font-size: clamp(1.6rem, 6vw, 2.6rem); }
	.ije-sentence { margin-top: 0.6em; }
}

/* "Bewegung reduzieren": nur einblenden, keine Bewegung, keine Partikel (siehe JS) */
@media (prefers-reduced-motion: reduce) {
	.ije *,
	.ije--visible * {
		transition-duration: 0.3s !important;
		transition-delay: 0s !important;
		animation: none !important;
	}

	.ije-ground,
	.ije-shrine,
	.ije-torii,
	.ije-lantern,
	.ije-letter,
	.ije-sub,
	.ije-sentence,
	.ije-moon {
		transform: none !important;
		filter: none !important;
	}

	.ije-scene { opacity: 0; transition: opacity 0.3s ease; }
	.ije--visible .ije-scene,
	.ije--visible .ije-glow,
	.ije--visible .ije-flame { opacity: 1; }
	.ije--leaving .ije-scene { opacity: 0; }
}