/* ═══════════════════════════════════════════════════════════════════════════
   ChemYukti - Glass layer and smooth cursor
   Loaded after style.css. Frosted panels need colour behind them to frost,
   so a slow ambient light sits under the page; every panel then blurs it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --glass-fill: linear-gradient(135deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 100%), rgba(13,26,68,.38);
  --glass-edge: rgba(255,255,255,.14);
  --glass-shine: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.18);
  --glass-drop: 0 10px 40px rgba(0,0,0,.28);
  --glass-blur: blur(22px) saturate(160%);
  --spot: rgba(245,210,122,.10);
}
html[data-theme="light"] {
  --glass-fill: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.55) 100%);
  --glass-edge: rgba(255,255,255,.75);
  --glass-shine: inset 0 1px 0 rgba(255,255,255,.9);
  --glass-drop: 0 10px 40px rgba(13,26,68,.10);
  --spot: rgba(197,144,58,.14);
}

/* ── Ambient light behind the glass ─────────────────────────────────────── */
.cy-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cy-ambient span {
  position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
  opacity: .55; will-change: transform;
}
.cy-ambient span:nth-child(1) { top: -14vmax; left: -10vmax;
  background: radial-gradient(circle, rgba(197,144,58,.45) 0%, transparent 65%);
  animation: cyDrift1 26s ease-in-out infinite alternate; }
.cy-ambient span:nth-child(2) { bottom: -18vmax; right: -12vmax;
  background: radial-gradient(circle, rgba(56,120,248,.40) 0%, transparent 65%);
  animation: cyDrift2 32s ease-in-out infinite alternate; }
.cy-ambient span:nth-child(3) { top: 30%; left: 40%; width: 34vmax; height: 34vmax;
  background: radial-gradient(circle, rgba(139,92,246,.30) 0%, transparent 65%);
  animation: cyDrift3 38s ease-in-out infinite alternate; }
html[data-theme="light"] .cy-ambient span { opacity: .35; }
@keyframes cyDrift1 { to { transform: translate(18vw, 22vh) scale(1.1); } }
@keyframes cyDrift2 { to { transform: translate(-20vw, -16vh) scale(1.15); } }
@keyframes cyDrift3 { to { transform: translate(-22vw, 18vh) scale(.9); } }

/* ── Frosted panels ─────────────────────────────────────────────────────── */
.glass-card, .card, .dropdown-menu, .modal-content, .lab-pitch {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.glass-card, .card {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shine), var(--glass-drop);
}
.glass-card:hover {
  background: var(--glass-fill);
  border-color: rgba(245,210,122,.38);
  transform: translateY(-2px);
  box-shadow: var(--glass-shine), 0 16px 48px rgba(0,0,0,.32);
}
/* A lifted panel stays above its neighbours, so its open dropdowns do too. */
.glass-card:hover, .glass-card:focus-within { z-index: 2; }
html[data-theme="light"] .glass-card,
html[data-theme="light"] .card { background: var(--glass-fill); border-color: var(--glass-edge); }
html[data-theme="light"] .glass-card:hover { box-shadow: var(--glass-shine), 0 16px 48px rgba(13,26,68,.14); }

/* The light that follows the cursor across a panel. */
.glass-card::after, .card::after, .lab-pitch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), var(--spot), transparent 45%);
  opacity: 0; transition: opacity .35s ease;
}
.glass-card:hover::after, .card:hover::after, .lab-pitch:hover::after { opacity: 1; }

.glass-nav {
  background: rgba(6,16,31,.55);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-edge);
}
html[data-theme="light"] .glass-nav { background: rgba(255,253,247,.65); }

.dropdown-menu, .modal-content {
  background: rgba(10,21,40,.72) !important;
  border: 1px solid var(--glass-edge) !important;
  box-shadow: var(--glass-shine), var(--glass-drop);
}
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .modal-content { background: rgba(255,255,255,.82) !important; }

.form-control, .form-select {
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,.10);
  box-shadow: 0 0 0 4px rgba(197,144,58,.18);
}
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select { background-color: rgba(255,255,255,.7); }

.btn-outline-light, .btn-outline-secondary {
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* The Lab card keeps its deep glass on the cream theme, so its white text reads. */
html[data-theme="light"] .lab-pitch { background-color: rgba(13,26,68,.86); }

/* Phones: lighter blur keeps scrolling smooth. */
@media (max-width: 768px) {
  :root { --glass-blur: blur(14px) saturate(150%); }
  .glass-card:hover { transform: none; }
}

/* ── Smooth cursor ──────────────────────────────────────────────────────── */
html.cy-cursor, html.cy-cursor * { cursor: none !important; }
html.cy-cursor input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.cy-cursor textarea, html.cy-cursor select, html.cy-cursor [contenteditable] { cursor: text !important; }
html.cy-cursor select { cursor: pointer !important; }

.cy-dot, .cy-ring {
  position: fixed; top: 0; left: 0; z-index: 2147483000; pointer-events: none;
  border-radius: 50%; opacity: 0; will-change: transform;
  transition: opacity .25s ease, width .25s ease, height .25s ease, margin .25s ease,
              background-color .25s ease, border-color .25s ease;
}
.cy-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold-300); }
.cy-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(245,210,122,.7);
  background: rgba(255,255,255,.04);
}
html[data-theme="light"] .cy-dot { background: var(--gold-500); }
html[data-theme="light"] .cy-ring { border-color: rgba(197,144,58,.8); }
.cy-on .cy-dot, .cy-on .cy-ring { opacity: 1; }
.cy-link .cy-ring {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: rgba(245,210,122,.12); border-color: rgba(245,210,122,.9);
}
.cy-link .cy-dot { opacity: 0; }
.cy-down .cy-ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.cy-text .cy-dot, .cy-text .cy-ring { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cy-ambient span { animation: none; }
  .glass-card:hover { transform: none; }
}