/* MATRIX SHIELD: depth + scroll animation layer. Additive only: no IDs, content or logic touched.
   All 3D states are switched on by depth.js, so if JS fails the site looks exactly as before. */
html,body{overflow-x:clip}

/* glass navigation that tightens on scroll */
header.sticky{transition:background .3s,box-shadow .3s}
header.sticky>div:first-child{transition:height .3s ease}
header.sticky.d-scrolled{background:rgba(7,8,11,.66)!important;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 40px -20px #000,inset 0 -1px 0 rgba(200,169,106,.22)}
header.sticky.d-scrolled>div:first-child{height:60px!important}

/* hero depth (driven by --p, 0 to 1 while scrolling past the hero) */
#home.d-hero>.absolute.inset-0{transform:translate3d(0,calc(var(--p,0)*40px),0) scale(1.12);will-change:transform}
#home.d-hero h1{transform:translate3d(0,calc(var(--p,0)*-34px),0) scale(calc(1 - var(--p,0)*.05));opacity:calc(1 - var(--p,0)*.45);will-change:transform}
.d-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.8}

/* scroll reveal */
.d-in{opacity:0;transform:translate3d(0,28px,0) rotateX(8deg);transform-origin:50% 100%;
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.d-in.d-vis{opacity:1;transform:none}
#serviceGrid{perspective:1200px}

/* 3D service cards */
.service-card.d3{position:relative;transform-style:preserve-3d;clip-path:none!important;will-change:transform;
  transform:perspective(1100px) translate3d(0,var(--y,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .8s ease,box-shadow .3s,border-color .2s,background .2s}
.service-card.d3.d-in{--y:44px;--rx:16deg;opacity:0}
.service-card.d3.d-in.d-vis{--y:0px;--rx:0deg;opacity:1}
.service-card.d3.tilting{transition:transform .1s linear,box-shadow .3s,border-color .2s;
  box-shadow:0 30px 50px -24px rgba(0,0,0,.55),0 0 0 1px rgba(200,169,106,.4),0 0 36px -8px rgba(200,169,106,.3)!important}
.service-card.d3::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(200,169,106,.22),transparent 60%)}
.service-card.d3.tilting::after{opacity:1}
.service-card.d3>div:first-child{transform:translateZ(34px);transition:transform .4s}
.service-card.d3.tilting>div:first-child{transform:translateZ(46px) rotate(-6deg) scale(1.06)}
.service-card.d3>h3{transform:translateZ(18px)}

/* parallax images */
.d-par{transform:translate3d(0,var(--py,0px),0) scale(1.12);will-change:transform}

/* premium 3D buttons (bevel + lift + press) */
.btn-sweep,button.gold-gradient,a.gold-gradient,button.gold-gradient-light,a.gold-gradient-light{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.16),0 10px 24px -10px rgba(200,169,106,.5);
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,filter .2s}
@media(hover:hover){
  .btn-sweep:hover,button.gold-gradient:hover,a.gold-gradient:hover,button.gold-gradient-light:hover,a.gold-gradient-light:hover{
    transform:translateY(-2px);filter:brightness(1.05);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,0,0,.2),0 16px 30px -12px rgba(200,169,106,.65)}
}
.btn-sweep:active,button.gold-gradient:active,a.gold-gradient:active,button.gold-gradient-light:active,a.gold-gradient-light:active{
  transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}

/* lighter on phones, off for reduced motion */
@media(max-width:767px){.d-in{transform:translate3d(0,22px,0)}.service-card.d3.d-in{--rx:0deg;--y:24px}}
@media(prefers-reduced-motion:reduce){
  .d-in,.service-card.d3,header.sticky,header.sticky>div:first-child{transition:none!important}
  .d-canvas{display:none}
}