/* --- CCG Inspector: Text Animation Styles --- */

/*
 * 1. Base style for the animated text element.
 * - Uses the 'Great Vibes' font for a luxurious, cursive look.
 * - A subtle drop-shadow adds depth and ensures readability against various backgrounds.
 * - 'text-anchor: middle' ensures the text is perfectly centered above the hotspot endpoint.
 */
.labyrinth-text {
    font-family: 'Great Vibes', cursive;
    font-size: 24px;
    fill: #EAE0C5; /* A soft, elegant golden color */
    text-anchor: middle;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.4));
    pointer-events: none; /* Prevents text from interfering with mouse events */
    opacity: 1; /* Set opacity to 1 so the container is visible */
}

/*
 * NEW: Style for the text backdrop.
 * - A dark, semi-transparent fill to create contrast.
 * - A slight border-radius for a softer look.
 */
.labyrinth-text-backdrop {
    fill: rgba(10, 5, 0, 0.4);
    rx: 4px; /* Rounded corners */
    ry: 4px;
    pointer-events: none;
}

/*
 * 2. Keyframe animation for the "writing" effect.
 * - Animates from a slightly lowered position with zero opacity.
 * - Transforms to its final position with full opacity.
 * - This creates a smooth, elegant fade-in and slide-up motion for each letter.
 */
@keyframes writeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * 3. Applying the animation to the individual letters (tspan elements).
 * - 'animation-fill-mode: forwards' ensures the letter stays visible after the animation completes.
 * - The actual animation properties (name, duration, delay) will be set dynamically via JavaScript
 *   to create the staggered, letter-by-letter writing effect.
 */
.labyrinth-text tspan {
    opacity: 0; /* Start fully transparent */
    animation-name: writeIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); /* A smooth ease-out curve */
}