/* css/assistant.css - Styles specifically for the AI Translator page */

.assistant-hero {
    min-height: calc(100vh - 70px);
    position: relative;
    padding: 60px 20px;
    background: radial-gradient(circle at center, rgba(30, 24, 15, 0.8) 0%, var(--bg-main) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shrine-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(212, 175, 55, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
}

.scroll-bg {
    background: linear-gradient(135deg, rgba(20, 16, 12, 0.95), rgba(10, 8, 6, 0.95));
}

.stone-bg {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.03"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23n)"/></svg>'), linear-gradient(180deg, var(--bg-2), var(--bg-main));
}

.shadow-golden {
    box-shadow: 0 10px 40px -10px rgba(212, 175, 55, 0.15);
}

.shrine-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-2);
    color: var(--text-muted);
    border-color: var(--border);
}

.shrine-btn:disabled .bg-gold {
    display: none;
}

.shrine-output-area.active {
    opacity: 1;
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.1);
}

/* Nabataean Letter Entry Animation */
.nabataean-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: magic-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes magic-appear {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        filter: blur(8px);
        color: #fff;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        color: var(--gold);
    }
}