/* =====================================================
   LINKAZ — 3D DEPTH LAYER
   ===================================================== */

/* hero 3D canvas */
.hero-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease .4s; }
.hero-3d.ready { opacity: 1; }
.hero-inner, .hero-strip, .scroll-cue { z-index: 2; }
.hero-bg::after { background: linear-gradient(100deg, rgba(20,40,64,.94) 0%, rgba(25,48,78,.82) 45%, rgba(20,40,64,.62) 100%); }
html[dir="rtl"] .hero-bg::after { background: linear-gradient(260deg, rgba(20,40,64,.94) 0%, rgba(25,48,78,.82) 45%, rgba(20,40,64,.62) 100%); }
.hero-inner { max-width: 1200px; }
.hero h1 { max-width: 800px; }
.hero-lead { max-width: 640px; }

/* sections enter in 3D instead of a flat fade */
main, body { perspective-origin: 50% 0; }
.reveal { transform: perspective(1100px) translateY(46px) rotateX(14deg); transform-origin: 50% 100%; }
.reveal.in { transform: none; }
.reveal.from-side { transform: perspective(1100px) translateX(-50px) rotateY(10deg); }
.prod-card.reveal:not(.in) { transform: perspective(1100px) translateY(60px) rotateX(18deg) scale(.96); }
.div-item.reveal:not(.in) { transform: perspective(900px) rotateY(-50deg) translateZ(-40px); transform-origin: 50% 50%; }
html[dir="rtl"] .div-item.reveal:not(.in) { transform: perspective(900px) rotateY(50deg) translateZ(-40px); }
.div-item.reveal { transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .3s; }
.div-item.reveal.in { transition: opacity .9s ease, transform .35s ease, background .25s, border-color .25s, box-shadow .3s; }

/* depth on images */
.about-media, .split-media { transform-style: preserve-3d; transition: transform .3s ease-out; }
.about-badge, .float-badge { transform-style: preserve-3d; }
.tilt-media .about-badge, .tilt-media .float-badge { translate: 0 0 60px; }

/* layered division icons */
.div-item { transform-style: preserve-3d; }
.div-item:hover { transform: translateY(-6px) rotateX(8deg); box-shadow: 0 18px 30px rgba(20,40,64,.18); }

/* timeline dots pop forward */
.timeline.in .tl-dot { transform: perspective(400px) translateZ(0); animation: dotPop .7s cubic-bezier(.2,1.6,.4,1) backwards; }
.timeline.in .tl-step:nth-of-type(2) .tl-dot { animation-delay: .2s; }
.timeline.in .tl-step:nth-of-type(3) .tl-dot { animation-delay: .8s; }
.timeline.in .tl-step:nth-of-type(4) .tl-dot { animation-delay: 1.4s; }
.timeline.in .tl-step:nth-of-type(5) .tl-dot { animation-delay: 2s; }
@keyframes dotPop { from { transform: perspective(400px) translateZ(-120px) rotateY(180deg); } }

/* CTA band — the heading floats forward a little */
.cta-inner { transform-style: preserve-3d; }

@media (max-width: 900px) {
  .hero-3d.ready { opacity: .8; }
  .hero-inner { padding-top: 150px; }
}
@media (max-width: 640px) {
  .hero-actions .btn { white-space: nowrap; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .prod-card.reveal:not(.in), .div-item.reveal:not(.in) { transform: none; }
}