/* City is a continuous decorative layer; copy and controls remain steady. */
.portfolio-site { isolation: isolate; }
.city-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #101923; pointer-events: none; }
.city-parallax { position: absolute; inset: -70px; width: calc(100% + 140px); height: calc(100% + 140px); --city-x: 0px; --city-y: 0px; --city-scroll: 0px; transform: translate3d(var(--city-x),calc(var(--city-y) + var(--city-scroll)),0); transition: transform 850ms cubic-bezier(.2,.7,.2,1); }
.city-drift { width: 100%; height: 100%; animation: city-drift 20s ease-in-out infinite alternate; }
.city-drift img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; animation: city-enter 2.2s cubic-bezier(.16,.7,.2,1) both; }
.city-shade { position: absolute; inset: 0; background: linear-gradient(90deg,#050807e8 0%,#050807b0 35%,#05080725 75%,#05080735),linear-gradient(0deg,#08090975,transparent 50%); }
.hero-scene { background: transparent; }
.portfolio-site header { border-color: #ffffff22; }
.portfolio-site nav { color: var(--ink); }
.hero { min-height: max(680px,calc(100svh - 125px)); padding: 90px 0 125px; }
.hero-content { width: 75%; }
.hero h1 { font-size: clamp(50px,6.8vw,100px); letter-spacing: -4.5px; }
.hero-line { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-line > span { display: block; animation: headline-enter 1.05s cubic-bezier(.16,.75,.2,1) both; }
.hero-line:nth-child(2) > span { animation-delay: 140ms; }
.hero-copy { max-width: 500px; color: #d2d6cf; }
.hello, .hero-foot { color: #c0c6b9; }
.hero-copy, .hero-actions, .hero-foot { animation: content-enter 1s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy { animation-delay: 240ms; }
.hero-actions { animation-delay: 350ms; }
.hero-foot { animation-delay: 450ms; flex-wrap: wrap; gap: 10px 25px; }
.hero-bottom { color: #bdc5b9; border-color: #ffffff35; }
.hero-bottom a span { display: inline-block; animation: scroll-cue 2.4s ease-in-out infinite; }
.portfolio-site main { background: linear-gradient(#0809099e,#080909db 25%,#080909e8 65%,#080909bb); }
.work { padding-top: 75px; }
.project { background: #101312e8; transition: border-color 350ms ease,box-shadow 350ms ease; }
.project-cover { --card-x: 0deg; --card-y: 0deg; transform: perspective(1000px) rotateX(var(--card-x)) rotateY(var(--card-y)); transition: transform 550ms ease; }
.project:hover { border-color: #687260; box-shadow: 0 15px 45px #0004; }
.cover-frame { transition: transform 600ms cubic-bezier(.2,.75,.2,1),border-color 350ms ease; }
.project:hover .cover-frame { transform: rotate(-2deg) scale(1.05); border-color: #9ca88b66; }
.project-cover::after { content: ''; position: absolute; inset: -30%; background: linear-gradient(110deg,transparent 40%,#d1d4c712 50%,transparent 60%); transform: translateX(-70%); pointer-events: none; }
.project:hover .project-cover::after { animation: card-light 1.1s ease both; }
.project-play, .button-arrow, .secondary-link span, .nav-contact span { display: inline-block; transition: transform 350ms ease; }
.button-arrow { display: grid; }
.project:hover .project-play, .button:hover .button-arrow, .secondary-link:hover span, .nav-contact:hover span { transform: translate(4px,-3px); }
.reveal { transform: none; }
.reveal.is-visible { animation: section-enter .85s cubic-bezier(.2,.75,.2,1) both; }
.project:nth-of-type(2) { animation-delay: 120ms; }
.workflow > div:nth-child(2) { animation-delay: 100ms; }
.workflow > div:nth-child(3) { animation-delay: 200ms; }
.calculator { background: #111412ed; }
.portfolio-site footer { background: #080909; }
#motion-toggle { border: 0; border-bottom: 1px solid #87927b; background: transparent; color: #c6cfbd; padding: 0 0 2px; font: inherit; }
#motion-toggle:hover { color: #fff; }
.motion-paused *, .motion-paused *::after, .motion-dialog .city-backdrop *, .motion-hidden .city-backdrop * { animation-play-state: paused !important; }
.motion-dialog .city-parallax { transition: none; }
@keyframes city-enter { from { transform: scale(1.18) translateY(18px); } to { transform: scale(1.07) translateY(0); } }
@keyframes city-drift { from { transform: scale(1) translateX(-6px); } to { transform: scale(1.045) translateX(6px); } }
@keyframes headline-enter { from { transform: translateY(80%); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes content-enter { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes section-enter { from { transform: translateY(35px); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes scroll-cue { 0%,65%,100% { transform: translateY(0); } 35% { transform: translateY(7px); } }
@keyframes card-light { to { transform: translateX(70%); } }
@media(max-width:1000px) { .hero-content { width: 90%; } .hero h1 { font-size: 78px; } .city-shade { background: linear-gradient(90deg,#050807dd,#05080770 55%,#05080735); } }
@media(max-width:700px) {
 .hero { min-height: 680px; padding: 90px 0 120px; } .hero-content { width: 100%; }
 .hero h1 { font-size: clamp(43px,10.8vw,65px); letter-spacing: -2.5px; }
 .hero-copy { font-size: 14px; max-width: 340px; }
 .city-drift img { object-position: 64% center; }
 .city-shade { background: linear-gradient(90deg,#050807cf,#05080790),linear-gradient(0deg,#08090980,transparent); }
 .city-drift { animation: none; } .city-parallax { transform: none; }
 .hero-bottom { gap: 20px; } .hero-bottom > span { max-width: 190px; }
 .project:hover .project-cover::after { animation: none; }
}
.motion-still *, .motion-still *::before, .motion-still *::after { animation: none !important; transition: none !important; }
.motion-still .city-parallax, .motion-still .city-drift, .motion-still .project-cover, .motion-still .reveal { transform: none !important; }
.motion-still .city-drift img { transform: scale(1.07); }
.motion-still .project:hover .cover-frame { transform: rotate(-7deg); }
.motion-still .project:hover .project-play, .motion-still .button:hover, .motion-still .button:hover .button-arrow, .motion-still .secondary-link:hover span, .motion-still .nav-contact:hover span { transform: none; }
html:has(.motion-still) { scroll-behavior: auto; }
@media(prefers-reduced-motion:reduce) {
 .portfolio-site *, .portfolio-site *::before, .portfolio-site *::after { animation: none !important; transition: none !important; }
 .city-parallax, .city-drift, .project-cover, .reveal { transform: none !important; }
 .city-drift img { transform: scale(1.07); }
 .project:hover .cover-frame { transform: rotate(-7deg); }
 .project:hover .project-play, .button:hover, .button:hover .button-arrow, .secondary-link:hover span, .nav-contact:hover span { transform: none; }
}