/* =============================================================================
   VISUAL EFFECTS — DB-driven effect inner element styles
   Provides CSS for EffectRenderer output classes used by the visual customization
   engine. The outer .visual-effect container gets inline styles (position, size,
   opacity, animation) from VisualEffectStyleBuilder. These rules style the inner
   elements to have visual appearance, fill their container, and define default
   keyframe animations.

   All keyframes prefixed with ve- to avoid collisions with existing hardcoded
   page effect animations (e.g., ve-firefly-glow vs firefly-glow).
   ============================================================================= */

/* ── Shared SVG sizing ─────────────────────────────────────────────────
   All SVG-based effects need to fill their parent container.
   The SVGs have inline viewBox attributes for correct aspect ratio.
   ───────────────────────────────────────────────────────────────────── */

.butterfly-svg,
.dandelion-seed-svg,
.leaf-svg,
.botanical-svg,
.feather-svg,
.lily-pad-svg,
.heron-svg,
.singing-bird-svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── 1. Firefly ────────────────────────────────────────────────────────
   Gold dot, radial gradient, gentle glow pulse with small drift.
   Pattern: .faq-firefly in enhanced-animations.css
   ───────────────────────────────────────────────────────────────────── */

.firefly-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.9) 0%,
        rgba(212, 175, 55, 0.4) 40%,
        transparent 70%);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
    animation: ve-firefly-glow 3s ease-in-out infinite;
}

@keyframes ve-firefly-glow {
    0%, 100% { opacity: 0.3; transform: translate(0, 0); }
    30%      { opacity: 0.8; transform: translate(2px, -3px); }
    60%      { opacity: 1;   transform: translate(-1px, -5px); }
    80%      { opacity: 0.5; transform: translate(1px, -2px); }
}


/* ── 2. DandelionSeed ──────────────────────────────────────────────────
   SVG seed with fine lines. Gentle floating drift.
   Pattern: dandelion-drift in enhanced-animations.css
   ───────────────────────────────────────────────────────────────────── */

.dandelion-seed-svg {
    animation: ve-dandelion-float 6s ease-in-out infinite;
}

@keyframes ve-dandelion-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(3px, -4px) rotate(5deg); }
    50%      { transform: translate(-2px, -7px) rotate(-3deg); }
    75%      { transform: translate(4px, -3px) rotate(4deg); }
}


/* ── 3. Petal ──────────────────────────────────────────────────────────
   Rose/blush teardrop shape, gentle rotation.
   Pattern: .contact-petal in contact.css
   ───────────────────────────────────────────────────────────────────── */

.petal-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50% 0 50% 0;
    background: radial-gradient(ellipse at 30% 30%,
        rgba(232, 196, 188, 0.8) 0%,
        rgba(232, 196, 188, 0.4) 60%,
        rgba(212, 204, 232, 0.2) 100%);
    animation: ve-petal-drift 5s ease-in-out infinite;
}

@keyframes ve-petal-drift {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25%      { transform: rotate(15deg) translateY(-3px); }
    50%      { transform: rotate(-5deg) translateY(-1px); }
    75%      { transform: rotate(10deg) translateY(-4px); }
}


/* ── 4. Sparkle ────────────────────────────────────────────────────────
   Bright center point with gold halo, twinkle animation.
   Pattern: .contact-dewdrop in contact.css
   ───────────────────────────────────────────────────────────────────── */

.sparkle-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 248, 230, 0.6) 30%,
        rgba(212, 175, 55, 0.3) 60%,
        transparent 80%);
    box-shadow: 0 0 4px rgba(255, 248, 230, 0.5);
    animation: ve-sparkle-twinkle 2s ease-in-out infinite;
}

@keyframes ve-sparkle-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.7); }
    50%      { opacity: 1;   transform: scale(1.2); }
}


/* ── 5. MistWisp ───────────────────────────────────────────────────────
   Blurred semi-transparent layer, horizontal drift.
   Pattern: .story-mist-wisp in story.css
   ───────────────────────────────────────────────────────────────────── */

.mist-wisp-layer {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 252, 248, 0.15) 30%,
        rgba(250, 245, 240, 0.12) 70%,
        transparent 100%);
    filter: blur(4px);
    animation: ve-mist-drift 12s ease-in-out infinite;
}

@keyframes ve-mist-drift {
    0%, 100% { transform: translateX(0) scaleY(1); opacity: 0.4; }
    50%      { transform: translateX(10px) scaleY(1.1); opacity: 0.7; }
}


