/* ==========================================================================
   DOLPHIN DIGITAL MENU — DEPTH 3D LAYER  v1.0
   --------------------------------------------------------------------------
   لایه‌ی سه‌بعدی منوی دیجیتال دلفین.
   رنگ‌های برند (طلایی --gold / دریایی --sea)، فونت‌ها و متن‌ها دست‌نخورده‌اند.
   باید *بعد از* css/style.css لود شود.
   هر دو حالت تیره و روشن (data-theme) پشتیبانی می‌شوند.
   ========================================================================== */

:root{
  --d3-ease: cubic-bezier(.22,.61,.36,1);
  --d3-ease-out: cubic-bezier(.16,1,.3,1);
  --d3-persp: 1200px;

  /* سایه‌های عمق — روی زمینه‌ی تیره‌ی دریایی */
  --d3-sh-1: 0 6px 16px rgba(0,0,0,.28), 0 20px 46px rgba(0,0,0,.30);
  --d3-sh-2: 0 10px 24px rgba(0,0,0,.34), 0 34px 78px rgba(0,0,0,.40);
  --d3-sh-3: 0 16px 34px rgba(0,0,0,.40), 0 56px 120px rgba(0,0,0,.48);

  /* هاله‌ها — فقط از طلایی و دریایی خود برند */
  --d3-glow-gold: 0 0 0 1px rgba(216,184,72,.30), 0 18px 46px rgba(216,184,72,.16);
  --d3-glow-sea:  0 0 0 1px rgba(41,168,179,.26), 0 18px 46px rgba(14,109,120,.22);
}

html[data-theme="light"]{
  --d3-sh-1: 0 6px 16px rgba(66,45,10,.08), 0 20px 44px rgba(66,45,10,.10);
  --d3-sh-2: 0 10px 22px rgba(66,45,10,.10), 0 34px 74px rgba(66,45,10,.14);
  --d3-sh-3: 0 16px 32px rgba(66,45,10,.12), 0 56px 112px rgba(66,45,10,.18);
}

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

html.d3-on .d3-layer{ will-change: transform; backface-visibility: hidden }

/* ==========================================================================
   1) ورود عناصر از عمق
   ========================================================================== */
html.d3-on .d3-reveal{
  opacity:0;
  transform: translate3d(0,30px,-110px) rotateX(8deg);
  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(0) }
html.d3-on .d3-reveal[data-d3-delay="1"]{ transition-delay:.06s }
html.d3-on .d3-reveal[data-d3-delay="2"]{ transition-delay:.12s }
html.d3-on .d3-reveal[data-d3-delay="3"]{ transition-delay:.18s }
html.d3-on .d3-reveal[data-d3-delay="4"]{ transition-delay:.24s }
html.d3-on .d3-reveal[data-d3-delay="5"]{ transition-delay:.30s }
html.d3-on .d3-reveal[data-d3-delay="6"]{ transition-delay:.36s }

/* ==========================================================================
   2) هدر قهرمان — صحنه‌ی چندلایه‌ی دریایی
   ========================================================================== */
html.d3-on .hero{ transform-style: preserve-3d; perspective: 1500px }

/* تصویر پس‌زمینه در دورترین عمق، کندتر حرکت می‌کند */
html.d3-on .hero-media{
  transform: scale(1.14) translate3d(var(--d3-bg-x,0px), var(--d3-bg-y,0px), 0);
  transition: transform 1.2s var(--d3-ease-out);
  will-change: transform;
}
html.d3-on .hero-overlay{ transform: translateZ(1px) }

/* موج‌ها در عمق‌های متفاوت شناور می‌شوند */
html.d3-on .wave{
  transform-style: preserve-3d;
  will-change: transform;
}
html.d3-on .wave-one{
  transform: rotate(-3deg) translate3d(var(--d3-w1-x,0px), var(--d3-w1-y,0px), 40px);
  animation: d3-wave-a 11s ease-in-out infinite;
}
html.d3-on .wave-two{
  transform: rotate(2deg) translate3d(var(--d3-w2-x,0px), var(--d3-w2-y,0px), 80px);
  animation: d3-wave-b 14s ease-in-out infinite;
}
@keyframes d3-wave-a{
  0%,100%{ transform: rotate(-3deg) translate3d(0,0,40px) }
  50%    { transform: rotate(-2.2deg) translate3d(0,-14px,58px) }
}
@keyframes d3-wave-b{
  0%,100%{ transform: rotate(2deg) translate3d(0,0,80px) }
  50%    { transform: rotate(1.3deg) translate3d(0,-10px,96px) }
}

