/*
	Tammy's Craft Garage — temporary holiday theme
	Every rule is scoped under `html.tcg-holiday`, which assets/js/holiday.js
	adds only inside its date window. Outside it, this file does nothing.

	Holiday palette (layered over the everyday brand; cream text is unchanged)
		Evergreen  #0c3b2a / #12523a / #082a1e   (background base)
		Cranberry  #c8102e / #a3122a             (glows, primary buttons)
		Gold       #f2c14e / #ffd97a             (accents, links, halo)
		Pine       #1f8a4c                       (accent gradient end)
*/

/* --- Background: evergreen field with soft cranberry glows -------------- */

	html.tcg-holiday #bg:after {
		background-image:
			radial-gradient(ellipse 70% 55% at 18% 12%, rgba(200, 16, 46, 0.55), rgba(200, 16, 46, 0) 70%),
			radial-gradient(ellipse 65% 55% at 88% 92%, rgba(200, 16, 46, 0.45), rgba(200, 16, 46, 0) 70%),
			radial-gradient(ellipse 50% 40% at 70% 20%, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0) 70%),
			linear-gradient(160deg, #0c3b2a 0%, #12523a 48%, #082a1e 100%);
	}

	html.tcg-holiday #bg:before {
		background-color: rgba(6, 18, 12, 0.28);
	}

	html.tcg-holiday #main article {
		background-color: rgba(10, 22, 16, 0.9);
	}

/* --- Accents: gold links, red→gold→green rules --------------------------- */

	html.tcg-holiday a {
		color: #f2c14e;
	}

		html.tcg-holiday a:hover {
			color: #ffd97a;
		}

	html.tcg-holiday h1.major,
	html.tcg-holiday h2.major,
	html.tcg-holiday h3.major {
		border-bottom-color: #f2c14e;
		border-image: linear-gradient(90deg, #c8102e, #f2c14e, #1f8a4c) 1;
	}

	html.tcg-holiday #main article.active h2.major::after {
		background-image: linear-gradient(90deg, #c8102e, #f2c14e, #1f8a4c);
	}

	html.tcg-holiday #header nav ul {
		background-color: rgba(8, 26, 18, 0.85);
	}

		html.tcg-holiday #header nav ul li a:hover {
			background-color: rgba(242, 193, 78, 0.16);
		}

		html.tcg-holiday #header nav ul li a::after {
			background-color: #f2c14e;
		}

	html.tcg-holiday input[type="submit"].primary,
	html.tcg-holiday .button.primary {
		background-color: #c8102e;
		background-image: linear-gradient(90deg, #d62839 0%, #a3122a 100%);
		color: #fff3ea !important;
	}

		html.tcg-holiday input[type="submit"].primary:hover,
		html.tcg-holiday .button.primary:hover {
			background-image: linear-gradient(90deg, #e63a4a 0%, #c8102e 100%);
		}

	html.tcg-holiday input[type="submit"],
	html.tcg-holiday input[type="reset"],
	html.tcg-holiday .button {
		box-shadow: inset 0 0 0 1px #f2c14e;
	}

	html.tcg-holiday input[type="submit"].primary,
	html.tcg-holiday .button.primary {
		box-shadow: none;
	}

	html.tcg-holiday #events-table-wrapper {
		border-color: rgba(242, 193, 78, 0.45);
		background-color: rgba(242, 193, 78, 0.06);
	}

	html.tcg-holiday #shows table th {
		color: #f2c14e;
	}

	html.tcg-holiday table thead {
		border-bottom-color: #f2c14e;
	}

	html.tcg-holiday ::selection {
		background-color: #f2c14e;
		color: #0c1f16;
	}

/* --- Logo medallion: warm gold halo --------------------------------------
   Recolour only. The pulse itself is custom.css's opacity animation on
   .logo::after, which stays cheap; here we just tint both shadow layers. */

	html.tcg-holiday #header .logo {
		box-shadow:
			0 0 0 1px rgba(255, 217, 122, 0.55),
			0 0 28px 6px rgba(242, 193, 78, 0.32),
			0 10px 28px rgba(0, 0, 0, 0.45);
	}

		html.tcg-holiday #header .logo::after {
			box-shadow: 0 0 40px 10px rgba(242, 193, 78, 0.3);
		}

/* --- Greeting under the tagline ------------------------------------------ */

	/* #header .content .inner p beats the template's uppercase tagline style. */
	html.tcg-holiday #header .content .inner p.tcg-holiday-greeting {
		margin: 0.75rem 0 0 0;
		font-family: 'Caveat', cursive;
		font-size: 1.7rem;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: 0.03rem;
		color: #ffd97a;
		text-transform: none;
	}

		html.tcg-holiday #header .content .inner p.tcg-holiday-greeting small {
			display: inline-block;
			margin-top: 0.35rem;
			font-family: 'Outfit', sans-serif;
			font-size: 0.85rem;
			font-weight: 500;
			letter-spacing: 0.02rem;
			color: #fff3ea;
			text-transform: none;
		}

		html.tcg-holiday .tcg-holiday-greeting a {
			color: #ffd97a;
			border-bottom: dotted 1px rgba(255, 217, 122, 0.7);
		}

	@media screen and (max-width: 480px) {
		html.tcg-holiday #header .content .inner p.tcg-holiday-greeting {
			font-size: 1.45rem;
		}
	}

