/* SDDKUT Lightning UI — lightweight shared refinements */
:root {
    --ui-blue: #2563eb;
    --ui-blue-strong: #1d4ed8;
    --ui-blue-soft: #eff6ff;
    --ui-ink: #0f172a;
    --ui-muted: #64748b;
    --ui-line: rgba(148, 163, 184, .22);
    --ui-surface: rgba(255, 255, 255, .94);
    --ui-shadow: 0 14px 38px rgba(15, 23, 42, .09);
    --ui-shadow-hover: 0 18px 46px rgba(37, 99, 235, .13);
}

html {
    scroll-padding-top: 6rem;
    text-rendering: optimizeLegibility;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(219, 234, 254, .5), transparent 26rem),
        #f8fafc;
    color: #475569;
    padding-bottom: 92px;
}

::selection { background: #dbeafe; color: #1e3a8a; }

a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Stable, fast media rendering */
img {
    content-visibility: auto;
    background-color: #f1f5f9;
}
iframe { background: #f1f5f9; }

/* Keep below-the-fold sections cheap to lay out. */
main section:not(#home), main .section-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
}

/* Top navigation: crisp, compact and inexpensive. */
header { pointer-events: none; }
header nav {
    pointer-events: auto;
    background: rgba(255, 255, 255, .92) !important;
    border-color: rgba(148, 163, 184, .20) !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .07) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

header nav .nav-link {
    position: relative;
    transition: color .18s ease, background-color .18s ease, transform .18s ease !important;
}

header nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    opacity: 0;
    transform: translate(-50%, 5px) scaleX(.4);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}

header nav .nav-link:hover::after,
header nav .nav-link.active::after {
    opacity: 1;
    transform: translate(-50%, 0) scaleX(1);
}

header nav .group > div {
    border: 1px solid rgba(148, 163, 184, .15);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .12) !important;
}

/* Cleaner cards — no expensive glow or large jumping animation. */
.section-card,
.article-card,
.album-card {
    border-color: var(--ui-line) !important;
    box-shadow: var(--ui-shadow) !important;
}
.section-card {
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

@media (hover:hover) and (pointer:fine) {
    .section-card:hover,
    .article-card:hover,
    .album-card:hover {
        transform: translateY(-4px) !important;
        border-color: rgba(59, 130, 246, .24) !important;
        box-shadow: var(--ui-shadow-hover) !important;
    }
}

.section-title,
main h1,
main h2 {
    letter-spacing: -.025em;
    text-wrap: balance;
}
main p { text-wrap: pretty; }

/* Consistent sub-page hero treatment. */
main > section.relative.h-80,
main > section[class*="h-80"][class*="bg-cover"] {
    min-height: 19rem;
    height: min(38vh, 22rem) !important;
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.2);
}

.video-container,
.video-container iframe {
    border-radius: 1.25rem;
}
.video-container { overflow: hidden; box-shadow: var(--ui-shadow); }
.video-container iframe { loading: lazy; }

/* Lightweight entrance animation. */
.fade-in-up {
    transform: translateY(20px) !important;
    transition: opacity .48s ease, transform .48s cubic-bezier(.2,.8,.2,1) !important;
}
.fade-in-up.visible { transform: translateY(0) !important; }

/* Floating bottom navigation dock, centered on every screen. */
.nav-container {
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    width: min(calc(100% - 24px), 680px) !important;
    height: 68px !important;
    padding: 0 !important;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 55 !important;
}

.mobile-nav {
    pointer-events: auto;
    width: 100% !important;
    height: 68px !important;
    margin: 0 auto !important;
    padding: 6px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 14px 42px rgba(15, 23, 42, .14) !important;
    backdrop-filter: blur(12px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(155%) !important;
}

.mobile-nav .nav-item {
    --dock-accent: #2563eb;
    position: relative !important;
    isolation: isolate;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    max-width: 126px;
    height: 56px !important;
    padding: 7px 6px !important;
    border-radius: 16px;
    gap: 3px !important;
    overflow: hidden;
    color: #64748b !important;
    transform: translateZ(0);
    transition: color .18s ease, transform .18s ease !important;
}

.mobile-nav .nav-item::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: -1;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(219,234,254,.78), rgba(239,246,255,.94));
    opacity: 0;
    transform: scale(.84);
    transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.2,1);
}

