/* Restrained motion: brief entrances, no perpetual decorative loops. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }
.header nav a { transition: color 180ms, border-color 180ms; }
.header nav a[aria-current="location"] { color: var(--blue); }
.button span, .text-link span, .case-study span, .project-title > span { display: inline-block; transition: transform 250ms var(--ease-out); }
.button:hover span, .text-link:hover span, a.case-study:hover span { transform: translate(3px,-3px); }
.project-title > span { color: var(--terracotta); }
.hero-art picture { display:block; transform: translate(var(--art-x,0px),var(--art-y,0px)); transition: transform 350ms var(--ease-out); }
.layer-label::before { transform-origin: left; }
.motion-ready .hero-copy > * { animation: arrive 850ms var(--ease-out) both; }
.motion-ready .hero-copy .eyebrow { animation-delay: 40ms; }
.motion-ready .hero-copy h1 { animation-delay: 130ms; }
.motion-ready .hero-copy .hero-description { animation-delay: 230ms; }
.motion-ready .hero-copy .actions { animation-delay: 330ms; }
.motion-ready .hero-art { animation: arrive 1100ms 180ms var(--ease-out) both; }
.motion-ready .layer-label::before { animation: draw-line 750ms 650ms var(--ease-out) both; }
.motion-ready .label-api::before { animation-delay: 800ms; }
.motion-ready .label-data::before { animation-delay: 950ms; }
.section-heading,.project,.architecture article,.portrait,.about-copy,.contact .wrap { transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
.motion-ready .reveal-pending { opacity:0; transform:translateY(20px); }
.motion-ready .revealed { opacity:1; transform:translateY(0); }
.project { min-width:0; }
@media(min-width:761px) { .project:nth-child(3n + 2),.architecture article:nth-of-type(2) { transition-delay:70ms; } .project:nth-child(3n),.architecture article:nth-of-type(3) { transition-delay:140ms; } }
.project-visual img { transition: transform 650ms var(--ease-out); }
.architecture-details summary > span { transition: transform 250ms var(--ease-out); }
.motion-ready .architecture-details[open] .architecture-explanation { animation: arrive 350ms var(--ease-out); }
.recent-work-label { margin-bottom:24px; color:var(--muted); }
.previous-work-label { margin-top:64px; }
.website-visual { display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; background:#e4d9c8; }
.website-visual::before { content:''; position:absolute; width:54%; height:79%; bottom:-1px; border:1px solid currentColor; border-radius:150px 150px 0 0; opacity:.25; transition:transform 650ms var(--ease-out); }
.website-visual > strong { position:relative; font:500 38px/.95 var(--serif); text-align:center; letter-spacing:-1px; max-width:80%; transition: transform 650ms var(--ease-out); }
.website-visual > small { position:relative; margin-top:20px; font:9px var(--mono); letter-spacing:1.2px; }
.website-visual .project-index { color:inherit; opacity:.65; }
.website-redhouse { background:#6f342d; color:#f4efe6; }
.website-upscale { background:#202522; color:#f4efe6; }
.website-upscale::before { border-radius:0; height:54%; width:68%; bottom:23%; transform:rotate(-6deg); color:#8eaaef; }
.website-upscale strong { font:500 38px var(--sans); letter-spacing:-2px; }
.website-riadflow { background:#d9ddcf; color:#344337; }
.website-riadflow strong { font-style:italic; font-size:48px; }
a.project-visual:focus-visible { outline-offset:4px; }
@media(hover:hover) { .website-visual:hover > strong { transform:translateY(-5px); } .website-visual:hover::before { transform:scale(1.04); } .website-upscale:hover::before { transform:rotate(0); } }
@keyframes arrive { from {opacity:0;transform:translateY(16px)} to {opacity:1;transform:translateY(0)} }
@keyframes draw-line { from {transform:scaleX(0)} to {transform:scaleX(1)} }
@media(max-width:760px) { .motion-ready .header nav.is-open { animation:arrive 220ms var(--ease-out); } .previous-work-label { margin-top:48px; } }
@media(prefers-reduced-motion:reduce) { html:not([data-motion="full"]) {scroll-behavior:auto} html:not([data-motion="full"]) *,html:not([data-motion="full"]) *::before,html:not([data-motion="full"]) *::after {animation:none!important;transition:none!important} html:not([data-motion="full"]) .reveal-pending {opacity:1!important;transform:none!important} }

/* Full motion is explicitly requested for this portfolio. The control remembers an opt-out. */
.reading-progress { position:fixed; top:0; left:0; height:3px; width:100%; z-index:100; background:var(--terracotta); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.motion-toggle { padding:8px 13px; background:transparent; border:1px solid var(--line); border-radius:20px; color:var(--muted); font:10px var(--mono); cursor:pointer; margin-left:auto; margin-right:24px; min-height:36px; }
.motion-toggle::before {content:'';display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--terracotta); margin-right:7px}
.motion-toggle[aria-pressed="false"]::before {background:var(--muted)}
.hero-line {display:block}
.hero-sculpture {display:block; width:100%; height:auto; transform:translate(var(--art-x,0px),var(--art-y,0px)); transition:transform 500ms var(--ease-out)}
.motion-ready .hero-copy h1 {animation:none}
.motion-ready .hero-line {animation:heading-reveal 1100ms var(--ease-out) both}
.motion-ready .hero-line:nth-child(1) {animation-delay:120ms}
.motion-ready .hero-line:nth-child(2) {animation-delay:280ms}
.motion-ready .hero-line:nth-child(3) {animation-delay:440ms}
.motion-ready .hero-copy .hero-description {animation-delay:600ms}
.motion-ready .hero-copy .actions {animation-delay:730ms}
.motion-ready .architectural-layer {animation:layer-float 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.motion-ready .architectural-layer:nth-of-type(2) {animation-delay:-2s}
.motion-ready .architectural-layer:nth-of-type(3) {animation-delay:-4s}
.motion-ready .blueprint-route {stroke-dasharray:1;animation:route-draw 1600ms 500ms var(--ease-out) both}
.motion-ready .reveal-pending {transform:translateY(38px)}
.project-description {min-height:100px;line-height:1.8}
.motion-ready .website-visual::before {animation:frame-reveal 1400ms var(--ease-out) both}
.project dl {margin-top:22px}
.motion-ready .revealed .connector::before {animation:draw-line 1s var(--ease-out) both}
html[data-motion="off"] {scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after {animation:none!important;transition:none!important}
html[data-motion="off"] .hero-sculpture {transform:none}
@keyframes heading-reveal {from{opacity:0;transform:translateY(32px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes layer-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes route-draw {from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes frame-reveal {from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:.25;clip-path:inset(0 0 0 0)}}
@media(max-width:760px){.motion-toggle{order:2;margin:0 14px 0 auto;font-size:9px;padding:7px 9px}.menu-toggle{order:3}.header nav{order:4}.hero-sculpture{margin-top:6px}.project-description{min-height:0}}