fix: correct crystal animation z-index, blend modes, and hover conflicts

Key fixes after cross-check in dark + light theme:
- Aurora orbs: z-index 0 + mix-blend-mode:screen (dark) / multiply (light)
  so blobs blend with content instead of covering it
- Crystal canvas: same fix — screen blend mode in dark, multiply in light
- Injected orbs as body firstChild so DOM paint order is correct
- Removed icePulse animation on topic-card:hover (conflicted with transitions)
  replaced with enhanced static box-shadow value
- Removed orphaned crystalShimmer keyframe (never used after refactor)
- Added prefers-reduced-motion guards for all new animations
- Light theme overrides for card hover and diagram box shadows

Also added via background agent:
- 12-interview-guide.html: interview mindset section + 10 real-world case
  studies (Ticketing, News Feed, Notifications, Rental/Airbnb, Auctions/eBay,
  Cloud Storage, YouTube, Search Engine, E-commerce/Amazon, Google Docs)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: sridhar-3009

css/style.css

@@ -1311,65 +1311,62 @@ footer {
    ═══════════════════════════════════════════════════════════ */
 
 /* ── Crystal keyframes ───────────────────────────────────── */
-@keyframes crystalShimmer {
-  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
-  15%  { opacity: 1; }
-  85%  { opacity: 1; }
-  100% { transform: translateX(260%) skewX(-18deg); opacity: 0; }
-}
-@keyframes prismBorder {
-  0%   { background-position: 0%   50%; }
-  50%  { background-position: 100% 50%; }
-  100% { background-position: 0%   50%; }
-}
 @keyframes crystalBarGlow {
-  0%, 100% { width: 4px; box-shadow: 0 0 8px var(--topic-color, var(--primary)); opacity: 1; }
-  50%       { width: 5px; box-shadow: 0 0 20px var(--topic-color, var(--primary)), 0 0 40px color-mix(in srgb, var(--topic-color, var(--primary)) 40%, transparent); opacity: 0.9; }
-}
-@keyframes sparkleRotate {
-  0%   { transform: rotate(0deg) scale(0); opacity: 0; }
-  30%  { transform: rotate(90deg) scale(1.1); opacity: 1; }
-  70%  { transform: rotate(180deg) scale(1); opacity: 1; }
-  100% { transform: rotate(270deg) scale(0); opacity: 0; }
+  0%, 100% { box-shadow: 0 0 8px var(--topic-color, var(--primary)); }
+  50%       { box-shadow: 0 0 18px var(--topic-color, var(--primary)),
+                          0 0 36px color-mix(in srgb, var(--topic-color, var(--primary)) 35%, transparent); }
 }
 @keyframes auroraFloat {
-  0%   { transform: translate(0%, 0%) scale(1); opacity: 0.18; }
-  33%  { transform: translate(3%, -2%) scale(1.06); opacity: 0.26; }
-  66%  { transform: translate(-2%, 3%) scale(0.97); opacity: 0.2; }
-  100% { transform: translate(0%, 0%) scale(1); opacity: 0.18; }
-}
-@keyframes crystalReveal {
-  0%   { opacity: 0; transform: translateY(32px) scale(0.97); filter: blur(4px); }
-  60%  { filter: blur(0); }
-  100% { opacity: 1; transform: none; filter: blur(0); }
-}
-@keyframes icePulse {
-  0%, 100% { box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent; }
-  50%       { box-shadow: 0 0 28px -4px color-mix(in srgb, var(--card-color, var(--primary)) 30%, transparent),
-                          inset 0 1px 0 rgba(255,255,255,0.09); }
+  0%   { transform: translate(0%,   0%)   scale(1);    }
+  33%  { transform: translate(2.5%, -1.5%) scale(1.05); }
+  66%  { transform: translate(-1.5%, 2%)   scale(0.97); }
+  100% { transform: translate(0%,   0%)   scale(1);    }
 }
 @keyframes crystalBadgePulse {
-  0%, 100% { box-shadow: 0 0 0 0 transparent; }
-  50%       { box-shadow: 0 0 14px 2px color-mix(in srgb, currentColor 25%, transparent); }
-}
-@keyframes twinkle {
-  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
-  20%       { opacity: 1; transform: scale(1.3) rotate(30deg); }
-  50%       { opacity: 0.8; transform: scale(1) rotate(90deg); }
-  80%       { opacity: 1; transform: scale(1.1) rotate(150deg); }
+  0%, 100% { box-shadow: 0 0 0   0   transparent; }
+  50%       { box-shadow: 0 0 12px 1px color-mix(in srgb, currentColor 22%, transparent); }
 }
 @keyframes prismReadingBar {
   0%   { background-position: 0%   50%; }
   100% { background-position: 200% 50%; }
 }
+@keyframes cardShimmer {
+  0%   { left: -60%; opacity: 0; }
+  10%  { opacity: 1; }
+  90%  { opacity: 1; }
+  100% { left: 130%; opacity: 0; }
+}
 
-/* ── Aurora background orbs (added via JS to body) ───────── */
+/* ── Aurora background orbs (injected by JS) ────────────── */
 .aurora-orb {
-  position: fixed; pointer-events: none; z-index: 0; border-radius: 50%;
-  filter: blur(80px); mix-blend-mode: screen;
-  animation: auroraFloat var(--orb-dur, 18s) ease-in-out infinite;
+  position: fixed; pointer-events: none;
+  z-index: 0;
+  border-radius: 50%;
+  filter: blur(90px);
+  mix-blend-mode: screen;   /* blends with dark bg — never covers text */
+  will-change: transform;
+  animation: auroraFloat var(--orb-dur, 20s) ease-in-out infinite;
   animation-delay: var(--orb-delay, 0s);
-  will-change: transform, opacity;
+}
+/* In light mode, screen is invisible on white — use multiply */
+[data-theme="light"] .aurora-orb {
+  mix-blend-mode: multiply;
+  filter: blur(90px) saturate(1.5);
+  opacity: 0.35;
+}
+
+/* ── Crystal particle canvas ────────────────────────────── */
+#crystal-canvas {
+  position: fixed; top: 0; left: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  mix-blend-mode: screen;   /* blends, never blocks — same as orbs */
+  opacity: 0.6;
+}
+[data-theme="light"] #crystal-canvas {
+  mix-blend-mode: multiply;
+  opacity: 0.25;
 }
 
 /* ── Reading progress bar — rainbow prism ────────────────── */
