/* Preserve current scrolling apertures, live scenes and RTL layout. */
.collage .home-device{aspect-ratio:393/780;box-sizing:content-box;isolation:isolate}
.home-scroll{display:block;width:100%;height:auto;animation:tour-home-scroll 9s cubic-bezier(.45,0,.3,1) infinite alternate paused}
.collage .home-scroll img{position:static;width:100%;height:auto;object-fit:contain}
.collage .motion-surface[data-motion-active=true] .home-scroll{animation-play-state:running}
/* Portrait 393×780 aperture over the source 393×1278 page: scroll exactly the extra height. */
@keyframes tour-home-scroll{0%,16%{transform:translateY(0)}84%,100%{transform:translateY(-38.9671%)}}
.collage .scene-surface{position:relative;display:block;padding:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 65% 20%,#1e3b62,#081426 80%);border-radius:4px}
.scene-surface canvas,.scene-fallback{position:absolute;inset:0;display:block;width:100%;height:100%}
.scene-fallback{object-fit:cover;transition:opacity .4s}.scene-surface[data-scene-ready=true]>.scene-fallback{opacity:0}
.scene-surface canvas{pointer-events:none}.scene-surface .scene-hint{position:absolute;right:6%;bottom:6%;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#ffffffb8;color:#254773;font:12px/1 Arial;pointer-events:none}
.collage .scene-character{background:radial-gradient(ellipse at center,#e9f0ff,#9dafce)}
/* RTL mirrors placement, while individual pictures and English artwork stay readable. */
html[dir=rtl] .site-header,html[dir=rtl] .header-actions,html[dir=rtl] .intro-layout,html[dir=rtl] .work{direction:rtl}
html[dir=rtl] .language-switch{direction:ltr}
html[dir=rtl] .visual-composition{direction:ltr}
html[dir=rtl] .portrait-cutout{right:auto;left:0;transform:scaleX(-1)}
html[dir=rtl] .collage{left:auto;right:0;transform:scaleX(-1)}
html[dir=rtl] .collage .tile-face{transform:scaleX(-1)}
html[dir=rtl] .hero-copy .enter-work{flex-direction:row;align-self:flex-start}
html[dir=rtl] :is(.circle-arrow,.project-link,.back-intro>span:first-child,.gallery-arrows button){transform:scaleX(-1)}
html[dir=rtl] .header-note{margin-inline-start:55px;margin-inline-end:auto}
html[dir=rtl] .hero-directions{direction:rtl}
html[dir=rtl] .hero-foot,html[dir=rtl] .gallery-counter{direction:ltr}
html[dir=rtl] .project-meta,html[dir=rtl] .work-heading{direction:rtl}
@media(min-width:701px){html[dir=rtl] .work-content{padding-right:0;padding-left:22px}}
@media(max-width:700px){.scene-surface .scene-hint{display:none}html[dir=rtl] .work-content{padding:0}}
@media(prefers-reduced-motion:reduce){.home-scroll{animation:none!important}.scene-fallback{transition:none}}

html[dir=rtl] .preview-arrow{transform:translateX(-50%) scaleX(-1)}
.scene-surface canvas[hidden]{display:none!important}

/* RTL: sculpture tiles animate their own transform, so flip their caption back to readable text */
html[dir=rtl] .collage .sculpture .tile-face figcaption{transform:scaleX(-1)}
/* Collage, projects view: ShieldKey tile aligned to the Daakesh row and the dashboard below */
.piece-torus>.piece-surface>[data-face=projects]{inset:auto;left:4%;width:89.4545%;top:-1.8182%;height:124.8485%}
.collage .case-shield.case-phone{background:radial-gradient(ellipse at 50% 40%,#3b2631,#1b141a 72%)}
.collage .case-shield.case-phone .case-scene{padding:6.789%}
.collage .case-shield.case-phone .case-device{aspect-ratio:375/844;box-shadow:0 0 0 1px #ffffff1a,0 12px 18px #0007}
.collage .case-shield.case-phone .case-device img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}