/* ═══════════════════════════════════════════════════════════════
   التصميم (ب) — هوية مخبر تحاليل: أنبوب ودورق فيهن سائل بيتحرك،
   فقاعات وجزيئات خفيفة، وأزرار زجاجية بلمعة. ألوان الشعار بس.
   طبقة زخرفية خلف المحتوى — النصوص والأحجام والخصائص ما بتتغير.
   ═══════════════════════════════════════════════════════════════ */

.lab-scene {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
/* المحتوى فوق الطبقة */
html[data-design="b"] .wrap, html[data-design="b"] .brandbar, html[data-design="b"] footer { position: relative; z-index: 1; }

.lab-scene svg { position: absolute; overflow: visible; }
/* أنبوب التحليل بالمساحة الفاضية يمين الشعار — أول شي بيبان */
.lab-scene .tube  { right: max(2px, calc(50% - 290px)); top: 58px; height: 232px; width: auto; opacity: .82; }
.lab-scene .mol   { width: 52px; height: 52px; opacity: .4; }
.lab-scene .m3 { right: 30%; bottom: 40vh; width: 40px; height: 40px; opacity: .26; }
@media (min-width: 700px) {
  .lab-scene .tube  { height: 300px; }
  }
.lab-scene .dot { position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--lab-blue-rgb, 41, 156, 203), .28); }

/* الزجاج: حواف بيضا، انعكاس ناعم */
.lab-scene .glass     { fill: rgba(255, 255, 255, .22); stroke: rgba(255, 255, 255, .9); stroke-width: 2.4; }
.lab-scene .glass-rim { fill: none; stroke: rgba(var(--lab-blue-rgb, 41, 156, 203), .55); stroke-width: 1.4; }
.lab-scene .shine     { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 3; stroke-linecap: round; }
.lab-scene .bubble    { fill: rgba(255, 255, 255, .75); stroke: rgba(255, 255, 255, .95); stroke-width: .6; }
.lab-scene .mol line  { stroke: var(--lab-grey); stroke-width: 2; }
.lab-scene .mol circle { fill: rgba(255, 255, 255, .8); stroke: var(--lab-grey); stroke-width: 2; }
.lab-scene .mol circle.b { fill: var(--lab-sky); stroke: var(--lab-blue); }

/* ─── الأزرار: زجاج شفاف أوضح + لمعة بتمرق كل شوي ─── */
html[data-design="b"] .big-btn {
  position: relative; overflow: hidden;
  backdrop-filter: blur(20px) saturate(1.7); -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 -1px 0 rgba(var(--lab-blue-rgb, 41, 156, 203), .08) inset, var(--sh-2);
}
html[data-design="b"] .big-btn.t-black  { background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(99,105,119,.08)); }
html[data-design="b"] .big-btn.t-maroon { background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(41,156,203,.10)); }
html[data-design="b"] .big-btn.t-gold   { background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(159,211,234,.18)); }
html[data-design="b"] .big-btn::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 38%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: bShine 7s ease-in-out infinite;
}
html[data-design="b"] .big-btn.t-maroon::after { animation-delay: 1.2s; }
html[data-design="b"] .big-btn.t-gold::after   { animation-delay: 2.4s; }
@keyframes bShine { 0%, 78% { left: -60%; } 100% { left: 130%; } }

/* ─── أيقونات الأزرار التلاتة: بلّورة زجاجية موحّدة بلون المخبر، بلمعة ─── */
html[data-design="b"] .big-btn[class*="t-"] .ico {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 30%,
                    rgba(var(--lab-blue-rgb, 41, 156, 203), .30) 62%, rgba(var(--lab-blue-rgb, 41, 156, 203), .62) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -8px 14px rgba(var(--lab-blue-rgb, 41, 156, 203), .28),
              0 6px 16px rgba(27, 111, 148, .22);
  backdrop-filter: blur(6px) saturate(1.4); -webkit-backdrop-filter: blur(6px) saturate(1.4);
}
html[data-design="b"] .big-btn[class*="t-"] .ico::before {       /* انعكاس ثابت فوق */
  content: ""; position: absolute; left: 14%; right: 14%; top: 6%; height: 38%;
  border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  pointer-events: none;
}
html[data-design="b"] .big-btn[class*="t-"] .ico::after {        /* لمعة بتمرق */
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 34%; left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent);
  transform: skewX(-20deg); pointer-events: none;
  animation: bGlint 5.5s ease-in-out infinite;
}
html[data-design="b"] .big-btn.t-maroon .ico::after { animation-delay: .9s; }
html[data-design="b"] .big-btn.t-gold .ico::after   { animation-delay: 1.8s; }
@keyframes bGlint { 0%, 80% { left: -70%; } 100% { left: 140%; } }
html[data-design="b"] .big-btn .ico svg { position: relative; z-index: 1; color: var(--lab-deep); }
html.calm .big-btn .ico::after { animation: none; display: none; }

html[data-design="b"] .card {
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-color: rgba(255, 255, 255, .78);
}
html[data-design="b"] .btn:not(.ghost) { box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, var(--sh-1); }

/* ─── وضع الهدوء: تقليل الحركة أو نت بطيء — كل شي ثابت ─── */
html.calm .big-btn::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-design="b"] .big-btn::after, html[data-design="b"] .big-btn .ico::after { animation: none; display: none; }
}
/* بلا دعم للزجاج: خلفية أوضح حتى يضل النص مقروء */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="b"] .big-btn, html[data-design="b"] .card { background: rgba(255, 255, 255, .92); }
}