/* SoulSight — shared custom CSS.
 * Hand-written (non-Tailwind) rules extracted from the inline <style> blocks
 * of index.html, story-hub.html, and story-detail.html. Tailwind (CDN) and the
 * per-page tailwind.config blocks are left inline and are NOT duplicated here.
 */

/* --- Base (from story-detail) ------------------------------------------- */
body {
    background-color: #f7fafb;
    color: #181c1d;
    scroll-behavior: smooth;
}

/* Material Symbols icon settings.
 * Merged: base weight/fill (all pages) + vertical-align (story-detail). */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* --- Forms (from index) ------------------------------------------------- */
/* Form overrides to match Design System */
input[type="email"]:focus {
    box-shadow: none;
}

/* --- Cards / hub (from story-hub) --------------------------------------- */
.claymorphism-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px 0 rgba(74, 102, 112, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.bubble-effect {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bubble-effect:hover {
    transform: scale(1.05) translateY(-4px);
}

/* --- Story reading experience (from story-detail) ----------------------- */
.hero-gradient {
    background: linear-gradient(to bottom, rgba(247, 250, 251, 0) 0%, rgba(247, 250, 251, 0.9) 80%, rgba(247, 250, 251, 1) 100%);
}

.fade-in {
    animation: fadeIn 1.2s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.reading-column {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.comic-frame {
    box-shadow: 0 10px 30px -10px rgba(50, 78, 88, 0.1);
}

.reading-stage {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}