:root {
    --bg: #0b0b0b;
}

html,
body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: #fff;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto;
}

.panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: all .36s ease;
    padding: 0;
    position: relative;
}

.panel.open {
    max-height: 800px;
    opacity: 1;
    transform: none;
    padding: 1rem;
}

/* TOC and hand visibility + motion tweaks */
.toc-item {
    transition: transform .22s ease, background .18s ease;
}

.toc-item:hover,
.toc-item:focus {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.08);
}

#toc-wrap .sticky {
    z-index: 40;
}

#picker-hand {
    transition: transform .32s cubic-bezier(.2, .9, .2, 1), left .22s linear, top .22s linear;
    z-index: 60;
}

/* TOC revealed state */
.toc-item.revealed {
    background: rgba(255, 255, 255, 0.12);
    font-weight: 600;
}

.toc-item.revealed:focus {
    outline: 2px solid rgba(99, 102, 241, 0.6);
}

.toc-item.revealed span {
    color: #7c3aed;
}

@media (prefers-reduced-motion: reduce) {

    .toc-item,
    #picker-hand {
        transition: none !important;
    }
}

.panel-close {
    position: absolute;
    right: .75rem;
    top: .5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: .2rem .5rem;
    border-radius: .375rem;
    cursor: pointer;
}

.panel-close:focus {
    outline: 2px solid rgba(99, 102, 241, 0.7);
}

/* Theme variable switch: set --bg by theme so base styles follow it */
html[data-theme="dark"] {
    --bg: #0b0b0b;
    color-scheme: dark;
}

html[data-theme="light"] {
    --bg: #ffffff;
    color-scheme: light;
}

html,
body {
    background: var(--bg);
}

/* Light theme small overrides for utility classes to improve contrast */
html[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.9);
    color: #0b0b0b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-theme="light"] .bg-white\/6 {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .bg-white\/5 {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .bg-white\/3 {
    background-color: rgba(15, 23, 42, 0.02) !important;
}

html[data-theme="light"] .text-gray-300 {
    color: #334155 !important;
}

html[data-theme="light"] .text-gray-200 {
    color: #475569 !important;
}

html[data-theme="light"] .text-gray-400 {
    color: #64748b !important;
}

html[data-theme="light"] .text-indigo-300 {
    color: #4f46e5 !important;
}

html[data-theme="light"] .ring-white\/10 {
    box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.04) !important;
}

html[data-theme="light"] footer {
    color: #475569;
}

html[data-theme="light"] .panel {
    background-color: rgba(15, 23, 42, 0.03);
}

html[data-theme="light"] .panel.open {
    background-color: rgba(15, 23, 42, 0.02);
}

/* Make any site text that was set to `text-white` readable on light background */
html[data-theme="light"] .text-white {
    color: #0b0b0b !important;
}

/* Preserve button/cta white text when button has an indigo background */
html[data-theme="light"] .bg-indigo-600,
html[data-theme="light"] .bg-indigo-600 * {
    color: #fff !important;
}

/* Preserve white text for green CTAs (WhatsApp) in light mode */
html[data-theme="light"] .bg-green-500,
html[data-theme="light"] .bg-green-500 * {
    color: #fff !important;
}

/* WhatsApp pill: badge + pulse animation */
#wa-chat.wa-pulse {
    animation: wa-pulse 2.6s ease-in-out infinite;
}

@keyframes wa-pulse {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 6px 18px rgba(16, 185, 129, 0.12);
    }

    50% {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 12px 28px rgba(16, 185, 129, 0.18);
    }

    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 6px 18px rgba(16, 185, 129, 0.12);
    }
}

#wa-chat:hover,
#wa-chat:focus {
    animation-play-state: paused;
}

.wa-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #ef4444;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* Stronger focus outlines for keyboard users */
a:focus-visible,
button:focus-visible,
.toc-item:focus-visible,
.panel-close:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.92);
    outline-offset: 3px;
    border-radius: .375rem;
}

#wa-chat:focus-visible {
    outline: 3px solid rgba(5, 150, 105, 0.95);
    outline-offset: 3px;
    border-radius: 9999px;
}

/* Ensure stronger contrast for CTAs in both themes */
#wa-chat {
    background-color: #059669 !important;
    /* green-600 */
}

html[data-theme="light"] .bg-indigo-600 {
    background-color: #4338ca !important;
    /* slightly darker indigo on light theme */
}

/* Hover states tuned for accessibility */
#wa-chat:hover {
    background-color: #047857 !important;
    /* green-700 */
}

/* Social icon sizing and spacing */
.social-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.social-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
}


/* Common elements explicitly dark on light theme */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] p,
html[data-theme="light"] a,
html[data-theme="light"] li,
html[data-theme="light"] label {
    color: #0b0b0b !important;
}

/* Timeline ribbon styles */
.ribbon-wrap {
    width: 100%;
    height: 120px;
    margin-top: -60px;
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .ribbon-wrap {
        margin-top: -8px;
    }
}

.ribbon-svg {
    width: 100%;
    height: 120px;
    display: block;
}

.ribbon-path {
    stroke: #fff;
    stroke-opacity: 0.06;
    stroke-width: 6;
    fill: none;
}

.ribbon-flow {
    stroke: #fff;
    stroke-opacity: 0.12;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 8 6;
}

/* Light mode ribbon color override so the line is visible on white background */
html[data-theme="light"] .ribbon-path {
    stroke: #0b0b0b !important;
    stroke-opacity: 0.08 !important;
}

html[data-theme="light"] .ribbon-flow {
    stroke: #0b0b0b !important;
    stroke-opacity: 0.12 !important;
}

.ribbon-node {
    fill: #fff;
    cursor: pointer;
    transition: transform .18s ease, fill .18s ease;
}

.ribbon-node:hover {
    transform: scale(1.25);
}

.ribbon-node.ribbon-active {
    fill: #7c3aed;
    transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
    .ribbon-flow {
        animation: none !important;
    }

    .ribbon-node {
        transition: none !important;
    }
}

@keyframes ribbon-dash {
    to {
        stroke-dashoffset: 1000;
    }
}

.ribbon-flow.animate {
    animation: ribbon-dash 6s linear infinite;
}

@keyframes node-bounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

.ribbon-bounce {
    transform-origin: center;
    animation: node-bounce 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ribbon-bounce {
        animation: none !important;
    }
}

/* On small screens, allow opened panels to grow to their content height
   so sections like Skills and Experience aren't cropped by a fixed max-height. */
@media (max-width: 768px) {
    .panel.open {
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
        transform: none !important;
        padding: 1rem;
    }

    /* keep closed panels collapsed, but don't animate layout to avoid jank */
    .panel {
        transition: none !important;
    }
}