/* JM Multi Tech - 3D layer. Loaded AFTER styles.css; styles.css is untouched. */

:root { --jm-cam-top: 76px; --jm-cam-right: 0px; --jm-cam-z: 90; }
@media (max-width: 680px) { :root { --jm-cam-top: 70px; } }

/* ---------- perspective on the parents of animated items ---------- */
.hero-grid, .service-grid, .benefits-grid, .process-grid,
.section > .container, .service-area-section { perspective: 1400px; }

/* ---------- 3D flip-in reveal (works with existing .reveal / .visible) ---------- */
.reveal {
  rotate: 1 0 0 11deg;
  transition: opacity .6s ease, transform .6s ease,
              rotate .8s cubic-bezier(.2,.7,.2,1), translate .3s ease, box-shadow .25s ease;
}
.reveal.visible { rotate: none; }

/* @core-start */
/* ---------- hover tilt (JS adds .tilt3d / .is-tilting) ---------- */
.tilt3d.is-tilting {
  transition: opacity .6s ease, transform .6s ease,
              rotate .14s ease-out, translate .25s ease, box-shadow .2s ease;
  translate: 0 0 18px;
  box-shadow: calc(var(--nx, 0) * -16px) calc(var(--ny, 0) * -10px + 26px) 46px rgba(16, 24, 38, .20);
  will-change: rotate, translate;
}
.hero-visual.is-tilting { translate: 0 0 10px; box-shadow: calc(var(--nx, 0) * -22px) calc(var(--ny, 0) * -12px + 34px) 76px rgba(16, 24, 38, .32); }
.service-area-card.is-tilting { translate: 0 0 8px; }

/* @core-end */

/* inner depth (cards without overflow:hidden can keep a 3D context) */
.service-card, .benefit { transform-style: preserve-3d; }
.service-card .service-icon { translate: 0 0 26px; box-shadow: 0 10px 18px rgba(122, 92, 0, .22); }
.benefit > span { translate: 0 0 20px; box-shadow: 0 6px 12px rgba(0, 0, 0, .3); }

/* hero panel inner parallax (2D, driven by --nx / --ny set while tilting) */
.hero-visual .camera-scene { translate: calc(var(--nx, 0) * -12px) calc(var(--ny, 0) * -9px); transition: translate .25s ease; }
.hero-visual .visual-badge { translate: calc(var(--nx, 0) * -5px) calc(var(--ny, 0) * -4px); transition: translate .25s ease; }
.hero-visual .visual-panel { translate: calc(var(--nx, 0) * 6px) calc(var(--ny, 0) * 4px); transition: translate .25s ease; }

/* @core2-start */
/* ---------- hero 3D scene (injected by 3d-effects.js) ---------- */
.fx3d-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fx3d-floor {
  position: absolute; left: -35%; right: -35%; bottom: -6%; height: 60%;
  background-image:
    linear-gradient(rgba(24, 63, 143, .17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 63, 143, .17) 1px, transparent 1px);
  background-size: 58px 58px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 82%);
  mask-image: linear-gradient(to top, #000 8%, transparent 82%);
  animation: fx3dFloor 6s linear infinite;
}
@keyframes fx3dFloor { to { background-position: 0 58px, 0 0; } }

.fx3d-float {
  position: absolute; width: 0; height: 0; perspective: 700px;
  translate: calc(var(--px, 0) * var(--depth, 16) * 1px) calc(var(--py, 0) * var(--depth, 16) * .7px + var(--sy, 0) * var(--depth, 16) * -2px);
}
.fx3d-cube { position: relative; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); transform-style: preserve-3d; animation: fx3dSpin var(--dur, 22s) linear infinite; }
.fx3d-cube i { position: absolute; inset: 0; border: 1.5px solid var(--edge); background: var(--fill); }
.fx3d-cube i:nth-child(1) { transform: translateZ(calc(var(--sz) / 2)); }
.fx3d-cube i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--sz) / 2)); }
.fx3d-cube i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--sz) / 2)); }
.fx3d-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--sz) / 2)); }
.fx3d-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--sz) / 2)); }
.fx3d-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--sz) / 2)); }
@keyframes fx3dSpin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
.fx3d-c1 { left: 7%;  top: 24%; --sz: 54px; --edge: rgba(224,173,0,.65); --fill: rgba(255,210,31,.09); --depth: 22; }
.fx3d-c2 { left: 63%; top: 80%; --sz: 40px; --edge: rgba(24,63,143,.55);  --fill: rgba(24,63,143,.07);  --depth: 14; --dur: 28s; }
.fx3d-c3 { left: 46%; top: 12%; --sz: 26px; --edge: rgba(224,173,0,.6);  --fill: rgba(255,210,31,.10); --depth: 30; --dur: 18s; }
.fx3d-c4 { left: 93%; top: 64%; --sz: 34px; --edge: rgba(24,63,143,.5);  --fill: rgba(24,63,143,.06);  --depth: 18; --dur: 24s; }

/* @core2-end */

.hero-shape { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); }

/* ---------- 3D buttons / logo ---------- */
.btn:not(.btn-outline):not(.btn-small) { box-shadow: 0 4px 0 #04070c, 0 12px 20px rgba(16, 24, 38, .18); }
.btn:not(.btn-outline):not(.btn-small):hover { transform: translateY(-2px); box-shadow: 0 6px 0 #04070c, 0 16px 26px rgba(16, 24, 38, .22); }
.btn:not(.btn-outline):not(.btn-small):active { transform: translateY(3px); box-shadow: 0 1px 0 #04070c, 0 4px 8px rgba(16, 24, 38, .2); }
.btn-outline { box-shadow: 0 4px 0 #aeb8c5; }
.btn-outline:hover { box-shadow: 0 6px 0 #aeb8c5; }
.btn-outline:active { transform: translateY(3px); box-shadow: 0 1px 0 #aeb8c5; }
.brand img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.brand:hover img { transform: perspective(400px) rotateY(360deg); }

/* ---------- small screens: leave room for the corner camera ---------- */
@media (max-width: 980px) {
  .fx3d-c3, .fx3d-c4 { display: none; }
}
@media (max-width: 680px) {
  .hero-grid { padding-top: 122px; }
  .hero-copy .eyebrow { max-width: calc(100% - 120px); line-height: 1.5; }
  .fx3d-c1 { display: none; }
  .fx3d-c2 { --sz: 28px; }
  .tilt3d.is-tilting { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { rotate: none; }
  .fx3d-floor, .fx3d-cube { animation: none; }
  .brand:hover img { transform: none; }
}
@media print { .fx3d-scene { display: none; } }