/**
 * TinyTaleWorld FX Layer
 * Layer 5: FX Effects
 * CSS-only particle effects using box-shadow
 */

/* FX layer container */
.ttw-fx-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: var(--ttw-z-fx);
	overflow: hidden;
}

/* ============================
   Sparkles
   Scattered white dots via box-shadow, twinkle animation
   ============================ */
@keyframes ttw-sparkle-twinkle {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

body.fx-sparkles .ttw-fx-layer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 4px;
	background: var(--ttw-particle-color);
	box-shadow: 
		20px 30px 0 var(--ttw-particle-color),
		50px 80px 0 var(--ttw-particle-color),
		80px 20px 0 var(--ttw-particle-color),
		110px 90px 0 var(--ttw-particle-color),
		140px 50px 0 var(--ttw-particle-color),
		170px 120px 0 var(--ttw-particle-color),
		200px 40px 0 var(--ttw-particle-color),
		230px 100px 0 var(--ttw-particle-color),
		260px 60px 0 var(--ttw-particle-color),
		290px 130px 0 var(--ttw-particle-color),
		320px 20px 0 var(--ttw-particle-color),
		350px 90px 0 var(--ttw-particle-color),
		380px 150px 0 var(--ttw-particle-color),
		410px 70px 0 var(--ttw-particle-color),
		440px 110px 0 var(--ttw-particle-color),
		470px 30px 0 var(--ttw-particle-color),
		500px 80px 0 var(--ttw-particle-color),
		530px 140px 0 var(--ttw-particle-color),
		560px 50px 0 var(--ttw-particle-color),
		590px 100px 0 var(--ttw-particle-color);
	animation: ttw-sparkle-twinkle var(--ttw-anim-fx) ease-in-out infinite;
	border-radius: 50%;
}

/* ============================
   Dust
   Small grey dots, slow drift downward
   ============================ */
@keyframes ttw-dust-drift {
	0% { transform: translateY(0) translateX(0); opacity: 0.5; }
	100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
}

body.fx-dust .ttw-fx-layer::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	width: 3px;
	height: 3px;
	background: rgba(150, 150, 150, 0.6);
	box-shadow: 
		30px 50px 0 rgba(150, 150, 150, 0.5),
		60px 100px 0 rgba(150, 150, 150, 0.6),
		90px 40px 0 rgba(150, 150, 150, 0.5),
		120px 80px 0 rgba(150, 150, 150, 0.6),
		150px 120px 0 rgba(150, 150, 150, 0.5),
		180px 60px 0 rgba(150, 150, 150, 0.6),
		210px 90px 0 rgba(150, 150, 150, 0.5),
		240px 130px 0 rgba(150, 150, 150, 0.6),
		270px 70px 0 rgba(150, 150, 150, 0.5),
		300px 110px 0 rgba(150, 150, 150, 0.6),
		330px 50px 0 rgba(150, 150, 150, 0.5),
		360px 100px 0 rgba(150, 150, 150, 0.6),
		390px 140px 0 rgba(150, 150, 150, 0.5),
		420px 80px 0 rgba(150, 150, 150, 0.6),
		450px 120px 0 rgba(150, 150, 150, 0.5);
	animation: ttw-dust-drift var(--ttw-anim-slow) linear infinite;
	border-radius: 50%;
}

/* ============================
   Petals
   Pink/red dots, slow fall + sway
   ============================ */
@keyframes ttw-petal-fall {
	0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.7; }
	25% { transform: translateY(25vh) translateX(15px) rotate(90deg); }
	50% { transform: translateY(50vh) translateX(-10px) rotate(180deg); }
	75% { transform: translateY(75vh) translateX(20px) rotate(270deg); }
	100% { transform: translateY(100vh) translateX(5px) rotate(360deg); opacity: 0; }
}

body.fx-petals .ttw-fx-layer::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	width: 5px;
	height: 5px;
	background: rgba(255, 150, 180, 0.7);
	box-shadow: 
		40px 60px 0 rgba(255, 130, 160, 0.6),
		80px 100px 0 rgba(255, 170, 190, 0.7),
		120px 50px 0 rgba(255, 140, 175, 0.6),
		160px 90px 0 rgba(255, 160, 185, 0.7),
		200px 130px 0 rgba(255, 145, 178, 0.6),
		240px 70px 0 rgba(255, 155, 182, 0.7),
		280px 110px 0 rgba(255, 135, 172, 0.6),
		320px 150px 0 rgba(255, 165, 188, 0.7),
		360px 80px 0 rgba(255, 148, 180, 0.6),
		400px 120px 0 rgba(255, 158, 183, 0.7),
		440px 160px 0 rgba(255, 142, 176, 0.6),
		480px 100px 0 rgba(255, 162, 186, 0.7);
	animation: ttw-petal-fall var(--ttw-anim-slow) ease-in-out infinite;
	border-radius: 50%;
}