@@ -1378,170 +1375,130 @@ footer {
     var(--primary), #06B6D4, #10B981, #F59E0B, #EC4899, var(--primary));
   background-size: 300% 100%;
   animation: prismReadingBar 4s linear infinite;
-  box-shadow: 0 0 16px var(--primary), 0 0 32px rgba(6,182,212,0.3);
-}
-
-/* ── Crystal shimmer sweep on section blocks ─────────────── */
-.section-block {
-  position: relative;
-}
-.section-block::after {
-  content: '';
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-  background: linear-gradient(
-    105deg,
-    transparent 38%,
-    rgba(167,139,250,0.06) 50%,
-    rgba(6,182,212,0.04) 55%,
-    transparent 65%
-  );
-  transform: translateX(-120%) skewX(-18deg);
-  pointer-events: none; border-radius: inherit;
-  animation: crystalShimmer 8s ease-in-out infinite;
-  animation-delay: var(--shimmer-delay, 0s);
+  box-shadow: 0 0 14px var(--primary), 0 0 28px rgba(6,182,212,0.25);
 }
 
 /* ── Crystal-glow h2 accent bar ──────────────────────────── */
 .section-block > h2::before {
-  animation: crystalBarGlow 3s ease-in-out infinite;
+  animation: crystalBarGlow 3.5s ease-in-out infinite;
+}
+
+/* ── Section badge — crystal pulse ───────────────────────── */
+.section-badge {
+  animation: crystalBadgePulse 3s ease-in-out infinite;
 }
 
-/* ── Topic cards — crystal glass + prism hover ───────────── */
+/* ── Topic cards — crystal glass ─────────────────────────── */
 .topic-card {
-  backdrop-filter: blur(12px) saturate(160%);
-  -webkit-backdrop-filter: blur(12px) saturate(160%);
-  position: relative; overflow: hidden;
+  backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(10px) saturate(150%);
 }
