/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *       Deltarune Custom Prophecy Pane Generator (ProphGen)
 *                Copyright © Sparronator9999 2025.
 *             https://sparronator9999.codeberg.page/
 *
 *         This file is licensed under a Creative Commons
 * Attribution-NonCommercial-ShareAlike 4.0 International License:
 *       https://creativecommons.org/licenses/by-nc-sa/4.0/
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:root
{
	/* set to the size of your prophecy background,
	 * foreground (logo) and text base images respectively.
	 * these must NOT contain units, unlike the other variables! */
	--bgimg-width: 316;
	--bgimg-height: 238;
	--fgimg-width: 316;
	--fgimg-height: 238;
	--timg-width: 316;
	--timg-height: 238;

	/* unscaled size of prophecy background */
	--prophbg-width: 150px;
	--prophbg-height: 90px;

	/* calculated values for background scroll effects */
	--scroll-bg: calc(var(--bgimg-width) * var(--bgimg-height) * var(--prophscale) * -1px);
	--scroll-fg: calc(var(--fgimg-width) * var(--fgimg-height) * var(--prophscale) * 1px);
	--scroll-t: calc(var(--timg-width) * var(--timg-height) * var(--prophscale) * 1px);
	/* should scroll at 15 (unscaled) pixels per second */
	--scrolltime-bg: calc(var(--bgimg-width) * var(--bgimg-height) / 15 * 1s);
	--scrolltime-fg: calc(var(--fgimg-width) * var(--fgimg-height) / 15 * 1s);
	--scrolltime-t: calc(var(--timg-width) * var(--timg-height) / 15 * 1s);

	/* values used for custom prophecies created with ProphGen */
	--fgmask-width: 18px;
	--fgmask-height: 17px;

	/* Absolute positions of foreground image and text */
	--fg-pos: 65%;
	--text-pos: calc(4px * var(--prophscale));

	/* How large the prophecy should be.
	 * Scales down to 2 (or even 1) on devices with limited screen width */
	--prophscale: 3;
	/* Depth of hover and "ghost" image effects */
	--hover-depth: 4px;
	/* Size of gradients on background edges */
	--gradsize: 60px;
}

/* prophecy fade-in effect */
@keyframes fade
{
	from { opacity: 0; }
	to { opacity: 1; }
}

/* prophecy hover effect */
@keyframes hoover
{
	from { transform: translate(-50%, calc(var(--hover-depth) * var(--prophscale))); }
	to { transform: translate(-50%, 0); }
}

/* "ghost" image hover effects */
@keyframes hoover-fg2
{
	from { transform: translate(calc(-50% + (var(--hover-depth) * var(--prophscale))), calc((var(--fg-pos) * -1) + (var(--hover-depth) * var(--prophscale)))); }
	to { transform: translate(calc(-50% - (var(--hover-depth) * var(--prophscale))), calc((var(--fg-pos) * -1) - (var(--hover-depth) * var(--prophscale)))); }
}
@keyframes hoover-fg3
{
	from { transform: translate(calc(-50% + (var(--hover-depth) * var(--prophscale) * 2)), calc((var(--fg-pos) * -1) + (var(--hover-depth) * var(--prophscale) * 2))); }
	to { transform: translate(calc(-50% - (var(--hover-depth) * var(--prophscale) * 2)), calc((var(--fg-pos) * -1) - (var(--hover-depth) * var(--prophscale) * 2))); }
}

/* "scroll" effects on background, logo, and text */
@keyframes depth-bg
{
	from { background-position: 0 0; }
	to { background-position: var(--scroll-bg) var(--scroll-bg); }
}
@keyframes depth-fg
{
	from { background-position: 0 0; }
	to { background-position: var(--scroll-fg) var(--scroll-fg); }
}
@keyframes depth-t
{
	from { background-position: 0 0; }
	to { background-position: var(--scroll-t) var(--scroll-t); }
}