/* ============================
   Snowdust
   White micro-dots, gentle fall
   ============================ */
@keyframes ttw-snowdust-fall {
	0% { transform: translateY(0); opacity: 0.6; }
	100% { transform: translateY(100vh); opacity: 0; }
}

body.fx-snowdust .ttw-fx-layer::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 0;
	width: 2px;
	height: 2px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 
		25px 40px 0 rgba(255, 255, 255, 0.7),
		50px 80px 0 rgba(255, 255, 255, 0.8),
		75px 30px 0 rgba(255, 255, 255, 0.7),
		100px 70px 0 rgba(255, 255, 255, 0.8),
		125px 110px 0 rgba(255, 255, 255, 0.7),
		150px 50px 0 rgba(255, 255, 255, 0.8),
		175px 90px 0 rgba(255, 255, 255, 0.7),
		200px 130px 0 rgba(255, 255, 255, 0.8),
		225px 60px 0 rgba(255, 255, 255, 0.7),
		250px 100px 0 rgba(255, 255, 255, 0.8),
		275px 140px 0 rgba(255, 255, 255, 0.7),
		300px 80px 0 rgba(255, 255, 255, 0.8),
		325px 120px 0 rgba(255, 255, 255, 0.7),
		350px 160px 0 rgba(255, 255, 255, 0.8),
		375px 100px 0 rgba(255, 255, 255, 0.7),
		400px 140px 0 rgba(255, 255, 255, 0.8),
		425px 180px 0 rgba(255, 255, 255, 0.7),
		450px 120px 0 rgba(255, 255, 255, 0.8);
	animation: ttw-snowdust-fall var(--ttw-anim-slow) linear infinite;
	border-radius: 50%;
}

/* ============================
   Glitter
   Multicolor tiny dots, random twinkle
   ============================ */
@keyframes ttw-glitter-twinkle {
	0%, 100% { opacity: 0.3; }
	25% { opacity: 0.8; }
	50% { opacity: 0.4; }
	75% { opacity: 0.9; }
}

body.fx-glitter .ttw-fx-layer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 3px;
	background: rgba(255, 215, 0, 0.8);
	box-shadow: 
		30px 50px 0 rgba(255, 105, 180, 0.7),
		60px 90px 0 rgba(0, 191, 255, 0.8),
		90px 40px 0 rgba(255, 140, 0, 0.7),
		120px 80px 0 rgba(138, 43, 226, 0.8),
		150px 120px 0 rgba(255, 20, 147, 0.7),
		180px 60px 0 rgba(0, 255, 127, 0.8),
		210px 100px 0 rgba(255, 215, 0, 0.7),
		240px 140px 0 rgba(255, 105, 180, 0.8),
		270px 70px 0 rgba(0, 191, 255, 0.7),
		300px 110px 0 rgba(255, 140, 0, 0.8),
		330px 150px 0 rgba(138, 43, 226, 0.7),
		360px 90px 0 rgba(255, 20, 147, 0.8),
		390px 130px 0 rgba(0, 255, 127, 0.7),
		420px 170px 0 rgba(255, 215, 0, 0.8),
		450px 110px 0 rgba(255, 105, 180, 0.7),
		480px 150px 0 rgba(0, 191, 255, 0.8);
	animation: ttw-glitter-twinkle var(--ttw-anim-fast) ease-in-out infinite;
	border-radius: 50%;
}

/* ============================
   Rain Drops
   Thin vertical lines (use scaleY), fast fall
   ============================ */
@keyframes ttw-rain-fall {
	0% { transform: translateY(-100vh); opacity: 0.6; }
	100% { transform: translateY(100vh); opacity: 0; }
}