/* ── 6. FairyLight ─────────────────────────────────────────────────────
   Warm golden dot with soft glow, twinkle animation.
   Pattern: .contact-fairy-light in contact.css
   ───────────────────────────────────────────────────────────────────── */

.fairy-light-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 240, 200, 0.9) 0%,
        rgba(212, 175, 55, 0.4) 50%,
        transparent 80%);
    box-shadow:
        0 0 4px rgba(255, 230, 180, 0.5),
        0 0 8px rgba(212, 175, 55, 0.2);
    animation: ve-fairy-twinkle 2.5s ease-in-out infinite;
}

@keyframes ve-fairy-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1; transform: scale(1.15); }
}


/* ── 7. Leaf ───────────────────────────────────────────────────────────
   SVG leaf shape. Gentle swaying animation.
   ───────────────────────────────────────────────────────────────────── */

.leaf-svg {
    animation: ve-leaf-sway 4s ease-in-out infinite;
}

@keyframes ve-leaf-sway {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(8deg); }
    75%      { transform: rotate(-6deg); }
}


/* ── 8. Botanical ──────────────────────────────────────────────────────
   SVG botanical sprig. Gentle breathing/sway motion.
   ───────────────────────────────────────────────────────────────────── */

.botanical-svg {
    animation: ve-botanical-breathe 6s ease-in-out infinite;
}

@keyframes ve-botanical-breathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.05) rotate(2deg); }
}


/* ── 9. InkBleed ───────────────────────────────────────────────────────
   Organic blob shape, dark gradient, pulsing spread.
   Pattern: .story-ink-bleed in story.css
   ───────────────────────────────────────────────────────────────────── */

.ink-bleed-spot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 45% 55% 50% 50% / 55% 45% 50% 50%;
    background: radial-gradient(circle,
        rgba(61, 53, 48, 0.15) 0%,
        rgba(232, 196, 188, 0.1) 50%,
        transparent 75%);
    animation: ve-ink-pulse 7s ease-in-out infinite;
}

@keyframes ve-ink-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.4; }
    50%      { transform: scale(1.15); opacity: 0.7; }
}


/* ── 10. Feather ───────────────────────────────────────────────────────
   SVG feather shape. Gentle rocking/drifting motion.
   ───────────────────────────────────────────────────────────────────── */

.feather-svg {
    animation: ve-feather-rock 5s ease-in-out infinite;
}

@keyframes ve-feather-rock {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25%      { transform: rotate(8deg) translateX(3px); }
    50%      { transform: rotate(-4deg) translateX(-2px); }
    75%      { transform: rotate(6deg) translateX(2px); }
}


/* ── 11. DustMote ──────────────────────────────────────────────────────
   Tiny warm particle, cream color, gentle floating.
   ───────────────────────────────────────────────────────────────────── */

.dust-mote-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(250, 245, 240, 0.8) 0%,
        rgba(212, 184, 150, 0.3) 50%,
        transparent 80%);
    animation: ve-dust-float 8s ease-in-out infinite;
}

@keyframes ve-dust-float {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    25%      { transform: translate(3px, -5px); opacity: 0.6; }
    50%      { transform: translate(-2px, -8px); opacity: 0.5; }
    75%      { transform: translate(4px, -3px); opacity: 0.4; }
}


/* ── 12. Star ──────────────────────────────────────────────────────────
   Bright white/gold point, simple opacity twinkle.
   Pattern: .star in clouds.css
   ───────────────────────────────────────────────────────────────────── */

.star-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 248, 230, 0.95) 0%,
        rgba(255, 240, 200, 0.5) 40%,
        transparent 70%);
    animation: ve-star-twinkle 3s ease-in-out infinite;
}

@keyframes ve-star-twinkle {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.9; }
}


/* ── 13. BokehOrb ──────────────────────────────────────────────────────
   Soft circle, gold-tinted gradient, subtle blur, gentle float.
   Pattern: .countdown-bokeh-orb in countdown.css
   ───────────────────────────────────────────────────────────────────── */

.bokeh-orb-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.12) 0%,
        rgba(212, 184, 150, 0.08) 40%,
        transparent 70%);
    box-shadow: inset 0 0 8px rgba(212, 175, 55, 0.06);
    filter: blur(1px);
    animation: ve-bokeh-float 6s ease-in-out infinite;
}