/* background colour shift effect */
@keyframes linecol
{
	from { background-color: #8be9ef; }
	to { background-color: #17edff; }
}

/* Second Sanctuary colours */
@keyframes z2-hsv
{
	from { filter: hue-rotate(30deg) saturate(0.6) brightness(0.9); }
	to { filter: hue-rotate(40deg) saturate(0.7) brightness(1.0); }
}
/* Final Prophecy colours (in the last Third Sanctuary room) */
@keyframes final-hsv
{
	from { filter: hue-rotate(60deg) saturate(0.7) brightness(0.8); }
	to { filter: hue-rotate(120deg) saturate(0.6) brightness(0.9); }
}

.prophfg, .prophtext
{
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.prophbg, .prophbg-linecol, .prophbg-edge, .prophfg, .prophtext, .prophbreaker, .prophshards, .prophshards::after, .prophshard
{
	position: absolute;
}

.prophbg, .prophbg-linecol, .prophbg-edge, .prophfg
{
	left: 50%;
	top: var(--fg-pos);
	transform: translate(-50%,calc(var(--fg-pos) * -1));
}

.prophecy, .prophecy *
{
	box-sizing: initial;
}

.prophecy
{
	animation: hoover 1.26s ease-in-out infinite alternate, fade 0.5s linear;
	background: #000;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	margin: 0 0 2em;
	overflow: visible;
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
	width: calc(160px * var(--prophscale));
	height: calc(120px * var(--prophscale));
}

.prophecy.zone2
{
	animation: z2-hsv 2s ease-in-out infinite alternate, hoover 1.26s ease-in-out infinite alternate, fade 0.5s linear;
}

.prophecy.final
{
	animation: final-hsv 923ms ease-in-out infinite alternate, hoover 1.26s ease-in-out infinite alternate, fade 0.5s linear;
}

.prophbg, .prophbg-linecol, .prophbg-edge
{
	width: calc(var(--prophbg-width) * var(--prophscale));
	height: calc(var(--prophbg-height) * var(--prophscale));
}

.prophbg
{
	animation: depth-bg var(--scrolltime-bg) linear infinite;
	background: url("/prophgen/bg.png");
	background-size: calc(var(--bgimg-width) * var(--prophscale) * 1px) calc(var(--bgimg-height) * var(--prophscale) * 1px);
	mix-blend-mode: screen;
	position: relative;
}

.prophbg-linecol
{
	animation: linecol 12.566s ease-in-out -6.283s infinite alternate;
	background: #428d92;
	mix-blend-mode: multiply;
}

.prophbg-edge
{
	background:
		linear-gradient(0deg,#000,rgba(0,0,0,0) calc(var(--gradsize) * var(--prophscale)),rgba(0,0,0,0)),
		linear-gradient(90deg,#000,rgba(0,0,0,0) calc(var(--gradsize) * var(--prophscale)),rgba(0,0,0,0)),
		linear-gradient(180deg,#000,rgba(0,0,0,0) calc(var(--gradsize) * var(--prophscale)),rgba(0,0,0,0)),
		linear-gradient(270deg,#000,rgba(0,0,0,0) calc(var(--gradsize) * var(--prophscale)),rgba(0,0,0,0));
}

.prophfg
{
	animation: depth-fg var(--scrolltime-fg) linear infinite;
	background: url("/prophgen/fg.png");
	background-size: calc(var(--fgimg-width) * var(--prophscale) * 1px) calc(var(--fgimg-height) * var(--prophscale) * 1px);
	width: calc(var(--prophbg-width) * var(--prophscale));
	height: calc(var(--prophbg-height) * var(--prophscale));
	-webkit-mask-image: url("/prophgen/dog.png");
	mask-image: url("/prophgen/dog.png");
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: calc(var(--fgmask-width) * var(--prophscale)) calc(var(--fgmask-height) * var(--prophscale));
	mask-size: calc(var(--fgmask-width) * var(--prophscale)) calc(var(--fgmask-height) * var(--prophscale));
}

.prophfg2, .prophfg3
{
	opacity: 0.15;
}

.prophfg2
{
	animation: depth-fg var(--scrolltime-fg) linear infinite, hoover-fg2 1.26s ease-in-out infinite alternate;
}

.prophfg3
{
	animation: depth-fg var(--scrolltime-fg) linear infinite, hoover-fg3 1.26s ease-in-out infinite alternate;
}

.prophtext
{
	animation: depth-t var(--scrolltime-t) linear infinite;
	background: url("/prophgen/t.png");
	background-size: calc(var(--timg-width) * var(--prophscale) * 1px) calc(var(--timg-height) * var(--prophscale) * 1px);
	-webkit-mask-size: 100%;
	mask-size: 100%;
	left: 50%;
	top: var(--text-pos);
	transform: translateX(-50%);
}

.prophbreaker, .prophshards
{
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.prophshards::after
{
	content: url("/prophgen/shards.png");
	overflow: hidden;
	width: 0;
	height: 0;
	z-index: -1;
}

.prophshard
{
	background-image: url("/prophgen/shards.png");
	background-size: calc(225px * var(--prophscale)) calc(199px * var(--prophscale));
	background-repeat: no-repeat;
	display: none;
	-webkit-mask-composite: xor, copy;
	mask-composite: exclude;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	opacity: 0.75;
}


.prophcracked .prophshard
{
	display: block;
}

.prophecy.prophcracked
{
	animation: unset;
}

.prophcracked .prophbg, .prophcracked .prophmg, .prophcracked .prophfg, .prophcracked .prophtext
{
	animation: unset;
	display: none;
}

#prophlogo .prophtext
{
	-webkit-mask-image: url("/prophgen/logo-text.png");
	mask-image: url("/prophgen/logo-text.png");
	width: calc(94px * var(--prophscale));
	height: calc(10px * var(--prophscale));
}

#prophlogo .prophfg
{
	-webkit-mask-image: url("/prophgen/logo.png");
	mask-image: url("/prophgen/logo.png");
	-webkit-mask-size: calc(90px * var(--prophscale)) calc(90px * var(--prophscale));
	mask-size: calc(90px * var(--prophscale)) calc(90px * var(--prophscale));
}

#prophlogo .prophshard
{
	-webkit-mask-image: -webkit-linear-gradient(#000, #000), url("/prophgen/logo.png");
	mask-image: linear-gradient(#000, #000), url("/prophgen/logo.png");
	-webkit-mask-size: 100% 100%, calc(90px * var(--prophscale)) calc(90px * var(--prophscale));
	mask-size: 100% 100%, calc(90px * var(--prophscale)) calc(90px * var(--prophscale));
}

#prophgen-custom.prophecy
{
	width: calc(256px * var(--prophscale));
}

@media (prefers-reduced-motion)
{
	.prophecy:not(.forceanim), .prophecy:not(.forceanim) *:not(.prophshard)
	{
		animation: unset !important;
	}
}

@media only screen and (max-width: 480px)
{
	:root
	{
		--prophscale: 2;
	}
}

@media only screen and (max-width: 240px)
{
	:root
	{
		--prophscale: 1;
	}
}

@media print
{
	:root
	{
		--prophscale: 2;
	}
	.prophecy :not(.prophfg, .prophtext), .prophfg2, .prophfg3
	{
		display: none !important;
	}
	.prophecy, .prophfg, .prophtext
	{
		animation: unset;
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
		print-color-adjust: exact;
		display: block !important;
	}
	.prophfg
	{
		background: #11a;
	}
	.prophtext
	{
		background: #09b;
	}
	.prophecy
	{
		top: calc(var(--hover-depth) * var(--prophscale));
		background: transparent;
	}
}