/* واترمارک لوگو در عمق منفی — حس بُعد پشت صحنه */
html.d3-on .hero::after{
  transform: translate(-50%,-50%) translateZ(-160px) scale(1.12);
}

/* ---------- کارت اصلی قهرمان: شیشه‌ی شناور سه‌بعدی ---------- */
html.d3-on .hero-card{
  position: relative;
  transform-style: preserve-3d;
  transform:
    perspective(1400px)
    rotateX(var(--d3-hc-rx, 3deg))
    rotateY(var(--d3-hc-ry, 4deg))
    translate3d(0, var(--d3-hc-float, 0px), 60px);
  box-shadow: var(--d3-sh-3), 0 0 0 1px rgba(216,184,72,.16);
  transition: transform .9s var(--d3-ease-out), box-shadow .6s var(--d3-ease);
  will-change: transform;
}
/* بازتاب زیر کارت */
html.d3-on .hero-card::after{
  content:"";
  position:absolute; left:6%; right:6%; bottom:-38px; height:48px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,.52), rgba(0,0,0,0) 74%);
  filter: blur(14px);
  transform: translateZ(-110px);
  pointer-events:none;
}
html[data-theme="light"].d3-on .hero-card::after{
  background: radial-gradient(60% 100% at 50% 0%, rgba(66,45,10,.26), rgba(66,45,10,0) 74%);
}

/* لایه‌های داخلی کارت، هرکدام در ارتفاع متفاوت */
html.d3-on .hero-card > *{ transform-style: preserve-3d }
html.d3-on .branch-badge{ transform: translateZ(34px) }
html.d3-on .hero-logo{
  transform: translateZ(76px) rotateY(-5deg);
  box-shadow: 0 20px 44px rgba(0,0,0,.42);
  transition: transform .7s var(--d3-ease);
}
html.d3-on .hero-card:hover .hero-logo{ transform: translateZ(96px) rotateY(-9deg) }
html.d3-on .hero-card .eyebrow{ transform: translateZ(44px) }
html.d3-on .hero-card h1{ transform: translateZ(58px) }
html.d3-on .hero-en{ transform: translateZ(48px) }
html.d3-on .slogan{
  transform: translateZ(38px);
  box-shadow: 0 10px 26px rgba(0,0,0,.24);
}
html.d3-on .hero-address{ transform: translateZ(26px) }
html.d3-on .hero-actions{ transform: translateZ(30px); transform-style: preserve-3d }

