.elementor-3555 .elementor-element.elementor-element-ff415ae{--display:flex;}/* Start custom CSS for container, class: .elementor-element-ff415ae */<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apex Hero Background</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red: #E8001D;
}

body {
  background: #0A0A0A;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* ─── Canvas (Three.js) ─── */
#hero-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ─── Gradient overlay ─── */
.hero-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(10,10,10,0.85) 0%,
    rgba(10,10,10,0.3)  60%,
    rgba(10,10,10,0.7)  100%
  );
  pointer-events: none;
}

/* ─── Demo label (optional — remove if embedding) ─── */
.demo-label {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255,255,255,0.25);
  font-family: monospace;
  font-size: .75rem;
  letter-spacing: 3px;
  pointer-events: none;
}
</style>
</head>
<body>

<canvas id="hero-canvas"></canvas>
<div class="hero-overlay"></div>
<div class="demo-label">HERO BACKGROUND — APEX DETAILING</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
/* ════════════════════════════════════════
   APEX — Hero Background (Three.js)
   ════════════════════════════════════════
   شامل:
   1. Particle field  — ۲۰۰۰ ذره شناور
   2. Floating rings  — ۴ حلقه چرخان
   3. Wireframe sphere
   4. Glow core       — کره پالسینگ قرمز
   5. Mouse parallax  — حرکت دوربین با ماوس
   ════════════════════════════════════════ */

const canvas   = document.getElementById('hero-canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(0x000000, 0);

const scene  = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);
camera.position.set(0, 0, 5);

/* ── 1. Particle field ── */
const COUNT     = 2000;
const positions = new Float32Array(COUNT * 3);
const colors    = new Float32Array(COUNT * 3);

for (let i = 0; i < COUNT; i++) {
  positions[i * 3]     = (Math.random() - 0.5) * 20;
  positions[i * 3 + 1] = (Math.random() - 0.5) * 15;
  positions[i * 3 + 2] = (Math.random() - 0.5) * 10 - 5;

  if (Math.random() > 0.85) {
    /* قرمز */
    colors[i * 3]     = 0.9;
    colors[i * 3 + 1] = 0;
    colors[i * 3 + 2] = 0.1;
  } else {
    /* خاکستری با روشنایی تصادفی */
    const g = Math.random() * 0.6;
    colors[i * 3]     = g;
    colors[i * 3 + 1] = g;
    colors[i * 3 + 2] = g;
  }
}

const pGeo = new THREE.BufferGeometry();
pGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
pGeo.setAttribute('color',    new THREE.BufferAttribute(colors,    3));

const pMat = new THREE.PointsMaterial({
  size: 0.04,
  vertexColors: true,
  transparent: true,
  opacity: 0.8
});

const particles = new THREE.Points(pGeo, pMat);
scene.add(particles);

/* ── 2. Floating rings ── */
const rings = [];
for (let i = 0; i < 4; i++) {
  const geo = new THREE.TorusGeometry(1.2 + i * 0.8, 0.008, 8, 80);
  const mat = new THREE.MeshBasicMaterial({
    color:       i === 0 ? 0xE8001D : 0x333333,
    transparent: true,
    opacity:     i === 0 ? 0.7 : 0.2
  });
  const ring = new THREE.Mesh(geo, mat);
  ring.rotation.x = Math.random() * Math.PI;
  ring.rotation.y = Math.random() * Math.PI;
  rings.push(ring);
  scene.add(ring);
}

/* ── 3. Wireframe sphere ── */
const sGeo    = new THREE.SphereGeometry(1.8, 12, 8);
const sMat    = new THREE.MeshBasicMaterial({
  color:     0xE8001D,
  wireframe: true,
  transparent: true,
  opacity:   0.07
});
const sphere  = new THREE.Mesh(sGeo, sMat);
scene.add(sphere);

/* ── 4. Glow core ── */
const cGeo  = new THREE.SphereGeometry(0.3, 32, 32);
const cMat  = new THREE.MeshBasicMaterial({
  color:       0xE8001D,
  transparent: true,
  opacity:     0.3
});
const core  = new THREE.Mesh(cGeo, cMat);
scene.add(core);

/* ── 5. Mouse parallax ── */
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', e => {
  mouseX = (e.clientX / window.innerWidth  - 0.5) * 2;
  mouseY = -(e.clientY / window.innerHeight - 0.5) * 2;
});

/* ── Render loop ── */
function render(t) {
  requestAnimationFrame(render);
  const ti = t * 0.001;

  particles.rotation.y = ti * 0.05;
  particles.rotation.x = ti * 0.02;

  rings.forEach((r, i) => {
    r.rotation.x += 0.003 * (i + 1) * 0.3;
    r.rotation.y += 0.002 * (i + 1) * 0.3;
  });

  sphere.rotation.y = ti * 0.1;
  sphere.rotation.x = ti * 0.05;

  core.scale.setScalar(1 + Math.sin(ti * 3) * 0.1);

  camera.position.x += (mouseX * 0.5 - camera.position.x) * 0.03;
  camera.position.y += (mouseY * 0.5 - camera.position.y) * 0.03;
  camera.lookAt(0, 0, 0);

  renderer.render(scene, camera);
}
render(0);

/* ── Resize ── */
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>/* End custom CSS */