/* Squishy TextField - Tactile form field styling */

/* Spring animation timing functions */
/* Snappy spring for focus transitions (bounce: 0.25, duration: 0.3s) */
/* Bouncy spring for label animation (bounce: 0.4, duration: 0.35s) */

/* Jiggle animation for error validation feedback */
@keyframes textfield-jiggle {
    0%,
    100% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-4px);
    }
    20% {
        transform: translateX(4px);
    }
    30% {
        transform: translateX(-4px);
    }
    40% {
        transform: translateX(4px);
    }
    50% {
        transform: translateX(-2px);
    }
    60% {
        transform: translateX(2px);
    }
    70% {
        transform: translateX(-1px);
    }
    80% {
        transform: translateX(1px);
    }
    90% {
        transform: translateX(0);
    }
}

/* Base squishy text field styles */
/* Double-class selector for higher specificity over MUI Emotion styles */
.squishy-textfield.squishy-textfield .MuiOutlinedInput-root {
    /* Base state - soft recessed appearance, "pressed into" the card */
    transition: transform
            550ms
            linear(
                0,
                0.1654,
                0.4677,
                0.7368,
                0.9162,
                1.0096,
                1.043,
                1.0437,
                1.0315,
                1.0177,
                1.0074,
                1.0012,
                0.9985,
                1,
                0.9982,
                0.9989,
                0.9995,
                1
            ),
        box-shadow
            550ms
            linear(
                0,
                0.1654,
                0.4677,
                0.7368,
                0.9162,
                1.0096,
                1.043,
                1.0437,
                1.0315,
                1.0177,
                1.0074,
                1.0012,
                0.9985,
                1,
                0.9982,
                0.9989,
                0.9995,
                1
            ),
        background-color 200ms ease;
    background-color: #f1f5f9 !important;
    /* Sharper shadow defines the "lip" of the well */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 1px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    transform: scale(1);
}

.squishy-textfield.squishy-textfield .MuiOutlinedInput-root fieldset {
    border-width: 0 !important;
    border-color: transparent !important;
    border-radius: 12px !important;
}

/* Hover state - slight darken to signal interactivity */
.squishy-textfield.squishy-textfield .MuiOutlinedInput-root:hover:not(.Mui-focused) {
    background-color: #e2e8f0 !important;
    transform: scale(1.005);
}

.squishy-textfield.squishy-textfield .MuiOutlinedInput-root:hover:not(.Mui-focused) fieldset {
    border-width: 0 !important;
    border-color: transparent !important;
}

/* Focus state - Brand Glow ring, same background as rest */
.squishy-textfield.squishy-textfield .MuiOutlinedInput-root.Mui-focused {
    background-color: #f1f5f9 !important;
    /* Scale down slightly to create "pressed in" feeling - spring will make it bounce */
    transform: scale(0.995);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.05),
        0 0 0 3px var(--sapphire-light-25) !important;
}

.squishy-textfield.squishy-textfield .MuiOutlinedInput-root.Mui-focused fieldset {
    border-width: 0 !important;
    border-color: transparent !important;
}

/* Pulsing "blushing" glow animation for error state */
@keyframes textfield-blush {
    0%,
    100% {
        box-shadow:
            inset 0 2px 6px rgba(211, 47, 47, 0.08),
            inset 0 1px 3px rgba(211, 47, 47, 0.06),
            inset 0 0 12px rgba(211, 47, 47, 0.05),
            0 0 8px rgba(211, 47, 47, 0.1);
        background-color: rgba(255, 245, 245, 0.5);
    }
    50% {
        box-shadow:
            inset 0 2px 8px rgba(211, 47, 47, 0.12),
            inset 0 1px 4px rgba(211, 47, 47, 0.1),
            inset 0 0 20px rgba(211, 47, 47, 0.1),
            0 0 16px rgba(211, 47, 47, 0.18);
        background-color: rgba(255, 235, 235, 0.7);
    }
}

/* Error state - "Soft Red Blush" Surface-Level Feedback
   The field "blushes" rather than being "punished" with harsh borders.
   NO BORDERS - only the diffused outer glow (the "Empathy Glow")
   PRESERVE INSET - the field must still look "sunken" into the clay */