.mobile-nav .nav-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 20px;
    height: 3px;
    border-radius: 999px;
    background: var(--dock-accent);
    opacity: 0;
    transform: translate(-50%, 5px) scaleX(.35);
    transition: opacity .18s ease, transform .24s cubic-bezier(.2,.9,.2,1);
}

.mobile-nav .nav-item .fas,
.mobile-nav .nav-item .fa-solid,
.mobile-nav .nav-item .fab {
    font-size: 1.22rem !important;
    line-height: 1;
    transition: transform .22s cubic-bezier(.2,.9,.2,1), color .18s ease !important;
}

.mobile-nav .nav-item .nav-text {
    font-size: .66rem !important;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.01em;
}

@media (hover:hover) and (pointer:fine) {
    .mobile-nav .nav-item:hover {
        color: var(--dock-accent) !important;
        transform: translateY(-2px) !important;
    }
    .mobile-nav .nav-item:hover::before { opacity: 1; transform: scale(1); }
    .mobile-nav .nav-item:hover::after { opacity: 1; transform: translate(-50%, 0) scaleX(1); }
    .mobile-nav .nav-item:hover .fas,
    .mobile-nav .nav-item:hover .fa-solid,
    .mobile-nav .nav-item:hover .fab { transform: translateY(-2px) scale(1.06); }
}

.mobile-nav .nav-item.active {
    color: var(--dock-accent) !important;
    transform: none !important;
    font-weight: 700;
}
.mobile-nav .nav-item.active::before { opacity: 1; transform: scale(1); }
.mobile-nav .nav-item.active::after { opacity: 1; transform: translate(-50%, 0) scaleX(1); }

footer { padding-bottom: 6.5rem !important; }

/* Small screen precision. */
@media (max-width: 767px) {
    body { padding-bottom: 88px; }
    header { height: 74px !important; padding: 7px !important; }
    header nav { border-radius: 18px !important; padding-inline: 14px !important; }
    #mobile-menu { top: 74px !important; height: calc(100vh - 74px) !important; }
    .nav-container { bottom: 10px !important; width: min(calc(100% - 16px), 600px) !important; }
    .mobile-nav { border-radius: 20px !important; }
    .mobile-nav .nav-item { border-radius: 14px; padding-inline: 3px !important; }
    .mobile-nav .nav-item .nav-text { font-size: .61rem !important; }
    main .container { padding-left: 1rem !important; padding-right: 1rem !important; }
    .section-card { border-radius: 1.25rem !important; }
    main > section.relative.h-80,
    main > section[class*="h-80"][class*="bg-cover"] { border-radius: 0 0 1.5rem 1.5rem; }
}

@media (max-width: 390px) {
    .mobile-nav .nav-item .nav-text { font-size: .56rem !important; }
    .mobile-nav .nav-item .fas,
    .mobile-nav .nav-item .fa-solid,
    .mobile-nav .nav-item .fab { font-size: 1.08rem !important; }
}

/* Utility compatibility absent from Tailwind core build. */
.prose { color: #475569; max-width: 65ch; }
.prose p { margin: .9em 0; }
.prose h2, .prose h3 { margin: 1.35em 0 .55em; color: #1e3a8a; font-weight: 750; }
.prose ul, .prose ol { margin: .9em 0; padding-left: 1.35rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.form-checkbox { width: 1rem; height: 1rem; accent-color: #2563eb; }

/* Never animate more than the user asked for. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Profile timeline: precise one-column flow on phones. */
@media (max-width: 767px) {
    .timeline-item {
        display: grid !important;
        grid-template-columns: 3rem minmax(0, 1fr);
        column-gap: .9rem;
        align-items: start !important;
        position: relative;
        margin-bottom: 1rem !important;
    }
    .timeline-item > .w-5\/12:empty { display: none !important; }
    .timeline-item > .w-12.h-12 {
        grid-column: 1;
        grid-row: 1;
        width: 3rem !important;
        height: 3rem !important;
        margin: 0 !important;
    }
    .timeline-item > .w-5\/12:not(:empty) {
        grid-column: 2;
        grid-row: 1;
        width: 100% !important;
        padding: 1rem !important;
        box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
    }
    .timeline-item.flex-row-reverse { flex-direction: row !important; }
    .relative.max-w-2xl.mx-auto > .border-l-4.absolute {
        left: 1.5rem !important;
        transform: translateX(-50%) !important;
    }
}