@keyframes ve-bokeh-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
    50%      { transform: translateY(-6px) scale(1.05); opacity: 0.8; }
}


/* ── 14. LilyPad ──────────────────────────────────────────────────────
   SVG elliptical lily pad. Subtle bobbing on water.
   ───────────────────────────────────────────────────────────────────── */

.lily-pad-svg {
    animation: ve-lilypad-bob 4s ease-in-out infinite;
}

@keyframes ve-lilypad-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-2px) rotate(1deg); }
    75%      { transform: translateY(1px) rotate(-1deg); }
}


/* ── 15. Heron ─────────────────────────────────────────────────────────
   SVG heron silhouette. Subtle idle sway.
   ───────────────────────────────────────────────────────────────────── */

.heron-svg {
    animation: ve-heron-idle 5s ease-in-out infinite;
}

@keyframes ve-heron-idle {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-2px); }
    60%      { transform: translateY(1px); }
}


/* ── 16. HeartRipple ───────────────────────────────────────────────────
   Ring shape with rose/blush color, expanding pulse.
   ───────────────────────────────────────────────────────────────────── */

.heart-ripple-ring {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(232, 196, 188, 0.5);
    box-sizing: border-box;
    animation: ve-heart-ripple 3s ease-out infinite;
}

@keyframes ve-heart-ripple {
    0%   { transform: scale(0.3); opacity: 0.6; border-color: rgba(232, 196, 188, 0.6); }
    70%  { opacity: 0.2; }
    100% { transform: scale(2); opacity: 0; border-color: rgba(232, 196, 188, 0.1); }
}


/* ── 17. WaterRipple ───────────────────────────────────────────────────
   Expanding ring (border only), sage tint.
   Pattern: .water-ripple in enhanced-animations.css
   ───────────────────────────────────────────────────────────────────── */

.water-ripple-ring {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(181, 196, 177, 0.4);
    box-sizing: border-box;
    animation: ve-water-ripple 4s ease-out infinite;
}

@keyframes ve-water-ripple {
    0%   { transform: scale(0.2); opacity: 0.5; }
    60%  { opacity: 0.15; }
    100% { transform: scale(2.5); opacity: 0; }
}


/* ── 18. ShootingStar ──────────────────────────────────────────────────
   Bright dot with trailing tail, fast diagonal streak.
   Pattern: .cloud-shooting-star in clouds.css
   ───────────────────────────────────────────────────────────────────── */

.shooting-star-streak {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 248, 230, 0.95) 0%,
        rgba(255, 240, 200, 0.5) 40%,
        transparent 70%);
    animation: ve-shooting-star 8s linear infinite;
}

@keyframes ve-shooting-star {
    0%, 90%  { opacity: 0; transform: translate(0, 0); box-shadow: none; }
    92%      { opacity: 0; }
    93%      { opacity: 1; box-shadow: -4px 0 6px rgba(255, 240, 200, 0.6), -10px 0 12px rgba(255, 240, 200, 0.3); }
    98%      { opacity: 0.7; transform: translate(40px, 16px); box-shadow: -6px 0 8px rgba(255, 240, 200, 0.5), -15px 0 15px rgba(255, 240, 200, 0.2); }
    100%     { opacity: 0; transform: translate(50px, 20px); box-shadow: none; }
}


/* ── 19. MusicNote ─────────────────────────────────────────────────────
   Musical character, gold color, gentle float-up.
   Pattern: .contact-music-note in enhanced-animations.css
   ───────────────────────────────────────────────────────────────────── */

.music-note-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.2em;
    color: var(--color-gold, #d4b896);
    font-family: serif;
    line-height: 1;
    animation: ve-music-float 5s ease-in-out infinite;
}

@keyframes ve-music-float {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    25%      { transform: translateY(-4px) rotate(5deg); opacity: 0.8; }
    50%      { transform: translateY(-8px) rotate(-3deg); opacity: 0.6; }
    75%      { transform: translateY(-4px) rotate(2deg); opacity: 0.7; }
}


/* ── 20. SingingBird ───────────────────────────────────────────────────
   SVG bird silhouette. Subtle perched bob animation.
   ───────────────────────────────────────────────────────────────────── */

.singing-bird-svg {
    animation: ve-bird-perch 3s ease-in-out infinite;
}

@keyframes ve-bird-perch {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-2px) rotate(-2deg); }
    60%      { transform: translateY(0) rotate(1deg); }
}