/* ---------- دکمه‌های ورود به منو ---------- */
html.d3-on .menu-entry{
  transform-style: preserve-3d;
  transition: transform .4s var(--d3-ease), box-shadow .4s var(--d3-ease), border-color .3s ease;
}
html.d3-on .menu-entry:hover{
  transform: perspective(900px) translate3d(0,-5px,42px) rotateX(6deg);
  box-shadow: var(--d3-sh-2), var(--d3-glow-gold);
}
html.d3-on .cafe-entry:hover{ box-shadow: var(--d3-sh-2), var(--d3-glow-sea) }
html.d3-on .menu-entry:active{
  transform: perspective(900px) translate3d(0,1px,8px) scale(.985);
  transition-duration: .09s;
}
html.d3-on .menu-entry-icon{
  display:inline-block;
  transition: transform .45s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .menu-entry:hover .menu-entry-icon{
  transform: translateZ(28px) rotateY(-14deg) scale(1.12);
}

/* ==========================================================================
   3) نوار بالا (Topbar) — قرص شناور
   ========================================================================== */
html.d3-on .topbar{
  transform-style: preserve-3d;
  transition: box-shadow .45s var(--d3-ease), transform .45s var(--d3-ease);
}
html.d3-on .topbar.d3-lifted{
  transform: translateX(-50%) translateZ(0) scale(.985);
  box-shadow: 0 14px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(216,184,72,.18);
}
html[data-theme="light"].d3-on .topbar.d3-lifted{
  box-shadow: 0 14px 40px rgba(66,45,10,.16), 0 0 0 1px rgba(126,94,14,.16);
}
html.d3-on .brand img{
  transition: transform .5s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .brand:hover img{
  transform: perspective(700px) rotateY(16deg) rotateX(6deg) translateZ(16px);
}
html.d3-on .topbar-links a{
  display:inline-block;
  transition: transform .3s var(--d3-ease), background .25s ease, color .25s ease;
}
html.d3-on .topbar-links a:hover{ transform: translate3d(0,-2px,14px) }
html.d3-on .theme-toggle{
  transition: transform .4s var(--d3-ease), box-shadow .4s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .theme-toggle:hover{
  transform: perspective(700px) rotateY(-14deg) translateZ(16px);
  box-shadow: var(--d3-glow-gold);
}
html.d3-on .theme-toggle:active{ transform: translateZ(2px) scale(.94); transition-duration:.08s }

/* ==========================================================================
   4) کارت‌های اطلاعات سریع — تیلت با نشانگر
   ========================================================================== */
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(950px)
    rotateX(var(--d3-rx,0deg))
    rotateY(var(--d3-ry,0deg))
    translate3d(0,-6px,26px);
  box-shadow: var(--d3-sh-2), var(--d3-glow-gold);
  transition: box-shadow .35s var(--d3-ease);
}
/* درخشش دنبال‌کننده‌ی نشانگر — از طلایی برند */
html.d3-on .d3-tilt::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  z-index:0;
  transition: opacity .4s var(--d3-ease);
  background: radial-gradient(360px circle at var(--d3-mx,50%) var(--d3-my,50%),
              rgba(242,216,106,.16), rgba(242,216,106,0) 62%);
}
html.d3-on .d3-tilt.is-live::before{ opacity:1 }

html.d3-on .info-card > *{ position:relative; z-index:1; transform-style: preserve-3d }
html.d3-on .info-card .info-icon,
html.d3-on .info-card > strong{
  transition: transform .5s var(--d3-ease);
}
html.d3-on .info-card.is-live .info-icon{
  transform: translate3d(0,-2px,44px) rotateY(-10deg) scale(1.1);
}
html.d3-on .info-card.is-live > strong{ transform: translateZ(28px) }
html.d3-on .info-card.is-live > p{ transform: translateZ(16px) }
html.d3-on .info-card > p{ transition: transform .5s var(--d3-ease) }

/* کارت QR — برجسته‌تر */
html.d3-on .qr-placeholder{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
}
html.d3-on .qr-card.is-live .qr-placeholder{
  transform: translateZ(50px) rotateY(-8deg);
  box-shadow: var(--d3-glow-gold);
}

/* ==========================================================================
   5) ویترین تصاویر (Showcase) — قاب‌های شناور
   ========================================================================== */
html.d3-on .showcase-grid{ transform-style: preserve-3d }
html.d3-on .showcase-grid figure{
  transform-style: preserve-3d;
  overflow: hidden;
  transition: transform .6s var(--d3-ease), box-shadow .6s var(--d3-ease);
  box-shadow: var(--d3-sh-1);
  will-change: transform;
}
html.d3-on .showcase-grid figure:hover{
  transform: perspective(1100px) rotateY(var(--d3-sc-ry,-5deg)) rotateX(4deg) translate3d(0,-6px,48px);
  box-shadow: var(--d3-sh-3), var(--d3-glow-sea);
  z-index: 3;
}
html.d3-on .showcase-grid figure img{
  transition: transform .8s var(--d3-ease);
  transform: scale(1.01);
}
html.d3-on .showcase-grid figure:hover img{ transform: scale(1.09) }

/* ==========================================================================
   6) آیتم‌های منو — کارت‌های سه‌بعدی
   ========================================================================== */
html.d3-on .items-grid{ transform-style: preserve-3d }
html.d3-on .menu-item{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .45s var(--d3-ease), box-shadow .45s var(--d3-ease), border-color .35s ease;
  will-change: transform;
}
html.d3-on .menu-item.is-live{
  transform:
    perspective(900px)
    rotateX(var(--d3-rx,0deg))
    rotateY(var(--d3-ry,0deg))
    translate3d(0,-4px,30px);
  box-shadow: var(--d3-sh-2), var(--d3-glow-gold);
  z-index: 2;
}
html.d3-on .menu-item .item-image{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
}
html.d3-on .menu-item.is-live .item-image{
  transform: translate3d(0,0,46px) rotateY(-8deg) scale(1.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.36);
}
html.d3-on .menu-item .item-name{ transition: transform .5s var(--d3-ease) }
html.d3-on .menu-item.is-live .item-name{ transform: translateZ(26px) }
html.d3-on .menu-item .item-price{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease);
}
html.d3-on .menu-item.is-live .item-price{ transform: translateZ(34px) scale(1.04) }

