/* Original MSS adaptation of Oryzo's horizontal showcase and staged feature panel. */
.portfolio-section,.mss-features{background:#191818;color:#eee9e2;position:relative}
.portfolio-heading,.features-heading{padding:110px 6% 64px;max-width:1500px;margin:auto}
.portfolio-heading h2,.features-heading h2{font-size:clamp(48px,6.8vw,110px);line-height:1.03;letter-spacing:-.055em;margin:30px 0}
.portfolio-heading em,.features-heading em{font-style:normal;color:#b7afa5}
.portfolio-heading p,.features-heading p{font-size:clamp(18px,1.55vw,24px);line-height:1.55;color:#c2bdb6}
.portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:36px}
.portfolio-toolbar a,.section-motion-toggle{font-size:15px;color:#eee9e2;border-bottom:1px solid #80786e;padding:12px 0;background:none;border-top:0;border-left:0;border-right:0}
.portfolio-scroll{position:relative}
.portfolio-sticky{padding:28px 0;background:#191818;overflow:hidden}
.portfolio-stage-top,.portfolio-footer{margin:0 6%;display:flex;align-items:center;justify-content:space-between;gap:22px}
.portfolio-stage-top{font-size:12px;letter-spacing:.09em;padding-bottom:20px;color:#b7afa5}
.portfolio-stage-top span:last-child{letter-spacing:0;font-size:14px}
.portfolio-window{overflow:hidden}
.portfolio-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 6%;scrollbar-width:thin;scrollbar-color:#8c8174 #242221;position:relative}
.portfolio-track:after{content:none}
.portfolio-section .project{position:relative;border:0;background:#292725;border-radius:8px;overflow:hidden;text-align:left;color:#eee9e2;padding:0;flex:0 0 68%;min-width:0;scroll-snap-align:center;transition:transform .65s cubic-bezier(.2,.7,.2,1);isolation:isolate}
.portfolio-section .project:hover,.portfolio-section .project:focus-visible{flex-basis:68%;transform:translateY(-4px)}
.portfolio-section .project-image,.portfolio-section .project.active .project-image{height:clamp(300px,49vw,640px);aspect-ratio:auto;border-radius:0;position:relative;overflow:hidden}
.portfolio-section .project-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.035);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.portfolio-section .project-image .project-color{filter:none;opacity:0}
.portfolio-section .project:hover .project-color,.portfolio-section .project:focus-visible .project-color{opacity:1}
.portfolio-section .project:hover .project-image img,.portfolio-section .project:focus-visible .project-image img{transform:scale(1.08)}
.portfolio-section .project-info,.portfolio-section .project:not(.active) .project-info{display:flex;align-items:end;justify-content:space-between;padding:24px 26px 32px;gap:20px}
.portfolio-section .project-info h3{font-size:clamp(28px,3.1vw,50px);font-weight:450;letter-spacing:-.04em;line-height:1.1;margin-top:10px}
.portfolio-section .project-info span{font-size:11px;letter-spacing:.08em;color:#c4bdb4}
.portfolio-section .project-info .project-open-label{font-size:15px;letter-spacing:0;white-space:nowrap;color:#eee9e2}
.project-media-note{position:absolute;top:18px;left:20px;background:#191818d9;padding:9px 12px;border-radius:3px;font-size:12px;color:#fff}
.portfolio-footer{padding:22px 0 8px;font-size:14px;color:#c4bdb4}
.portfolio-footer b{color:#eee9e2;font-weight:500}
.portfolio-footer>div{display:flex;gap:10px}
.portfolio-footer button{width:48px;height:48px;background:none;color:#eee9e2;border:1px solid #716b64;border-radius:50%;font-size:24px}
.portfolio-footer button:disabled{opacity:.3;cursor:default}
.portfolio-footer button:hover:not(:disabled){background:#eee9e2;color:#191818}
.project-catalog{margin:40px 6% 0;border-top:1px solid #4c4742;border-bottom:1px solid #4c4742}
.project-catalog summary{cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:28px 0;font-size:clamp(20px,2.2vw,32px)}
.project-catalog summary span{font-size:14px;align-self:center;color:#b7afa5}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:14px 0 36px}
.portfolio-section .catalog-project .project-image{height:auto;aspect-ratio:4/3}
.portfolio-section .catalog-project .project-info{padding:20px;align-items:start;flex-direction:column;gap:18px}
.portfolio-section .catalog-project h3{font-size:28px}
.features-heading{padding-top:150px}
.features-heading h2{font-size:clamp(45px,5.7vw,90px)}
.features-scroll{position:relative;margin:0 12px}
.features-stage{position:relative;overflow:hidden;border-radius:8px;min-height:700px;background:#292725;isolation:isolate}
.features-visual{position:absolute;inset:0;z-index:-1}
.feature-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .85s ease,transform 1.3s ease}
.feature-scene.is-current{opacity:1;transform:scale(1)}
.feature-scene:nth-child(3){object-position:75% center}
.features-panel{width:39%;min-width:380px;padding:40px;background:#191818cf;backdrop-filter:blur(22px);min-height:inherit;display:flex;flex-direction:column}
.features-tabs{display:flex;gap:10px;margin-bottom:32px}
.features-tabs button{width:46px;height:46px;border:1px solid #a89f95;background:transparent;border-radius:50%;color:#eee9e2;font-size:13px}
.features-tabs button[aria-pressed=true]{background:#eee9e2;color:#191818}
.feature-copy{padding:20px 0 40px;border-bottom:1px dashed #8c8174;margin-bottom:26px}
.feature-copy p{font-size:clamp(18px,1.45vw,23px);line-height:1.55;max-width:29ch;margin:24px 0 60px;color:#e1dcd5}
.feature-copy h3{font-size:clamp(34px,3.3vw,54px);line-height:1.04;letter-spacing:-.04em;margin:24px 0}
.feature-copy a{display:inline-block;font-size:16px;border-bottom:1px solid #a89f95;padding:12px 0;color:#fffaf3}
.features-signature{margin-top:auto;padding-top:24px;display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.08em}
.features-placeholder{position:absolute;right:30px;bottom:30px;background:#191818e6;padding:16px 20px;font-size:14px;border:1px solid #ffffff38;border-radius:4px}
.features-placeholder span{display:block;font-size:11px;color:#ccc4ba;margin-top:6px}
.portfolio-section :focus-visible,.mss-features :focus-visible{outline:2px solid #fffaf3;outline-offset:5px}
@media(min-width:900px){
 .sections-animated .portfolio-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 .sections-animated .portfolio-window{min-height:0}
 .sections-animated .portfolio-track{height:100%;overflow:visible;scroll-snap-type:none;will-change:transform;width:max-content;padding-right:0}
 .sections-animated .portfolio-track .project{flex:none;width:66vw;max-width:1100px;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto}
 .sections-animated .portfolio-track .project-image{height:100%;min-height:0;max-height:none}
 .sections-animated .portfolio-track .project-image img{left:-6%;width:112%;translate:var(--image-drift,0px) 0;scale:1;will-change:translate}
 .sections-animated .features-scroll{height:330svh}
 .sections-animated .features-stage{position:sticky;top:12px;height:calc(100svh - 24px);min-height:650px}
 .sections-animated .features-panel{height:100%;min-height:0}
 .sections-animated .features-copy{position:relative;flex:1}
 .sections-animated .feature-copy{position:absolute;inset:0;margin:0;border:0;opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .55s,transform .7s cubic-bezier(.2,.7,.2,1),visibility .55s;display:flex;flex-direction:column;justify-content:center;padding:10px 0}
 .sections-animated .feature-copy.is-current{opacity:1;visibility:visible;transform:none}
 .sections-animated .feature-copy p{margin-bottom:auto}
 .sections-animated .feature-copy h3{border-top:1px dashed #a89f95;padding-top:28px}
 .sections-animated .feature-copy a{align-self:start}
}
@media(max-width:899px){
 .portfolio-heading,.features-heading{padding:76px 6% 36px}
 .portfolio-heading h2,.features-heading h2{font-size:clamp(40px,7vw,64px);letter-spacing:-.045em}
 .portfolio-toolbar{align-items:start;flex-direction:column;gap:10px;margin-top:22px}
 .portfolio-stage-top span:last-child{display:none}
 .portfolio-track{gap:16px;padding-bottom:8px}
 .portfolio-section .project,.portfolio-section .project:hover,.portfolio-section .project:focus-visible{flex-basis:86%;transform:none}
 .portfolio-section .project-image{height:52svh;max-height:560px;min-height:300px}
 .portfolio-section .project-info{padding:20px;align-items:start;flex-direction:column;gap:16px}
 .portfolio-section .project-info h3{font-size:34px}
 .portfolio-footer p{display:none}
 .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .features-stage{padding-top:320px}
 .features-visual{height:320px}
 .features-panel{width:100%;min-width:0;padding:28px;background:#292725;backdrop-filter:none}
 .features-tabs{display:none}
 .feature-copy p{max-width:45ch;margin:20px 0 30px}
 .feature-copy h3{font-size:38px}
 .features-placeholder{top:230px;left:20px;right:auto;bottom:auto;max-width:calc(100% - 40px)}
}
@media(max-width:520px){.catalog-grid{grid-template-columns:1fr}.project-catalog summary{font-size:19px}.project-catalog summary span{font-size:12px}.portfolio-section .project-info .project-open-label{font-size:14px}.features-heading h2{font-size:40px}.features-heading{padding-top:90px}}
@media(prefers-reduced-motion:reduce){.portfolio-section *,.mss-features *{transition:none!important;scroll-behavior:auto!important}}
/* The explicit animation switch can opt back in without changing the other sections. */
.sections-animated .feature-scene{transition:opacity .85s ease,transform 1.3s ease!important}
.sections-animated .feature-copy{transition:opacity .55s,transform .7s cubic-bezier(.2,.7,.2,1),visibility .55s!important}
.sections-animated .portfolio-section .project-image img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .7s ease!important}
.sections-animated .portfolio-scroll .project-image{clip-path:inset(0 var(--card-reveal,0%));transition:none!important}
/* Keep the card's path stable; only its photograph expands on hover. */
.sections-animated .portfolio-track .project:hover,.sections-animated .portfolio-track .project:focus-visible{transform:none}
/* JS enables scroll choreography on phones too: keep its stage pinned there. */
@media(max-width:899px){
 .sections-animated .portfolio-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 .sections-animated .portfolio-window{min-height:0}
 .sections-animated .portfolio-track{height:100%;width:max-content;overflow:visible;scroll-snap-type:none;padding-right:0;padding-bottom:0}
 .sections-animated .portfolio-track .project{flex:none;width:86vw;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto}
 .sections-animated .portfolio-track .project-image{height:100%;min-height:0;max-height:none}
}