/* Sonic Canvas Design System - Static Site Styles */

/* Material Symbols configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glass panel effect */
.glass-panel {
    background: rgba(38, 38, 38, 0.6);
    backdrop-filter: blur(40px);
}

/* Sonic gradient (subtle green top glow) */
.sonic-gradient {
    background: linear-gradient(180deg, rgba(87, 254, 129, 0.1) 0%, rgba(14, 14, 14, 0) 100%);
}

/* Text label caps utility */
.text-label-caps {
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 700;
    font-size: 0.75rem;
}

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

/* Custom scrollbar for body */
body::-webkit-scrollbar {
    width: 8px;
}
body::-webkit-scrollbar-track {
    background: #0e0e0e;
}
body::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 10px;
}

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

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ── Page Title & Section Animations (global — auto-applied by main.js) ── */
.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.anim-fade-up.visible { opacity: 1; transform: translateY(0); }

.anim-fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.anim-fade-left.visible { opacity: 1; transform: translateX(0); }

.anim-scale-in {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-scale-in.visible { opacity: 1; transform: scale(1); }

/* badge shimmer */
.anim-badge {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.anim-badge.visible { opacity: 1; transform: translateY(0); }

/* underline draw on h1 */
.anim-h1-underline {
    position: relative;
    display: inline-block;
}
.anim-h1-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #57fe81, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(.16,1,.3,1) 0.4s;
}
.anim-h1-underline.visible::after { transform: scaleX(1); }

/* breadcrumb slide */
.anim-breadcrumb {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.anim-breadcrumb.visible { opacity: 1; transform: translateX(0); }

/* prose content fade */
.anim-prose {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.anim-prose.visible { opacity: 1; transform: translateY(0); }

/* hub cards stagger */
.anim-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.anim-stagger.visible > * { opacity: 1; transform: translateY(0); }
.anim-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.anim-stagger.visible > *:nth-child(2) { transition-delay: .07s; }
.anim-stagger.visible > *:nth-child(3) { transition-delay: .14s; }
.anim-stagger.visible > *:nth-child(4) { transition-delay: .21s; }
.anim-stagger.visible > *:nth-child(5) { transition-delay: .28s; }
.anim-stagger.visible > *:nth-child(6) { transition-delay: .35s; }
.anim-stagger.visible > *:nth-child(7) { transition-delay: .42s; }
.anim-stagger.visible > *:nth-child(8) { transition-delay: .49s; }

/* related papers section */
.anim-papers {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}
.anim-papers.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive / reduced-motion safety ──
   On mobile or when the user prefers reduced motion, show all content
   statically (opacity:1, no transform). This removes any risk of
   permanently-invisible text and of horizontal overflow caused by the
   reveal transforms (translateX/translateY) on small screens. Desktop
   keeps the scroll-reveal animations (with the JS fail-safe backstop). */
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
    .anim-fade-up, .anim-fade-left, .anim-scale-in, .anim-badge,
    .anim-h1-underline, .anim-breadcrumb, .anim-prose, .anim-papers,
    .anim-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .anim-h1-underline::after { transform: scaleX(1) !important; }
}

/* Guard against accidental horizontal scrolling on small screens */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
}

/* TOC active link */
#toc-nav a.active {
    color: #57fe81;
    border-left-color: #57fe81;
}
#toc-nav a {
    display: block;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 2px solid transparent;
    color: #adaaaa;
    transition: all 0.2s;
    font-size: 0.875rem;
}
#toc-nav a:hover {
    color: #ffffff;
}