/* سرتیتر دسته‌ها */
html.d3-on .category-heading{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease);
}
html.d3-on .category-block:hover .category-heading{ transform: translateZ(22px) }
html.d3-on .cat-icon{
  display:inline-block;
  transition: transform .5s var(--d3-ease);
}
html.d3-on .category-block:hover .cat-icon{ transform: translateZ(30px) rotateY(-12deg) scale(1.08) }

/* ---------- نوار دسته‌بندی ---------- */
html.d3-on .category-btn{
  transform-style: preserve-3d;
  transition: transform .3s var(--d3-ease), box-shadow .3s var(--d3-ease), background .25s ease, color .25s ease;
}
html.d3-on .category-btn:hover{
  transform: perspective(700px) translate3d(0,-3px,20px) rotateX(6deg);
  box-shadow: var(--d3-sh-1);
}
html.d3-on .category-btn.active{
  transform: perspective(700px) translateZ(16px);
  box-shadow: var(--d3-glow-gold);
}
html.d3-on .category-btn:active{ transform: translateZ(2px) scale(.96); transition-duration:.08s }

/* ---------- جستجو ---------- */
html.d3-on .search-wrap,
html.d3-on .toolbar .btn{
  transform-style: preserve-3d;
  transition: transform .35s var(--d3-ease), box-shadow .35s var(--d3-ease);
}
html.d3-on .search-wrap:focus-within{
  transform: translateZ(22px);
  box-shadow: var(--d3-sh-1), var(--d3-glow-sea);
}
html.d3-on .toolbar .btn:hover{ transform: translate3d(0,-2px,18px) }

/* ==========================================================================
   7) گالری — کاشی‌های سه‌بعدی
   ========================================================================== */
html.d3-on .gallery{ transform-style: preserve-3d }
html.d3-on .gallery-item{
  transform-style: preserve-3d;
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
  will-change: transform;
}
html.d3-on .gallery-item.is-live{
  transform:
    perspective(950px)
    rotateX(var(--d3-rx,0deg))
    rotateY(var(--d3-ry,0deg))
    translate3d(0,-8px,52px);
  box-shadow: var(--d3-sh-3), var(--d3-glow-sea);
  z-index: 3;
}
html.d3-on .gallery-item img{ transition: transform .7s var(--d3-ease) }
html.d3-on .gallery-item.is-live img{ transform: scale(1.1) }

html.d3-on .gallery-filter{
  transform-style: preserve-3d;
  transition: transform .3s var(--d3-ease), box-shadow .3s var(--d3-ease), background .25s ease;
}
html.d3-on .gallery-filter:hover{ transform: translate3d(0,-3px,18px) }
html.d3-on .gallery-filter.active{ transform: translateZ(14px); box-shadow: var(--d3-glow-gold) }
html.d3-on .gallery-filter:active{ transform: translateZ(2px) scale(.96); transition-duration:.08s }

html.d3-on .gallery-placeholder{ transform-style: preserve-3d }
html.d3-on .marine-mark{
  display:inline-block;
  animation: d3-mark-float 6s ease-in-out infinite;
}
@keyframes d3-mark-float{
  0%,100%{ transform: translate3d(0,0,0) rotateY(0deg) }
  50%    { transform: translate3d(0,-8px,34px) rotateY(10deg) }
}

/* ==========================================================================
   8) بخش تماس و فوتر
   ========================================================================== */
