/* XcaliburMoon Digital Signature & Copyright System */
/* Reusable CSS for academic articles and professional documents */

/* Digital Signature Block */
.digital-signature-block {
    margin-top: 60px;
    padding: 25px;
    border: 3px solid #2c3e50;
    border-radius: 8px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.digital-signature-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #e74c3c, #f39c12, #f1c40f, #2ecc71, #3498db, #9b59b6);
    animation: securityPulse 3s ease-in-out infinite;
}

/* Animations */
@keyframes securityPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

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

@keyframes sealRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Holographic Seal */
.holographic-seal {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    position: relative;
    background: conic-gradient(from 0deg, #ff0080, #00ff80, #8000ff, #ff8000, #0080ff, #ff0080);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sealRotate 10s linear infinite;
    box-shadow: 0 0 30px rgba(0,0,0,0.3), 
                inset 0 0 30px rgba(255,255,255,0.3);
}

.holographic-seal::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: linear-gradient(45deg, 
                rgba(255,255,255,0.9) 0%, 
                rgba(240,240,240,0.9) 100%);
    border-radius: 50%;
    background-size: 200% 200%;
    animation: holographicShimmer 3s ease-in-out infinite;
}

.seal-content {
    position: relative;
    z-index: 2;
    color: #2c3e50;
    font-weight: bold;
    text-align: center;
    font-size: 0.8em;
}

.seal-center {
    background: radial-gradient(circle, #3498db, #2c3e50);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

/* Signature Elements */
.real-signature {
    margin: 20px 0;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature-svg {
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.signature-header {
    font-size: 1.1em;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.certified {
    color: #27ae60;
    font-weight: bold;
    font-size: 1.1em;
    margin: 10px 0;
}

/* Security Badges */
.security-badge {
    display: inline-block;
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    margin: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Information Displays */
.timestamp {
    font-family: 'Courier New', monospace;
    background: #34495e;
    color: #ecf0f1;
    padding: 8px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 0.9em;
}

.hash-display {
    font-family: 'Courier New', monospace;
    background: #2c3e50;
    color: #3498db;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 0.75em;
    word-break: break-all;
    border-left: 4px solid #3498db;
}

.verification-info {
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid #3498db;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
    font-size: 0.9em;
}

.verification-info .verify-title {
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 8px;
}

/* Copyright Enhancement */
.copyright-enhanced {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.copyright-enhanced .copyright-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #3498db;
}

.protection-badges {
    margin: 15px 0;
}

.protection-badge {
    display: inline-block;
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: bold;
    margin: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .holographic-seal {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }
    .seal-center {
        width: 50px;
        height: 50px;
        font-size: 0.6em;
    }
    .real-signature {
        height: 60px;
        margin: 15px 0;
    }
    .signature-svg {
        width: 200px;
        height: 60px;
    }
    .digital-signature-block {
        padding: 15px;
        margin-top: 40px;
    }
    .hash-display {
        font-size: 0.65em;
        padding: 8px;
    }
    .timestamp {
        font-size: 0.8em;
        padding: 6px;
    }
    .verification-info {
        padding: 10px;
        font-size: 0.8em;
    }
    .copyright-enhanced {
        padding: 15px;
        font-size: 0.9em;
    }
    .protection-badges {
        margin: 10px 0;
    }
    .protection-badge {
        font-size: 0.7em;
        padding: 3px 8px;
        margin: 2px;
    }
}

@media (max-width: 480px) {
    .holographic-seal {
        width: 80px;
        height: 80px;
        margin-bottom: 12px;
    }
    .seal-center {
        width: 40px;
        height: 40px;
        font-size: 0.55em;
    }
    .real-signature {
        height: 50px;
        margin: 12px 0;
    }
    .signature-svg {
        width: 160px;
        height: 50px;
    }
    .digital-signature-block {
        padding: 10px;
        margin-top: 25px;
    }
    .signature-header {
        font-size: 0.9em;
    }
    .hash-display {
        font-size: 0.6em;
        padding: 6px;
    }
    .timestamp {
        font-size: 0.75em;
        padding: 5px;
    }
    .security-badge {
        font-size: 0.7em;
        padding: 3px 8px;
    }
    .verification-info {
        padding: 8px;
        font-size: 0.75em;
    }
    .copyright-enhanced {
        padding: 12px;
        font-size: 0.8em;
    }
    .protection-badge {
        font-size: 0.65em;
        padding: 2px 6px;
    }
}

@media (max-width: 320px) {
    .holographic-seal {
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }
    .seal-center {
        width: 35px;
        height: 35px;
        font-size: 0.5em;
    }
    .real-signature {
        height: 40px;
        margin: 10px 0;
    }
    .signature-svg {
        width: 140px;
        height: 40px;
    }
    .signature-header {
        font-size: 0.8em;
    }
    .hash-display {
        font-size: 0.55em;
    }
    .timestamp {
        font-size: 0.7em;
    }
    .security-badge {
        font-size: 0.65em;
        padding: 2px 6px;
    }
    .copyright-enhanced {
        padding: 8px;
        font-size: 0.75em;
    }
    .protection-badge {
        font-size: 0.6em;
        padding: 2px 5px;
    }
}

/* Usage Instructions:
   
   To use this signature system in other articles:
   
   1. Link to this CSS file in your HTML head:
      <link rel="stylesheet" href="xcalibur-signature-system.css">
   
   2. Use the HTML template structure:
      <div class="digital-signature-block">
          <!-- Copy the signature block HTML from the main article -->
      </div>
      
      <div class="copyright-enhanced">
          <!-- Copy the copyright block HTML from the main article -->
      </div>
   
   3. Customize the following elements for each article:
      - Document ID in timestamp and verification
      - Document-specific hash values
      - Article title in verification instructions
      - Date and version information
*/