/* ════════════════════════════════════════════════════════════════════
   ZupiChat Deepotsav — 3D FEATURE JOURNEY (zdl-3d.css)
   Alag module, root class html.zdl-3d. Revert:
     ?3d=off (ek visit) · bash /root/zdl-3d-revert.sh (sab pages)
   Scroll = camera. Ek pinned section me Three.js scene: tairte kandil,
   sone ki dhool, aur 3D glass panels par ZupiChat ki asli screens. Har
   scroll-padaav par ek feature. Asli #features grid tabhi chhupta hai jab
   3D sach me chal jaaye (warna kuch nahi khota).
   ════════════════════════════════════════════════════════════════════ */
html.zdl-3d-live #features:not(#_) { display: none !important; }

html.zdl-3d .zdl3d:not(#_) {
  position: relative; padding: 0 !important; margin: 0; background: #FFF8EC;
  height: calc(var(--zdl3d-n, 6) * 100vh + 60vh);
}
html.zdl-3d .zdl3d-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
html.zdl-3d .zdl3d-cv {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .8s ease-out;
}
html.zdl-3d .zdl3d.ready .zdl3d-cv { opacity: 1; }
html.zdl-3d .zdl3d-poster {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 40%, rgba(255, 206, 140, .4), rgba(255, 206, 140, 0) 70%),
    linear-gradient(180deg, #FFFCF6 0%, #FFF1DC 100%);
  transition: opacity .8s ease-out;
}
html.zdl-3d .zdl3d.ready .zdl3d-poster { opacity: 0; }

/* heading */
html.zdl-3d .zdl3d-head:not(#_) {
  position: absolute; z-index: 2; left: 0; right: 0; top: 116px; text-align: center; pointer-events: none;
  transition: opacity .5s ease-out, transform .5s ease-out;
}
html.zdl-3d .zdl3d.past-intro .zdl3d-head { opacity: 0; transform: translateY(-12px); }
html.zdl-3d .zdl3d-head p:not(#_) {
  margin: 0 0 8px; font: 700 12px/1 var(--body-font, system-ui); letter-spacing: .26em; text-transform: uppercase;
  color: #EE8A22 !important; -webkit-text-fill-color: #EE8A22 !important;
}
html.zdl-3d .zdl3d-head h2:not(#_) {
  margin: 0; font: italic 700 clamp(36px, 4.2vw, 56px)/1.08 "Cormorant Garamond", Georgia, serif; letter-spacing: -.01em;
  color: #10262A !important; -webkit-text-fill-color: #10262A !important;
}

