/* ==========================================================================
   PISHTAZ360 — DEPTH 3D LAYER  (v1.0)
   --------------------------------------------------------------------------
   لایه‌ی سه‌بعدی سایت. هیچ رنگ، فونت یا متنی را تغییر نمی‌دهد.
   فقط عمق، پرسپکتیو، سایه و حرکت اضافه می‌کند.
   این فایل باید *بعد از* site.css لود شود.
   ========================================================================== */

:root{
  /* عمق‌ها — بر پایه‌ی همان نِیوی برند (#061F4F) ساخته شده‌اند */
  --d3-persp: 1400px;
  --d3-persp-card: 900px;
  --d3-ease: cubic-bezier(.22,.61,.36,1);
  --d3-ease-out: cubic-bezier(.16,1,.3,1);
  --d3-dur: .55s;

  --d3-shadow-1: 0 2px 6px rgba(6,31,79,.05), 0 8px 20px rgba(6,31,79,.055);
  --d3-shadow-2: 0 4px 10px rgba(6,31,79,.06), 0 18px 42px rgba(6,31,79,.10);
  --d3-shadow-3: 0 8px 18px rgba(6,31,79,.08), 0 32px 70px rgba(6,31,79,.16);
  --d3-shadow-4: 0 14px 28px rgba(6,31,79,.10), 0 48px 110px rgba(6,31,79,.22);
  --d3-rim: inset 0 1px 0 rgba(255,255,255,.75);
}

/* ---------- 0) پایه: صحنه‌ی سه‌بعدی ---------- */
html.d3-on body{ perspective: var(--d3-persp); perspective-origin: 50% 0; }
html.d3-on .ps-section,
html.d3-on .ps-hero,
html.d3-on .ps-page-hero,
html.d3-on .ps-content{ transform-style: preserve-3d; }

/* گرافیک سه‌بعدی روی GPU بماند */
.d3-layer{ will-change: transform; backface-visibility: hidden; }

/* ==========================================================================
   1) ورود صحنه‌ای (Scroll Reveal با عمق واقعی Z)
   ========================================================================== */
html.d3-on .d3-reveal{
  opacity: 0;
  transform: translate3d(0, 34px, -120px) rotateX(7deg);
  transform-origin: 50% 100%;
  transition:
    opacity .7s var(--d3-ease-out),
    transform .9s var(--d3-ease-out);
  will-change: transform, opacity;
}
html.d3-on .d3-reveal.is-in{
  opacity: 1;
  transform: translate3d(0,0,0) rotateX(0deg);
}
/* پلکانی شدن آیتم‌های یک گرید */
html.d3-on .d3-reveal[data-d3-delay="1"]{ transition-delay:.07s }
html.d3-on .d3-reveal[data-d3-delay="2"]{ transition-delay:.14s }
html.d3-on .d3-reveal[data-d3-delay="3"]{ transition-delay:.21s }
html.d3-on .d3-reveal[data-d3-delay="4"]{ transition-delay:.28s }
html.d3-on .d3-reveal[data-d3-delay="5"]{ transition-delay:.35s }
html.d3-on .d3-reveal[data-d3-delay="6"]{ transition-delay:.42s }

/* ==========================================================================
   2) کارت‌های سه‌بعدی (Tilt + عمق داخلی)
   ========================================================================== */
html.d3-on .d3-tilt{
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform .5s var(--d3-ease),
    box-shadow .5s var(--d3-ease);
  will-change: transform;
}
html.d3-on .d3-tilt.is-live{
  transform:
    perspective(var(--d3-persp-card))
    rotateX(var(--d3-rx,0deg))
    rotateY(var(--d3-ry,0deg))
    translate3d(0,-6px,24px);
  box-shadow: var(--d3-shadow-3), var(--d3-rim);
  transition: box-shadow .35s var(--d3-ease);
}