html.d3-on .contact-grid{ transform-style: preserve-3d }
html.d3-on .contact-logo{
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateY(var(--d3-cl-ry,-6deg)) translateZ(30px);
  transition: transform .8s var(--d3-ease-out);
}
html.d3-on .contact-logo img{
  transform: translateZ(40px);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.42));
}
html.d3-on .contact-logo .qr-placeholder{ transform: translateZ(18px) }
html.d3-on .contact-action-link{
  transform-style: preserve-3d;
  transition: transform .35s var(--d3-ease), box-shadow .35s var(--d3-ease);
}
html.d3-on .contact-action-link:hover{
  transform: perspective(800px) translate3d(0,-3px,24px) rotateX(6deg);
  box-shadow: var(--d3-sh-1), var(--d3-glow-gold);
}
html.d3-on .footer{ transform-style: preserve-3d }
html.d3-on .footer-row > *{ transform: translateZ(10px) }

/* ==========================================================================
   9) لایت‌باکس و دکمه‌ی بازگشت به بالا
   ========================================================================== */
html.d3-on .lightbox[open]{
  animation: d3-zoom-in .45s var(--d3-ease-out) both;
  perspective: 1400px;
}
html.d3-on .lightbox[open] img{
  animation: d3-img-in .6s var(--d3-ease-out) both;
}
@keyframes d3-zoom-in{
  from{ opacity:0; transform: translateZ(-240px) scale(.92) }
  to  { opacity:1; transform: none }
}
@keyframes d3-img-in{
  from{ opacity:0; transform: perspective(1400px) rotateX(9deg) translateZ(-90px) }
  to  { opacity:1; transform: none }
}
html.d3-on .lightbox-close{
  transition: transform .3s var(--d3-ease);
  transform-style: preserve-3d;
}
html.d3-on .lightbox-close:hover{ transform: translateZ(22px) rotate(90deg) scale(1.1) }

html.d3-on .scroll-top{
  transform-style: preserve-3d;
  transition: transform .4s var(--d3-ease), box-shadow .4s var(--d3-ease), opacity .3s ease, visibility .3s;
}
html.d3-on .scroll-top:hover{
  transform: perspective(700px) rotateX(-12deg) translate3d(0,-4px,26px);
  box-shadow: var(--d3-sh-2), var(--d3-glow-gold);
}
html.d3-on .scroll-top:active{ transform: translateZ(2px) scale(.92); transition-duration:.08s }

/* ==========================================================================
   10) واترمارک بخش‌ها در عمق
   ========================================================================== */
html.d3-on .watermark-section::after{
  transform: translate(-50%,-50%) translateZ(-130px) scale(1.1);
}

/* ==========================================================================
   11) موبایل و لمسی — عمق می‌ماند، تیلت خاموش
   ========================================================================== */
@media (max-width: 860px), (hover: none){
  html.d3-on .d3-tilt.is-live,
  html.d3-on .menu-item.is-live,
  html.d3-on .gallery-item.is-live{
    transform: translate3d(0,-4px,0);
    box-shadow: var(--d3-sh-1);
  }
  html.d3-on .d3-tilt.is-live::before{ opacity:0 }
  html.d3-on .hero-card{
    transform: perspective(1200px) rotateX(2deg) rotateY(2deg) translateZ(20px);
  }
  html.d3-on .hero-logo{ transform: translateZ(40px) }
  html.d3-on .hero-card h1{ transform: translateZ(30px) }
  html.d3-on .d3-reveal{ transform: translate3d(0,20px,-55px) }
}

/* ==========================================================================
   12) دسترس‌پذیری و چاپ
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html.d3-on .d3-reveal{ opacity:1 !important; transform:none !important }
  html.d3-on .hero-card,
  html.d3-on .hero-media,
  html.d3-on .wave,
  html.d3-on .contact-logo,
  html.d3-on .d3-tilt.is-live,
  html.d3-on .menu-item.is-live,
  html.d3-on .gallery-item.is-live{ transform:none !important; animation:none !important }
  html.d3-on .d3-tilt::before{ display:none }
  html.d3-on .marine-mark{ animation:none }
  html.d3-on .lightbox[open],
  html.d3-on .lightbox[open] img{ animation:none }
}

@media print{
  html.d3-on *{ transform:none !important; box-shadow:none !important; opacity:1 !important; animation:none !important }
}