/* ==========================================================================
   SITE-WIDE 3D + GLASSMORPHISM LAYER
   Loaded after style.css. Pure CSS 3D transforms driven by js/depth3d.js.
   ========================================================================== */

/* ---- ambient glowing orbs behind everything, so the glass has something to blur ---- */
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-orbs span{
  position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.28;
  will-change:transform;
}
.bg-orbs span:nth-child(1){width:520px;height:520px;background:#ff7a29;top:10%;left:-160px;}
.bg-orbs span:nth-child(2){width:420px;height:420px;background:#c24a12;top:55%;right:-140px;}
.bg-orbs span:nth-child(3){width:360px;height:360px;background:#e08a3e;top:120%;left:30%;}
body > section, body > footer, body > .marquee{position:relative;z-index:1;}

/* ---- glass surfaces ---- */
.glass,
.project,
.stat,
.about__facts,
.timeline__item,
.contact-list,
.pillar__grid > div:first-child{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
}
.pillar__grid > div:first-child{padding:var(--space-4) var(--space-3);}
.timeline__item{padding:var(--space-3);}
.contact-list{padding:0 var(--space-3);}
.about__facts{overflow:hidden;}
.about__facts div{background:transparent;}
.stats__grid{background:transparent;border:0;gap:var(--space-2);}
.stat{padding:var(--space-4) var(--space-3);}
.project{overflow:hidden;}

/* glass top nav */
.hud{
  background:rgba(10,7,5,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* ---- 3D-driven elements: JS writes the transform, so kill slow transform transitions ---- */
[data-d3]{
  transform-style:preserve-3d;
  will-change:transform;
  transition:opacity .8s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease) !important;
}
.pillar__media[data-d3]{border-radius:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);}
.reel__primary video[data-d3], .reel__secondary video[data-d3]{border-radius:16px;}

/* light sheen that follows the mouse on tilt cards */
.project{position:relative;}
.project::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 45%);
  opacity:0;transition:opacity .3s var(--ease);
}
.project:hover::after{opacity:1;}

/* hero gets a real 3D stage */
.hero__content{transform-style:preserve-3d;will-change:transform;}
.hero__name{transform:translateZ(60px);}
.hero__portrait{transform:translateZ(30px);}

@media (prefers-reduced-motion:reduce){
  .bg-orbs span{display:none;}
}