/* ============================================================
   VRDIGITAL v51 — 3D effects (perspective / preserve-3d / tilt)
   Fixed UI (header, cursor, noise) lives OUTSIDE .persp so the
   perspective property never becomes their containing block.
   ============================================================ */

.persp{perspective:1200px}
.section,.features-grid,.monitor-wrap{perspective:1200px}

[data-tilt]{
  transform-style:preserve-3d;
  transition:transform .35s ease-out;
  will-change:transform;
}
[data-depth]{
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

/* ---------- hero 3D scene ---------- */
.hero-stage{transform-style:flat}
.hero-grid{
  pointer-events:none;
  position:absolute;left:-60%;right:-60%;top:38%;bottom:-70%;
  transform:rotateX(64deg);
  transform-origin:center top;
  background-image:
    linear-gradient(rgba(0,229,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.22) 1px,transparent 1px);
  background-size:80px 80px;
  animation:gridmove 2.8s linear infinite;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(60% 60% at 50% 40%,#000 20%,transparent 75%);
  opacity:.55;
}
@keyframes gridmove{from{background-position:0 0,0 0}to{background-position:0 80px,0 0}}

.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.orb-cyan{
  width:44vw;height:44vw;right:-8%;top:-14%;
  background:radial-gradient(circle,rgba(0,229,255,.30),transparent 65%);
  animation:orbfloat 11s ease-in-out infinite;
}
.orb-magenta{
  width:36vw;height:36vw;left:-10%;bottom:-20%;
  background:radial-gradient(circle,rgba(255,46,166,.26),transparent 65%);
  animation:orbfloat 14s ease-in-out infinite reverse;
}
@keyframes orbfloat{0%,100%{translate:0 0}50%{translate:3% -6%}}
.hero-content{position:relative;z-index:2}

/* ---------- signature on-load line reveal ---------- */
.line-inner{transform:translateY(112%);transition:transform 1.15s cubic-bezier(.16,1,.3,1)}
.line:nth-child(1) .line-inner{transition-delay:.18s}
.line:nth-child(2) .line-inner{transition-delay:.32s}
.line:nth-child(3) .line-inner{transition-delay:.46s}
body.is-loaded .line-inner{transform:translateY(0)}

.fade-in{opacity:0;pointer-events:none;transform:translateY(26px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
body.is-loaded .fade-in{opacity:1;pointer-events:auto;transform:translateY(0)}
.hero-ctas,.hero-ctas .btn{pointer-events:auto !important;cursor:pointer !important;position:relative;z-index:10;}

/* ---------- scroll reveals with depth ---------- */
.reveal{
  opacity:0;
  transform:translateY(52px) translateZ(-90px);
  transition:opacity .9s ease,transform 1.05s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- 3D containers ---------- */
.manifesto-card{transform-style:preserve-3d}
.manifesto-card .manifesto-head{transform:translateZ(25px)}
.manifesto-list li:nth-child(1){transform:translateZ(40px)}
.manifesto-list li:nth-child(2){transform:translateZ(55px)}
.manifesto-list li:nth-child(3){transform:translateZ(40px)}

.monitor{transform-style:preserve-3d}
.monitor-bezel{transform:translateZ(40px)}
.monitor-glare{transform:translateZ(70px)}

/* service rows get a gentle editorial tilt on hover */
.service-row:hover{transform:perspective(900px) rotateX(1.6deg) translateZ(4px)}

@media (prefers-reduced-motion:reduce){
  .hero-grid,.orb{animation:none}
  [data-tilt],[data-depth]{transform:none!important}
  .monitor-bezel,.monitor-glare,.hero-content{transform:none}
}