/* ===== MICRO-INTERACTIONS ===== */
/* Interactive effects: magnetic, ripple, tilt, glow, and input animations */

/* === MAGNETIC BUTTON EFFECT === */
/* JS required for full effect - this provides base styling */
.btn-magnetic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 1rem) var(--space-8, 2rem);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--font-size-body, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-wide, 0.05em);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-on-primary, #FFFFFF);
    background: var(--gradient-primary, linear-gradient(135deg, #E63946, #FF2E63));
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform var(--duration-fast, 200ms) var(--ease-smooth, ease),
        box-shadow var(--duration-fast, 200ms) var(--ease-smooth, ease);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1)),
                0 0 0 0 var(--token-primary-glow, rgba(230, 57, 70, 0));
}

.btn-magnetic:hover {
    box-shadow: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.15)),
                var(--shadow-glow-primary, 0 0 30px rgba(230, 57, 70, 0.4));
}

.btn-magnetic:active {
    transform: scale(0.95);
}

.btn-magnetic-content {
    position: relative;
    z-index: 1;
    transition: transform var(--duration-fast, 200ms) var(--ease-elastic, cubic-bezier(0.68, -0.55, 0.265, 1.55));
}

/* Magnetic variants */
.btn-magnetic.btn-secondary {
    background: var(--gradient-secondary, linear-gradient(135deg, #00C4AA, #00F5D4));
    color: var(--text-on-secondary, #0D1117);
}

.btn-magnetic.btn-secondary:hover {
    box-shadow: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.15)),
                var(--shadow-glow-secondary, 0 0 30px rgba(0, 245, 212, 0.4));
}

.btn-magnetic.btn-accent {
    background: var(--gradient-accent, linear-gradient(135deg, #5A189A, #7B2CBF));
}

.btn-magnetic.btn-accent:hover {
    box-shadow: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.15)),
                var(--shadow-glow-accent, 0 0 30px rgba(123, 44, 191, 0.4));
}

.btn-magnetic.btn-outline {
    background: transparent;
    border: 2px solid var(--token-primary, #E63946);
    color: var(--token-primary, #E63946);
}

.btn-magnetic.btn-outline:hover {
    background: var(--token-primary, #E63946);
    color: var(--text-on-primary, #FFFFFF);
}

/* === RIPPLE EFFECT === */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-animation var(--duration-slow, 500ms) linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Dark ripple for light buttons */
.btn-ripple.btn-light .ripple {
    background: rgba(0, 0, 0, 0.2);
}

/* === 3D TILT CARDS === */
.card-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.card-tilt:hover {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

.card-tilt-content {
    transform: translateZ(30px);
    transition: transform var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.card-tilt:hover .card-tilt-content {
    transform: translateZ(50px);
}

/* Tilt shine effect */
.card-tilt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transition: opacity var(--duration-fast, 200ms) var(--ease-smooth, ease);
    pointer-events: none;
    border-radius: inherit;
}

.card-tilt:hover::before {
    opacity: 1;
}

/* === GLOW PULSE ANIMATIONS === */
.glow-pulse {
    animation: glow-pulse-animation 2s ease-in-out infinite;
}

@keyframes glow-pulse-animation {
    0%, 100% {
        box-shadow: 0 0 5px var(--token-primary-glow, rgba(230, 57, 70, 0.3)),
                    0 0 10px var(--token-primary-glow, rgba(230, 57, 70, 0.2)),
                    0 0 15px var(--token-primary-glow, rgba(230, 57, 70, 0.1));
    }
    50% {
        box-shadow: 0 0 10px var(--token-primary-glow, rgba(230, 57, 70, 0.4)),
                    0 0 20px var(--token-primary-glow, rgba(230, 57, 70, 0.3)),
                    0 0 30px var(--token-primary-glow, rgba(230, 57, 70, 0.2));
    }
}

.glow-pulse-secondary {
    animation: glow-pulse-secondary-animation 2s ease-in-out infinite;
}

@keyframes glow-pulse-secondary-animation {
    0%, 100% {
        box-shadow: 0 0 5px var(--token-secondary-glow, rgba(0, 245, 212, 0.3)),
                    0 0 10px var(--token-secondary-glow, rgba(0, 245, 212, 0.2)),
                    0 0 15px var(--token-secondary-glow, rgba(0, 245, 212, 0.1));
    }
    50% {
        box-shadow: 0 0 10px var(--token-secondary-glow, rgba(0, 245, 212, 0.4)),
                    0 0 20px var(--token-secondary-glow, rgba(0, 245, 212, 0.3)),
                    0 0 30px var(--token-secondary-glow, rgba(0, 245, 212, 0.2));
    }
}

.glow-pulse-accent {
    animation: glow-pulse-accent-animation 2s ease-in-out infinite;
}

@keyframes glow-pulse-accent-animation {
    0%, 100% {
        box-shadow: 0 0 5px var(--token-accent-glow, rgba(123, 44, 191, 0.3)),
                    0 0 10px var(--token-accent-glow, rgba(123, 44, 191, 0.2)),
                    0 0 15px var(--token-accent-glow, rgba(123, 44, 191, 0.1));
    }
    50% {
        box-shadow: 0 0 10px var(--token-accent-glow, rgba(123, 44, 191, 0.4)),
                    0 0 20px var(--token-accent-glow, rgba(123, 44, 191, 0.3)),
                    0 0 30px var(--token-accent-glow, rgba(123, 44, 191, 0.2));
    }
}

/* Text glow pulse */
.text-glow-pulse {
    animation: text-glow-pulse-animation 2s ease-in-out infinite;
}

@keyframes text-glow-pulse-animation {
    0%, 100% {
        text-shadow: 0 0 5px var(--token-primary-glow, rgba(230, 57, 70, 0.5)),
                     0 0 10px var(--token-primary-glow, rgba(230, 57, 70, 0.3));
    }
    50% {
        text-shadow: 0 0 10px var(--token-primary-glow, rgba(230, 57, 70, 0.7)),
                     0 0 20px var(--token-primary-glow, rgba(230, 57, 70, 0.5)),
                     0 0 30px var(--token-primary-glow, rgba(230, 57, 70, 0.3));
    }
}

/* === INPUT FOCUS ANIMATIONS === */
.input-modern {
    width: 100%;
    padding: var(--space-4, 1rem);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--font-size-body, 1rem);
    color: var(--text-on-light, #0D1117);
    background: var(--token-surface-white, #FFFFFF);
    border: 2px solid var(--token-surface-muted, #E8EDF2);
    border-radius: var(--radius-lg, 0.75rem);
    outline: none;
    transition:
        border-color var(--duration-fast, 200ms) var(--ease-smooth, ease),
        box-shadow var(--duration-fast, 200ms) var(--ease-smooth, ease),
        background var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.input-modern:hover {
    border-color: var(--token-primary-light, #FF6B7A);
}

.input-modern:focus {
    border-color: var(--token-primary, #E63946);
    box-shadow: 0 0 0 4px var(--token-primary-glow, rgba(230, 57, 70, 0.2));
}

.input-modern::placeholder {
    color: var(--text-on-light-subtle, rgba(13, 17, 23, 0.5));
}

/* Floating label input */
.input-group-floating {
    position: relative;
    margin-bottom: var(--space-6, 1.5rem);
}

.input-group-floating .input-modern {
    padding-top: var(--space-6, 1.5rem);
    padding-bottom: var(--space-2, 0.5rem);
}

.input-group-floating label {
    position: absolute;
    left: var(--space-4, 1rem);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--font-size-body, 1rem);
    color: var(--text-on-light-subtle, rgba(13, 17, 23, 0.5));
    pointer-events: none;
    transition:
        top var(--duration-fast, 200ms) var(--ease-smooth, ease),
        transform var(--duration-fast, 200ms) var(--ease-smooth, ease),
        font-size var(--duration-fast, 200ms) var(--ease-smooth, ease),
        color var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.input-group-floating .input-modern:focus + label,
.input-group-floating .input-modern:not(:placeholder-shown) + label {
    top: var(--space-3, 0.75rem);
    transform: translateY(0);
    font-size: var(--font-size-caption, 0.75rem);
    color: var(--token-primary, #E63946);
}

/* Input with icon */
.input-with-icon {
    position: relative;
}

.input-with-icon .input-modern {
    padding-left: calc(var(--space-4, 1rem) + 24px + var(--space-2, 0.5rem));
}

.input-with-icon .input-icon {
    position: absolute;
    left: var(--space-4, 1rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--text-on-light-subtle, rgba(13, 17, 23, 0.5));
    transition: color var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.input-with-icon .input-modern:focus ~ .input-icon {
    color: var(--token-primary, #E63946);
}

/* === HOVER LIFT EFFECT === */
.hover-lift {
    transition: transform var(--duration-fast, 200ms) var(--ease-smooth, ease),
                box-shadow var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.15));
}

.hover-lift:active {
    transform: translateY(-2px);
}

/* === HOVER SCALE EFFECT === */
.hover-scale {
    transition: transform var(--duration-fast, 200ms) var(--ease-elastic, cubic-bezier(0.68, -0.55, 0.265, 1.55));
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-scale:active {
    transform: scale(0.98);
}

/* === HOVER GLOW EFFECT === */
.hover-glow {
    transition: box-shadow var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow-primary, 0 0 30px rgba(230, 57, 70, 0.4));
}

.hover-glow-secondary:hover {
    box-shadow: var(--shadow-glow-secondary, 0 0 30px rgba(0, 245, 212, 0.4));
}

.hover-glow-accent:hover {
    box-shadow: var(--shadow-glow-accent, 0 0 30px rgba(123, 44, 191, 0.4));
}

/* === SKELETON LOADING === */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--token-surface-muted, #E8EDF2) 0%,
        var(--token-surface-cream, #F6F8FA) 50%,
        var(--token-surface-muted, #E8EDF2) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md, 0.5rem);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text:last-child {
    width: 70%;
}

.skeleton-circle {
    border-radius: var(--radius-full, 9999px);
}

.skeleton-card {
    height: 200px;
}

/* === CHECKBOX & RADIO CUSTOM === */
.checkbox-modern,
.radio-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    cursor: pointer;
}

.checkbox-modern input,
.radio-modern input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-modern .checkmark,
.radio-modern .checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid var(--token-surface-muted, #E8EDF2);
    background: var(--token-surface-white, #FFFFFF);
    transition:
        border-color var(--duration-fast, 200ms) var(--ease-smooth, ease),
        background var(--duration-fast, 200ms) var(--ease-smooth, ease),
        box-shadow var(--duration-fast, 200ms) var(--ease-smooth, ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-modern .checkmark {
    border-radius: var(--radius-md, 0.5rem);
}

.radio-modern .checkmark {
    border-radius: var(--radius-full, 9999px);
}

.checkbox-modern:hover .checkmark,
.radio-modern:hover .checkmark {
    border-color: var(--token-primary, #E63946);
}

.checkbox-modern input:checked + .checkmark,
.radio-modern input:checked + .checkmark {
    border-color: var(--token-primary, #E63946);
    background: var(--token-primary, #E63946);
}

.checkbox-modern input:focus + .checkmark,
.radio-modern input:focus + .checkmark {
    box-shadow: 0 0 0 4px var(--token-primary-glow, rgba(230, 57, 70, 0.2));
}

.checkbox-modern .checkmark::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--duration-fast, 200ms) var(--ease-elastic, cubic-bezier(0.68, -0.55, 0.265, 1.55));
}

.checkbox-modern input:checked + .checkmark::after {
    transform: rotate(45deg) scale(1);
}

.radio-modern .checkmark::after {
    content: '';
    width: 10px;
    height: 10px;
    background: white;
    border-radius: var(--radius-full, 9999px);
    transform: scale(0);
    transition: transform var(--duration-fast, 200ms) var(--ease-elastic, cubic-bezier(0.68, -0.55, 0.265, 1.55));
}

.radio-modern input:checked + .checkmark::after {
    transform: scale(1);
}

/* === TOGGLE SWITCH === */
.toggle-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    cursor: pointer;
}

.toggle-modern input {
    position: absolute;
    opacity: 0;
}

.toggle-modern .toggle-track {
    width: 52px;
    height: 28px;
    background: var(--token-surface-muted, #E8EDF2);
    border-radius: var(--radius-full, 9999px);
    position: relative;
    transition: background var(--duration-fast, 200ms) var(--ease-smooth, ease);
}

.toggle-modern .toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: var(--radius-full, 9999px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    transition: transform var(--duration-fast, 200ms) var(--ease-elastic, cubic-bezier(0.68, -0.55, 0.265, 1.55));
}

.toggle-modern input:checked + .toggle-track {
    background: var(--token-primary, #E63946);
}

.toggle-modern input:checked + .toggle-track .toggle-thumb {
    transform: translateX(24px);
}

.toggle-modern input:focus + .toggle-track {
    box-shadow: 0 0 0 4px var(--token-primary-glow, rgba(230, 57, 70, 0.2));
}

/* === TOOLTIP === */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--duration-fast, 200ms) var(--ease-smooth, ease),
        visibility var(--duration-fast, 200ms) var(--ease-smooth, ease),
        transform var(--duration-fast, 200ms) var(--ease-smooth, ease);
    z-index: var(--z-tooltip, 600);
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: var(--token-surface-darkest, #0D1117);
    color: var(--text-on-dark, #FFFFFF);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--font-size-caption, 0.75rem);
    border-radius: var(--radius-md, 0.5rem);
    white-space: nowrap;
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.2));
}

[data-tooltip]::after {
    content: '';
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: var(--token-surface-darkest, #0D1117);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .btn-magnetic,
    .btn-ripple .ripple,
    .card-tilt,
    .card-tilt-content,
    .glow-pulse,
    .glow-pulse-secondary,
    .glow-pulse-accent,
    .text-glow-pulse,
    .input-modern,
    .input-group-floating label,
    .hover-lift,
    .hover-scale,
    .hover-glow,
    .skeleton,
    .checkbox-modern .checkmark,
    .radio-modern .checkmark,
    .checkbox-modern .checkmark::after,
    .radio-modern .checkmark::after,
    .toggle-modern .toggle-track,
    .toggle-modern .toggle-thumb,
    [data-tooltip]::before,
    [data-tooltip]::after {
        transition: none !important;
        animation: none !important;
    }
}

/* === END OF MICRO-INTERACTIONS === */