/*
Theme Name: Kern Place Halloween
Theme URI: https://www.kernplace.org/
Description: A spooky seasonal skin for Twenty Twenty-Five. Activate it for Halloween and switch back to Twenty Twenty-Five afterwards; your content, menus, header, footer and page layouts are reused as-is, so nothing needs to be rebuilt in either direction.
Author: Kern Place Association
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kern-place-halloween
Tags: dark, full-site-editing, holiday
*/

/* ---------- Night sky ---------- */
body {
	background-color: var(--wp--preset--color--base);
	background-image:
		radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, .55), transparent 60%),
		radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, .45), transparent 60%),
		radial-gradient(1.5px 1.5px at 250px 160px, rgba(255, 240, 210, .5), transparent 60%),
		radial-gradient(1px 1px at 330px 40px, rgba(255, 255, 255, .35), transparent 60%),
		radial-gradient(1px 1px at 80px 220px, rgba(255, 255, 255, .3), transparent 60%),
		linear-gradient(180deg, #0c0614 0%, #170c26 40%, #1b0f24 75%, #241018 100%);
	background-size: 380px 260px, 380px 260px, 380px 260px, 380px 260px, 380px 260px, 100% 100%;
	background-attachment: fixed;
	position: relative;
	overflow-x: hidden;
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* Sections that the parent theme paints white/cream become translucent crypt panels. */
.has-base-background-color {
	background-color: rgba(20, 11, 32, .72) !important;
}

.has-accent-5-background-color {
	background-color: rgba(42, 24, 64, .55) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .25), 0 0 40px rgba(180, 140, 255, .08);
	border-radius: 12px;
}

.has-accent-2-background-color {
	background-color: rgba(42, 24, 64, .85) !important;
}

/* ---------- Type ---------- */
h1, h2,
.wp-block-site-title {
	text-shadow: 0 0 18px rgba(255, 122, 26, .45), 0 2px 0 #3a1500;
}

h1 a, h2 a,
.wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

h3, h4, h5, h6 {
	color: var(--wp--preset--color--contrast);
}

::selection {
	background: var(--wp--preset--color--accent-1);
	color: #1a0d00;
}

a:where(:not(.wp-element-button)) {
	text-decoration-color: rgba(255, 122, 26, .5);
	text-underline-offset: .2em;
	transition: color .2s ease, text-shadow .2s ease;
}

a:where(:not(.wp-element-button)):hover {
	text-shadow: 0 0 10px rgba(143, 227, 74, .55);
}

/* ---------- Buttons glow like jack-o'-lanterns ---------- */
.wp-element-button,
.wp-block-button__link {
	box-shadow: 0 0 0 2px rgba(255, 122, 26, .25), 0 0 22px rgba(255, 122, 26, .45);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: 0 0 0 2px rgba(143, 227, 74, .3), 0 0 26px rgba(143, 227, 74, .55);
	transform: translateY(-1px);
}

/* Outline-style buttons keep their outline but in pumpkin. */
.is-style-outline > .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--accent-1) !important;
}

/* ---------- Logo: a glowing bone-white medallion so a dark logo stays readable ---------- */
.wp-block-site-logo img {
	background: #f3ead9;
	border-radius: 14px;
	padding: 6px;
	box-shadow: 0 0 0 3px #ff7a1a, 0 0 24px rgba(255, 122, 26, .55);
}

/* ---------- Images get a candle-lit frame ---------- */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover {
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(255, 122, 26, .35), 0 10px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(180, 140, 255, .15);
}

.wp-block-latest-posts__featured-image img {
	border-radius: 50%;
	box-shadow: 0 0 0 2px #ff7a1a, 0 0 14px rgba(255, 122, 26, .5);
}

figcaption,
.wp-element-caption {
	color: var(--wp--preset--color--accent-4) !important;
	font-style: italic;
}

/* Separators become a dotted line of tiny pumpkins. */
.wp-block-separator {
	border: none !important;
	height: 14px !important;
	background: radial-gradient(circle at 7px 7px, #ff7a1a 4px, transparent 5px) 0 0 / 28px 14px repeat-x !important;
	opacity: .8;
}

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #120a1c !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* Form fields */
input, textarea, select {
	background-color: #1d1130;
	color: var(--wp--preset--color--contrast);
	border-color: rgba(255, 122, 26, .45);
}

/* ---------- Halloween ribbon ---------- */
.kph-ribbon {
	position: relative;
	z-index: 5;
	text-align: center;
	padding: .55rem 1rem;
	font-family: var(--wp--preset--font-family--creepster), fantasy;
	font-size: clamp(1.05rem, 2.6vw, 1.4rem);
	letter-spacing: .08em;
	color: #1a0d00;
	background:
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, .08) 0 12px, transparent 12px 24px),
		linear-gradient(90deg, #ff7a1a, #ffa53d, #ff7a1a);
	box-shadow: 0 4px 18px rgba(255, 122, 26, .35);
}

/* ---------- Decorations (all are decorative and ignore clicks) ---------- */
.kph-decor,
.kph-decor * {
	pointer-events: none;
}

