/* ==============================================================
   scrollflow.css
   Converts the old full-page snap-scroll layout into a continuous
   scroll experience: the hero is pinned and its captions/background
   crossfade as you scroll through it, then normal sections follow
   in document flow with a scroll-reveal on each.
   Loaded after style.css — rules here intentionally win.
   ============================================================== */

html {
    scroll-behavior: smooth;
}

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

body {
    overflow-x: hidden;
    background-color: #2A2320;
}

/* Warm the light sections slightly (was flat #eee) to sit better
   alongside the new terracotta accent and headshot's warm tones. */
.light-bg {
    background-color: #FFFFFF;
}

/* Warm the dark sections too (was a cold grey-green, #4a504f) so
   Startup / Performing Arts read as part of the same warm palette
   instead of clashing with it. */
.dark-bg {
    background-color: #2A2320;
}

.about-photo {
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

/* ---- Fix year-badge + title layout for long titles ----
   The original template's .period/.title{display:inline-block} works
   fine for short one-line titles (performing arts) but breaks for long
   publication titles: the whole title drops below the badge instead of
   wrapping beside it. Floating the badge lets the title's first line
   wrap around it, then continue full-width (flush left) on later lines. */
.exp-list .details > .title {
    display: flex;
    align-items: center;
}

.exp-list .details > .title::after {
    display: none;
    content: none;
}

.exp-list .details > .title .period {
    flex: 0 0 auto;
    margin-right: 12px;
    display: flex;
    align-items: center;
    align-self: center;
}

.exp-list .details > .title .period span {
    padding: 10px 10px;
    line-height: 1.2;
    display: inline-block;
}

.exp-list .details > .title h3.title {
    display: block;
    margin: 0;
    flex: 1 1 0;
}

.exp-list .details .description {
    margin-top: 8px;
}

/* ---- Fix uneven gaps between publication/startup cards ----
   Bootstrap's .row/.col-md-6 are float-based: when one card is much
   taller than its neighbor (long academic titles vs short ones),
   floats don't pack cleanly and leave awkward gaps before the next
   card in that column. CSS Grid tracks real row heights instead. */
.exp-list.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    margin: 0;
}

.exp-list.row > li.col-md-6 {
    float: none;
    width: auto;
    padding: 0;
}

/* Bootstrap's .row uses ::before/::after for an old float-clearfix hack.
   Once .exp-list.row is display:grid, those generated pseudo-elements
   become real grid items (grid doesn't skip generated content), which
   shifts every actual card over by one slot. Remove them here. */
.exp-list.row::before,
.exp-list.row::after {
    display: none;
    content: none;
}

@media screen and (max-width: 768px) {
    .exp-list.row {
        grid-template-columns: 1fr;
    }
}

/* ---- Kill the old absolute/display:none page-per-section engine ---- */
#body-wrapper {
    height: auto !important;
    position: relative;
}

#body-wrapper section {
    position: relative !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

#body-wrapper section .inner-wrapper {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

#body-wrapper section .contain {
    padding-top: 110px !important;
    padding-bottom: 90px !important;
    box-sizing: border-box;
}

/* ---- Hero / #home: pinned while its scroll track passes ----
   NOTE: these selectors are prefixed with #body-wrapper so they win
   against the general #body-wrapper section / .inner-wrapper / .contain
   rules above — those use the same !important flag, so without the
   extra specificity here the general rules were silently winning and
   collapsing the hero to a single viewport (no scroll track, no pin). */
#body-wrapper #home {
    height: 280vh !important;
    min-height: 280vh;
}

#body-wrapper #home .inner-wrapper {
    position: sticky !important;
    top: 0;
    height: 100vh !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

#body-wrapper #home .contain,
#body-wrapper #home .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
    width: 100%;
}

#home #slider-container,
#home #bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#home #bg-slider div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#home #bg-slider div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#home #bg-slider div.bg-visible {
    opacity: 1;
}

#home-contents {
    margin-top: 0 !important;
    position: relative;
    z-index: 3;
}

#caption-carousel {
    position: relative;
    height: 90px;
    left: 0 !important;
    top: 0 !important;
    overflow: visible;
}

#caption-carousel .caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 0 !important;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

#caption-carousel .caption.caption-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll cue at the base of the hero */
.scroll-cue {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    color: #fff;
    font-family: "PT Sans Narrow", Helvetica, Verdana, Tahoma, sans-serif;
    font-size: 0.85em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.85;
    transition: opacity 0.4s ease;
}

.scroll-cue span {
    display: block;
    margin-top: 8px;
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, 0.6);
    margin-left: auto;
    margin-right: auto;
    animation: scrollCueMove 1.6s ease-in-out infinite;
}

