/* One motion grammar: ink, momentum, and evidence coming into focus. */
.portfolio-home {
    --motion-arrival: cubic-bezier(.16, 1, .3, 1);
}
/* Progressive enhancement: the whole story remains visible without JavaScript. */
.portfolio-home [data-animate] { opacity: 1; translate: none; filter: none; transition: none; }
.portfolio-home .motion-pending { opacity: 0; }
.portfolio-home .hero-intro { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: #f7f5ef; pointer-events: none; }
.portfolio-home .hero-intro[hidden] { display: none; }
.portfolio-home .hero-intro-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.portfolio-home .hero-intro-mark img { width: 72px; height: 72px; }
.portfolio-home .hero-intro-mark svg { position: absolute; inset: 0; width: 120px; height: 120px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.portfolio-home .hero-video-bg { transform: translate3d(0, var(--hero-drift, 0px), 0) scale(1.065); }
.portfolio-home .hero-content { max-width: 46rem; }
.portfolio-home .hero-scroll-cue {
    position: absolute; bottom: 2.5rem; left: clamp(1.5rem, 4vw, 3rem); z-index: 3;
    display: flex; align-items: center; gap: 15px;
    font: 500 13px/1.4 var(--font-body); color: var(--accent-hover);
    text-decoration: none;
}
.hero-scroll-cue svg { width: 16px; height: 26px; transition: transform 240ms var(--motion-arrival); }
.hero-scroll-cue:hover svg, .hero-scroll-cue:focus-visible svg { transform: translateY(5px); }
.portfolio-home .hero-video-control { position: fixed; z-index: 1001; right: 20px; bottom: 20px; min-height: 40px; }
.portfolio-home .hero-cta-arrow { transition: transform 350ms var(--motion-arrival); }
.portfolio-home .hero-cta:hover .hero-cta-arrow, .portfolio-home .hero-cta:focus-visible .hero-cta-arrow { transform: translate(2px, -2px); }
.portfolio-home .header-nav a { position: relative; }
.portfolio-home .header-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--motion-arrival); }
.portfolio-home .header-nav a:hover::after, .portfolio-home .header-nav a:focus-visible::after { transform: scaleX(1); }
.portfolio-home .outcomes-section { position: relative; isolation: isolate; overflow: clip; }
.outcomes-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.portfolio-home .outcomes-inner { position: relative; }
.portfolio-home .outcome-value { font-variant-numeric: tabular-nums; }
.portfolio-home .work-case { position: relative; }
.portfolio-home .work-case::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 650ms var(--motion-arrival); }
.portfolio-home .work-case:hover::before, .portfolio-home .work-case:focus-within::before { transform: scaleX(1); }
.portfolio-home .work-visual { transition: background-color 400ms var(--motion-arrival); }
.portfolio-home .work-case:hover .work-visual--zebra { background-color: #e3eadf; }
.portfolio-home .work-case:hover .work-visual--veranex { background-color: #eee7ee; }
.portfolio-home .work-case:hover .work-visual--solo,
.portfolio-home .work-case:focus-within .work-visual--solo { background-color: #2e3e5c; }
/* Keep the independent-product proof readable throughout hover and keyboard focus. */
.portfolio-home .work-solo-heading strong,
.portfolio-home .work-solo-products b,
.portfolio-home .work-visual--solo .work-invoicer-proof span { color: #dce6f5; }
.portfolio-home .work-veranex-phase strong i { color: #426f5a; }
.portfolio-home .work-zebra-proof small { color: #535f57; }
/* The same line material supports different stories; it never sits above the copy. */
.portfolio-home .work-visual,
.portfolio-home .principles-section,
.portfolio-home .contact-footer { position: relative; isolation: isolate; }
.portfolio-home .principles-section,
.portfolio-home .contact-footer { overflow: clip; }
.story-flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.portfolio-home .work-visual .story-flow { transform: translate3d(0, var(--story-depth, 0px), 0) scale(1.035); }
.portfolio-home .principles-section { background-image: none; }
.portfolio-home .principles-inner,
.portfolio-home .contact-content,
.portfolio-home .footer-bottom { position: relative; }
.portfolio-home .principle-row { transition: background-color 300ms var(--motion-arrival); }
.portfolio-home .principle-row:hover, .portfolio-home .principle-row:focus-visible { background-color: rgba(40,85,191,.035); }
/* The existing flowing ink turns vertical here, following the career's direction. */
.portfolio-home .timeline-section { position: relative; isolation: isolate; overflow: clip; }
.timeline-flow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: none; pointer-events: none; stroke-width: 1; stroke-linecap: round; }
.timeline-flow-lines { stroke: rgba(40,85,191,.10); }
.timeline-flow-signals { stroke: rgba(40,85,191,.28); }
.timeline-flow-highlight { stroke-dasharray: 5 995; animation: timeline-flow-travel 75s linear infinite; animation-play-state: paused; }
.timeline-flow-highlight:nth-child(1) { animation-delay: -18s; }
.timeline-flow-highlight:nth-child(2) { animation-delay: -36s; animation-duration: 90s; animation-direction: reverse; }
.timeline-flow-highlight:nth-child(3) { animation-delay: -52s; animation-duration: 82s; }
.portfolio-home .timeline-section.motion-in-view .timeline-flow-highlight { animation-play-state: running; }
@keyframes timeline-flow-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
.portfolio-home .career-milestones li::after { content: ''; position: absolute; left: -1px; top: .6rem; bottom: -.6rem; width: 1px; background: var(--accent); transform: scaleY(var(--milestone-progress, 0)); transform-origin: top; pointer-events: none; }
.portfolio-home .career-milestones li:last-child::after { display: none; }
.portfolio-home .career-milestones time { color: var(--text-secondary); transition: color 350ms var(--motion-arrival); }
.portfolio-home .career-milestones li::before { background-color: #e9ede5; border-color: #aebbb1; box-shadow: none; transition: background-color 350ms var(--motion-arrival), border-color 350ms var(--motion-arrival); }
.portfolio-home .career-milestones li.is-read time { color: var(--accent); }
.portfolio-home .career-milestones li.is-read::before { background-color: var(--accent); border-color: var(--accent); }
.portfolio-home .gallery-track { animation-play-state: paused; }
.portfolio-home .gallery-section.motion-in-view .gallery-track { animation-play-state: running; }
.portfolio-home .gallery-marquee:hover .gallery-track, .portfolio-home .gallery-marquee:focus-within .gallery-track { animation-play-state: paused; }
.portfolio-home .gallery-item:focus-visible { outline-offset: 5px; }
.portfolio-home .gallery-marquee.has-gallery-tooltip .gallery-track { animation-play-state: paused; }
.portfolio-home .gallery-description { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A paper note sits outside the marquee mask so its copy never gets clipped. */
.portfolio-home .gallery-tooltip {
    position: fixed; z-index: 1100; width: min(320px, calc(100vw - 24px));
    padding: 20px 22px; border-radius: 12px; background: #f6f7f1; color: #202923;
    box-shadow: 0 10px 30px rgba(25, 38, 29, .18);
    animation: gallery-note-arrive 320ms var(--motion-arrival) both;
}
.portfolio-home .gallery-tooltip[hidden], .portfolio-home .gallery-lightbox-caption[hidden] { display: none; }
.portfolio-home .gallery-tooltip strong { display: block; font: 600 15px/1.4 var(--font-body); color: var(--accent-hover); }
.portfolio-home .gallery-tooltip p { margin: 8px 0 0; font: 400 14px/1.55 var(--font-body); }
@keyframes gallery-note-arrive { from { transform: translateY(5px); } to { transform: translateY(0); } }
.portfolio-home .lightbox-content { flex-direction: column; gap: 18px; max-height: 88svh; }
.portfolio-home .lightbox-content img { max-height: 64svh; max-width: 90vw; }
.portfolio-home .gallery-lightbox-caption { width: min(540px, 90vw); color: #f6f7f1; text-align: center; }
.portfolio-home .gallery-lightbox-caption strong { font: 600 17px/1.4 var(--font-body); }
.portfolio-home .gallery-lightbox-caption p { margin: 8px 0 0; font: 400 15px/1.6 var(--font-body); color: #dce5da; }
.portfolio-home.motion-paused *, .portfolio-home.motion-reduced *, .portfolio-home.motion-hidden * { animation-play-state: paused !important; }
.portfolio-home.motion-paused .hero-video-bg { transition: none; }
@media (max-width: 768px) {
    .timeline-flow-left, .timeline-flow-middle { display: none; animation: none; }
    .portfolio-home .hero { flex-direction: row; align-items: center; min-height: 100svh; background-position: 76% center; }
    .portfolio-home .hero-scroll-cue { bottom: 1.75rem; font-size: 12px; }
    .portfolio-home .hero-video-control { right: 12px; bottom: 12px; min-height: 44px; }
    .portfolio-home .hero-video-bg { transform: none; object-position: 76% center; }
}
@media (prefers-reduced-motion: reduce) {
    .timeline-flow-signals { display: none; }
    .timeline-flow-highlight { animation: none; }
    .portfolio-home .hero-video-bg { transform: none; }
    .portfolio-home .work-visual .story-flow { transform: none; }
    .portfolio-home .career-milestones li::after { transform: scaleY(1); }
    .portfolio-home .hero-scroll-cue svg,
    .portfolio-home .hero-cta-arrow,
    .portfolio-home .header-nav a::after,
    .portfolio-home .work-case::before,
    .portfolio-home .work-visual,
    .portfolio-home .principle-row,
    .portfolio-home .career-milestones time,
    .portfolio-home .career-milestones li::before { transition: none; }
    .portfolio-home .work-case:hover .work-visual img { transform: none; }
}