/**
 * Micro-interactions CSS
 * Ripple effects, floating labels, scroll progress
 */

/* ========================================
   1. RIPPLE EFFECT
   ======================================== */
.gc-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: gc-ripple-anim 0.6s ease-out;
    pointer-events: none;
}

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

/* ========================================
   2. FLOATING LABELS  (.gc-float-label)
   ======================================== */
.gc-float-label {
    position: relative;
    margin-bottom: 1.5rem;
}

.gc-float-label label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    background: white;
    padding: 0 0.25rem;
}

.gc-float-label label.floating,
.gc-float-label input:focus + label,
.gc-float-label textarea:focus + label {
    top: 0;
    font-size: 0.75rem;
    color: #D4AF73;
    transform: translateY(-50%);
}

/* ========================================
   3. LINK UNDERLINE ANIMATION
   ======================================== */
.gc-link-underline {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
}

/* ========================================
   4. BUTTON ACTIVE PRESS
   ======================================== */
button:active,
.btn:active,
input[type="submit"]:active {
    transform: scale(0.98);
}

/* ========================================
   5. FOCUS VISIBLE (gold ring)
   ======================================== */
button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible {
    outline: 2px solid #D4AF73;
    outline-offset: 2px;
}

/* ========================================
   6. FORM SUBMIT LOADING STATE
   ======================================== */
.gc-submitting [type="submit"] {
    position: relative;
    color: transparent !important;
}

.gc-submitting [type="submit"]::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gc-spinner 0.6s linear infinite;
}

@keyframes gc-spinner {
    to { transform: rotate(360deg); }
}

/* ========================================
   7. SCROLL PROGRESS BAR
   ======================================== */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #D4AF73, #B8935A);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 9999;
    pointer-events: none;
}

/* ========================================
   8. ACCESSIBILITY — Reduce Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .gc-ripple {
        display: none;
    }
    .gc-link-underline {
        transition: none !important;
    }
    .scroll-progress-bar {
        display: none;
    }
}