/* ==========================================================================
   Page styles: vocation/novitiate.html
   Global/shared styles live in assets/css/style.css (and tailwind.css).
   ========================================================================== */

/* ===== HEAVENLY / RADIANT THEME OVERRIDES ===== */
:root {
    --heaven-gold: #f5c842;
    --heaven-amber: #f59e0b;
    --heaven-cream: #fef9ec;
    --heaven-glow: rgba(245, 200, 66, 0.12);
    --heaven-glow-strong: rgba(245, 200, 66, 0.22);
}

/* Ambient golden shimmer keyframes */
@keyframes shimmer-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.08); }
}
@keyframes float-up {
    0%   { transform: translateY(0px) rotate(0deg); opacity: 0.4; }
    50%  { transform: translateY(-20px) rotate(5deg); opacity: 0.9; }
    100% { transform: translateY(0px) rotate(0deg); opacity: 0.4; }
}
@keyframes radiant-ring {
    0%   { box-shadow: 0 0 0 0   rgba(245,200,66,0.25); }
    70%  { box-shadow: 0 0 0 20px rgba(245,200,66,0); }
    100% { box-shadow: 0 0 0 0   rgba(245,200,66,0); }
}
@keyframes light-beam {
    0%   { opacity: 0.06; }
    50%  { opacity: 0.14; }
    100% { opacity: 0.06; }
}

/* Floating divine particle orbs */
.heaven-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: shimmer-pulse 6s ease-in-out infinite;
}
.heaven-orb-1 { width: 700px; height: 700px; background: radial-gradient(ellipse, rgba(245,200,66,0.10), transparent 70%); top: -200px; right: -100px; }
.heaven-orb-2 { width: 500px; height: 500px; background: radial-gradient(ellipse, rgba(239,68,68,0.07), transparent 70%); bottom: -150px; left: -100px; animation-delay: 3s; }
.heaven-orb-3 { width: 300px; height: 300px; background: radial-gradient(ellipse, rgba(245,200,66,0.08), transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: 1.5s; }

/* Light beams */
.light-beam {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, rgba(245,200,66,0.0), rgba(245,200,66,0.35) 40%, rgba(245,200,66,0.0));
    animation: light-beam 5s ease-in-out infinite;
    pointer-events: none;
}

/* Golden divider line */
.gold-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245,200,66,0.4), transparent);
}

/* Novice profile card */
.novice-card {
    position: relative;
    background: linear-gradient(135deg, rgba(39,39,42,0.95), rgba(24,24,27,0.98));
    border: 1px solid rgba(245,200,66,0.15);
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.novice-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(245,200,66,0.03), transparent 60%);
    pointer-events: none;
}
.novice-card:hover {
    transform: translateY(-8px);
    border-color: rgba(245,200,66,0.40);
    box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(245,200,66,0.08);
}
.novice-card .gold-ring {
    animation: radiant-ring 2.5s ease-out infinite;
}

/* Voices card */
.voice-card-center {
    background: linear-gradient(135deg, rgba(245,200,66,0.10), rgba(245,200,66,0.04));
    border: 1px solid rgba(245,200,66,0.30);
}
.voice-card-side {
    background: rgba(24,24,27,0.9);
    border: 1px solid rgba(245,200,66,0.10);
}

/* Gallery marquee */
@keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.nov-marquee-left  { display: flex; width: max-content; animation: marquee-left  42s linear infinite; }
.nov-marquee-right { display: flex; width: max-content; animation: marquee-right 48s linear infinite; }
.nov-gallery-section:hover .nov-marquee-left,
.nov-gallery-section:hover .nov-marquee-right { animation-play-state: paused; }

.nov-gallery-card {
    position: relative;
    flex-shrink: 0;
    width: 340px;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 16px;
    cursor: pointer;
    border: 1px solid rgba(245,200,66,0.08);
}
.nov-gallery-card.wide { width: 420px; }
.nov-gallery-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.5s ease;
    filter: grayscale(15%) sepia(15%);
}
.nov-gallery-card:hover img { transform: scale(1.10); filter: grayscale(0%) sepia(0%); }
.nov-gallery-card .nov-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.10) 50%, transparent 100%);
    opacity: 0; transition: opacity 0.4s ease;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
}
.nov-gallery-card:hover .nov-overlay { opacity: 1; }
.nov-gallery-card .nov-tag {
    font-size: 9px; font-weight: 900; letter-spacing: 0.25em; text-transform: uppercase;
    color: #f5c842; background: rgba(245,200,66,0.15); border: 1px solid rgba(245,200,66,0.3);
    padding: 4px 10px; border-radius: 100px; display: inline-block; margin-bottom: 8px; width: fit-content;
}
.nov-gallery-card .nov-label {
    font-size: 15px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em;
}

/* Radiant section bg */
.section-heaven {
    background: radial-gradient(ellipse at 50% 0%, rgba(245,200,66,0.06) 0%, rgba(9,9,11,0) 60%),
                linear-gradient(180deg, #09090b 0%, #18181b 100%);
}
.section-heaven-alt {
    background: radial-gradient(ellipse at 50% 100%, rgba(245,200,66,0.05) 0%, rgba(24,24,27,0) 60%),
                #18181b;
}

/* ===== LIGHT MODE overrides for heavenly theme ===== */
.light .novice-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(254,249,236,0.95));
    border-color: rgba(245,200,66,0.30);
    box-shadow: 0 4px 24px rgba(245,200,66,0.08);
}
.light .novice-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.12), 0 0 40px rgba(245,200,66,0.15); }
.light .voice-card-center { background: linear-gradient(135deg, rgba(254,249,236,0.95), rgba(245,200,66,0.10)); }
.light .voice-card-side { background: rgba(255,255,255,0.9); border-color: rgba(245,200,66,0.25); }
.light .section-heaven { background: radial-gradient(ellipse at 50% 0%, rgba(245,200,66,0.10) 0%, rgba(255,255,255,0) 60%), #ffffff; }
.light .section-heaven-alt { background: radial-gradient(ellipse at 50% 100%, rgba(245,200,66,0.08) 0%, rgba(249,250,251,0) 60%), #f9fafb; }