/* Prodex site — parallax, 3D and motion effects (GPU-friendly: transform/opacity only) */

/* ---------- Ambient background orbs ---------- */
.orbs { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--orb-opacity, .3);
  will-change: transform; transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.orb-1 { width: 560px; height: 560px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(59,130,246,.45), transparent 70%); }
.orb-2 { width: 480px; height: 480px; top: 30%; right: -160px; background: radial-gradient(circle, rgba(6,182,212,.35), transparent 70%); }
.orb-3 { width: 520px; height: 520px; bottom: -180px; left: 30%; background: radial-gradient(circle, rgba(139,92,246,.30), transparent 70%); }

/* Subtle grid overlay */
.bg-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 40%, transparent 78%);
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.65,.3,1), transform .8s cubic-bezier(.2,.65,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* ---------- Hero 3D stage ---------- */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: calc(var(--nav-h) + 60px) 0 40px; position: relative;
}
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero-copy .lead { margin: 22px 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }

.stage { perspective: 1400px; position: relative; height: 560px; }
.stage .float-card {
  position: absolute; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shot-shadow);
  will-change: transform; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.stage .fc-main { width: 88%; top: 6%; left: 0; transform: rotateY(-9deg) rotateX(4deg); z-index: 2; }
.stage .fc-a { width: 52%; right: -2%; top: 0; transform: rotateY(-14deg) rotateX(6deg) translateZ(60px); z-index: 3; }
.stage .fc-b { width: 58%; bottom: 2%; right: 2%; transform: rotateY(-11deg) rotateX(5deg) translateZ(90px); z-index: 4; }
.stage:hover .fc-main { transform: rotateY(-4deg) rotateX(2deg); }
.stage:hover .fc-a { transform: rotateY(-7deg) rotateX(3deg) translateZ(70px); }
.stage:hover .fc-b { transform: rotateY(-5deg) rotateX(2deg) translateZ(100px); }

/* Floating animation */
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.floaty { animation: floaty 7s ease-in-out infinite; }
.floaty-slow { animation: floaty 10s ease-in-out infinite; }

/* ---------- Parallax layers (scroll-driven, JS sets --py) ---------- */
.plx { will-change: transform; transform: translate3d(0, calc(var(--py, 0) * 1px), 0); }

/* ---------- Tilt cards ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform .25s ease-out; }
.tilt .tilt-glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.16), transparent 45%);
}
.tilt:hover .tilt-glare { opacity: 1; }

/* ---------- Glow divider ---------- */
.glow-line {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.5), rgba(6,182,212,.5), transparent);
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Accent band section ---------- */
.band {
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(59,130,246,.08), transparent 60%), var(--bg-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .floaty, .floaty-slow, .marquee-track { animation: none; }
  .plx { transform: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1020px) {
  .hero-inner { grid-template-columns: 1fr; }
  .stage { height: auto; margin-top: 20px; }
  .stage .float-card { position: relative; width: 100% !important; inset: auto !important; transform: none !important; margin-bottom: 16px; }
}