.kph-moon {
	position: absolute;
	top: 62px;
	left: 34vw;
	width: clamp(70px, 9vw, 120px);
	aspect-ratio: 1;
	border-radius: 50%;
	z-index: 0;
	background:
		radial-gradient(circle at 30% 35%, rgba(0, 0, 0, .09) 0 9%, transparent 10%),
		radial-gradient(circle at 62% 60%, rgba(0, 0, 0, .08) 0 13%, transparent 14%),
		radial-gradient(circle at 45% 75%, rgba(0, 0, 0, .06) 0 6%, transparent 7%),
		radial-gradient(circle at 40% 40%, #fffbe6, #f6e3a1 60%, #e6c86e);
	box-shadow: 0 0 40px 10px rgba(246, 227, 161, .35), 0 0 120px 40px rgba(246, 227, 161, .12);
	opacity: .9;
}

.kph-web {
	position: absolute;
	top: 0;
	width: clamp(90px, 14vw, 180px);
	height: auto;
	z-index: 3;
	opacity: .55;
	color: #e9e1f4;
}

.kph-web--left { left: 0; }
.kph-web--right { right: 0; transform: scaleX(-1); }

.kph-spider {
	position: absolute;
	top: 0;
	left: 18vw;
	z-index: 4;
	width: 26px;
	animation: kph-dangle 7s ease-in-out infinite;
	transform-origin: top center;
	filter: drop-shadow(0 0 3px rgba(233, 225, 244, .9)) drop-shadow(0 0 8px rgba(255, 122, 26, .5));
}

.kph-spider__thread {
	width: 1px;
	height: 110px;
	margin: 0 auto;
	background: linear-gradient(rgba(233, 225, 244, .1), rgba(233, 225, 244, .7));
}

.kph-spider svg {
	display: block;
	width: 26px;
	height: auto;
}

.kph-bats {
	position: fixed;
	inset: 0;
	z-index: 6;
	overflow: hidden;
}

.kph-bat {
	position: absolute;
	left: -80px;
	width: 46px;
	color: #050208;
	filter: drop-shadow(0 0 4px rgba(255, 122, 26, .35));
	animation: kph-fly 18s linear infinite;
}

.kph-bat svg { width: 100%; height: auto; animation: kph-flap .28s ease-in-out infinite alternate; transform-origin: center; }
.kph-bat:nth-child(1) { top: 12vh; animation-delay: 0s; }
.kph-bat:nth-child(2) { top: 22vh; width: 30px; animation-duration: 24s; animation-delay: 6s; }
.kph-bat:nth-child(3) { top: 8vh;  width: 36px; animation-duration: 21s; animation-delay: 11s; }
.kph-bat:nth-child(4) { top: 30vh; width: 24px; animation-duration: 28s; animation-delay: 15s; }

.kph-fog {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	z-index: 2;
	overflow: hidden;
	opacity: .35;
}

.kph-fog span {
	position: absolute;
	bottom: -40px;
	left: 0;
	width: 200%;
	height: 180px;
	background:
		radial-gradient(ellipse 22% 55% at 10% 70%, rgba(230, 225, 245, .55), transparent 70%),
		radial-gradient(ellipse 18% 45% at 32% 80%, rgba(230, 225, 245, .45), transparent 70%),
		radial-gradient(ellipse 25% 60% at 55% 75%, rgba(230, 225, 245, .5), transparent 70%),
		radial-gradient(ellipse 20% 50% at 78% 80%, rgba(230, 225, 245, .45), transparent 70%),
		radial-gradient(ellipse 22% 55% at 95% 70%, rgba(230, 225, 245, .5), transparent 70%);
	animation: kph-drift 45s linear infinite;
}

.kph-fog span + span {
	bottom: -60px;
	opacity: .7;
	animation-duration: 70s;
	animation-direction: reverse;
}

.kph-ghost {
	position: fixed;
	left: 3vw;
	bottom: 0;
	z-index: 7;
	width: 64px;
	transform: translateY(110%);
	animation: kph-peek 22s ease-in-out infinite;
	animation-delay: 4s;
	filter: drop-shadow(0 0 12px rgba(230, 225, 245, .6));
}

.kph-ghost svg { width: 100%; height: auto; display: block; }

@keyframes kph-fly {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(30vw, -4vh); }
	50%  { transform: translate(60vw, 3vh); }
	75%  { transform: translate(90vw, -3vh); }
	100% { transform: translate(calc(100vw + 160px), 2vh); }
}

@keyframes kph-flap {
	from { transform: scaleY(1); }
	to   { transform: scaleY(.55); }
}

@keyframes kph-dangle {
	0%, 100% { transform: translateY(-30px) rotate(-2deg); }
	50%      { transform: translateY(10px) rotate(2deg); }
}

@keyframes kph-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes kph-peek {
	0%, 70%, 100% { transform: translateY(110%) rotate(0); }
	76%           { transform: translateY(8%) rotate(-6deg); }
	84%           { transform: translateY(0) rotate(5deg); }
	90%           { transform: translateY(12%) rotate(-3deg); }
}

@keyframes kph-flicker {
	0%, 100% { text-shadow: 0 0 18px rgba(255, 122, 26, .45), 0 2px 0 #3a1500; }
	45%      { text-shadow: 0 0 26px rgba(255, 122, 26, .7), 0 2px 0 #3a1500; }
	50%      { text-shadow: 0 0 10px rgba(255, 122, 26, .3), 0 2px 0 #3a1500; }
	55%      { text-shadow: 0 0 24px rgba(255, 122, 26, .65), 0 2px 0 #3a1500; }
}

h1, .wp-block-site-title {
	animation: kph-flicker 5s ease-in-out infinite;
}

/* Small screens: keep it fun but out of the way. */
@media (max-width: 600px) {
	.kph-spider { left: 40vw; }
	.kph-spider__thread { height: 40px; }
	.kph-moon { display: none; }
	.kph-fog { height: 110px; }
	.kph-ghost { width: 46px; }
	.kph-bat:nth-child(n+3) { display: none; }
}

/* Anyone who prefers less motion gets the look without the movement. */
@media (prefers-reduced-motion: reduce) {
	.kph-bats, .kph-ghost { display: none; }
	.kph-spider, .kph-fog span, h1, .wp-block-site-title { animation: none !important; }
	.kph-spider { transform: none; }
}

@media print {
	.kph-decor, .kph-ribbon { display: none !important; }
	body { background: #fff !important; }
}