/* Seasonal: garland variants + hero banner */

/* —— Base —— */
.fl-christmas-garland {
	position: relative;
	z-index: 99;
	width: 100%;
	overflow: visible;
	pointer-events: none;
	background: var(--fl-header-bg, #faf9f6);
	border-bottom: 1px solid var(--fl-header-border, #e8e6e1);
}

/* —— Ribbon — classic sprite garland (jsfiddle-style) —— */
.fl-garland--ribbon {
	height: 36px;
	padding: 0;
	overflow: hidden;
	border-bottom: none;
	background: transparent;
}

.fl-garland--ribbon .fl-garland__sprite {
	width: 100%;
	height: 36px;
	background-image: url('../images/garland-sprite.png');
	background-repeat: repeat-x;
	background-position: 0 0;
	background-size: auto 108px;
	animation: fl-garland-ribbon-blink 1.5s steps(1, end) infinite;
}

@keyframes fl-garland-ribbon-blink {
	0% { background-position: 0 0; }
	33.333% { background-position: 0 -36px; }
	66.666% { background-position: 0 -72px; }
}

.fl-garland__rope {
	display: grid;
	grid-template-columns: repeat(var(--fl-garland-count, 36), minmax(0, 1fr));
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 6px 0 14px;
	list-style: none;
	font-size: 0;
	line-height: 0;
	position: relative;
	z-index: 1;
}

.fl-garland__bulb {
	position: relative;
	justify-self: center;
	margin: 12px auto 0;
	list-style: none;
	padding: 0;
	border-radius: 50%;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}

/* —— Warm (default) — olive wire, cream & gold bulbs —— */
.fl-garland--warm::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	right: 0;
	height: 1.5px;
	background: linear-gradient(90deg, transparent, #8a9478 8%, #5b6745 50%, #8a9478 92%, transparent);
	opacity: 0.85;
}

.fl-garland--warm .fl-garland__bulb {
	width: 10px;
	height: 10px;
	margin-top: 16px;
	background: #f5f0e4;
	box-shadow: 0 0 6px 2px rgba(245, 224, 180, 0.55);
	animation-name: fl-garland-warm-pulse;
	animation-duration: 2.8s;
}

.fl-garland--warm .fl-garland__bulb::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 5px;
	background: #5b6745;
	border-radius: 1px;
}

.fl-garland--warm .fl-garland__bulb:nth-child(3n) {
	background: #e8d5a8;
	box-shadow: 0 0 8px 2px rgba(232, 213, 168, 0.6);
	animation-duration: 3.4s;
}

.fl-garland--warm .fl-garland__bulb:nth-child(3n+2) {
	background: #f3ebe0;
	box-shadow: 0 0 7px 2px rgba(243, 235, 224, 0.5);
	animation-duration: 2.2s;
}

.fl-garland--warm .fl-garland__bulb:nth-child(5n) {
	background: #e8c4b8;
	box-shadow: 0 0 7px 2px rgba(232, 196, 184, 0.45);
}

@keyframes fl-garland-warm-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.55; transform: scale(0.88); }
}

/* —— Minimal — tiny fairy lights —— */
.fl-garland--minimal::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(91, 103, 69, 0.35) 15%, rgba(91, 103, 69, 0.35) 85%, transparent);
}

.fl-garland--minimal .fl-garland__bulb {
	width: 5px;
	height: 5px;
	margin-top: 18px;
	background: #fffef8;
	box-shadow: 0 0 4px 1px rgba(255, 250, 230, 0.7);
	animation-name: fl-garland-minimal-twinkle;
	animation-duration: 3s;
}

.fl-garland--minimal .fl-garland__bulb::before {
	display: none;
}

.fl-garland--minimal .fl-garland__bulb:nth-child(2n) {
	animation-duration: 2.2s;
	animation-delay: 0.4s;
}

.fl-garland--minimal .fl-garland__bulb:nth-child(3n) {
	background: #f0e8d8;
	animation-duration: 3.8s;
	animation-delay: 0.8s;
}

@keyframes fl-garland-minimal-twinkle {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 1; }
}

/* —— Festive — soft traditional colors —— */
.fl-garland--festive::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	height: 2px;
	background: #3d4a32;
	border-radius: 1px;
	opacity: 0.7;
}

