/* Homepage: a compact introduction and a readable, connected career timeline. */
:root {
    --bg-gradient-1: #0e171b;
    --bg-gradient-2: #101d22;
    --bg-gradient-3: #132b30;
    --text-color: #edf3f2;
    --text-secondary: #a3b7b8;
    --accent: #7de2cc;
    --card-bg: rgba(23, 40, 45, 0.82);
    --card-border: #30474c;
    --name-gradient-1: #adf1de;
    --name-gradient-2: #6ccbbd;
}
[data-theme="light"] {
    --bg-gradient-1: #f6f7f2;
    --bg-gradient-2: #f1f5ef;
    --bg-gradient-3: #e6efea;
    --text-color: #173532;
    --text-secondary: #4e6762;
    --accent: #137566;
    --card-bg: rgba(255, 255, 255, 0.75);
    --card-border: #c9d9d2;
    --name-gradient-1: #167360;
    --name-gradient-2: #258c81;
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
.home-page { height: auto; overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.home-page .page-scroll { position: relative; inset: auto; overflow: visible; padding-top: 100px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.home-page #particles-canvas { display: block; z-index: 0; }
.home-page .top-nav-center { padding: 6px; gap: 4px; background: var(--card-bg); border-color: var(--card-border); }
.home-page .nav-btn { font-size: .85rem; padding: 10px 18px; letter-spacing: 0; }
.home-page .top-nav-right { top: 30px; }
.home-page .hero { min-height: 620px; padding: 120px 24px; isolation: isolate; overflow: hidden; }
.home-page .hero-content { position: relative; z-index: 1; max-width: 850px; }
.home-page .profile-picture-container {
    position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
    width: min(760px, 115vw) !important; height: min(680px, 105vw) !important;
    min-width: 0; min-height: 0; padding: 0; margin: 0; border-radius: 0;
    background: none; box-shadow: none; pointer-events: none; z-index: -1;
    -webkit-mask-image: radial-gradient(ellipse closest-side, #000 18%, #000b 40%, #0005 66%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side, #000 18%, #000b 40%, #0005 66%, transparent 100%);
}
.home-page .profile-picture-container:hover { transform: translate(-50%, -50%); box-shadow: none; }
.home-page .profile-picture {
    width: 100% !important; height: 100% !important; min-width: 0; min-height: 0;
    border-radius: 0; object-fit: cover; object-position: center 38%;
    filter: blur(2px) saturate(.65); opacity: .5082; background: none;
    transition: opacity .9s ease;
}
.home-page .hero-content { text-shadow: 0 2px 24px var(--bg-gradient-1); }
.home-page .hero .tagline { color: var(--text-color); }
[data-theme="light"] .home-page .profile-picture { opacity: .3146; }
.eyebrow { color: var(--accent); font-size: .7rem; font-weight: 650; letter-spacing: .2em; margin-bottom: 18px; }
.home-page .greeting { font-size: clamp(2.8rem, 7vw, 5.2rem); letter-spacing: -.055em; font-weight: 500; margin-bottom: 20px; }
.home-page .tagline { max-width: 590px; padding: 0; font-size: 1.12rem; line-height: 1.8; letter-spacing: 0; color: var(--text-secondary); background: none; border: none; box-shadow: none; backdrop-filter: none; }
.home-page .tagline strong { color: var(--text-color); font-weight: 500; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 32px; font-size: .87rem; }
.primary-link { padding: 13px 20px; background: var(--accent); color: var(--bg-gradient-1); border-radius: 8px; text-decoration: none; font-weight: 650; transition: transform .2s; }
.primary-link:hover { transform: translateY(-3px); }
.contact-link, .resume-more a { color: var(--accent); text-decoration: none; }
.contact-link:hover, .resume-more a:hover { text-decoration: underline; }
.experience-section, .home-page .favourites-on-landing { max-width: 1000px; margin: 0 auto; padding: 55px 32px 65px; }
.experience-section { scroll-margin-top: 10px; border-top: 1px solid var(--card-border); }
.section-heading { margin-bottom: 40px; }
.section-heading h2, .home-page .favourites-title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 550; letter-spacing: -.045em; margin-bottom: 12px; }
.section-heading > p:not(.eyebrow), .home-page .favourites-description { color: var(--text-secondary); line-height: 1.7; font-size: 1rem; }
.section-heading .interaction-hint { font-size: .78rem !important; margin-top: 14px; }
.experience-timeline { list-style: none; padding-left: 28px; position: relative; }
.experience-timeline::before { content: ''; position: absolute; top: 33px; bottom: 35px; left: 6px; width: 1px; background: var(--card-border); }
.timeline-item { position: relative; margin-bottom: 14px; }
.timeline-item::before { content: ''; position: absolute; left: -27px; top: 31px; width: 9px; height: 9px; border: 2px solid var(--accent); background: var(--bg-gradient-1); border-radius: 50%; }
.timeline-item:first-child::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.experience-card { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.experience-card[data-expanded="true"], .experience-card[open]:not([data-expanded]) { border-color: var(--accent); box-shadow: 0 12px 32px #0000000a; }
.experience-card summary { display: grid; grid-template-columns: 170px 1fr 20px; gap: 20px; align-items: start; padding: 25px; cursor: pointer; list-style: none; border-radius: 12px; }
.experience-card summary::-webkit-details-marker, .resume-more summary::-webkit-details-marker { display: none; }
.role-date { color: var(--text-secondary); font-size: .76rem; line-height: 1.8; padding-top: 2px; }
.role-heading { display: flex; flex-direction: column; gap: 7px; }
.company { font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }
.role-title { font-size: .85rem; color: var(--text-secondary); line-height: 1.5; }
.role-indicator { color: var(--accent); font-size: 1.3rem; line-height: 1; transition: transform .38s cubic-bezier(.22, 1, .36, 1); }
.experience-card[data-expanded="true"] .role-indicator, .experience-card[open]:not([data-expanded]) .role-indicator { transform: rotate(45deg); }
.role-details { padding: 0 32px 26px 215px; }
.role-location { color: var(--accent); font-size: .75rem; margin-bottom: 16px; }
.role-details ul { padding-left: 16px; color: var(--text-secondary); font-size: .87rem; line-height: 1.8; }
.role-details li { padding-left: 4px; margin-bottom: 10px; }
.role-details li:last-child { margin-bottom: 0; }
.role-details li::marker { color: var(--accent); }
.resume-more { margin: 30px 0 0 28px; border-block: 1px solid var(--card-border); }
.resume-more summary { list-style: none; padding: 22px 0; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; font-weight: 550; }
.resume-more summary span { color: var(--text-secondary); font-size: .8rem; font-weight: 400; }
.resume-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 45px; padding: 10px 0 30px; }
.resume-grid h3 { margin-bottom: 16px; font-size: .95rem; }
.resume-grid p, .skills-list { font-size: .84rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 16px; }
.resume-grid strong { color: var(--text-color); font-weight: 500; }
.skills-list dt { color: var(--text-color); font-weight: 500; }
.skills-list dd { margin-bottom: 10px; }
.home-page .favourites-on-landing { border-top: 1px solid var(--card-border); }
.home-page .favourites-header { text-align: left; margin-bottom: 30px; }
.home-page .favourites-description { margin: 0; }
.home-page .search-container { margin-left: 0; max-width: 100%; }
.home-page .tags-sidebar { width: 215px; }
.home-page .social-links { position: fixed; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 200; width: fit-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 16px; gap: 12px; background: var(--card-bg); border-color: var(--card-border); }
.home-page .social-link { width: 44px; height: 44px; }
.home-page .social-link svg { width: 20px; height: 20px; }
.home-page .slider, .home-page .theme-switch:hover .slider, .home-page input:checked + .slider { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: none; }
.home-page .slider::before, .home-page input:checked + .slider::before { background: var(--accent); box-shadow: none; }
:focus-visible { outline: 2px solid var(--accent, #7de2cc); outline-offset: 5px; }
.theme-switch input:focus-visible + .slider { outline: 2px solid var(--accent, #7de2cc); outline-offset: 5px; }
@media (max-width: 680px) {
    .home-page .top-nav-center { left: 16px; transform: none; max-width: calc(100% - 110px); }
    .home-page .top-nav-right { top: 24px; right: 16px; }
    .home-page .nav-btn { padding: 10px 12px; font-size: .8rem; }
    .home-page .hero { min-height: 550px; padding: 100px 24px; }
    .home-page .profile-picture-container { width: 125vw !important; height: 570px !important; }
    .hero-actions { gap: 18px; font-size: .8rem; flex-wrap: wrap; }
    .experience-section, .home-page .favourites-on-landing { padding: 40px 20px; }
    .experience-timeline { padding-left: 23px; }
    .experience-timeline::before { left: 4px; }
    .timeline-item::before { left: -23px; }
    .experience-card summary { grid-template-columns: 1fr 16px; gap: 10px; padding: 20px; }
    .role-date { grid-column: 1; }
    .role-heading { grid-column: 1; }
    .role-indicator { grid-column: 2; grid-row: 1 / 3; align-self: center; }
    .role-details { padding: 0 20px 22px; }
    .resume-more { margin-left: 23px; }
    .resume-more summary { flex-direction: column; gap: 8px; }
    .resume-grid { grid-template-columns: 1fr; gap: 20px; }
    .home-page .favourites-layout { flex-direction: column; }
    .home-page .favourites-sections, .home-page .tags-sidebar { width: 100%; }
    .home-page .tags-sidebar { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    html, .page-scroll { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Keep section navigation available without crowding the theme switch. */
.home-page .top-nav-center { flex-wrap: nowrap; }
.home-page .nav-btn { white-space: nowrap; }
.projects-on-landing { max-width: 1000px; margin: 0 auto; padding: 55px 32px 65px; border-top: 1px solid var(--card-border); }
.home-page .project-item-page { background: var(--card-bg); border-color: var(--card-border); }
.home-page .project-header-page { background: transparent; text-align: left; gap: 20px; font-family: inherit; }
.home-page .project-header-page:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.home-page .project-desc-page { color: var(--text-secondary); opacity: 1; line-height: 1.6; }
.home-page .project-info { min-width: 0; }
.home-page .project-content-page { visibility: hidden; }
.home-page .project-item-page.active .project-content-page { visibility: visible; }
.home-page .readme-content { overflow-wrap: anywhere; }
.home-page .readme-content pre { overflow-x: auto; }
.home-page .project-links-page { flex-wrap: wrap; }

/* Video cards need room for the player and complete, comfortably sized titles. */
.home-page .favourites-on-landing { max-width: 1500px; }
.home-page .favourites-on-landing .fav-items-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    max-width: none; margin: 0; gap: 24px;
}
.home-page .video-card { min-width: 0; }
.home-page .video-thumbnail { aspect-ratio: 16 / 9; padding-top: 0; }
.home-page .video-info { padding: 20px; }
.home-page .video-title { font-size: 1.1rem; line-height: 1.6; letter-spacing: normal; font-weight: 600; overflow-wrap: anywhere; }
.home-page .video-tag { font-size: .875rem; line-height: 1.5; padding: 7px 11px; }
.home-page .fav-section-icon { flex-shrink: 0; width: 44px; height: 44px; }
.home-page .fav-section-icon svg { width: 28px; height: 28px; }
.home-page .fav-section.expanded .fav-section-content { max-height: none; }
@media (max-width: 1050px) {
    .home-page .favourites-layout { flex-direction: column; }
    .home-page .favourites-sections, .home-page .tags-sidebar { width: 100%; }
    .home-page .tags-sidebar { position: static; max-height: none; }
    .home-page .tags-list { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 680px) {
    .projects-on-landing { padding: 40px 20px; }
    .home-page .favourites-on-landing { padding-inline: 12px; }
    .home-page .fav-section-content, .home-page .fav-section.expanded .fav-section-content { padding-inline: 10px; }
    .home-page .favourites-on-landing .fav-items-grid { grid-template-columns: minmax(0, 1fr); }
    .home-page .video-info { padding: 16px; }
    .home-page .video-title { font-size: 1.0625rem; }
    .home-page .search-input { font-size: 1rem; }
    .home-page .top-nav-center {
        top: 12px; left: 12px; right: 12px; max-width: none; width: auto;
        padding: 4px; gap: 0; justify-content: space-evenly;
    }
    .home-page .nav-btn { font-size: .8rem; padding: 10px 8px; }
    .home-page .top-nav-right { top: 74px; right: 14px; }
    .home-page .social-links { gap: 6px; padding: 6px 10px; }
}

/* Crossfade the sky; gradients themselves cannot interpolate smoothly. */
.home-page::before {
    background: linear-gradient(135deg, #0e171b 0%, #101d22 50%, #132b30 100%);
    transition: none;
}
.home-page::after {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(135deg, #f6f7f2 0%, #f1f5ef 50%, #e6efea 100%);
    opacity: 0; transition: opacity 1s ease;
}
[data-theme="light"] .home-page::after { opacity: 1; }
.home-page .experience-card, .home-page .fav-section,
.home-page .project-item-page, .home-page .tags-sidebar,
.home-page .top-nav-center, .home-page .social-links {
    transition: background-color .9s ease, border-color .6s ease, color .6s ease, box-shadow .3s ease;
}
.celestial-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.celestial-body {
    position: absolute; top: 26%; width: clamp(100px, 12vw, 180px); aspect-ratio: 1;
    border-radius: 50%; opacity: 0;
    transition: transform 1.25s cubic-bezier(.22, 1, .36, 1), opacity .9s ease;
}
.celestial-sun {
    right: max(clamp(24px, 4vw, 64px), env(safe-area-inset-right));
    background: radial-gradient(circle at 38% 35%, #fff5bd 0%, #ffdc75 45%, #f5ad44 100%);
    box-shadow: 0 0 40px 12px #ffc76566, 0 0 100px 40px #ffca4926;
    transform: translateX(calc(100% + 140px)) rotate(25deg);
}
.celestial-moon {
    left: max(clamp(24px, 4vw, 64px), env(safe-area-inset-left));
    transform: translateX(calc(-100% - 140px)) rotate(-25deg);
    filter: drop-shadow(0 0 15px #c9e6ff77) drop-shadow(0 0 42px #a7d2ec44);
}
.celestial-moon::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 28% 65%, #f2f8ff, #b7d4e7);
    -webkit-mask-image: radial-gradient(circle at 68% 30%, transparent 44%, #000 45%);
    mask-image: radial-gradient(circle at 68% 30%, transparent 44%, #000 45%);
}
:root:not([data-theme="light"]) .celestial-moon,
[data-theme="light"] .celestial-sun { transform: translateX(0) rotate(0); opacity: .85; }
@media (max-width: 680px) {
    .celestial-body { top: clamp(140px, 23vh, 185px); width: clamp(64px, 18vw, 84px); }
    .celestial-sun { right: max(16px, env(safe-area-inset-right)); }
    .celestial-moon { left: max(16px, env(safe-area-inset-left)); }
}
@media (prefers-reduced-motion: reduce) {
    .celestial-body, .home-page::after, .home-page .profile-picture { transition: none; }
}