/* Zenachu mood effects - pure CSS keyframes + per-particle inline styles */

.zen-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zen-fx > * { position: absolute; will-change: transform, opacity; }

/* ------- RAIN ------- */
@keyframes zen-rain-fall { from { top: -8%; } to { top: 108%; } }
.zen-rain-drop { width: 1.5px; background: #A0C4E8; border-radius: 1px; transform: rotate(8deg); animation: zen-rain-fall linear infinite; }

/* ------- LIGHTNING (companion to rain on energetic) ------- */
@keyframes zen-lightning-flash { 0%, 92%, 100% { opacity: 0; } 93%, 95% { opacity: 0.6; } 94% { opacity: 0; } }
.zen-lightning { inset: 0; background: radial-gradient(ellipse at top, rgba(255,255,255,0.5), transparent 60%); animation: zen-lightning-flash 7s ease-out infinite; }
.zen-lightning.b { animation-duration: 11s; animation-delay: 4s; background: radial-gradient(ellipse at top right, rgba(184,169,255,0.4), transparent 70%); }
.zen-bolt { stroke-width: 1.6; stroke-linecap: round; fill: none; opacity: 0; animation: zen-bolt-flash 7s ease-out infinite; }
@keyframes zen-bolt-flash { 0%, 91%, 100% { opacity: 0; } 92%, 94% { opacity: 0.85; } 93% { opacity: 0.3; } }

/* ------- COZY (embers) ------- */
@keyframes zen-ember-rise { 0% { top: 100%; opacity: 0; } 15% { opacity: 1; } 100% { top: -10%; opacity: 0; } }
.zen-ember { border-radius: 50%; filter: blur(0.5px); animation: zen-ember-rise linear infinite; }

/* ------- CALM (bokeh) ------- */
@keyframes zen-bokeh-pulse { 0%, 100% { transform: scale(1) translate(0, 0); opacity: var(--op-min, 0.15); } 50% { transform: scale(1.25) translate(var(--dx, 8px), var(--dy, -6px)); opacity: var(--op-max, 0.45); } }
.zen-bokeh { border-radius: 50%; filter: blur(8px); animation: zen-bokeh-pulse ease-in-out infinite; }

/* ------- FOCUS (rings) ------- */
@keyframes zen-ring-expand { 0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; } 15% { opacity: 0.55; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.zen-ring { border-radius: 50%; border: 2px solid; left: 50%; top: 50%; width: min(120vmin, 1200px); height: min(120vmin, 1200px); animation: zen-ring-expand ease-out infinite; }

/* ------- NATURE (fireflies) ------- */
@keyframes zen-fly-drift { 0%, 100% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } }
.zen-fly { border-radius: 50%; background: #FBBF24; box-shadow: 0 0 8px 2px rgba(251,191,36,0.7); animation: zen-fly-drift ease-in-out infinite; }

/* ------- COFFEE (steam) ------- */
@keyframes zen-steam-rise { 0% { top: 90%; opacity: 0; transform: scaleX(1); } 25% { opacity: 0.4; } 100% { top: -5%; opacity: 0; transform: scaleX(2.5); } }
.zen-wisp { background: rgba(255,255,255,0.5); border-radius: 50%; filter: blur(8px); animation: zen-steam-rise ease-out infinite; }

/* ------- DREAMY (strands) ------- */
@keyframes zen-strand-pulse { 0%, 100% { opacity: var(--op-min, 0.05); } 50% { opacity: var(--op-max, 0.18); transform: translateX(var(--drift, 6px)) rotate(var(--rot, 0deg)); } }
.zen-strand { border-radius: 4px; transform-origin: center; animation: zen-strand-pulse ease-in-out infinite; }

/* ------- ENERGETIC (sparks) - bolts handled separately ------- */
@keyframes zen-spark { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.9; transform: scale(1.2); } }
.zen-spark { width: 3px; height: 3px; border-radius: 50%; background: #FACC15; box-shadow: 0 0 6px 1px rgba(250,204,21,0.7); animation: zen-spark ease-in-out infinite; }

/* ------- STARS (ambient, dark mode) ------- */
@keyframes zen-star-twinkle { 0%, 100% { opacity: var(--op-min, 0.2); transform: scale(0.8); } 50% { opacity: var(--op-max, 1); transform: scale(1.2); } }
.zen-star { width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: zen-star-twinkle ease-in-out infinite; }
.zen-star.big { width: 3px; height: 3px; box-shadow: 0 0 4px 1px rgba(255,255,255,0.6); }

@keyframes zen-shoot { 0% { transform: translate(0, 0) rotate(-25deg); opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30%, 100% { transform: translate(420px, 200px) rotate(-25deg); opacity: 0; } }
.zen-shoot { width: 90px; height: 1.5px; background: linear-gradient(90deg, transparent, #fff); border-radius: 2px; animation: zen-shoot 8s ease-out infinite; }

/* ------- CLOUDS (ambient, light mode) ------- */
@keyframes zen-cloud-drift { from { transform: translateX(-30%); } to { transform: translateX(130%); } }
.zen-cloud {
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  filter: blur(14px);
  animation: zen-cloud-drift linear infinite;
}

/* ------- ROMANTIC (floating hearts) ------- */
@keyframes zen-heart-float { 0% { top: 100%; opacity: 0; transform: translateX(0) scale(0.7) rotate(-8deg); } 15% { opacity: 1; } 100% { top: -10%; opacity: 0; transform: translateX(var(--drift, 20px)) scale(1.1) rotate(8deg); } }
.zen-heart { font-size: 14px; line-height: 1; color: #F472B6; text-shadow: 0 0 10px rgba(244,114,182,0.7); animation: zen-heart-float ease-in-out infinite; }

/* ------- EMOTIONAL (slow drifting orbs) ------- */
@keyframes zen-orb-drift { 0%, 100% { transform: translate(0, 0) scale(1); opacity: var(--op-min, 0.2); } 50% { transform: translate(var(--dx, 20px), var(--dy, -15px)) scale(1.15); opacity: var(--op-max, 0.55); } }
.zen-orb { border-radius: 50%; filter: blur(12px); animation: zen-orb-drift ease-in-out infinite; }

/* ------- MELANCHOLY (slow raindrops on glass) ------- */
@keyframes zen-melan-drop { 0% { top: -5%; opacity: 0; } 10% { opacity: 0.45; } 100% { top: 105%; opacity: 0; } }
.zen-melan-drop { width: 1px; background: rgba(180,200,220,0.5); border-radius: 1px; animation: zen-melan-drop linear infinite; }