/* Festivello frontend */

/* banner above the header */
.festivello-banner {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 10px 16px;
	font: 600 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	position: relative;
	z-index: 99999;
}

/* ------------------------------------------------------------------ */
/* Background pattern animation layer                                   */
/* ------------------------------------------------------------------ */

.festivello-bg {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 99997;
	background-repeat: repeat;
}

/* intensity = pattern visibility */
.festivello-bg-low    { opacity: .14; }
.festivello-bg-medium { opacity: .26; }
.festivello-bg-high   { opacity: .42; }

/* Falling snow — layered white dots drifting down at different speeds */
.festivello-bg-snow {
	background-image:
		radial-gradient(3px 3px at 30px 40px, #ffffff 50%, transparent 52%),
		radial-gradient(2px 2px at 90px 110px, #ffffff 50%, transparent 52%),
		radial-gradient(2.5px 2.5px at 130px 60px, #ffffff 50%, transparent 52%);
	background-size: 180px 180px, 140px 140px, 220px 220px;
	animation: festivello-bg-snow 16s linear infinite;
	filter: drop-shadow(0 0 2px rgba(140, 170, 220, .5));
}
@keyframes festivello-bg-snow {
	from { background-position: 0 0, 0 0, 0 0; }
	to   { background-position: 180px 360px, -140px 280px, 0 440px; }
}

/* Floating hearts — heart pattern drifting upward */
.festivello-bg-hearts {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 22s-7.4-5.2-10-9.5C1.1 9.4 2.5 5.5 6 5.5c2.3 0 3.7 1.5 7 4.2 3.3-2.7 4.7-4.2 7-4.2 3.5 0 4.9 3.9 3 7C20.4 16.8 13 22 13 22z' fill='%23e05a7a'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 13.5S3.4 10.3 1.9 7.7C.7 5.8 1.5 3.4 3.7 3.4c1.4 0 2.3.9 4.3 2.6 2-1.7 2.9-2.6 4.3-2.6 2.2 0 3 2.4 1.8 4.3C12.6 10.3 8 13.5 8 13.5z' fill='%23f38fa9'/%3E%3C/svg%3E");
	background-size: 150px 150px, 110px 110px;
	animation: festivello-bg-hearts 18s linear infinite;
}
@keyframes festivello-bg-hearts {
	from { background-position: 0 0, 55px 40px; }
	to   { background-position: 150px -300px, -55px -260px; }
}

/* Falling leaves — leaf pattern drifting down and sideways */
.festivello-bg-leaves {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M23 5C14 5 7 10 5 19c-.3 1.4-.4 2.9-.3 4.3 1.4.1 2.9 0 4.3-.3C18 21 23 14 23 5z' fill='%23c96a2b'/%3E%3Cpath d='M5.5 22.5 20 8' stroke='%23a04f16' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M15 3C9 3 4.5 6.5 3.2 12.5c-.2 1-.3 1.9-.2 2.8.9.1 1.8 0 2.8-.2C11.5 13.5 15 9 15 3z' fill='%23d98e3d'/%3E%3C/svg%3E");
	background-size: 170px 170px, 130px 130px;
	animation: festivello-bg-leaves 15s linear infinite;
}
@keyframes festivello-bg-leaves {
	from { background-position: 0 0, 65px 30px; }
	to   { background-position: 170px 340px, -65px 290px; }
}

/* Confetti — multicolour flecks raining down */
.festivello-bg-confetti {
	background-image:
		radial-gradient(4px 7px at 24px 30px, #e74c3c 50%, transparent 54%),
		radial-gradient(4px 7px at 80px 90px, #f1c40f 50%, transparent 54%),
		radial-gradient(4px 7px at 130px 50px, #2ecc71 50%, transparent 54%),
		radial-gradient(4px 7px at 60px 140px, #3498db 50%, transparent 54%),
		radial-gradient(4px 7px at 110px 120px, #9b59b6 50%, transparent 54%);
	background-size: 160px 160px, 160px 160px, 160px 160px, 160px 160px, 160px 160px;
	animation: festivello-bg-confetti 10s linear infinite;
}
@keyframes festivello-bg-confetti {
	from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
	to   { background-position: 160px 320px, -160px 320px, 0 320px, 160px 320px, -160px 320px; }
}

/* Fireworks glow — soft colour bursts pulsing across the page */
.festivello-bg-fireworks {
	background-image:
		radial-gradient(circle at 18% 28%, rgba(255, 213, 77, .9) 0, transparent 14%),
		radial-gradient(circle at 72% 22%, rgba(79, 195, 247, .9) 0, transparent 12%),
		radial-gradient(circle at 45% 70%, rgba(186, 104, 200, .9) 0, transparent 13%),
		radial-gradient(circle at 88% 62%, rgba(255, 138, 101, .9) 0, transparent 11%);
	background-size: 100% 100%;
	animation: festivello-bg-fireworks 5s ease-in-out infinite;
}
@keyframes festivello-bg-fireworks {
	0%, 100% { opacity: 0; }
	18%      { opacity: 1; }
	40%      { opacity: .25; }
	58%      { opacity: .9; }
	80%      { opacity: .2; }
}
.festivello-bg-fireworks.festivello-bg-low    { opacity: 1; filter: opacity(.35); }
.festivello-bg-fireworks.festivello-bg-medium { opacity: 1; filter: opacity(.6); }
.festivello-bg-fireworks.festivello-bg-high   { opacity: 1; filter: opacity(.9); }

/* ------------------------------------------------------------------ */
/* Floating icons layer                                                  */
/* ------------------------------------------------------------------ */

.festivello-icon-layer {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 99998;
}

.festivello-icon-particle {
	position: absolute;
	top: -8vh;
	line-height: 1;
	will-change: transform;
	user-select: none;
	animation-name: festivello-fall-anim, festivello-sway-anim;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-direction: normal, alternate;
	animation-fill-mode: forwards, none;
}
.festivello-icon-particle img { display: block; height: auto; }

@keyframes festivello-fall-anim {
	to { transform: translateY(120vh); }
}
@keyframes festivello-sway-anim {
	from { margin-left: -18px; }
	to   { margin-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.festivello-bg, .festivello-icon-layer { display: none; }
}