/* لایه‌های داخلی کارت که از سطح بلند می‌شوند */
html.d3-on .d3-tilt > *{ transform-style: preserve-3d; }
html.d3-on .d3-tilt.is-live .ps-icon,
html.d3-on .d3-tilt.is-live > h2,
html.d3-on .d3-tilt.is-live > h3,
html.d3-on .d3-tilt.is-live > h4{
  transform: translate3d(0,0,34px);
}
html.d3-on .d3-tilt.is-live > p,
html.d3-on .d3-tilt.is-live > ul,
html.d3-on .d3-tilt.is-live .pishtaz360-price{
  transform: translate3d(0,0,18px);
}
html.d3-on .d3-tilt .ps-icon,
html.d3-on .d3-tilt > h2,
html.d3-on .d3-tilt > h3,
html.d3-on .d3-tilt > h4,
html.d3-on .d3-tilt > p,
html.d3-on .d3-tilt > ul,
html.d3-on .d3-tilt .pishtaz360-price{
  transition: transform .5s var(--d3-ease);
}

/* درخشش نرمِ دنبال‌کننده‌ی نشانگر (بدون تغییر رنگ برند) */
html.d3-on .d3-tilt::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .4s var(--d3-ease);
  background: radial-gradient(
      420px circle at var(--d3-mx,50%) var(--d3-my,50%),
      rgba(255,255,255,.55),
      rgba(255,255,255,0) 62%);
  mix-blend-mode: soft-light;
  z-index: 1;
}
html.d3-on .d3-tilt.is-live::after{ opacity:1 }

/* روی بخش‌های تیره، درخشش ملایم‌تر و مناسب زمینه‌ی نِیوی */
html.d3-on .ps-dark .d3-tilt::after,
html.d3-on .ps-cta .d3-tilt::after{
  background: radial-gradient(
      420px circle at var(--d3-mx,50%) var(--d3-my,50%),
      rgba(255,255,255,.22),
      rgba(255,255,255,0) 60%);
}
html.d3-on .ps-dark .d3-tilt.is-live{
  box-shadow: 0 10px 22px rgba(0,0,0,.20), 0 42px 90px rgba(0,0,0,.28);
}

/* آیکن کارت: بلند شدن + چرخش خفیف */
html.d3-on .ps-icon{
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .d3-tilt.is-live .ps-icon{
  transform: translate3d(0,-2px,44px) rotateY(-8deg) rotateX(4deg) scale(1.04);
  box-shadow: 0 12px 26px rgba(6,31,79,.16);
}

/* ==========================================================================
   3) قهرمان صفحه (Hero) — ماکت مرورگرِ شناور سه‌بعدی
   ========================================================================== */
html.d3-on .ps-hero-grid{ transform-style: preserve-3d; }

html.d3-on .ps-browser{
  transform-style: preserve-3d;
  transform:
    perspective(1500px)
    rotateX(var(--d3-hero-rx, 4deg))
    rotateY(var(--d3-hero-ry, -8deg))
    rotateZ(1deg)
    translate3d(0, var(--d3-float, 0px), 0);
  box-shadow:
    0 6px 14px rgba(6,31,79,.06),
    0 26px 54px rgba(6,31,79,.13),
    0 60px 120px rgba(6,31,79,.16);
  transition: transform .9s var(--d3-ease-out), box-shadow .6s var(--d3-ease);
  will-change: transform;
}
html.d3-on .ps-browser:hover{
  box-shadow:
    0 8px 18px rgba(6,31,79,.08),
    0 34px 70px rgba(6,31,79,.17),
    0 80px 150px rgba(6,31,79,.20);
}
/* بازتاب زیر ماکت — حس نشستن روی سطح */
html.d3-on .ps-browser::after{
  content:"";
  position:absolute;
  left:8%; right:8%; bottom:-34px; height:40px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(6,31,79,.20), rgba(6,31,79,0) 72%);
  filter: blur(10px);
  transform: translateZ(-90px);
  pointer-events:none;
}
html.d3-on .ps-browser{ position: relative; }

