.fp-elearning-otp-2fa-code-input-ui {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING SYSTEM
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Denim Skeuomorphic)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #FFFFFF; /* Putih */
    --fp-secondary-color: #E2E8F0; /* Light grayish blue for shadows */
    --fp-muted-color: #94A3B8; /* Muted text */
    --fp-soft-color: #334155; /* Hitam Keabuan */
    --fp-background-color: transparent;

    --fp-info-color: #60A5FA; /* Lighter Denim */
    --fp-warning-color: #3B82F6; /* Medium Denim */
    --fp-danger-color: #1D4ED8; /* Darker Denim */
    --fp-accent-color: #1E40AF; /* Biru Denim (Accent) */

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background-color: var(--fp-background-color);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--fp-soft-color);
}

.fp-elearning-otp-2fa-code-input-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   STAGE & LAYER 1 (BREATHING)
   ━━━━━━━━━━━━━━━━━━ */
.fp-elearning-otp-2fa-code-input-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: #F8FAFC; /* Off-white to show white highlights */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    border: 1px solid var(--fp-primary-color);
    /* Layer 1: Subtle Base Breathing */
    animation: fp-elearning-otp-2fa-code-input-ui-breathe 5s ease-in-out infinite alternate;
}

@keyframes fp-elearning-otp-2fa-code-input-ui-breathe {
    0% { box-shadow: 0 10px 30px rgba(51, 65, 85, 0.05); }
    100% { box-shadow: 0 15px 40px rgba(51, 65, 85, 0.1); }
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 2: EXPANDING RINGS (RADIAL)
   ━━━━━━━━━━━━━━━━━━ */
.fp-elearning-otp-2fa-code-input-ui-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.fp-elearning-otp-2fa-code-input-ui-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--fp-muted-color);
    opacity: 0;
    animation: fp-elearning-otp-2fa-code-input-ui-expand 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.fp-elearning-otp-2fa-code-input-ui-ring:nth-child(2) {
    animation-delay: 2s;
}

@keyframes fp-elearning-otp-2fa-code-input-ui-expand {
    0% { transform: scale(0.8); opacity: 0.3; border-width: 4px; }
    100% { transform: scale(4); opacity: 0; border-width: 1px; }
}

/* ━━━━━━━━━━━━━━━━━━
   SKEUOMORPHIC PANEL
   ━━━━━━━━━━━━━━━━━━ */
.fp-elearning-otp-2fa-code-input-ui-panel {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 320px;
    background: var(--fp-primary-color);
    border-radius: 20px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Skeuomorphic Elevation */
    box-shadow: 
        16px 16px 32px rgba(100, 116, 139, 0.15),
        -16px -16px 32px rgba(255, 255, 255, 0.9),
        inset 1px 1px 2px rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Status LED */
.fp-elearning-otp-2fa-code-input-ui-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--fp-muted-color);
    margin-bottom: 16px;
    box-shadow: 
        inset 1px 1px 3px rgba(0, 0, 0, 0.2),
        inset -1px -1px 3px rgba(255, 255, 255, 0.8);
    transition: all 0.4s ease;
}

.fp-elearning-otp-2fa-code-input-ui-header {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fp-soft-color);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* Debossed Text Effect */
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 1), -1px -1px 0px rgba(100, 116, 139, 0.1);
}

/* OTP Slots Container */
.fp-elearning-otp-2fa-code-input-ui-slots {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

/* Skeuomorphic Recessed Input Slots */
.fp-elearning-otp-2fa-code-input-ui-slot {
    width: 48px;
    height: 56px;
    border-radius: 12px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--fp-soft-color);
    /* Inner shadow for recessed physical look */
    box-shadow: 
        inset 4px 4px 8px rgba(100, 116, 139, 0.2),
        inset -4px -4px 8px rgba(255, 255, 255, 1);
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition: all 0.3s ease;
}

/* Status Text */
.fp-elearning-otp-2fa-code-input-ui-status {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fp-muted-color);
    letter-spacing: 0.05em;
    height: 16px;
    transition: color 0.3s ease;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE (VERIFIED)
   ━━━━━━━━━━━━━━━━━━ */
.fp-elearning-otp-2fa-code-input-ui-spike .fp-elearning-otp-2fa-code-input-ui-panel {
    transform: translateY(4px); /* Pressed down physically */
    box-shadow: 
        8px 8px 16px rgba(100, 116, 139, 0.1),
        -8px -8px 16px rgba(255, 255, 255, 0.8),
        inset 1px 1px 2px rgba(255, 255, 255, 0.8);
    border-color: rgba(30, 64, 175, 0.2);
}

