/* ============================================================
   RAYMOND SELORM TORMETI — LIGHT EDITORIAL PORTFOLIO
   Minimal base stylesheet: variables, scrollbar, effect
   primitives, and print-to-PDF rules. All layout is Tailwind.
   ============================================================ */

:root {
    --bg: #FBFBFA;
    --bg-raised: #F4F4F2;
    --bg-card: #FFFFFF;
    --border: #E4E3DF;
    --border-soft: #EDECE8;
    --ink: #111110;
    --ink-muted: #5C5A55;
    --ink-faint: #8A877F;
    --accent: #1C1C1A;
    --accent-soft: rgba(28, 28, 26, 0.06);
    --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------------- Fixed navigation surface ----------------
   Solid, near-opaque off-white bar with a frosted-glass read:
   scrolling content never bleeds through. */

.site-nav {
    background: rgba(251, 251, 250, 0.96);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 0 rgba(17, 17, 16, 0.04);
}

#nav-drawer {
    background: var(--bg);
}

.brand-logo {
    color: #111110;
    letter-spacing: 0.04em;
}

.font-serif-display {
    font-family: var(--font-display);
}

::selection {
    background: #111110;
    color: #FBFBFA;
}

/* ---------------- Custom scrollbar ---------------- */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #FBFBFA;
}

::-webkit-scrollbar-thumb {
    background: #D6D4CF;
    border-radius: 5px;
    border: 2px solid #FBFBFA;
}

::-webkit-scrollbar-thumb:hover {
    background: #B9B6AF;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #D6D4CF #FBFBFA;
}

/* ---------------- Caret for typing effect ---------------- */

.type-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 4px;
    background: #111110;
    vertical-align: -0.12em;
    animation: caret-blink 1.05s step-end infinite;
}

@keyframes caret-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ---------------- Contact section ---------------- */

/* Asymmetric 12-column bento: channels take 7, socials take 5,
   collapsing to a single column below the lg breakpoint. */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .contact-grid > div:first-child {
        grid-column: span 7;
    }

    .contact-grid > div:last-child {
        grid-column: span 5;
    }
}

/* Channel card: thin ink rule that draws itself on hover. */
.channel-card {
    position: relative;
    overflow: hidden;
}

.channel-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #111110, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.channel-card:hover::after,
.channel-card:focus-visible::after {
    transform: scaleX(1);
}

/* Xolace card: quiet warmth for the peer-support role,
   a soft heart-toned border tint on hover, nothing loud. */
.xolace-card:hover {
    border-color: rgba(28, 28, 26, 0.45);
}

/* Social tiles: icon nudges toward the label on hover. */
.social-tile i {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.social-tile:hover i {
    transform: translateY(-2px);
}

/* Card hover elevation tuned for light surfaces. */
.project-card:hover,
.channel-card:hover,
.social-tile:hover,
#journey article:hover {
    box-shadow: 0 14px 34px rgba(17, 17, 16, 0.08);
}

/* ---------------- Scroll reveal primitives ---------------- */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .type-caret {
        animation: none;
    }
}

/* ============================================================
   PRINT-TO-PDF — clean editorial document output
   ============================================================ */

@media print {
    :root {
        --bg: #ffffff;
        --bg-raised: #ffffff;
        --bg-card: #ffffff;
        --border: #d4d4d4;
        --border-soft: #e5e5e5;
        --ink: #111111;
        --ink-muted: #333333;
        --ink-faint: #555555;
        --accent: #111111;
        --accent-soft: transparent;
    }

    @page {
        margin: 16mm 14mm;
    }

    body {
        background: #ffffff !important;
        color: #111111 !important;
        font-size: 10.5pt;
    }

    .no-print,
    .site-nav,
    .type-caret,
    .hero-actions,
    .pulse-dot {
        display: none !important;
    }

    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        animation: none !important;
        transition: none !important;
        color: #111111 !important;
    }

    section {
        break-inside: avoid;
        page-break-inside: avoid;
        padding-top: 10pt !important;
        padding-bottom: 10pt !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    a {
        text-decoration: none !important;
    }

    a[href^="http"]::after,
    a[href^="mailto"]::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #333333;
    }
}