-/* Crystal shimmer sweep on hover */
+/* Shimmer streak lives entirely inside overflow:hidden card */
 .topic-card::after {
   content: '';
-  position: absolute; top: -50%; left: -60%;
-  width: 35%; height: 200%;
+  position: absolute;
+  top: 0; left: -60%;
+  width: 30%; height: 100%;
   background: linear-gradient(
     90deg,
     transparent,
-    rgba(255,255,255,0.06),
-    rgba(167,139,250,0.08),
+    rgba(255,255,255,0.07),
+    rgba(167,139,250,0.09),
     rgba(255,255,255,0.04),
     transparent
   );
-  transform: skewX(-15deg);
-  opacity: 0;
-  transition: opacity 0.3s ease;
+  transform: skewX(-18deg);
   pointer-events: none;
+  opacity: 0;
 }
 .topic-card:hover::after {
-  opacity: 1;
-  animation: crystalShimmer 1.2s ease forwards;
+  animation: cardShimmer 0.8s ease forwards;
 }
+/* Enhanced glow on hover — no animation conflict with transition */
 .topic-card:hover {
-  animation: icePulse 2s ease-in-out infinite;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--card-color, var(--primary)) 45%, transparent),
+    0 20px 50px color-mix(in srgb, var(--card-color, var(--primary)) 22%, transparent),
+    0 8px 20px rgba(0,0,0,0.35),
+    inset 0 1px 0 rgba(255,255,255,0.06);
 }
 