.fp-elearning-otp-2fa-code-input-ui-spike .fp-elearning-otp-2fa-code-input-ui-led {
    background-color: var(--fp-accent-color);
    box-shadow: 
        0 0 10px var(--fp-accent-color),
        inset 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.fp-elearning-otp-2fa-code-input-ui-spike .fp-elearning-otp-2fa-code-input-ui-slot {
    color: var(--fp-accent-color);
    background: var(--fp-primary-color);
    box-shadow: 
        inset 2px 2px 4px rgba(30, 64, 175, 0.2),
        inset -2px -2px 4px rgba(255, 255, 255, 1),
        0 0 12px rgba(30, 64, 175, 0.15); /* Inner glowing effect */
    border-color: rgba(30, 64, 175, 0.3);
    text-shadow: 0 2px 4px rgba(30, 64, 175, 0.3);
}

.fp-elearning-otp-2fa-code-input-ui-spike .fp-elearning-otp-2fa-code-input-ui-ring {
    border-color: var(--fp-accent-color);
    border-style: solid;
    animation-duration: 2s; /* Speed up expansion */
    opacity: 0.6;
}

.fp-elearning-otp-2fa-code-input-ui-spike .fp-elearning-otp-2fa-code-input-ui-status {
    color: var(--fp-accent-color);
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .fp-elearning-otp-2fa-code-input-ui-panel { width: 90%; padding: 24px 16px; }
    .fp-elearning-otp-2fa-code-input-ui-slot { width: 40px; height: 48px; font-size: 1.25rem; }
    .fp-elearning-otp-2fa-code-input-ui-header { font-size: 0.8rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-elearning-otp-2fa-code-input-ui');

    instances.forEach(root => {
        if (root.dataset.fpInitialized) return;
        root.dataset.fpInitialized = 'true';

        const stage = root.querySelector('.fp-elearning-otp-2fa-code-input-ui-stage');
        const slots = root.querySelectorAll('.fp-elearning-otp-2fa-code-input-ui-slot');
        const statusText = root.querySelector('.fp-elearning-otp-2fa-code-input-ui-status');
        
        if (!stage || slots.length === 0 || !statusText) return;

        let rafId;
        let isVisible = true;
        let lastTime = 0;

        // Animation State Machine
        const targetCode = "8294";
        let typeIndex = 0;
        let phase = 0; // 0: Idle/Typing, 1: Verifying, 2: Spike (Verified), 3: Resetting

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => isVisible = entry.isIntersecting);
        }, { threshold: 0.1 });
        observer.observe(root);

        function fp_elearning_otp_2fa_code_input_ui_loop(timestamp) {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(rafId);
                observer.disconnect();
                return;
            }

            if (document.visibilityState === 'hidden' || !isVisible) {
                rafId = requestAnimationFrame(fp_elearning_otp_2fa_code_input_ui_loop);
                return;
            }

            if (!lastTime) lastTime = timestamp;
            const dt = timestamp - lastTime;

            // State Machine Logic
            if (phase === 0 && dt > 400) { // Typing phase
                if (typeIndex < targetCode.length) {
                    slots[typeIndex].textContent = targetCode[typeIndex];
                    typeIndex++;
                    lastTime = timestamp;
                    statusText.textContent = "Entering OTP...";
                } else {
                    phase = 1;
                    lastTime = timestamp;
                }
            } else if (phase === 1 && dt > 800) { // Verifying delay
                statusText.textContent = "Authenticating...";
                if (dt > 1600) {
                    phase = 2; // Trigger Spike
                    lastTime = timestamp;
                    
                    // Layer 3 Reactive Spike Addition
                    stage.classList.add('fp-elearning-otp-2fa-code-input-ui-spike');
                    statusText.textContent = "Access Granted";
                }
            } else if (phase === 2 && dt > 2500) { // Hold verified state
                phase = 3;
                lastTime = timestamp;
                // Remove Spike
                stage.classList.remove('fp-elearning-otp-2fa-code-input-ui-spike');
            } else if (phase === 3 && dt > 150) { // Resetting fast
                if (typeIndex > 0) {
                    typeIndex--;
                    slots[typeIndex].textContent = "";
                    lastTime = timestamp;
                } else {
                    phase = 0; // Back to typing
                    lastTime = timestamp;
                    statusText.textContent = "Awaiting Input...";
                }
            }

            rafId = requestAnimationFrame(fp_elearning_otp_2fa_code_input_ui_loop);
        }

        // Start animation engine
        rafId = requestAnimationFrame(fp_elearning_otp_2fa_code_input_ui_loop);
    });
})();