/**
 * Box Animations - LSC
 * Sophisticated animations for input elements.
 */

@keyframes rotate-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.2); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.6); }
    100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.2); }
}

.animated-box-wrapper {
    position: relative;
    padding: 3px; /* This creates the "border" thickness */
    border-radius: 20px;
    background: linear-gradient(270deg, #6366f1, #a855f7, #ec4899, #6366f1);
    background-size: 400% 400%;
    animation: rotate-gradient 8s ease infinite, pulse-glow 4s ease-in-out infinite;
    transition: all 0.3s ease;
    display: block;
}

.animated-box-wrapper:focus-within {
    animation: rotate-gradient 3s ease infinite, pulse-glow 2s ease-in-out infinite;
    transform: scale(1.01);
}

.animated-box-inner {
    background: white;
    border-radius: 17px; /* slightly smaller than wrapper to fit inside */
    overflow: hidden;
    display: block;
}

.animated-box-inner textarea {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important; /* Let the inner div handle the radius */
}