/* assets/css/main.css — Luminous Sanctuary design system */

:root {
    --paper: #F7F3EC;
    --paper-2: #FBF8F1;
    --ink: #1C1815;
    --ink-soft: #5B524A;
    --ink-faint: #8C8378;
    --gold: #A8761F;
    --gold-light: #C79A4B;
    --gold-soft: #E8D7AE;
    --indigo: #222A40;
    --indigo-soft: #2E3850;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: 'Newsreader', serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5 { font-family: 'Fraunces', serif; margin: 0; }
img { max-width: 100%; display: block; }

/* Scrollbars */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Warm glass */
.glass {
    background: rgba(255, 253, 249, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 40px rgba(70, 55, 30, 0.06);
}
.glass-heavy {
    background: rgba(255, 253, 249, 0.92);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 18px 50px rgba(70, 55, 30, 0.12);
}

/* Candlelight ambient */
.ambient {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(199, 154, 75, 0.10), transparent 70%),
        radial-gradient(40% 40% at 85% 60%, rgba(168, 118, 31, 0.05), transparent 70%);
}

/* Reveals */
.reveal { opacity: 0; transform: translateY(36px); transition: all 1.1s cubic-bezier(0.22,0.61,0.36,1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Bilingual */
.bilingual-ta {
    font-family: 'Noto Sans Tamil', sans-serif;
    color: var(--ink-soft);
    font-size: 0.42em; font-weight: 500; letter-spacing: 0.01em;
    display: block; margin-top: 0.6rem; line-height: 1.4;
}
.eyebrow { letter-spacing: 0.22em; text-transform: uppercase; font-family: 'Noto Sans Tamil', sans-serif; font-size: 11px; font-weight: 600; }

/* Card hover */
.app-card { transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.6s ease; }
.app-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(70,55,30,0.18); }

/* Gold link */
.goldline { position: relative; }
.goldline::after { content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold); transition: width .4s ease; }
.goldline:hover::after { width:100%; }

/* Modals */
body.modal-open { overflow: hidden; }
.overlay { opacity: 0; visibility: hidden; transition: all 0.45s cubic-bezier(0.22,0.61,0.36,1); }
.overlay.active { opacity: 1; visibility: visible; }
.modal-content { transform: scale(0.96) translateY(20px); opacity: 0; transition: all 0.5s cubic-bezier(0.22,0.61,0.36,1); }
.overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }

/* Mobile menu */
#mobileMenu { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.45s cubic-bezier(0.22,0.61,0.36,1); }
#mobileMenu.active { max-height: 520px; opacity: 1; margin-top: 1rem; }

/* Lamp helper */
.lamp-btn {
    background: var(--ink);
    box-shadow: 0 8px 24px rgba(28,24,21,0.35), 0 0 0 6px rgba(199,154,75,0.08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.lamp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(28,24,21,0.4), 0 0 0 8px rgba(199,154,75,0.14); }

/* Drop cap */
.drop-cap::first-letter {
    font-family: 'Fraunces', serif; font-size: 3.6rem; line-height: 0.8;
    float: left; margin: 0.1rem 0.6rem 0 0; color: var(--gold); font-weight: 500;
}

::selection { background: rgba(199,154,75,0.28); color: var(--ink); }

/* Scroll-spy active nav state */
.nav-link.is-active { color: var(--gold) !important; background: rgba(168, 118, 31, 0.08); }

/* Share buttons */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 14px;
    background: white; color: var(--ink-soft); border: 1px solid rgba(0,0,0,0.06);
    transition: transform .2s ease, color .2s ease, background .2s ease;
    cursor: pointer;
}
.share-btn:hover { transform: translateY(-2px); color: var(--ink); background: var(--paper); }
.share-btn svg { width: 16px; height: 16px; }
.share-btn.fb:hover { color: #1877F2; }
.share-btn.wa:hover { color: #25D366; }
.share-btn.x:hover { color: #000; }
.share-btn.li:hover { color: #0A66C2; }
.share-btn.ig:hover { color: #E1306C; }
.share-btn.yt:hover { color: #FF0000; }
.share-btn.copy:hover { color: var(--gold); }

/* Social squircles (footer) */
.social-tile {
    width: 56px; height: 56px; border-radius: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: white;
    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.social-tile svg { width: 22px; height: 22px; }
.social-tile:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 28px rgba(199,154,75,0.18); }
.social-tile.fb:hover { background: linear-gradient(135deg, #1877F2, #0a4ec6); }
.social-tile.ig:hover { background: linear-gradient(135deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF 80%, #4F5BD5); }
.social-tile.yt:hover { background: linear-gradient(135deg, #FF0000, #b30000); }
.social-tile.x:hover  { background: linear-gradient(135deg, #1a1a1a, #000); }
.social-tile.li:hover { background: linear-gradient(135deg, #0A66C2, #064f8e); }

/* Pretty toast */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--ink); color: white; padding: 12px 20px; border-radius: 999px; font-size: 13px; z-index: 9999; transition: transform .35s ease; box-shadow: 0 12px 30px rgba(0,0,0,0.25); }
#toast.show { transform: translateX(-50%) translateY(0); }

/* Birthday confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.confetti-piece { position: absolute; width: 10px; height: 14px; top: -20px; opacity: 0.9; animation: confetti-fall linear forwards; border-radius: 2px; }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0.7; } }

/* Empty-state intentional layout */
.intentional-empty {
    background: linear-gradient(135deg, #FBF6EA 0%, #F6EAD2 100%);
    border: 1px dashed rgba(168, 118, 31, 0.3);
    border-radius: 2rem;
}

/* Line clamp utility */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Member portal: lively feed */
.feed-item { border-radius: 1.5rem; padding: 1.5rem; background: white; border: 1px solid rgba(0,0,0,0.05); transition: transform .3s ease, box-shadow .3s ease; }
.feed-item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(70,55,30,0.08); }
.feed-item.pinned { background: linear-gradient(135deg, #FBF6EA, #F8EFD9); border-color: rgba(168, 118, 31, 0.25); }
.feed-item .pin { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }

/* Print-safe */
@media print { .ambient, nav, footer, .lamp-btn, #toast { display: none !important; } }