/* --- Snow: between #bg (z 1) and #wrapper (z 3) -------------------------
   Transform-only animations, so the compositor moves pre-rasterised layers
   and the main thread does nothing per frame. holiday.js sets each layer's
   tile image, --tile, --sway and durations. */

	html.tcg-holiday .tcg-snow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		overflow: hidden;
		pointer-events: none;
	}

		/* Side-to-side drift; overhangs the viewport so edges never show. */
		html.tcg-holiday .tcg-snow-sway {
			position: absolute;
			top: 0;
			bottom: 0;
			left: -60px;
			right: -60px;
			will-change: transform;
			-webkit-animation: tcg-snow-sway 7s ease-in-out infinite alternate;
			animation: tcg-snow-sway 7s ease-in-out infinite alternate;
		}

			/* Starts one tile above the viewport and falls exactly one tile per
			   loop, so the repeat is seamless. */
			html.tcg-holiday .tcg-snow-fall {
				position: absolute;
				left: 0;
				right: 0;
				top: calc(-1 * var(--tile, 300px));
				bottom: 0;
				background-repeat: repeat;
				will-change: transform;
				-webkit-animation: tcg-snow-fall 8s linear infinite;
				animation: tcg-snow-fall 8s linear infinite;
			}

	@keyframes tcg-snow-fall {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(0, var(--tile, 300px), 0); }
	}

	@keyframes tcg-snow-sway {
		from { transform: translate3d(calc(-1 * var(--sway, 30px)), 0, 0); }
		to   { transform: translate3d(var(--sway, 30px), 0, 0); }
	}

/* --- String of lights across the top of the window ----------------------- */

	html.tcg-holiday .tcg-lights {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 48px;
		z-index: 2;              /* behind page content, so it never blocks a click */
		overflow: hidden;
		pointer-events: none;
	}

		/* Four stacked copies of the strand (see holiday.js): one static base
		   row with the wire and unlit bulbs, three "lit" overlay rows. */
		html.tcg-holiday .tcg-light-row {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: -webkit-flex;
			display: flex;
			white-space: nowrap;
		}

		/* One sagging span of wire carrying two bulbs. */
		html.tcg-holiday .tcg-swag {
			position: relative;
			-webkit-flex: 0 0 112px;
			flex: 0 0 112px;
			height: 48px;
			margin-left: -1px;
		}

			html.tcg-holiday .tcg-light-row--base .tcg-swag {
				background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='32' viewBox='0 0 112 32'%3E%3Cpath d='M0 4 Q56 30 112 4' fill='none' stroke='%23071a12' stroke-width='2'/%3E%3C/svg%3E") no-repeat 0 0;
			}

			/* Bulbs sit at 1/4 and 3/4 of the swag, where the wire is ~14px down. */
			html.tcg-holiday .tcg-bulb {
				position: absolute;
				top: 13px;
				width: 9px;
				height: 14px;
				margin-left: -4.5px;
				border-radius: 50% 50% 45% 45% / 40% 40% 60% 60%;
				background: var(--bulb);
				box-shadow: 0 0 10px 3px var(--glow);
			}

				/* Base row: every bulb, unlit (dim, no glow). */
				html.tcg-holiday .tcg-light-row--base .tcg-bulb {
					opacity: 0.4;
					box-shadow: none;
				}

				/* Lit rows: only this group's bulbs show. */
				html.tcg-holiday .tcg-bulb.is-off {
					visibility: hidden;
				}

				/* Little dark socket cap. */
				html.tcg-holiday .tcg-bulb::before {
					content: '';
					position: absolute;
					top: -4px;
					left: 2px;
					width: 5px;
					height: 5px;
					border-radius: 1px;
					background: #071a12;
				}

			html.tcg-holiday .tcg-bulb:nth-child(1) { left: 28px; -webkit-transform: rotate(-14deg); transform: rotate(-14deg); }
			html.tcg-holiday .tcg-bulb:nth-child(2) { left: 84px; -webkit-transform: rotate(14deg);  transform: rotate(14deg); }

			html.tcg-holiday .tcg-bulb--red   { --bulb: #ff4d5e; --glow: rgba(255, 77, 94, 0.75); }
			html.tcg-holiday .tcg-bulb--gold  { --bulb: #ffd166; --glow: rgba(255, 209, 102, 0.75); }
			html.tcg-holiday .tcg-bulb--green { --bulb: #4ade80; --glow: rgba(74, 222, 128, 0.7); }
			html.tcg-holiday .tcg-bulb--blue  { --bulb: #6cc4ff; --glow: rgba(108, 196, 255, 0.7); }
			html.tcg-holiday .tcg-bulb--cream { --bulb: #fff3ea; --glow: rgba(255, 243, 234, 0.7); }

	/* Three lit rows, staggered by a third of the cycle, fade over the unlit
	   base: only three elements animate, and only their opacity. */
	html.tcg-holiday .tcg-light-row--lit {
		will-change: opacity;
		-webkit-animation: tcg-twinkle 3.6s ease-in-out infinite;
		animation: tcg-twinkle 3.6s ease-in-out infinite;
	}

		html.tcg-holiday .tcg-light-row--lit:nth-child(3) { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; }
		html.tcg-holiday .tcg-light-row--lit:nth-child(4) { -webkit-animation-delay: -2.4s; animation-delay: -2.4s; }

	@keyframes tcg-twinkle {
		0%, 100% { opacity: 1; }
		50%      { opacity: 0.1; }
	}

	/* Hide the lights while an article panel is open on small screens, where
	   the panel runs right up to the top edge. */
	@media screen and (max-width: 736px) {
		html.tcg-holiday body.is-article-visible .tcg-lights {
			display: none;
		}
	}

/* --- Reduced motion: steady lights, no snow (holiday.js skips it) -------- */

	@media (prefers-reduced-motion: reduce) {
		html.tcg-holiday .tcg-light-row--lit {
			-webkit-animation: none !important;
			animation: none !important;
		}
	}