/* Full-page 3D scroll scenes (see scroll3d.js) */
.s3d-stage{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:-2;background:#020605;overflow:hidden;pointer-events:none}
.s3d-scene,.s3d-fx{position:absolute;inset:0;width:100%;height:100%;opacity:0;will-change:opacity,transform}
.s3d-fx{opacity:1}
.s3d-stage:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(2,6,5,0) 0%,rgba(2,6,5,.5) 68%,rgba(2,6,5,.88) 100%),
    linear-gradient(180deg,rgba(2,6,5,.55),rgba(2,6,5,.28) 40%,rgba(2,6,5,.62))}

/* let the scenes show through the page */
body.s3d{background:transparent;overflow-x:clip;overflow-y:visible}
html{overflow-x:clip}
html{background:#020605}
body.s3d .orbit-section{background:transparent}
/* matrix rain removed */
.crypto-rain{display:none!important}
body.s3d .blob{display:none}
body.s3d .navbar.scrolled{background:rgba(2,6,5,.72)}
body.s3d .site-footer{background:rgba(2,6,5,.78)}

/* progress rail */
.s3d-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:14px}
.s3d-rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:16px}
.s3d-rail button:after{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(238,248,240,.6);background:transparent;transition:.3s}
.s3d-rail button span{font:600 .62rem/1 'Orbitron',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8affc0;opacity:0;transform:translateX(6px);transition:.3s;text-shadow:0 0 10px rgba(34,255,122,.6)}
.s3d-rail button.on:after{background:#22ff7a;border-color:#22ff7a;box-shadow:0 0 14px #22ff7a;transform:scale(1.25)}
.s3d-rail button:hover span{opacity:1;transform:none}
@media(max-width:700px){.s3d-rail{right:6px;gap:12px}.s3d-rail button span{display:none}}
@media(prefers-reduced-motion:reduce){.s3d-rail button,.s3d-rail button:after,.s3d-rail button span{transition:none}}


/* frosted-glass cards so the scenes stay visible */
body.s3d .feature-card,
body.s3d .skill-card,
body.s3d .project-block,
body.s3d .side-card,
body.s3d .contact-form-card{
  background:linear-gradient(145deg,rgba(9,22,15,.66),rgba(6,14,12,.52));
  border:1px solid rgba(138,255,192,.30);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(34,199,255,.06);
  transition:box-shadow .35s,border-color .35s,transform .25s;
}
body.s3d .feature-card:hover,
body.s3d .skill-card:hover,
body.s3d .project-block:hover,
body.s3d .side-card:hover{
  border-color:rgba(34,255,122,.6);
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 34px rgba(34,255,122,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
body.s3d .feature-card:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 34px rgba(34,255,122,.28),inset 0 1px 0 rgba(255,255,255,.12)}
/* stat numbers + labels sit straight on the scene: add a soft glow for legibility */
body.s3d .stat-num,body.s3d .stat-label{text-shadow:0 2px 14px rgba(0,0,0,.85)}
@media(max-width:700px){
  body.s3d .feature-card,body.s3d .skill-card,body.s3d .project-block,body.s3d .side-card,body.s3d .contact-form-card{
    background:rgba(7,15,10,.80);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---- opening "runway": laptop pushes in and explodes; words ride the camera ---- */
.s3d-runway{position:relative;height:340vh}
.s3d-runway .pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;pointer-events:none}
.s3d-fxt{position:absolute;opacity:0;visibility:hidden;will-change:transform,opacity;transform-origin:50% 50%}
.s3d-head{left:0;right:0;top:15vh;text-align:center;padding:0 5vw}
.s3d-eyebrow{display:inline-block;font:700 .78rem/1 'Orbitron',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#22c7ff;padding:.6rem 1rem;border:1px solid rgba(34,199,255,.45);border-radius:999px;background:rgba(2,6,5,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.s3d-head h2{font:900 clamp(3rem,10.5vw,9rem)/.95 'Orbitron',sans-serif;letter-spacing:.02em;margin:1.1rem 0 .7rem;color:#eef8f0;text-shadow:0 0 40px rgba(34,255,122,.35),0 6px 40px rgba(0,0,0,.7)}
.s3d-head h2 span{color:#22ff7a;text-shadow:0 0 28px #22ff7a,0 0 70px rgba(34,255,122,.5)}
.s3d-head p{font:500 clamp(1rem,2.4vw,1.4rem)/1.4 'Exo 2',sans-serif;color:#cfe9d8;text-shadow:0 2px 18px rgba(0,0,0,.85)}
.s3d-cap{max-width:min(400px,38vw)}
.s3d-cap.l{left:6vw;top:38vh}
.s3d-cap.r{right:6vw;top:30vh;text-align:right}
.s3d-cap .n{font:700 .85rem/1 'Orbitron',sans-serif;letter-spacing:.35em;color:#22c7ff;margin-bottom:.6rem;text-shadow:0 0 14px rgba(34,199,255,.7)}
.s3d-cap h3{font:900 clamp(2.4rem,6vw,5rem)/1 'Orbitron',sans-serif;letter-spacing:.03em;color:#eef8f0;margin:0 0 .5rem;text-shadow:0 0 30px rgba(34,255,122,.35),0 6px 30px rgba(0,0,0,.75)}
.s3d-cap p{font:500 clamp(1rem,1.6vw,1.25rem)/1.45 'Exo 2',sans-serif;color:#d6efe0;text-shadow:0 2px 16px rgba(0,0,0,.9)}
.s3d-cue{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);font:600 .7rem/1 'Orbitron',sans-serif;letter-spacing:.35em;text-transform:uppercase;color:rgba(238,248,240,.7)}
.s3d-cue:after{content:"";display:block;width:1px;height:38px;margin:10px auto 0;background:linear-gradient(#22ff7a,transparent);animation:s3dcue 1.8s infinite}
@keyframes s3dcue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:820px){
  .s3d-head{top:11vh}
  .s3d-cap{left:5vw!important;right:5vw!important;max-width:none;text-align:center!important;top:auto!important;bottom:9vh}
  .s3d-cap h3{font-size:clamp(2.2rem,11vw,3.4rem)}
  .s3d-cue{display:none}
}
@media(prefers-reduced-motion:reduce){.s3d-cue:after{animation:none}}

/* ---- selected work: bento grid ---- */
.work-bento{max-width:1240px;margin:0 auto;padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,2rem)}
.wb-head{text-align:center;max-width:760px;margin:0 auto 3rem}
.wb-eyebrow{display:inline-block;font:700 .74rem/1 'Orbitron',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#22c7ff;padding:.55rem 1rem;border:1px solid rgba(34,199,255,.4);border-radius:999px;background:rgba(2,6,5,.45)}
.wb-head h2{font:900 clamp(2.2rem,6vw,4.2rem)/1.02 'Orbitron',sans-serif;margin:1.1rem 0 .8rem;color:#eef8f0;text-shadow:0 6px 34px rgba(0,0,0,.7)}
.wb-head h2 span{color:#22ff7a;text-shadow:0 0 26px rgba(34,255,122,.55)}
.wb-head p{color:#bfe0cb;font-size:1.08rem}
.wb-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}
.wb-tile{position:relative;display:block;border-radius:22px;overflow:hidden;border:1px solid rgba(138,255,192,.22);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);background:#050b07;box-shadow:0 24px 56px rgba(0,0,0,.5);transform:translateZ(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;color:inherit;text-decoration:none}
.wb-tile:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 46px color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)}
.wb-media{aspect-ratio:16/10;overflow:hidden}
.wb-media img,.wb-media svg{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wb-tile:hover .wb-media img,.wb-tile:hover .wb-media svg{transform:scale(1.06)}
.wb-cap{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.1rem 1rem;background:linear-gradient(180deg,transparent,rgba(2,6,5,.88) 70%);display:flex;flex-direction:column;gap:.15rem}
.wb-cap span{font:600 .64rem/1 'Orbitron',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.wb-cap b{font:800 1.35rem/1.15 'Orbitron',sans-serif;color:#eef8f0;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.wb-a{grid-column:span 7}.wb-a .wb-media{aspect-ratio:16/9.4}
.wb-b{grid-column:span 5}.wb-b .wb-media{aspect-ratio:16/11.6}
.wb-c{grid-column:span 4}
.wb-d{grid-column:span 6}.wb-d .wb-media{aspect-ratio:16/8.6}
.wb-more{text-align:center;margin-top:2.2rem}
@media(max-width:900px){.wb-a,.wb-b,.wb-c,.wb-d{grid-column:span 12}.wb-a .wb-media,.wb-b .wb-media,.wb-d .wb-media{aspect-ratio:16/10}}

/* ---- HD finish: film grain + crisper type ---- */
body.s3d{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.s3d:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@media(max-width:820px){body.s3d:after{display:none}}
.btn-primary{transition:box-shadow .3s,transform .3s}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(34,255,122,.5),0 10px 34px rgba(34,255,122,.38);transform:translateY(-2px)}