body.fx-rain-drops .ttw-fx-layer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 15px;
	background: rgba(100, 150, 200, 0.6);
	box-shadow: 
		30px 40px 0 rgba(100, 150, 200, 0.5),
		60px 80px 0 rgba(100, 150, 200, 0.6),
		90px 30px 0 rgba(100, 150, 200, 0.5),
		120px 70px 0 rgba(100, 150, 200, 0.6),
		150px 110px 0 rgba(100, 150, 200, 0.5),
		180px 50px 0 rgba(100, 150, 200, 0.6),
		210px 90px 0 rgba(100, 150, 200, 0.5),
		240px 130px 0 rgba(100, 150, 200, 0.6),
		270px 60px 0 rgba(100, 150, 200, 0.5),
		300px 100px 0 rgba(100, 150, 200, 0.6),
		330px 140px 0 rgba(100, 150, 200, 0.5),
		360px 80px 0 rgba(100, 150, 200, 0.6),
		390px 120px 0 rgba(100, 150, 200, 0.5),
		420px 160px 0 rgba(100, 150, 200, 0.6),
		450px 100px 0 rgba(100, 150, 200, 0.5),
		480px 140px 0 rgba(100, 150, 200, 0.6);
	animation: ttw-rain-fall var(--ttw-anim-fast) linear infinite;
}

/* ============================
   Bubbles
   Circles with border only (no fill), float upward
   ============================ */
@keyframes ttw-bubble-float {
	0% { transform: translateY(100vh) translateX(0); opacity: 0.6; }
	25% { transform: translateY(75vh) translateX(10px); }
	50% { transform: translateY(50vh) translateX(-10px); }
	75% { transform: translateY(25vh) translateX(15px); }
	100% { transform: translateY(-20vh) translateX(5px); opacity: 0; }
}

body.fx-bubbles .ttw-fx-layer::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 8px;
	height: 8px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	box-shadow: 
		40px 50px 0 1px rgba(255, 255, 255, 0.5),
		80px 90px 0 1px rgba(255, 255, 255, 0.6),
		120px 40px 0 1px rgba(255, 255, 255, 0.5),
		160px 80px 0 1px rgba(255, 255, 255, 0.6),
		200px 120px 0 1px rgba(255, 255, 255, 0.5),
		240px 60px 0 1px rgba(255, 255, 255, 0.6),
		280px 100px 0 1px rgba(255, 255, 255, 0.5),
		320px 140px 0 1px rgba(255, 255, 255, 0.6),
		360px 70px 0 1px rgba(255, 255, 255, 0.5),
		400px 110px 0 1px rgba(255, 255, 255, 0.6),
		440px 150px 0 1px rgba(255, 255, 255, 0.5),
		480px 90px 0 1px rgba(255, 255, 255, 0.6);
	animation: ttw-bubble-float var(--ttw-anim-slow) ease-in-out infinite;
	border-radius: 50%;
}

/* ============================
   Falling Leaves
   Green/amber dots, slow tumble fall
   ============================ */
@keyframes ttw-leaves-fall {
	0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.7; }
	25% { transform: translateY(25vh) translateX(20px) rotate(90deg); }
	50% { transform: translateY(50vh) translateX(-15px) rotate(180deg); }
	75% { transform: translateY(75vh) translateX(25px) rotate(270deg); }
	100% { transform: translateY(100vh) translateX(10px) rotate(360deg); opacity: 0; }
}

body.fx-falling-leaves .ttw-fx-layer::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	width: 6px;
	height: 6px;
	background: rgba(180, 140, 50, 0.7);
	box-shadow: 
		45px 65px 0 rgba(120, 180, 80, 0.6),
		90px 105px 0 rgba(200, 150, 60, 0.7),
		135px 55px 0 rgba(140, 190, 90, 0.6),
		180px 95px 0 rgba(190, 145, 55, 0.7),
		225px 135px 0 rgba(130, 185, 85, 0.6),
		270px 75px 0 rgba(195, 148, 58, 0.7),
		315px 115px 0 rgba(125, 188, 88, 0.6),
		360px 155px 0 rgba(185, 143, 57, 0.7),
		405px 85px 0 rgba(135, 187, 87, 0.6),
		450px 125px 0 rgba(192, 147, 59, 0.7),
		495px 165px 0 rgba(128, 186, 86, 0.6),
		540px 105px 0 rgba(188, 144, 56, 0.7);
	animation: ttw-leaves-fall var(--ttw-anim-slow) ease-in-out infinite;
	border-radius: 50%;
}

/* ============================
   JS Canvas Required Effects
   These require JavaScript canvas rendering - see single-story.php
   ============================ */
/* fx-fireflies - JS canvas required - see single-story.php */
/* fx-embers - JS canvas required - see single-story.php */
/* fx-shooting-stars - JS canvas required - see single-story.php */
/* fx-floating-orbs - JS canvas required - see single-story.php */