/* ============================================================
   BLUECREST FINANCE - ANIMATIONS CSS
   ============================================================ */

/* Ticker scroll for crypto bar */
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Blockchain pulse */
@keyframes blockchainPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(212, 175, 55, 0);
    }
}

/* Confirmation ripple */
@keyframes confirmRipple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Data flow animation */
@keyframes dataFlow {
    0%   { stroke-dashoffset: 1000; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Gold shimmer */
@keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.gold-shimmer {
    background: linear-gradient(
        90deg,
        var(--bcf-gold-dark) 0%,
        var(--bcf-gold) 25%,
        var(--bcf-gold-light) 50%,
        var(--bcf-gold) 75%,
        var(--bcf-gold-dark) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 3s linear infinite;
}

/* Number roll */
@keyframes numberRoll {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Security scan */
@keyframes securityScan {
    0%   { top: -2px; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
}

/* Typing cursor */
@keyframes cursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.typing-cursor::after {
    content: '|';
    animation: cursorBlink 1s infinite;
    color: var(--bcf-gold);
    margin-left: 2px;
}

/* Card flip */
.card-flip {
    perspective: 1000px;
}

.card-flip-inner {
    position:        relative;
    width:           100%;
    height:          100%;
    transition:      transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card-flip:hover .card-flip-inner {
    transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
    position:          absolute;
    width:             100%;
    height:            100%;
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden;
    border-radius:     var(--radius-xl);
}

.card-flip-back {
    transform: rotateY(180deg);
}

/* Glow effects on hover */
.hover-glow-gold:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4),
                0 0 60px rgba(212, 175, 55, 0.2);
    transition: box-shadow 0.3s ease;
}

.hover-glow-blue:hover {
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.4),
                0 0 60px rgba(37, 99, 235, 0.2);
    transition: box-shadow 0.3s ease;
}

/* Blockchain confirmation dots */
.confirmation-dot {
    width:         12px;
    height:        12px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.1);
    border:        2px solid rgba(255,255,255,0.2);
    transition:    all 0.5s ease;
    position:      relative;
}

.confirmation-dot.confirmed {
    background:    var(--bcf-success);
    border-color:  var(--bcf-success);
    box-shadow:    0 0 10px rgba(16, 185, 129, 0.5);
    animation:     blockchainPulse 2s infinite;
}

.confirmation-dot.pending {
    background:    var(--bcf-warning);
    border-color:  var(--bcf-warning);
    animation:     pulse 1.5s ease-in-out infinite;
}

/* Blockchain progress line */
.blockchain-progress-line {
    position:      relative;
    height:        2px;
    background:    rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    overflow:      visible;
}

.blockchain-progress-fill {
    height:        100%;
    background:    var(--grad-success);
    border-radius: var(--radius-full);
    transition:    width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position:      relative;
}

.blockchain-progress-fill::after {
    content:         '';
    position:        absolute;
    right:           -6px;
    top:             -5px;
    width:           12px;
    height:          12px;
    background:      var(--bcf-success);
    border-radius:   50%;
    box-shadow:      0 0 8px var(--bcf-success);
    animation:       blockchainPulse 1.5s ease-in-out infinite;
}

/* Floating label inputs */
.floating-label {
    position: relative;
}

.floating-label .form-control {
    padding-top:    1.8rem;
    padding-bottom: 0.5rem;
}

.floating-label label {
    position:    absolute;
    top:         1.1rem;
    left:        var(--space-5);
    color:       var(--bcf-gray-500);
    font-size:   var(--text-base);
    transition:  all 0.2s ease;
    pointer-events: none;
    transform-origin: left top;
}

.floating-label .form-control:focus ~ label,
.floating-label .form-control:not(:placeholder-shown) ~ label {
    transform:  translateY(-0.6rem) scale(0.75);
    color:      var(--bcf-gold);
}

/* Step progress */
.step-progress {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   var(--space-8);
}

.step-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-2);
    position:       relative;
    flex:           1;
    max-width:      120px;
}

.step-circle {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--text-sm);
    font-weight:     700;
    transition:      all 0.4s ease;
    z-index:         1;
    position:        relative;
}

.step-circle.inactive {
    background: rgba(255,255,255,0.05);
    border:     2px solid rgba(255,255,255,0.15);
    color:      var(--bcf-gray-500);
}

.step-circle.active {
    background: rgba(212, 175, 55, 0.15);
    border:     2px solid var(--bcf-gold);
    color:      var(--bcf-gold);
    animation:  blockchainPulse 2s ease-in-out infinite;
}

.step-circle.completed {
    background: var(--grad-success);
    border:     2px solid var(--bcf-success);
    color:      var(--bcf-white);
}

.step-label {
    font-size:  0.65rem;
    color:      var(--bcf-gray-500);
    text-align: center;
    white-space:nowrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.step-label.active    { color: var(--bcf-gold); }
.step-label.completed { color: var(--bcf-success); }

.step-connector {
    flex:       1;
    height:     2px;
    background: rgba(255,255,255,0.1);
    position:   relative;
    margin:     0 var(--space-2);
    margin-bottom: var(--space-6);
}

.step-connector.completed {
    background: var(--bcf-success);
}

/* Drag and drop zone */
.drop-zone {
    border:        2px dashed var(--glass-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-10);
    text-align:    center;
    cursor:        pointer;
    transition:    var(--transition-base);
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color:  var(--bcf-gold);
    background:    rgba(212, 175, 55, 0.05);
}

/* QR Code container */
.qr-container {
    background:    var(--bcf-white);
    padding:       var(--space-4);
    border-radius: var(--radius-lg);
    display:       inline-block;
    box-shadow:    var(--shadow-gold-sm);
}

/* Verification badge */
.verification-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-4);
    background:      rgba(16, 185, 129, 0.1);
    border:          1px solid rgba(16, 185, 129, 0.3);
    border-radius:   var(--radius-full);
    font-size:       var(--text-xs);
    font-weight:     700;
    color:           var(--bcf-success);
    letter-spacing:  0.05em;
}

/* Compliance notice */
.compliance-notice {
    background:      rgba(245, 158, 11, 0.08);
    border:          1px solid rgba(245, 158, 11, 0.25);
    border-radius:   var(--radius-lg);
    padding:         var(--space-5);
    font-size:       var(--text-xs);
    color:           var(--bcf-gray-400);
    line-height:     1.7;
}

.compliance-notice strong {
    color: var(--bcf-warning);
    display: block;
    margin-bottom: var(--space-2);
}

/* Animated border */
.animated-border {
    position:   relative;
    border:     1px solid transparent;
    background: linear-gradient(var(--bcf-navy-mid), var(--bcf-navy-mid)) padding-box,
                linear-gradient(135deg, var(--bcf-gold), var(--bcf-blue-bright), var(--bcf-gold)) border-box;
    animation:  borderRotate 3s linear infinite;
    background-size: 200% 200%;
}

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

/* Pulse ring */
.pulse-ring {
    position:  relative;
    display:   inline-flex;
}

.pulse-ring::before {
    content:       '';
    position:      absolute;
    inset:         -4px;
    border-radius: inherit;
    border:        2px solid var(--bcf-gold);
    animation:     confirmRipple 2s ease-out infinite;
}