/* =========================================================================
   VISUAL EFFECTS - BUBBLES, SHINE, SPARKLES
   ========================================================================= */

/* 
   GLOBAL BUBBLES 
   -------------------------------------------------
   Bubbles that float in the background of the entire page.
*/
.global-bubbles {
    position: fixed;
    inset: 0;
    z-index: -1; /* Behind everything */
    overflow: hidden;
    pointer-events: none;
}

.global-bubbles .bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    /* Using brand secondary (teal) with very low opacity for visibility on white */
    background: var(--brand-secondary, #14A9B8); 
    border-radius: 50%;
    opacity: 0.08; /* Very subtle */
    animation: floatUpGlobal 15s linear infinite;
}

/* Different sizes and positions for variety */
.global-bubbles .bubble:nth-child(1) { left: 5%; width: 20px; height: 20px; animation-duration: 12s; animation-delay: 0s; }
.global-bubbles .bubble:nth-child(2) { left: 15%; width: 50px; height: 50px; animation-duration: 18s; animation-delay: 2s; }
.global-bubbles .bubble:nth-child(3) { left: 25%; width: 30px; height: 30px; animation-duration: 14s; animation-delay: 4s; }
.global-bubbles .bubble:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-duration: 22s; animation-delay: 1s; }
.global-bubbles .bubble:nth-child(5) { left: 55%; width: 25px; height: 25px; animation-duration: 16s; animation-delay: 3s; }
.global-bubbles .bubble:nth-child(6) { left: 70%; width: 45px; height: 45px; animation-duration: 19s; animation-delay: 5s; }
.global-bubbles .bubble:nth-child(7) { left: 85%; width: 35px; height: 35px; animation-duration: 15s; animation-delay: 7s; }
.global-bubbles .bubble:nth-child(8) { left: 95%; width: 15px; height: 15px; animation-duration: 13s; animation-delay: 6s; }

@keyframes floatUpGlobal {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.1; }
    80% { opacity: 0.05; }
    100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* 
   SPARKLE TEXT EFFECT 
   -------------------------------------------------
   Adds glittering stars around text.
*/
.sparkle-text {
    position: relative;
    display: inline-block;
}

.sparkle-text::before,
.sparkle-text::after {
    content: "✦";
    position: absolute;
    color: var(--brand-accent, #8CCB3F);
    font-size: 1.5rem;
    opacity: 0;
    animation: sparkleAnim 3s infinite ease-in-out;
    text-shadow: 0 0 10px rgba(140, 203, 63, 0.6);
    pointer-events: none;
}

.sparkle-text::before {
    top: -0.6em;
    right: -0.4em;
    animation-delay: 0.5s;
    font-size: 1.2em;
}

.sparkle-text::after {
    bottom: -0.3em;
    left: -0.5em;
    animation-delay: 1.5s;
    font-size: 0.8em;
}

@keyframes sparkleAnim {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1) rotate(180deg); opacity: 1; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* 
   BUTTON SHINE EFFECT (HOVER) 
   -------------------------------------------------
   Adds a passing light/sheen across the button on hover.
*/
.shine-hover {
    position: relative;
    overflow: hidden; 
}

.shine-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
}

.shine-hover:hover::before {
    animation: shineSweep 0.5s linear;
}

@keyframes shineSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Ensure buttons using this have specific z-index context if needed */
.btn-quote, .call-pill, .btn-hero, .th-btn {
    position: relative;
    z-index: 1;
}

/* 
   SECTION BUBBLES (SCOPED)
   -------------------------------------------------
   Bubbles confined to a specific relative parent.
*/
.section-bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.section-bubbles .bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: var(--brand-secondary, #14A9B8);
    border-radius: 50%;
    opacity: 0.1;
    animation: floatUpSection 10s linear infinite;
}

/* White Bubbles variation for dark backgrounds */
.section-bubbles-white .bubble {
    background: #ffffff;
    opacity: 0.15;
}

.section-bubbles .bubble:nth-child(1) { left: 10%; width: 20px; height: 20px; animation-duration: 8s; animation-delay: 0s; }
.section-bubbles .bubble:nth-child(2) { left: 20%; width: 50px; height: 50px; animation-duration: 12s; animation-delay: 2s; }
.section-bubbles .bubble:nth-child(3) { left: 35%; width: 30px; height: 30px; animation-duration: 10s; animation-delay: 4s; }
.section-bubbles .bubble:nth-child(4) { left: 50%; width: 60px; height: 60px; animation-duration: 15s; animation-delay: 1s; }
.section-bubbles .bubble:nth-child(5) { left: 65%; width: 25px; height: 25px; animation-duration: 11s; animation-delay: 3s; }
.section-bubbles .bubble:nth-child(6) { left: 80%; width: 45px; height: 45px; animation-duration: 13s; animation-delay: 5s; }
.section-bubbles .bubble:nth-child(7) { left: 90%; width: 35px; height: 35px; animation-duration: 9s; animation-delay: 2s; }

@keyframes floatUpSection {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { opacity: 0.2; }
    80% { opacity: 0.1; }
    100% { transform: translateY(-100%) rotate(360deg); opacity: 0; }
}

/* 
   GLOBAL SHINE OVERLAY
   -------------------------------------------------
   Fixed overlay with twinkling particles.
   Must not interfere with clicks.
*/
.global-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.shine-particle {
    position: absolute;
    background: white;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.6);
    animation: twinkle 4s infinite ease-in-out;
}

/* Optional star shape using clip-path for larger particles */
.shine-particle.star-shape {
    width: 12px;
    height: 12px;
    background: var(--brand-secondary, #14A9B8);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    box-shadow: none;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}

/* Random positions and delays */
.shine-particle:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.shine-particle:nth-child(2) { top: 20%; left: 80%; animation-delay: 1.5s; }
.shine-particle:nth-child(3) { top: 40%; left: 30%; animation-delay: 3s; animation-duration: 5s; }
.shine-particle:nth-child(4) { top: 60%; left: 70%; animation-delay: 2s; }
.shine-particle:nth-child(5) { top: 80%; left: 15%; animation-delay: 0.5s; width: 4px; height: 4px; }
.shine-particle:nth-child(6) { top: 90%; left: 90%; animation-delay: 2.5s; }
.shine-particle:nth-child(7) { top: 15%; left: 50%; animation-delay: 1s; animation-duration: 6s; }
.shine-particle:nth-child(8) { top: 50%; left: 5%; animation-delay: 3.5s; }
.shine-particle:nth-child(9) { top: 75%; left: 60%; animation-delay: 0.2s; }
.shine-particle:nth-child(10) { top: 30%; left: 95%; animation-delay: 2.8s; }

/* Star shapes */
.shine-particle:nth-child(11) { top: 25%; left: 25%; animation-delay: 1.2s; animation-duration: 7s; }
.shine-particle:nth-child(12) { top: 55%; left: 85%; animation-delay: 0.8s; animation-duration: 5s; }

@keyframes twinkle {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* TEAL Particles per user request */
.shine-particle.teal {
    background: #14A9B8; /* Brand Secondary */
    box-shadow: 0 0 6px 2px rgba(20, 169, 184, 0.4);
    opacity: 0; 
}
.shine-particle.teal.star-shape {
     filter: drop-shadow(0 0 5px rgba(20, 169, 184, 0.6));
}

/* Expanded Random Positions handled by JS now */
/* Keeping base styles */