AR Sculptures — Interactive Works
Augmented-reality sculptures blending science, light and metamodern beauty.
:root{
--bg:#0B0B0F; --card:#111219; --border:#1E2030; --txt:#C9CBD3; --head:#fff; --acc:#7A00FF; --acc2:#9C3CFF;
}
.ap-cases{max-width:1200px;margin:0 auto;padding:48px 16px;color:var(--txt)}
.ap-hero h1{color:var(--head);font:700 48px/1.1 "Space Grotesk",system-ui,sans-serif;margin:0 0 8px}
.ap-hero p{max-width:720px;margin:0 0 16px}
.ap-hero-cta{display:flex;gap:12px;margin:10px 0 24px}
.ap-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--acc);color:#0B0B0F;padding:12px 18px;border-radius:12px;text-decoration:none;font:700 15px Manrope,sans-serif}
.ap-btn:hover{background:var(--acc2)}
.ap-ghost{background:transparent;color:var(--head);border:1px solid var(--acc)}
.ap-ghost:hover{background:var(--acc);color:#0B0B0F}
.ap-filters{position:sticky;top:0;z-index:5;display:flex;gap:8px;flex-wrap:wrap;padding:12px 0 16px;background:linear-gradient(#0B0B0F,rgba(11,11,15,.6))}
.ap-filters input, .ap-filters select{background:#0E1018;border:1px solid var(--border);color:var(--txt);border-radius:10px;padding:10px 12px}
.ap-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--txt)}
.ap-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:980px){
.ap-grid{gap:26px}
}
.ap-card{
display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;
background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden;
transition:transform .25s, box-shadow .25s;
}
.ap-card:nth-child(2n){ grid-template-columns:.8fr 1.2fr; } /* чередование лево/право */
@media (max-width:980px){ .ap-card, .ap-card:nth-child(2n){ grid-template-columns:1fr; } }
.ap-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.ap-media img, .ap-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ap-media video{opacity:0;transition:opacity .25s}
.ap-card:hover .ap-media video{opacity:1}
.ap-meta{padding:12px 16px 16px}
.ap-meta h3{color:var(--head);font:700 28px/1.2 "Space Grotesk",system-ui,sans-serif;margin:0 0 6px}
.ap-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.ap-tag{font:600 12px/1 Manrope;background:transparent;border:1px solid var(--border);color:#AEB3C2;padding:6px 8px;border-radius:999px}
.ap-excerpt{margin:0 0 12px;color:var(--txt)}
.ap-ctas{display:flex;gap:10px;flex-wrap:wrap}
.ap-ctas a{border:1px solid var(--acc);border-radius:10px;padding:10px 12px;color:#fff;text-decoration:none}
.ap-ctas a:hover{background:var(--acc);color:#0B0B0F}
.ap-card:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(122,0,255,.15)}
.ap-more{display:flex;justify-content:center;margin:24px 0 8px}