/* Ambient depth and data-systems project card. Kept deliberately slow and low-contrast. */
body::before { background: radial-gradient(circle at 78% 13%, rgba(138,120,255,.08), transparent 26%), radial-gradient(circle at 13% 54%, rgba(202,255,85,.12), transparent 23%); content:""; inset:0; pointer-events:none; position:fixed; z-index:-2; }
.ambient-field { inset:0; overflow:hidden; pointer-events:none; position:fixed; z-index:-1; }
.ambient-field::before { background-image: linear-gradient(rgba(23,23,21,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23,23,21,.035) 1px, transparent 1px); background-size:68px 68px; content:""; inset:-20%; mask-image:radial-gradient(ellipse at center, black 5%, transparent 67%); opacity:.32; position:absolute; transform:rotate(-7deg); animation:drift-grid 34s ease-in-out infinite alternate; }
.ambient-field i { border:1px solid rgba(23,23,21,.09); border-radius:50%; height:440px; position:absolute; width:440px; }
.ambient-field i:nth-child(1) { left:-230px; top:9%; animation:float-orbit 17s ease-in-out infinite alternate; }
.ambient-field i:nth-child(2) { border-color:rgba(138,120,255,.18); height:310px; right:-130px; top:38%; width:310px; animation:float-orbit 21s ease-in-out -5s infinite alternate-reverse; }
.ambient-field i:nth-child(3) { border-color:rgba(255,115,95,.14); bottom:-290px; height:530px; left:37%; width:530px; animation:float-orbit 26s ease-in-out -3s infinite alternate; }
@keyframes drift-grid { to { transform:rotate(-3deg) translate3d(32px,-20px,0); } }
@keyframes float-orbit { to { transform:translate3d(25px,-28px,0) rotate(14deg); } }
.project-card--taxi { background:#17212d; color:#f4f0e9; grid-column:span 2; min-height:385px; }
.project-card--taxi .project-top { color:#bfcad7; }.project-card--taxi .project-title { bottom:34px; left:8%; }.project-card--taxi .project-title h3 { font-size:53px; }.project-card--taxi .project-title p { color:#d1d8e0; max-width:405px; }.project-card--taxi .topic-tags { color:#d1d8e0; }
.taxi-visual { height:100%; position:absolute; right:6%; top:0; width:46%; }
.taxi-query { background:#233244; border:1px solid rgba(202,255,85,.44); box-shadow:0 24px 50px rgba(0,0,0,.24); display:flex; flex-direction:column; gap:6px; padding:20px 23px; position:absolute; right:16%; top:19%; transform:rotate(4deg); width:205px; }
.taxi-query span,.taxi-chip { color:#caff55; font:10px "DM Mono",monospace; letter-spacing:1px; }.taxi-query b { font:600 32px/.94 "Playfair Display",Georgia,serif; letter-spacing:-1.5px; }.taxi-query em { color:#aeb9c7; font:10px "DM Mono",monospace; font-style:normal; }
.taxi-bars { align-items:end; bottom:15%; display:flex; gap:7px; height:100px; position:absolute; right:0; transform:rotate(-5deg); width:190px; }.taxi-bars i { background:linear-gradient(180deg,#8a78ff,#caff55); border-radius:2px 2px 0 0; display:block; flex:1; height:var(--bar); opacity:.85; transform-origin:bottom; animation:data-bar 2.5s ease-in-out infinite alternate; }
.taxi-bars i:nth-child(1){--bar:32%;animation-delay:-.2s}.taxi-bars i:nth-child(2){--bar:66%;animation-delay:-.8s}.taxi-bars i:nth-child(3){--bar:46%;animation-delay:-1.4s}.taxi-bars i:nth-child(4){--bar:83%;animation-delay:-.5s}.taxi-bars i:nth-child(5){--bar:57%;animation-delay:-1.7s}.taxi-bars i:nth-child(6){--bar:92%;animation-delay:-1.1s}@keyframes data-bar { to { transform:scaleY(.72); } }
.taxi-chip { border:1px solid rgba(244,240,233,.32); border-radius:15px; padding:7px 10px; position:absolute; }.chip-index { right:39%; top:14%; }.chip-partition { right:0; top:47%; }
.taxi-route { border:1px solid rgba(244,240,233,.22); border-radius:50%; height:310px; position:absolute; right:16%; top:2%; transform:rotate(-17deg); width:310px; }.taxi-route i { background:#ff735f; border-radius:50%; height:9px; position:absolute; width:9px; }.taxi-route i:nth-child(1){left:17%;top:22%}.taxi-route i:nth-child(2){right:14%;top:45%;background:#caff55}.taxi-route i:nth-child(3){bottom:17%;left:35%;background:#8a78ff}
.focus-pin { background:rgba(244,240,233,.84); border:1px solid rgba(23,23,21,.15); box-shadow:0 14px 32px rgba(23,23,21,.08); display:grid; gap:8px; padding:16px 18px; position:absolute; right:50px; top:402px; transform:rotate(5deg); width:185px; animation:focus-float 7s ease-in-out infinite alternate; }
.focus-pin small { font:10px "DM Mono",monospace; letter-spacing:1px; }.focus-pin strong { font:600 22px/.95 "Playfair Display",Georgia,serif; letter-spacing:-1px; }.focus-pin i { background:var(--coral); border-radius:50%; height:8px; position:absolute; right:15px; top:15px; width:8px; }
@keyframes focus-float { to { transform:translateY(-11px) rotate(3deg); } }
.recent-build { align-items:center; min-height:70px; }.recent-build p { color:var(--muted); font:13px "DM Sans",sans-serif; letter-spacing:0; margin:0 0 0 10px; text-transform:none; }.recent-build strong { color:var(--ink); }.projects { padding-bottom:38px; }.about { padding-top:58px; }
@media (prefers-reduced-motion:reduce) { .ambient-field *, .ambient-field::before, .taxi-bars i { animation:none!important; } }
@media (prefers-reduced-motion:reduce) { .focus-pin { animation:none!important; } }
@media (max-width:760px) { .ambient-field { opacity:.5; }.focus-pin { display:none; }.project-card--taxi { min-height:470px; }.project-card--taxi .project-title { bottom:24px; left:24px; }.project-card--taxi .project-title h3 { font-size:42px; }.taxi-visual { right:-6%; top:6%; width:68%; }.taxi-query { transform:scale(.78) rotate(4deg); transform-origin:top right; }.taxi-route { transform:scale(.78) rotate(-17deg); transform-origin:top right; }.recent-build { align-items:flex-start; flex-direction:column; gap:8px; }.recent-build p { margin:0; }.projects { padding-bottom:28px; }.about { padding-top:48px; } }