.fl-garland--festive .fl-garland__bulb {
	width: 11px;
	height: 14px;
	margin-top: 14px;
	border-radius: 50% 50% 45% 45%;
	background: #c45c5c;
	box-shadow: 0 0 8px 2px rgba(196, 92, 92, 0.4);
	animation-name: fl-garland-festive-glow;
	animation-duration: 2.4s;
}

.fl-garland--festive .fl-garland__bulb::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 4px;
	background: #3d4a32;
	border-radius: 2px 2px 0 0;
}

.fl-garland--festive .fl-garland__bulb:nth-child(4n+1) {
	background: #5b7a52;
	box-shadow: 0 0 8px 2px rgba(91, 122, 82, 0.4);
	animation-duration: 2s;
}

.fl-garland--festive .fl-garland__bulb:nth-child(4n+2) {
	background: #d4a84b;
	box-shadow: 0 0 8px 2px rgba(212, 168, 75, 0.45);
	animation-duration: 2.8s;
}

.fl-garland--festive .fl-garland__bulb:nth-child(4n+3) {
	background: #6b8cae;
	box-shadow: 0 0 8px 2px rgba(107, 140, 174, 0.4);
	animation-duration: 3.2s;
}

@keyframes fl-garland-festive-glow {
	0%, 100% { opacity: 1; filter: brightness(1); }
	50% { opacity: 0.65; filter: brightness(0.85); }
}

/* —— Classic — bright neon (legacy) —— */
.fl-garland--classic::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	height: 2px;
	background: #2a2a2a;
	border-radius: 1px;
}

.fl-garland--classic .fl-garland__bulb {
	width: 12px;
	height: 28px;
	margin-top: 14px;
	background: #00f7a5;
	box-shadow: 0 2px 12px 2px #00f7a5;
	animation-name: fl-garland-classic-1;
	animation-duration: 2s;
}

.fl-garland--classic .fl-garland__bulb::before {
	content: "";
	position: absolute;
	background: #222;
	width: 10px;
	height: 9px;
	border-radius: 3px;
	top: -5px;
	left: 1px;
}

.fl-garland--classic .fl-garland__bulb:nth-child(2n+1) {
	background: #0ff;
	box-shadow: 0 2px 12px 2px rgba(0, 255, 255, 0.55);
	animation-name: fl-garland-classic-2;
	animation-duration: 0.4s;
}

.fl-garland--classic .fl-garland__bulb:nth-child(4n+2) {
	background: #f70094;
	box-shadow: 0 2px 12px 2px #f70094;
	animation-name: fl-garland-classic-3;
	animation-duration: 1.1s;
}

.fl-garland--classic .fl-garland__bulb:nth-child(odd) {
	animation-duration: 1.8s;
}

.fl-garland--classic .fl-garland__bulb:nth-child(3n+1) {
	animation-duration: 1.4s;
}

@keyframes fl-garland-classic-1 {
	0%, 100% { background: #00f7a5; box-shadow: 0 2px 12px 2px #00f7a5; }
	50% { background: rgba(0, 247, 165, 0.4); box-shadow: 0 2px 12px 2px rgba(0, 247, 165, 0.2); }
}

@keyframes fl-garland-classic-2 {
	0%, 100% { background: #0ff; box-shadow: 0 2px 12px 2px #0ff; }
	50% { background: rgba(0, 255, 255, 0.4); box-shadow: 0 2px 12px 2px rgba(0, 255, 255, 0.2); }
}

@keyframes fl-garland-classic-3 {
	0%, 100% { background: #f70094; box-shadow: 0 2px 12px 2px #f70094; }
	50% { background: rgba(247, 0, 148, 0.4); box-shadow: 0 2px 12px 2px rgba(247, 0, 148, 0.2); }
}

/* Hero seasonal banner — styles in v3.css */
/* Snow canvas */
#cvety-snow-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9998;
}

@media (max-width: 768px) {
	.fl-christmas-garland:not(.fl-garland--ribbon) {
		display: none;
	}

	.fl-garland--ribbon {
		height: 28px;
	}

	.fl-garland--ribbon .fl-garland__sprite {
		height: 28px;
		background-size: auto 84px;
		animation-name: fl-garland-ribbon-blink-mobile;
	}

	@keyframes fl-garland-ribbon-blink-mobile {
		0% { background-position: 0 0; }
		33.333% { background-position: 0 -28px; }
		66.666% { background-position: 0 -56px; }
	}
}