/* عمق داخلی ماکت */
html.d3-on .ps-browser-top{ transform: translateZ(26px); transform-style: preserve-3d; }
html.d3-on .ps-browser-body{ transform-style: preserve-3d; }
html.d3-on .ps-browser-logo{
  transform: translateZ(60px) rotateY(-6deg);
  box-shadow: 0 16px 34px rgba(6,31,79,.24);
}
html.d3-on .ps-browser-body > h3,
html.d3-on .ps-browser-title{ transform: translateZ(40px) }
html.d3-on .ps-browser-body > p{ transform: translateZ(26px) }
html.d3-on .ps-browser-cards{ transform: translateZ(14px); transform-style: preserve-3d }
html.d3-on .ps-browser-cards span{
  transform: translateZ(0);
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
}
html.d3-on .ps-browser:hover .ps-browser-cards span:nth-child(1){ transform: translateZ(22px) }
html.d3-on .ps-browser:hover .ps-browser-cards span:nth-child(2){ transform: translateZ(34px) }
html.d3-on .ps-browser:hover .ps-browser-cards span:nth-child(3){ transform: translateZ(26px) }
html.d3-on .ps-browser-cards span{ box-shadow: 0 6px 16px rgba(6,31,79,.07) }

/* متن قهرمان: پارالاکس عمقی هنگام اسکرول */
html.d3-on .d3-parallax{
  transform: translate3d(0, var(--d3-py, 0px), var(--d3-pz, 0px));
  will-change: transform;
}

/* میدان عمق پس‌زمینه — فقط نور، بدون رنگ جدید */
html.d3-on .ps-hero{ position: relative; overflow: hidden; isolation: isolate; }
html.d3-on .ps-hero .d3-depth-field{
  position:absolute; inset:-10%;
  z-index:-1; pointer-events:none;
  transform-style: preserve-3d;
}
html.d3-on .ps-hero .d3-depth-field i{
  position:absolute;
  display:block;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(23,169,229,.16), rgba(11,103,215,.06) 55%, rgba(11,103,215,0) 72%);
  filter: blur(1px);
  will-change: transform;
}
html.d3-on .ps-hero .d3-depth-field i:nth-child(1){ width:340px;height:340px; top:4%;  left:6%;  }
html.d3-on .ps-hero .d3-depth-field i:nth-child(2){ width:220px;height:220px; top:58%; left:18%; }
html.d3-on .ps-hero .d3-depth-field i:nth-child(3){ width:420px;height:420px; top:-6%; right:4%; }
html.d3-on .ps-hero .d3-depth-field i:nth-child(4){ width:180px;height:180px; bottom:6%; right:22%;
  background: radial-gradient(circle at 40% 40%, rgba(233,170,27,.14), rgba(233,170,27,0) 68%); }

/* ==========================================================================
   4) هدر — ارتفاع‌گیری هنگام اسکرول
   ========================================================================== */