/* feature cards — glass, ek waqt par ek */
html.zdl-3d .zdl3d-cards { position: absolute; z-index: 2; left: max(32px, calc(50% - 640px)); top: 50%; width: min(420px, 36vw); transform: translateY(-40%); }
html.zdl-3d .zdl3d-card:not(#_) {
  position: absolute; left: 0; top: 0; width: 100%; padding: 28px 28px 24px; border-radius: 24px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, rgba(255, 255, 255, .72), rgba(255, 250, 240, .5));
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(184, 134, 47, .18), 0 24px 56px -24px rgba(120, 84, 24, .4);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .45s ease-out, transform .55s cubic-bezier(.2, .8, .2, 1);
}
html.zdl-3d .zdl3d-card.on:not(#_) { opacity: 1; transform: none; pointer-events: auto; }
html.zdl-3d .zdl3d-card .n:not(#_) {
  display: block; margin-bottom: 12px; font: italic 700 49px/1 "Cormorant Garamond", Georgia, serif;
  background: linear-gradient(180deg, #E8C27A, #8A5F1A); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
}
html.zdl-3d .zdl3d-card h3:not(#_) { margin: 0 0 8px; font-size: 25px !important; line-height: 1.2 !important; font-weight: 800 !important; color: #10262A !important; -webkit-text-fill-color: #10262A !important; }
html.zdl-3d .zdl3d-card p:not(#_) { margin: 0 0 16px; font-size: 16px !important; line-height: 1.6 !important; color: rgba(16, 38, 42, .74) !important; -webkit-text-fill-color: rgba(16, 38, 42, .74) !important; }
html.zdl-3d .zdl3d-card a:not(#_) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none !important;
  color: #0A474C !important; -webkit-text-fill-color: #0A474C !important; border-bottom: 1px solid rgba(10, 71, 76, .3);
}
html.zdl-3d .zdl3d-card a.zdl-btn-gold:not(#_) { padding: 0 24px; border-radius: 999px; border: 0; color: #2A1708 !important; -webkit-text-fill-color: #2A1708 !important; }
html.zdl-3d .zdl3d-card a:not(#_):focus-visible { outline: 2px solid #0A474C; outline-offset: 3px; border-radius: 6px; }

/* progress dots */
html.zdl-3d .zdl3d-dots { position: absolute; z-index: 2; right: max(24px, calc(50% - 660px)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
html.zdl-3d .zdl3d-dots button:not(#_) {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 var(--body-font, system-ui); color: rgba(16, 38, 42, .45) !important;
  transition: color .2s ease-out;
}
html.zdl-3d .zdl3d-dots button span { opacity: 0; transform: translateX(6px); transition: opacity .2s ease-out, transform .2s ease-out; white-space: nowrap; }
html.zdl-3d .zdl3d-dots button i { width: 10px; height: 10px; border-radius: 50%; background: rgba(184, 134, 47, .35); box-shadow: inset 0 0 0 1px rgba(184, 134, 47, .5); transition: transform .25s ease-out, background-color .25s ease-out; }
html.zdl-3d .zdl3d-dots button.on:not(#_), html.zdl-3d .zdl3d-dots button:not(#_):hover { color: #8A5F1A !important; }
html.zdl-3d .zdl3d-dots button.on span, html.zdl-3d .zdl3d-dots button:hover span { opacity: 1; transform: none; }
html.zdl-3d .zdl3d-dots button.on i { transform: scale(1.4); background: radial-gradient(circle at 35% 35%, #FFE7A8, #B8862F); box-shadow: 0 0 10px rgba(226, 182, 92, .8); }
html.zdl-3d .zdl3d-dots button:not(#_):focus-visible { outline: 2px solid #0A474C; outline-offset: 3px; border-radius: 6px; }

html.zdl-3d .zdl3d-hint:not(#_) {
  position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 13px; font-weight: 600;
  color: rgba(16, 38, 42, .55) !important; transition: opacity .4s ease-out;
}
html.zdl-3d .zdl3d.past-intro .zdl3d-hint { opacity: 0; }
html.zdl-3d .zdl3d-hint i { display: inline-block; margin-left: 6px; animation: zdl3d-bob 1.4s ease-in-out infinite; }
@keyframes zdl3d-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (max-width: 767px) {
  html.zdl-3d .zdl3d-head:not(#_) { top: 128px; padding: 0 16px; }
  html.zdl-3d .zdl3d-cards { left: 16px; right: 16px; width: auto; top: auto; bottom: 136px; transform: none; height: 230px; }
  html.zdl-3d .zdl3d-card:not(#_) { top: auto; bottom: 0; padding: 20px 20px 16px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 252, 246, .94); }
  html.zdl-3d .zdl3d-card .n:not(#_) { font-size: 31px; margin-bottom: 4px; }
  html.zdl-3d .zdl3d-card h3:not(#_) { font-size: 20px !important; }
  html.zdl-3d .zdl3d-card p:not(#_) { font-size: 14px !important; margin-bottom: 8px; }
  html.zdl-3d .zdl3d-dots { right: auto; left: 50%; top: auto; bottom: 88px; transform: translateX(-50%); flex-direction: row; gap: 4px; }
  html.zdl-3d .zdl3d-dots button:not(#_) { min-width: 32px; justify-content: center; }
  html.zdl-3d .zdl3d-dots button span { display: none; }
  html.zdl-3d .zdl3d-hint:not(#_) { bottom: 168px; }
}

/* ── PHONE fix (26 Oct): 100vh = toolbar chhupi wali oonchai → address-bar ke saath
   card/dots neeche kat jaate the; ab 100svh (dikhti screen). Har padaav 75svh scroll
   (pehle poori screen = 6,400px ka lamba scroll). Journey ke beech chat/WA buttons hatte. */
@media (max-width: 767px) {
  html.zdl-3d .zdl3d:not(#_) { height: calc(var(--zdl3d-n, 6) * 75vh + 40vh); height: calc(var(--zdl3d-n, 6) * 75svh + 40svh); }
  html.zdl-3d .zdl3d-sticky { height: 100vh; height: 100svh; }
  html.zdl-3d #zcw { transition: opacity .25s ease-out, transform .25s ease-out; }
  html.zdl-3d.zdl3d-in #zcw { opacity: 0; transform: translateY(16px); pointer-events: none; }
}