/* Floating Circles */
.wa-circles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    max-width: 100vw;
}

.wa-circle {
    position: absolute;
    border: 1px solid var(--circle-color);
    border-radius: 50%;
    opacity: 0;
    animation: circleFloat 20s ease-in-out infinite;
}

.wa-circle:nth-child(1) { width: 300px; height: 300px; top: 10%; left: 5%; animation-delay: 0s; }
.wa-circle:nth-child(2) { width: 200px; height: 200px; top: 60%; right: 10%; animation-delay: -5s; }
.wa-circle:nth-child(3) { width: 150px; height: 150px; top: 30%; right: 20%; animation-delay: -10s; }
.wa-circle:nth-child(4) { width: 400px; height: 400px; bottom: 10%; left: 15%; animation-delay: -15s; }
.wa-circle:nth-child(5) { width: 100px; height: 100px; top: 50%; left: 40%; animation-delay: -7s; }
.wa-circle:nth-child(6) { width: 250px; height: 250px; top: 80%; right: 30%; animation-delay: -3s; }
.wa-circle:nth-child(7) { width: 180px; height: 180px; top: 40%; left: 60%; animation-delay: -12s; }

@keyframes circleFloat {
    0%, 100% { opacity: 0; transform: scale(0.8) translateY(20px); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    50% { transform: scale(1) translateY(-20px); }
}

/* Interactive Wa Ring */
.wa-ring {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vmin;
    height: 60vmin;
    pointer-events: none;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.wa-ring.visible { opacity: 1; }
.wa-ring svg { width: 100%; height: 100%; }
.wa-ring circle {
    fill: none;
    stroke: var(--circle-color);
    stroke-width: 1.5;
    transform-origin: center;
}

.wa-ring .ring-1 { animation: ringPulse 8s ease-in-out infinite; }
.wa-ring .ring-2 { animation: ringPulse 8s ease-in-out infinite; animation-delay: -2s; }
.wa-ring .ring-3 { animation: ringPulse 8s ease-in-out infinite; animation-delay: -4s; }

@keyframes ringPulse {
    0%, 100% { transform: scale(0.95); opacity: 0.3; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* Sticky Title */
.sticky-title {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.sticky-title.visible { opacity: 1; transform: translateY(0); }

.sticky-title-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--accent);
}

.sticky-title-sub {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--text-secondary);
    margin-top: 2px;
}

@media (max-width: 768px) {
    .sticky-title { top: 10px; left: 10px; }
    .sticky-title-text { font-size: 1rem; }
    .wa-ring { width: 80vmin; height: 80vmin; }
}