/* "Wow factor" 3D layer — MON$TER hero depth + tilt cards.
   Pure CSS 3D transforms + light JS, no heavy WebGL, so it stays fast. */

.hero3d{ perspective: 1400px; }
.hero3d .floor3d{
  position:absolute; left:50%; bottom:-40px; width:2200px; height:420px;
  transform: translateX(-50%) rotateX(78deg);
  background-image:
    linear-gradient(rgba(61,220,132,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,200,126,.10) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 900px 380px at 50% 30%, #000 40%, transparent 78%);
  mask-image: radial-gradient(ellipse 900px 380px at 50% 30%, #000 40%, transparent 78%);
  pointer-events:none; z-index:0; opacity:.85;
  animation: floorDrift 14s linear infinite;
}
@keyframes floorDrift{ from{background-position:0 0} to{background-position:0 120px} }

.hero3d .orb3d{
  position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:0;
  background:radial-gradient(circle at 35% 30%, rgba(61,220,132,.55), rgba(61,220,132,0) 70%);
}
.hero3d .orb3d.o2{background:radial-gradient(circle at 35% 30%, rgba(228,200,126,.45), rgba(228,200,126,0) 70%)}

.hero3d .heroswarm, .hero3d .wrap{ transition: transform .12s ease-out; transform-style:preserve-3d; }

/* Tilt cards: hover/mousemove driven via JS setting --rx/--ry custom props */
.tilt{
  --rx:0deg; --ry:0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  will-change: transform;
}
.tilt:hover{ box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(228,200,126,.18); }

@media (prefers-reduced-motion: reduce){
  .hero3d .floor3d{ animation:none; }
  .tilt{ transition:none; transform:none !important; }
}
@media (max-width:720px){
  .hero3d .floor3d{ display:none; }
}