html.d3-on .ps-header{
  transform-style: preserve-3d;
  transition: box-shadow .4s var(--d3-ease), backdrop-filter .4s var(--d3-ease);
}
html.d3-on .ps-header.d3-lifted{
  box-shadow: 0 1px 0 rgba(217,229,243,.9), 0 14px 34px rgba(6,31,79,.10);
}
html.d3-on .ps-brand-icon,
html.d3-on .ps-brand-mark{
  transition: transform .5s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .ps-brand:hover .ps-brand-icon,
html.d3-on .ps-brand:hover .ps-brand-mark{
  transform: perspective(700px) rotateY(-16deg) rotateX(6deg) translateZ(14px);
}
/* آیتم‌های منو: بلند شدن ظریف */
html.d3-on .ps-nav a{
  display:inline-block;
  transition: transform .35s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .ps-nav a:hover{ transform: translate3d(0,-2px,12px) }

/* ==========================================================================
   5) دکمه‌ها — حجم و فشار واقعی
   ========================================================================== */
html.d3-on .ps-btn{
  transform-style: preserve-3d;
  transition: transform .28s var(--d3-ease), box-shadow .28s var(--d3-ease), background .2s ease;
}
html.d3-on .ps-btn:hover{
  transform: perspective(800px) translate3d(0,-3px,18px) rotateX(5deg);
}
html.d3-on .ps-btn-primary:hover{
  box-shadow: 0 6px 14px rgba(228,170,40,.22), 0 22px 44px rgba(228,170,40,.26);
}
html.d3-on .ps-btn-secondary:hover,
html.d3-on .ps-btn-light:hover{
  box-shadow: 0 6px 14px rgba(6,31,79,.08), 0 20px 40px rgba(6,31,79,.14);
}
html.d3-on .ps-btn:active{
  transform: perspective(800px) translate3d(0,1px,2px) rotateX(0deg) scale(.985);
  transition-duration: .08s;
}

/* ==========================================================================
   6) مراحل کار (Workflow) — پله‌های عمقی
   ========================================================================== */
html.d3-on .ps-workflow{ transform-style: preserve-3d }
html.d3-on .ps-step{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease);
}
html.d3-on .ps-step:hover{ transform: translate3d(0,-6px,30px) }
html.d3-on .ps-step:hover span{ transform: translateZ(18px); display:inline-block }
html.d3-on .ps-step span{ transition: transform .5s var(--d3-ease) }

/* ==========================================================================
   7) بلوک CTA — صفحه‌ی شیب‌دار سه‌بعدی
   ========================================================================== */
html.d3-on .ps-cta{
  transform-style: preserve-3d;
  transform: perspective(1500px) rotateX(var(--d3-cta-rx,0deg)) rotateY(var(--d3-cta-ry,0deg));
  box-shadow: 0 10px 24px rgba(6,31,79,.14), 0 40px 90px rgba(6,31,79,.22);
  transition: transform .6s var(--d3-ease), box-shadow .6s var(--d3-ease);
  will-change: transform;
}
html.d3-on .ps-cta > *{ transform: translateZ(28px); transform-style: preserve-3d }

/* ==========================================================================
   8) نمونه‌کارها و قیمت‌ها
   ========================================================================== */
html.d3-on .pishtaz360-project-card,
html.d3-on .pishtaz360-price-card{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
  will-change: transform;
}
html.d3-on .pishtaz360-project-card img{
  transition: transform .6s var(--d3-ease);
  transform: translateZ(0);
}
html.d3-on .pishtaz360-project-card.is-live img{
  transform: translateZ(30px) scale(1.03);
}
html.d3-on .pishtaz360-price-card.is-featured{
  transform: perspective(1200px) translateZ(26px);
  box-shadow: 0 10px 22px rgba(6,31,79,.10), 0 36px 78px rgba(6,31,79,.18);
}

/* ==========================================================================
   9) پرسش‌های متداول — باز شدن با عمق
   ========================================================================== */
html.d3-on .ps-faq{ transform-style: preserve-3d }
html.d3-on .ps-faq summary{
  transition: transform .35s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .ps-faq summary:hover{ transform: translate3d(0,-1px,14px) }
html.d3-on .ps-faq[open] summary{ transform: translateZ(18px) }
html.d3-on .ps-faq[open] p{
  animation: d3-open .5s var(--d3-ease-out) both;
}
@keyframes d3-open{
  from{ opacity:0; transform: translate3d(0,-6px,-40px) rotateX(-6deg) }
  to  { opacity:1; transform: none }
}

/* ==========================================================================
   10) تصاویر و جدول‌ها
   ========================================================================== */
html.d3-on .ps-prose img,
html.d3-on .ps-content img:not(.ps-brand-icon):not(.custom-logo){
  transition: transform .6s var(--d3-ease), box-shadow .6s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .ps-prose img:hover,
html.d3-on .ps-content img:not(.ps-brand-icon):not(.custom-logo):hover{
  transform: perspective(1200px) rotateY(-4deg) rotateX(3deg) translateZ(26px);
  box-shadow: var(--d3-shadow-3);
}
html.d3-on .ps-compare-table{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
}
html.d3-on .ps-compare-table:hover{
  transform: perspective(1600px) rotateX(1.2deg) translateZ(14px);
  box-shadow: var(--d3-shadow-2);
}

/* ==========================================================================
   11) فوتر — نشستن در عمق
   ========================================================================== */
html.d3-on .ps-footer{ transform-style: preserve-3d }
html.d3-on .ps-footer a{
  display:inline-block;
  transition: transform .3s var(--d3-ease);
}
html.d3-on .ps-footer a:hover{ transform: translate3d(0,-1px,10px) }

/* ==========================================================================
   12) RTL — جهت چرخش‌ها آینه می‌شود
   ========================================================================== */
html.d3-on [dir="rtl"] .ps-browser,
html.d3-on body.rtl .ps-browser{
  transform:
    perspective(1500px)
    rotateX(var(--d3-hero-rx, 4deg))
    rotateY(var(--d3-hero-ry, 8deg))
    rotateZ(-1deg)
    translate3d(0, var(--d3-float, 0px), 0);
}
html.d3-on body.rtl .d3-tilt.is-live .ps-icon,
html.d3-on .ps-rtl .d3-tilt.is-live .ps-icon{
  transform: translate3d(0,-2px,44px) rotateY(8deg) rotateX(4deg) scale(1.04);
}

/* ==========================================================================
   13) موبایل و لمسی — عمق حفظ، تیلت خاموش
   ========================================================================== */
@media (max-width: 860px), (hover: none){
  html.d3-on .d3-tilt.is-live{
    transform: translate3d(0,-4px,0);
    box-shadow: var(--d3-shadow-2);
  }
  html.d3-on .d3-tilt.is-live::after{ opacity:0 }
  html.d3-on .ps-browser{
    transform: perspective(1400px) rotateX(2deg) rotateY(-3deg);
  }
  html.d3-on body.rtl .ps-browser{
    transform: perspective(1400px) rotateX(2deg) rotateY(3deg);
  }
  html.d3-on .ps-hero .d3-depth-field{ opacity:.6 }
  html.d3-on .d3-reveal{ transform: translate3d(0,22px,-60px) }
}

/* ==========================================================================
   14) دسترس‌پذیری — احترام کامل به prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html.d3-on .d3-reveal{ opacity:1 !important; transform:none !important }
  html.d3-on .d3-tilt,
  html.d3-on .d3-tilt.is-live,
  html.d3-on .ps-browser,
  html.d3-on .ps-cta,
  html.d3-on .ps-btn:hover,
  html.d3-on .ps-step:hover{ transform:none !important }
  html.d3-on .d3-tilt::after{ display:none }
  html.d3-on .ps-hero .d3-depth-field{ display:none }
}

/* چاپ: بدون افکت */
@media print{
  html.d3-on *{ transform:none !important; box-shadow:none !important; opacity:1 !important }
  html.d3-on .d3-depth-field{ display:none !important }
}


/* Full request form: restrained 3D depth, no palette/font changes */
html.d3-on .ps-request-form-shell{
  perspective:var(--d3-persp);
  transform-style:preserve-3d;
}
/* Keep the form text on a native 2D raster surface. The shell may still fade in,
   but it must not keep a translate3d/rotate transform after reveal. */
html.d3-on .ps-request-form-shell.d3-reveal,
html.d3-on .ps-request-form-shell.d3-reveal.is-in{
  transform:none;
  transform-origin:50% 100%;
  will-change:opacity;
}
html.d3-on .ps-request-form-frame{
  transform:none;
  transform-style:flat;
  transition:height .18s ease,box-shadow .45s var(--d3-ease);
  box-shadow:var(--d3-shadow-2),var(--d3-rim);
}
html.d3-on .ps-request-form-shell:hover .ps-request-form-frame{
  transform:none;
  box-shadow:var(--d3-shadow-3),var(--d3-rim);
}
@media(max-width:860px),(prefers-reduced-motion:reduce){
  html.d3-on .ps-request-form-frame,
  html.d3-on .ps-request-form-shell:hover .ps-request-form-frame{transform:none}
}