/* =====================================================================
   ZIKA PERFUME — طبقة مختبر التحضير: اليد بالقفاز، الأدوات، الرذاذ، قطرات العدسة
   (طبقة ثابتة فوق الشاشة، لا تستقبل أي لمس)
   ===================================================================== */
:root { --lab-oil: #d9a343; --lab-oil-light: #f0cf8a; --lab-oil-dark: #8a6420; }

#lab-layer { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
#lab-layer.active { z-index: 55; }

/* عنوان صغير راقٍ أعلى المشهد + وسم الكمية */
.lab-title {
  position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -6px);
  font-family: var(--font-display, 'El Messiri', sans-serif); font-size: 1.05rem; color: rgba(241, 235, 221, 0.78);
  letter-spacing: 0.02em; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; white-space: nowrap;
}
.lab-title.show { opacity: 1; transform: translate(-50%, 0); }
.lab-label {
  position: absolute; top: calc(52px + env(safe-area-inset-top, 0px)); left: 50%; transform: translate(-50%, -4px);
  font-family: var(--font-body, 'Tajawal', sans-serif); font-size: 0.86rem; color: rgba(240, 215, 138, 0.9);
  padding: 0.2rem 0.75rem; border: 1px solid rgba(240, 215, 138, 0.28); border-radius: 20px; background: rgba(10, 10, 12, 0.45);
  opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lab-label.show { opacity: 1; transform: translate(-50%, 0); }

/* اليد: صندوق 900×600 يُحرَّك بالتحويل فقط (بلا إعادة تخطيط) */
.lab-hand { position: absolute; left: 0; top: 0; width: 900px; height: 600px; will-change: transform; transform-origin: 0 0;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55)); }
.lab-hand svg { overflow: visible; display: block; }

/* ---------- الرذاذ ---------- */
.lab-drops { position: absolute; inset: 0; }
.mist-halo {
  position: absolute; width: 260px; height: 260px; border-radius: 50%; transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 40%, transparent 68%);
  animation: halo-bloom 1s ease-out forwards;
}
@keyframes halo-bloom { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
.mist-puff {
  position: absolute; width: 170px; height: 62px; border-radius: 50%; transform-origin: 100% 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 55%, transparent 100%);
  filter: blur(5px); opacity: 0; transform: translate(-100%, -50%) rotate(var(--rot, -35deg)) scale(0.25);
  animation: puff-out 0.95s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes puff-out { 0% { transform: translate(-100%, -50%) rotate(var(--rot, -35deg)) scale(0.25); opacity: 0; } 12% { opacity: 0.8; } 100% { transform: translate(-100%, -50%) rotate(var(--rot, -35deg)) scale(2); opacity: 0; } }
.mist-cone {
  position: absolute; width: 240px; height: 110px; transform-origin: 0 50%; opacity: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 36%, rgba(255, 255, 255, 0.06) 70%, transparent 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  filter: blur(2px);
  transform: translate(0, -50%) rotate(var(--rot, -130deg)) scale(0.2);
  animation: cone-out 0.9s cubic-bezier(0.12, 0.7, 0.3, 1) forwards;
}
@keyframes cone-out { 0% { transform: translate(0, -50%) rotate(var(--rot, -130deg)) scale(0.2); opacity: 0; } 10% { opacity: 1; } 55% { opacity: 0.55; } 100% { transform: translate(0, -50%) rotate(var(--rot, -130deg)) scale(1.35, 1.6); opacity: 0; } }
.mist-drop {
  position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; opacity: 0;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%);
  animation: mist-out var(--d, 0.8s) cubic-bezier(0.1, 0.75, 0.25, 1) forwards var(--delay, 0s);
}
@keyframes mist-out {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  10% { opacity: 0.9; }
  55% { opacity: 0.45; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 14px)) scale(var(--sc, 1.4)); opacity: 0; }
}
/* قطرات تقترب من الكاميرا: تكبر وتتشوّش وتختفي */
.mist-cam {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 72%);
  animation: cam-out 0.55s cubic-bezier(0.1, 0.6, 0.3, 1) forwards var(--delay, 0.05s);
}
@keyframes cam-out {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; filter: blur(0); }
  25% { opacity: 0.85; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(7); opacity: 0; filter: blur(5px); }
}
/* قطرات على العدسة: شفافة، انكسار خفيف، تلبث ثم تنزلق وتتبخر */
.lens-drop {
  position: absolute; border-radius: 48% 52% 50% 50% / 55% 55% 45% 45%; transform: translate(-50%, -50%) scale(0.2); opacity: 0;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 22%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.1) 84%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.16), inset 1px 1px 2px rgba(255, 255, 255, 0.22), inset -1px -2px 3px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px) brightness(1.08); -webkit-backdrop-filter: blur(2px) brightness(1.08);
  animation: lens-life calc(var(--life, 0.9s) + 0.5s) ease-in-out forwards var(--delay, 0.15s);
}
@keyframes lens-life {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  100% { transform: translate(-50%, calc(-50% + var(--slide, 8px))) scale(0.85, 1.1); opacity: 0; }
}
/* قطرة الزيت الأخيرة من فوهة السرنجة */
.oil-drop {
  position: absolute; width: 5px; height: 7px; border-radius: 50% 50% 55% 55%; transform: translate(-50%, 0);
  background: radial-gradient(circle at 35% 30%, var(--lab-oil-light), var(--lab-oil) 60%, var(--lab-oil-dark));
  animation: oil-fall 0.6s ease-in forwards;
}
@keyframes oil-fall { 0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; } 30% { opacity: 1; transform: translate(-50%, 2px) scale(1); } 100% { transform: translate(-50%, 16px) scale(0.7); opacity: 0; } }

/* إضاءة المختبر: عند تفعيل الطبقة يميل جو مشهد الكشف إلى ضوء نظيف محايد */
.reveal.lab-lit .reveal-light { opacity: 1; }
.reveal.lab-lit .reveal-light::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(42% 40% at 50% 38%, rgba(225, 232, 240, 0.13), transparent 70%), radial-gradient(70% 28% at 50% 100%, rgba(255, 255, 255, 0.05), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .mist-puff, .mist-cam { display: none; }
  .mist-drop { animation-duration: 0.45s; }
  .lens-drop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lab-hand { filter: none; }
}