/* rabbi.lubavitch.pro -- Merkavah AI design custom CSS */
/* Phase 0 overrides + animations not expressible in Tailwind config */

/* F1-i18n: Alpine x-cloak -- hide before Alpine init to prevent flicker */
[x-cloak] { display: none !important; }

:root {
    --void: #0a0e27;
    --voidlight: #131838;
    --chashmal: #d4a017;
    --chashmal-bright: #fdd34c;
    --sapphire: #2d4a7c;
    --fire: #e63946;
    --cloud: #a8b5d1;
    --parchment: #f4ecd8;
}

html {
    scroll-behavior: smooth;
}

body {
    background: radial-gradient(ellipse at top, var(--voidlight) 0%, var(--void) 70%);
    min-height: 100vh;
}

/* --------------------------------------------------------------------
   Starfield: pure CSS particle layer (no JS dep, works without Three.js).
   -------------------------------------------------------------------- */
.starfield {
    background-image:
        radial-gradient(1px 1px at 25% 35%, rgba(244,236,216,0.7), transparent 50%),
        radial-gradient(1px 1px at 70% 80%, rgba(244,236,216,0.5), transparent 50%),
        radial-gradient(2px 2px at 50% 20%, rgba(212,160,23,0.6),  transparent 50%),
        radial-gradient(1px 1px at 10% 90%, rgba(244,236,216,0.6), transparent 50%),
        radial-gradient(1px 1px at 85% 15%, rgba(244,236,216,0.5), transparent 50%),
        radial-gradient(2px 2px at 35% 65%, rgba(253,211,76,0.4),  transparent 50%),
        radial-gradient(1px 1px at 60% 45%, rgba(244,236,216,0.5), transparent 50%),
        radial-gradient(1px 1px at 90% 60%, rgba(244,236,216,0.7), transparent 50%),
        radial-gradient(1px 1px at 15% 50%, rgba(244,236,216,0.4), transparent 50%),
        radial-gradient(2px 2px at 80% 35%, rgba(212,160,23,0.5),  transparent 50%);
    background-size: 100% 100%;
    animation: starfieldDrift 90s linear infinite;
    opacity: 0.8;
}

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

/* --------------------------------------------------------------------
   Chayot orbit fine-tuning
   -------------------------------------------------------------------- */
.chayah {
    transition: transform 0.6s ease-out;
}

/* --------------------------------------------------------------------
   Typography polish
   -------------------------------------------------------------------- */
.font-cinzel {
    letter-spacing: 0.02em;
}

/* RTL adjustments for Hebrew layouts */
html[dir="rtl"] body {
    font-family: 'Frank Ruhl Libre', serif;
}

/* --------------------------------------------------------------------
   Accessibility: respect reduced-motion
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animate-spin-slow,
    .animate-spin-reverse-slow,
    .animate-pulse-slow,
    .starfield {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------
   Glow utilities (35-J 2026-05-21)
   -------------------------------------------------------------------- */
.shadow-glow-chashmal {
    box-shadow: 0 0 24px rgba(212, 160, 23, 0.18);
}
.shadow-glow-chashmal-strong {
    box-shadow: 0 0 36px rgba(212, 160, 23, 0.38);
}
.shadow-glow-sapphire {
    box-shadow: 0 0 24px rgba(45, 74, 124, 0.35);
}

/* --------------------------------------------------------------------
   Form styles for auth pages (login/register)
   -------------------------------------------------------------------- */
.input-glass {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(212,160,23,0.3);
    color: var(--parchment);
    padding: 0.6rem 0.9rem;
    border-radius: 0.375rem;
    width: 100%;
    transition: border-color 0.2s;
}
.input-glass:focus {
    outline: none;
    border-color: var(--chashmal);
    box-shadow: 0 0 0 2px rgba(212,160,23,0.2);
}