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

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ---- Block 1 (originally inline in <body>) ---- */
@keyframes zoomOut {
    0% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ---- Block 2 (originally inline in <body>) ---- */
.creation-gallery-section * {
    font-family: 'Poppins', sans-serif;
}
@media (max-width: 767px) {
    #journey-gallery {
        height: 200px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    #journey-gallery::-webkit-scrollbar {
        display: none;
    }
    #journey-gallery > div {
        height: 200px !important;
        min-width: 220px !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        width: 220px !important;
    }
}

/* ---- Block 3 (originally inline in <body>) ---- */
/* ---- VocaTalk Premium Chat Styling ---- */
#vocatalk { position: relative; }
.vt-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 999px; padding: 6px 16px;
    font-size: 10px; font-weight: 900; letter-spacing: .18em;
    text-transform: uppercase; color: #60a5fa; margin-bottom: 1.5rem;
}
.vt-badge .live-dot {
    width: 8px; height: 8px; background: #3b82f6;
    border-radius: 50%; animation: livePulse 1.4s infinite;
}
@keyframes livePulse {
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.4; transform:scale(1.5); }
}

/* Animations */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-scaleIn {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Custom scrollbars */
#vtMessagesArea::-webkit-scrollbar,
#vtRoomsList::-webkit-scrollbar,
#vtProfilesList::-webkit-scrollbar,
#terms-content::-webkit-scrollbar {
    width: 6px;
}
#vtMessagesArea::-webkit-scrollbar-thumb,
#vtRoomsList::-webkit-scrollbar-thumb,
#vtProfilesList::-webkit-scrollbar-thumb,
#terms-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
}
#vtMessagesArea::-webkit-scrollbar-thumb:hover,
#vtRoomsList::-webkit-scrollbar-thumb:hover,
#vtProfilesList::-webkit-scrollbar-thumb:hover,
#terms-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Conversational bubble styling */
.msg-bubble-own {
    border-radius: 20px 20px 4px 20px;
}
.msg-bubble-reply {
    border-radius: 20px 20px 20px 4px;
}

/* Glassmorphic panels */
.glass-panel {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Block 4 (originally inline in <body>) ---- */
.section-blue-heaven {
    background: radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.08) 0%, rgba(9, 9, 11, 0) 70%),
                linear-gradient(180deg, #09090b 0%, #111827 100%);
}
.blue-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: blue-shimmer 6s ease-in-out infinite;
}
.blue-orb-1 { width: 600px; height: 600px; background: radial-gradient(ellipse, rgba(56, 189, 248, 0.08), transparent 70%); top: -150px; right: -100px; }
.blue-orb-2 { width: 500px; height: 500px; background: radial-gradient(ellipse, rgba(37, 99, 235, 0.06), transparent 70%); bottom: -150px; left: -100px; animation-delay: 3s; }
.blue-light-beam {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, rgba(56, 189, 248, 0.0), rgba(56, 189, 248, 0.25) 40%, rgba(56, 189, 248, 0.0));
    animation: blue-beam 5s ease-in-out infinite;
    pointer-events: none;
}
.team-card {
    background: rgba(17, 24, 39, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.15);
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card:hover {
    transform: translateY(-8px);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(56, 189, 248, 0.1);
}
@keyframes blue-shimmer {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.05); }
}
@keyframes blue-beam {
    0%   { opacity: 0.05; }
    50%  { opacity: 0.15; }
    100% { opacity: 0.05; }
}

/* ---- Block 5 (originally inline in <body>) ---- */
/* Voices & Reflections Styles */
.section-heaven-alt {
    background: radial-gradient(ellipse at 50% 100%, rgba(245,200,66,0.05) 0%, rgba(24,24,27,0) 60%),
                #18181b;
}
.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-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;
}
.gold-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245,200,66,0.4), transparent);
}
.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);
}
@keyframes shimmer-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.08); }
}
@keyframes light-beam {
    0%   { opacity: 0.06; }
    50%  { opacity: 0.14; }
    100% { opacity: 0.06; }
}
@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); }
}
.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-alt { background: radial-gradient(ellipse at 50% 100%, rgba(245,200,66,0.08) 0%, rgba(249,250,251,0) 60%), #f9fafb; }