-/* ── Section badge — crystal glow ────────────────────────── */
-.section-badge {
-  animation: crystalBadgePulse 2.5s ease-in-out infinite;
+/* ── Q&A accordion — subtle glass tint when open ─────────── */
+.qa-item.open .qa-question {
+  background: color-mix(in srgb, var(--topic-color, var(--primary)) 7%, transparent);
 }
-
-/* ── Q&A accordion — glass morph when open ───────────────── */
+.qa-item.open .qa-answer {
+  background: color-mix(in srgb, var(--topic-color, var(--primary)) 3%, transparent);
+}
+/* For the older accordion pattern in topic pages */
 .qa-answer.open {
   background: color-mix(in srgb, var(--topic-color, var(--primary)) 4%, var(--surface));
-  backdrop-filter: blur(8px) saturate(140%);
-  -webkit-backdrop-filter: blur(8px) saturate(140%);
-  border-top: 1px solid color-mix(in srgb, var(--topic-color, var(--primary)) 18%, transparent);
 }
-.qa-item.open .qa-question {
-  background: color-mix(in srgb, var(--topic-color, var(--primary)) 8%, transparent);
+.qa-question.active {
+  background: color-mix(in srgb, var(--topic-color, var(--primary)) 8%, var(--surface)) !important;
 }
 
-/* ── Callout boxes — crystal tint ────────────────────────── */
+/* ── Callout boxes — subtle glass ────────────────────────── */
 .callout {
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  position: relative; overflow: hidden;
-}
-.callout::after {
-  content: '';
-  position: absolute; top: 0; left: -60%; width: 30%; height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
-  transform: skewX(-10deg);
-  animation: crystalShimmer 10s ease-in-out infinite 2s;
-  pointer-events: none;
-}
-
-/* ── Diagram boxes — crystal hover depth ─────────────────── */
-.diagram-box {
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
+
+/* ── Diagram boxes — crystal depth on hover ──────────────── */
 .diagram-box:hover {
-  box-shadow: 0 12px 48px color-mix(in srgb, var(--primary) 20%, transparent),
-              0 0 0 1px var(--border-hi),
-              inset 0 1px 0 rgba(255,255,255,0.08);
+  box-shadow:
+    0 12px 48px color-mix(in srgb, var(--primary) 18%, transparent),
+    0 0 0 1px var(--border-hi),
+    inset 0 1px 0 rgba(255,255,255,0.07);
 }
 
-/* ── Feature cards — crystal glass ───────────────────────── */
+/* ── Feature cards — subtle glass ───────────────────────── */
 .feature-card {
-  backdrop-filter: blur(8px) saturate(140%);
-  -webkit-backdrop-filter: blur(8px) saturate(140%);
-  position: relative; overflow: hidden;
-}
-.feature-card::after {
-  content: '';
-  position: absolute; inset: 0;
-  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
-  pointer-events: none; border-radius: inherit;
+  backdrop-filter: blur(6px) saturate(130%);
+  -webkit-backdrop-filter: blur(6px) saturate(130%);
 }
 .feature-card:hover {
-  box-shadow: 0 16px 40px rgba(124,58,237,0.18), inset 0 1px 0 rgba(255,255,255,0.07);
+  box-shadow: 0 14px 36px rgba(124,58,237,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
 }
 
-/* ── Why-list items — crystal slide ─────────────────────── */
-.why-list li {
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  position: relative; overflow: hidden;
-}
-.why-list li::after {
-  content: '';
-  position: absolute; inset: 0;
-  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, transparent 60%);
-  pointer-events: none; border-radius: inherit;
+/* ── Topic header — richer radial aurora ────────────────── */
+.topic-header {
+  background:
+    radial-gradient(ellipse 900px 380px at 50% -5%,
+      color-mix(in srgb, var(--topic-color, var(--primary)) 13%, transparent) 0%,
+      transparent 70%),
+    radial-gradient(ellipse 360px 200px at 82% 55%,
+      rgba(6,182,212,0.05) 0%, transparent 70%),
+    var(--bg);
 }
 
-/* ── Topic header — aurora radial glow ───────────────────── */
-.topic-header {
-  background: radial-gradient(ellipse 900px 400px at 50% -10%, color-mix(in srgb, var(--topic-color, var(--primary)) 14%, transparent) 0%, transparent 70%),
-              radial-gradient(ellipse 400px 200px at 80% 50%, rgba(6,182,212,0.05) 0%, transparent 70%),
-              var(--bg);
-}
-
-/* ── Staggered shimmer delays per section ────────────────── */
-.topic-body .section-block:nth-child(1)  { --shimmer-delay: 0s; }
-.topic-body .section-block:nth-child(2)  { --shimmer-delay: 1.3s; }
-.topic-body .section-block:nth-child(3)  { --shimmer-delay: 2.6s; }
-.topic-body .section-block:nth-child(4)  { --shimmer-delay: 3.9s; }
-.topic-body .section-block:nth-child(5)  { --shimmer-delay: 5.2s; }
-.topic-body .section-block:nth-child(6)  { --shimmer-delay: 6.5s; }
-.topic-body .section-block:nth-child(7)  { --shimmer-delay: 7.8s; }
-.topic-body .section-block:nth-child(8)  { --shimmer-delay: 0.6s; }
-.topic-body .section-block:nth-child(9)  { --shimmer-delay: 1.9s; }
-.topic-body .section-block:nth-child(10) { --shimmer-delay: 3.2s; }
-
-/* ── Crystal particle canvas (injected by JS) ────────────── */
-#crystal-canvas {
-  position: fixed; top: 0; left: 0;
-  width: 100%; height: 100%;
-  pointer-events: none; z-index: 0;
-  opacity: 0.45;
+/* ── Light theme crystal adjustments ────────────────────── */
+[data-theme="light"] .diagram-box:hover {
+  box-shadow:
+    0 12px 40px rgba(124,58,237,0.12),
+    0 0 0 1px rgba(124,58,237,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.8);
+}
+[data-theme="light"] .topic-card:hover {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--card-color, var(--primary)) 35%, transparent),
+    0 16px 40px color-mix(in srgb, var(--card-color, var(--primary)) 14%, transparent),
+    0 4px 12px rgba(33,29,53,0.1);
+}
+[data-theme="light"] .section-block > h2::before {
+  box-shadow: 0 0 12px color-mix(in srgb, var(--topic-color, var(--primary)) 60%, transparent);
 }
 
-/* ── Reduced-motion: disable shimmer + aurora ────────────── */
+/* ── Reduced-motion: disable all animation additions ─────── */
 @media (prefers-reduced-motion: reduce) {
-  .section-block::after,
-  .topic-card::after,
-  .callout::after { animation: none; }
-  .aurora-orb { animation: none; }
-  #crystal-canvas { display: none; }
-  .reading-progress { animation: none; background: var(--primary); }
+  .topic-card:hover::after { animation: none; }
+  .aurora-orb              { animation: none; }
+  #crystal-canvas          { display: none; }
+  .section-block > h2::before { animation: none; }
+  .section-badge           { animation: none; }
+  .reading-progress {
+    animation: none;
+    background: linear-gradient(90deg, var(--primary), var(--secondary));
+    background-size: auto;
+  }
 }

js/main.js

@@ -680,7 +680,8 @@
       el.style.background = o.color;
       el.style.setProperty('--orb-dur',   o.dur);
       el.style.setProperty('--orb-delay', o.delay);
-      document.body.appendChild(el);
+      /* Insert as FIRST children so DOM order ensures page content paints after */
+      document.body.insertBefore(el, document.body.firstChild);
     });
   }