.squishy-textfield.squishy-error {
    /* Jiggle animation on the wrapper for consistent behavior with other components */
    animation: textfield-jiggle 0.5s ease-in-out;
}

.squishy-textfield.squishy-textfield.squishy-error .MuiOutlinedInput-root {
    /* Error: Blush tint */
    background-color: #fff0f0 !important;
    box-shadow:
        inset 0 2px 4px rgba(239, 68, 68, 0.1),
        0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.squishy-textfield.squishy-textfield.squishy-error .MuiOutlinedInput-root fieldset {
    /* KILL THE BORDER - borders are "ink", we use only "light" (glow) */
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: none !important;
}

/* Floating label with bounce animation */
.squishy-textfield.squishy-textfield .MuiInputLabel-root {
    transition: all
        900ms
        linear(
            0,
            0.0688,
            0.2271,
            0.4183,
            0.6045,
            0.7644,
            0.8885,
            0.9757,
            1.0303,
            1.0586,
            1.0679,
            1.0648,
            1.0548,
            1.0419,
            1.0291,
            1.0178,
            1.0089,
            1.0025,
            0.9985,
            0.9962,
            0.9954,
            0.9955,
            0.9961,
            0.997,
            0.9979,
            0.9987,
            0.9993,
            0.9998,
            1,
            1
        );
    transform-origin: top left;
}

/* Label when field is focused or has value - floats up with bounce */
.squishy-textfield.squishy-textfield .MuiInputLabel-root.MuiInputLabel-shrink {
    transform: translate(14px, -9px) scale(0.75);
    font-weight: 600;
    color: var(--squishy-primary) !important;
    letter-spacing: 0.02em;
}

/* Error state label */
.squishy-textfield.squishy-textfield .MuiInputLabel-root.Mui-error {
    color: var(--squishy-error) !important;
}

.squishy-textfield.squishy-textfield .MuiInputLabel-root.Mui-focused {
    color: var(--squishy-primary) !important;
}

/* Input text styling */
.squishy-textfield.squishy-textfield .MuiOutlinedInput-input {
    transition: all
        550ms
        linear(
            0,
            0.1654,
            0.4677,
            0.7368,
            0.9162,
            1.0096,
            1.043,
            1.0437,
            1.0315,
            1.0177,
            1.0074,
            1.0012,
            0.9985,
            1,
            0.9982,
            0.9989,
            0.9995,
            1
        );
}

.squishy-textfield.squishy-textfield .MuiOutlinedInput-input::placeholder {
    opacity: 0;
    transition: opacity
        550ms
        linear(
            0,
            0.1654,
            0.4677,
            0.7368,
            0.9162,
            1.0096,
            1.043,
            1.0437,
            1.0315,
            1.0177,
            1.0074,
            1.0012,
            0.9985,
            1,
            0.9982,
            0.9989,
            0.9995,
            1
        );
}

.squishy-textfield.squishy-textfield .MuiOutlinedInput-input:focus::placeholder {
    opacity: 0.5;
}

/* Helper text styling */
.squishy-textfield.squishy-textfield .MuiFormHelperText-root {
    transition: all
        550ms
        linear(
            0,
            0.1654,
            0.4677,
            0.7368,
            0.9162,
            1.0096,
            1.043,
            1.0437,
            1.0315,
            1.0177,
            1.0074,
            1.0012,
            0.9985,
            1,
            0.9982,
            0.9989,
            0.9995,
            1
        );
    margin-top: 6px;
}

.squishy-textfield.squishy-textfield .MuiFormHelperText-root.Mui-error {
    font-weight: 500;
}

/* ============================================
   REDUCED MOTION PREFERENCE
   Disable animations for users with vestibular disorders
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .squishy-textfield.squishy-textfield .MuiOutlinedInput-root,
    .squishy-textfield.squishy-textfield .MuiInputLabel-root,
    .squishy-textfield.squishy-textfield .MuiOutlinedInput-input,
    .squishy-textfield.squishy-textfield .MuiFormHelperText-root {
        transition: none;
    }

    .squishy-textfield.squishy-error {
        animation: none;
    }
}