@keyframes scrollCueMove {
    0% { transform: scaleY(0.3); opacity: 0.3; transform-origin: top; }
    50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
    100% { transform: scaleY(0.3); opacity: 0.3; transform-origin: bottom; }
}

#home.scrolled-past .scroll-cue {
    opacity: 0;
    pointer-events: none;
}

/* ---- Scroll-reveal for the rest of the page ----
   Scoped under html.js: if JavaScript never runs (and so never adds
   .in-view), content simply displays normally rather than staying
   invisible forever. */
.js .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.js .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

.js .reveal-stagger.in-view .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.js .reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-item,
    #caption-carousel .caption,
    #home #bg-slider div {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Stagger delays for items within a reveal-stagger group (publications, startup cards, performing-arts list) */
.reveal-stagger .reveal-item:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger .reveal-item:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger .reveal-item:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger .reveal-item:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger .reveal-item:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger .reveal-item:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger .reveal-item:nth-child(n+7) { transition-delay: 0.46s; }

/* ---- Preloader entrance: full purple screen collapses into the nav bar ---- */
#preloader {
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease 0.5s;
    overflow: hidden;
}

#preloader.preloader-collapse {
    height: 90px;
}

#preloader.preloader-hide {
    opacity: 0;
    pointer-events: none;
}

#text-load {
    transition: opacity 0.45s ease, transform 0.45s ease;
}

#load-overlay {
    transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

#preloader.preloader-reveal-text #load-overlay {
    width: 0%;
}

#preloader.preloader-collapse #text-load {
    opacity: 0;
    transform: translateY(-16px) scale(0.85);
}

/* ---- Simplified fixed top navigation ---- */
#nav-container {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 90px !important;
    background: #B5726A;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    z-index: 500;
}

.js #nav-container {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js #nav-container.nav-visible {
    opacity: 1;
    transform: translateY(0);
}

#nav-container ul {
    margin-top: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nav-container li {
    padding: 0;
    margin: 0 22px;
}

#nav-container li a {
    height: auto;
    line-height: normal;
    margin-top: 0;
    overflow: visible;
}

#nav-container li a span {
    position: static;
    display: inline-block;
}

#nav-container li a .top,
#nav-container li a .bottom {
    top: 0;
    color: #000;
}

#nav-container li a .bottom {
    display: none;
}

#nav-container li.active a .top,
#nav-container li.active a {
    color: #fff;
}

#nav-container li.active a {
    border-bottom: 1px solid #fff;
}

@media (max-width: 600px) {
    #nav-container li {
        margin: 0 12px;
    }
    #nav-container li a {
        font-size: 0.85em;
    }
}

/* ---- Contact form: restore visible field borders ----
   The inline styles on these inputs set border:0px, which was fine when
   the section had a colored background (the white fill alone read as a
   box), but now that .light-bg is plain white, a white input on a white
   section is invisible. !important is needed to beat the inline style. */
.contact-form input.requiredField,
.contact-form textarea.requiredField {
    border: 1px solid #ccc !important;
}

.contact-form input.requiredField:focus,
.contact-form textarea.requiredField:focus {
    border-color: #B5726A !important;
}

/* ==============================================================
   Mobile-only adjustments (<=768px)
   ============================================================== */

/* Hamburger toggle: hidden on desktop */
#nav-toggle {
    display: none;
}

@media screen and (max-width: 768px) {
    /* ---- 1. Hamburger menu instead of a wrapping nav row ---- */
    #nav-container {
        height: 64px !important;
    }

    #body-wrapper section .contain {
        padding-top: 84px !important;
    }

    #nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        position: absolute;
        top: 0;
        right: 18px;
        height: 100%;
        width: 32px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 2;
    }

    #nav-toggle span {
        display: block;
        width: 26px;
        height: 2px;
        background: #000;
        border-radius: 1px;
    }

    #nav-container #nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: #FFFFFF;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
    }

    #nav-container.nav-open #nav {
        display: flex;
    }

    #nav-container li {
        width: 100%;
        margin: 0;
        padding: 16px 0;
        text-align: center;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* The desktop active-state (white text/underline) was designed for
       the terracotta bar and is invisible on this white panel — use the
       accent color instead. */
    #nav-container li.active a,
    #nav-container li.active a .top {
        color: #B5726A;
    }

    #nav-container li.active a {
        border-bottom-color: #B5726A;
    }

    /* ---- 2. Breathing room under the About Me photo once it stacks ---- */
    #aboutMe img {
        margin-bottom: 28px;
    }

    /* ---- 3/4/5. Left-align Research / Startup / Performing Arts content
       (overrides the template's own `.exp-list{text-align:center}` rule
       set at this same breakpoint in style.css) ---- */
    .exp-list {
        text-align: left !important;
    }
}