/* Everything here is progressive enhancement. The base document remains a vertical portfolio. */
.motion-switch { position:fixed; inset-inline-end:20px; inset-block-end:18px; z-index:20; display:flex; gap:8px; align-items:center; min-block-size:44px; padding:10px 14px; border:1px solid var(--rule); background:var(--paper); font-size:12px; box-shadow:0 4px 18px #17171710; }
.motion-switch::before { content:''; inline-size:5px; block-size:5px; background:var(--accent); border-radius:50%; }
.motion-switch[aria-pressed=true]::before { background:var(--muted); }
.hero-art { position:relative; }
.scene-slot { inline-size:180px; block-size:180px; pointer-events:none; position:relative; }
.hero-scene { position:absolute; inset-inline-start:-102px; inset-block-end:40px; }
.scene-fallback { position:absolute; inset:25%; transform:rotate(-22deg); }
.scene-fallback span { position:absolute; inset:0; border:1px solid var(--stone); transform:rotate(22deg); }
.scene-fallback span:nth-child(2) { inset:12%; border-color:var(--accent); transform:rotate(45deg); }
.scene-fallback span:nth-child(3) { inset:24%; transform:rotate(68deg); }
.scene-slot[data-webgl=true] .scene-fallback { visibility:hidden; }
.cinematic-canvas { position:fixed; inset:0; inline-size:100%; block-size:100%; pointer-events:none; z-index:8; }
.contact-lead { position:relative; }
.contact-scene { margin-block:24px 0; inline-size:140px; block-size:110px; }
.project-visual { perspective:1200px; }
.project-depth { transform-style:preserve-3d; }
.project-window { transform-origin:center; backface-visibility:hidden; }
.showcase-tools { display:flex; align-items:center; gap:20px; margin-block-end:20px; }
.showcase-count { font-family:var(--mono); font-size:12px; white-space:nowrap; direction:ltr; unicode-bidi:isolate; }
.showcase-progress { block-size:1px; background:var(--rule); flex:1; position:relative; }
.showcase-progress::after { content:''; position:absolute; inset:0; background:var(--accent); transform:scaleX(var(--progress,0)); transform-origin:left; }
html[dir=rtl] .showcase-progress::after { transform-origin:right; }
.showcase-navigation { display:flex; gap:8px; }
.showcase-navigation button { inline-size:44px; block-size:44px; border:1px solid var(--rule); font-size:20px; }
.showcase-navigation button[aria-disabled=true] { color:var(--muted); }
html[dir=rtl] .showcase-navigation button span { display:inline-block; transform:scaleX(-1); }
.work.is-horizontal { padding-block:64px; }
.is-horizontal .work-stage { background:var(--paper); padding-block:12px; }
.is-horizontal .section-heading { margin-block-end:20px; gap:32px; }
.is-horizontal .section-heading h2 { font-size:clamp(32px,3.4vw,48px); }
.is-horizontal .section-heading .eyebrow { margin-block-end:10px; }
.is-horizontal .section-intro { font-size:14px; max-inline-size:48ch; }
.is-horizontal .project-viewport { overflow:hidden; padding:8px; margin:-8px; }
.is-horizontal .projects { display:flex; gap:64px; inline-size:max-content; will-change:transform; }
.is-horizontal .project,.is-horizontal .project:nth-child(even) { inline-size:var(--card-width); flex-shrink:0; grid-template-columns:7fr 5fr; gap:clamp(32px,4vw,64px); align-items:center; }
.is-horizontal .project:nth-child(even) .project-visual,.is-horizontal .project:nth-child(even) .project-copy { order:initial; }
.is-horizontal .project h3 { font-size:clamp(28px,3vw,42px); }
.is-horizontal .project-meta { padding-block:12px 18px; }
.is-horizontal .technologies { margin-block:16px; }
.is-horizontal .project-actions { margin-block-end:18px; }
.is-horizontal .project-description { font-size:15px; }
@media(max-width:1100px) { .hero-scene { inline-size:130px; block-size:130px; inset-inline-start:-10px; inset-block-end:48px; } }
@media(max-width:600px) {
  .hero-scene { display:none; }
  .contact-scene { inline-size:90px; block-size:70px; margin-block-start:16px; }
  .motion-switch { inset-inline-end:12px; inset-block-end:12px; }
}
@media(prefers-reduced-motion:reduce) { .cinematic-canvas { display:none!important; } }
html[data-motion=off] .scene-slot[data-webgl=true] .scene-fallback { visibility:visible; }
html[data-motion=off] .cinematic-canvas { display:none; }