Update index.html

index.html

@@ -146,30 +146,87 @@
 
   /* ══ SLIDE 4 — SIGNALS ══ */
   #s4 { background: var(--black); }
-  #s4 .bg-glow { width: 500px; height: 500px; background: rgba(229,9,20,.06); top: 50%; left: 60%; transform: translate(-50%,-50%); }
-  .signals-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; margin-top: 2rem; }
-  .signal-categories { display: flex; flex-direction: column; gap: .7rem; }
-  .sig-cat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; transition: border-color .2s; }
-  .sig-cat:hover { border-color: var(--red); }
-  .sig-cat-label { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--red); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; }
-  .sig-cat-title { font-weight: 700; font-size: .88rem; color: white; margin-bottom: .3rem; }
-  .sig-cat-items { font-size: .76rem; color: var(--muted); line-height: 1.6; }
-  .sig-cat-items span { color: var(--text); font-weight: 600; }
-  .not-used { background: rgba(255,152,0,.05); border: 1px solid rgba(255,152,0,.2); border-radius: 10px; padding: .9rem 1.1rem; margin-top: .7rem; }
-  .not-used-label { font-size: .62rem; color: var(--warn); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: .3rem; }
-  .not-used-desc { font-size: .78rem; color: var(--muted); line-height: 1.5; }
-  .signal-story { }
-  .ss-title { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: white; margin-bottom: 1rem; line-height: 1; }
-  .ss-title span { color: var(--red); }
-  .signal-scenario { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem; margin-bottom: 1rem; position: relative; }
-  .signal-scenario::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); border-radius: 3px 0 0 3px; }
-  .sc-action { font-weight: 700; font-size: .88rem; color: white; margin-bottom: .35rem; }
-  .sc-inference { font-size: .8rem; color: var(--muted); line-height: 1.6; }
-  .sc-tag { margin-top: .5rem; font-size: .68rem; color: var(--red); font-family: 'JetBrains Mono', monospace; }
-  .signals-footer { grid-column: 1 / -1; margin-top: .5rem; padding: 1rem 1.4rem; background: rgba(229,9,20,.06); border: 1px solid rgba(229,9,20,.18); border-radius: 10px; font-size: .85rem; color: var(--muted); line-height: 1.7; }
-  .signals-footer strong { color: var(--red); }
+  #s4 .bg-glow:nth-child(1) { width: 480px; height: 480px; background: rgba(229,9,20,.06); top: 10%; left: 8%; }
+  #s4 .bg-glow:nth-child(2) { width: 560px; height: 560px; background: rgba(229,9,20,.05); bottom: -18%; right: -8%; }
+  .signals-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 2rem; }
+  .signal-rail-card {
+    position: relative; min-height: 26.5rem; padding: 1rem 1rem 1.15rem; border-radius: 18px;
+    border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(10,10,12,.96), rgba(6,6,8,.98));
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.32); overflow: hidden;
+    display: flex; flex-direction: column; justify-content: flex-start;
+  }
+  .signal-rail-card::after {
+    content: ''; position: absolute; inset: 0; pointer-events: none;
+    background: linear-gradient(180deg, rgba(229,9,20,.04), transparent 32%, rgba(255,255,255,.01));
+  }
+  .signal-rail-card.rail-active {
+    border-color: rgba(229,9,20,.95);
+    box-shadow: 0 0 0 1px rgba(229,9,20,.32), 0 20px 44px rgba(229,9,20,.12), inset 0 1px 0 rgba(255,255,255,.04);
+  }
+  .signal-visual {
+    height: 9.75rem; border-radius: 14px; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,.05);
+    background-size: cover; background-position: center; position: relative; overflow: hidden;
+  }
+  .sv-interaction {
+    background:
+      radial-gradient(circle at 20% 30%, rgba(229,9,20,.95) 0 2px, transparent 3px),
+      radial-gradient(circle at 58% 28%, rgba(255,72,72,.9) 0 3px, transparent 4px),
+      radial-gradient(circle at 72% 66%, rgba(229,9,20,.9) 0 2px, transparent 3px),
+      radial-gradient(circle at 35% 70%, rgba(255,82,82,.9) 0 2px, transparent 3px),
+      linear-gradient(135deg, rgba(229,9,20,.18), rgba(20,0,0,.92));
+  }
+  .sv-interaction::before {
+    content:''; position:absolute; inset:0;
+    background:
+      linear-gradient(45deg, transparent 48%, rgba(255,50,50,.28) 49%, rgba(255,50,50,.28) 51%, transparent 52%),
+      linear-gradient(-18deg, transparent 43%, rgba(255,50,50,.16) 44%, rgba(255,50,50,.16) 46%, transparent 47%),
+      linear-gradient(75deg, transparent 40%, rgba(255,50,50,.14) 41%, rgba(255,50,50,.14) 43%, transparent 44%);
+    opacity:.95;
+  }
+  .sv-collab { background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.7)), linear-gradient(135deg, rgba(33,33,40,.72), rgba(10,10,12,.95)); }
+  .sv-collab::before {
+    content:''; position:absolute; inset:0; opacity:.9;
+    background-image: linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,.02)), linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px), linear-gradient(rgba(255,255,255,.04) 0 1px, transparent 1px);
+    background-size: 100% 100%, 34px 34px, 34px 34px;
+  }
+  .sv-content { background: radial-gradient(circle at 70% 72%, rgba(229,9,20,.35), transparent 24%), linear-gradient(180deg, rgba(11,19,34,.96), rgba(6,10,18,.98)); }
+  .sv-content::before {
+    content:''; position:absolute; inset:14px; border-radius:12px; opacity:.95;
+    background: linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px), linear-gradient(rgba(255,255,255,.06) 0 1px, transparent 1px);
+    background-size: 28px 28px;
+  }
+  .sv-context { background: linear-gradient(180deg, rgba(229,9,20,.14), transparent 30%), linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.45)), linear-gradient(180deg, rgba(35,5,5,.95), rgba(8,8,10,.98)); }
+  .sv-context::before {
+    content:''; position:absolute; inset:0;
+    background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.025) 26px 27px), linear-gradient(180deg, transparent 0 20%, rgba(255,80,80,.28) 48%, transparent 52%, transparent 100%);
+  }
+  .sv-intent { background: radial-gradient(circle at 50% 50%, rgba(28,87,255,.22), transparent 28%), radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 2px), linear-gradient(180deg, rgba(6,16,30,.96), rgba(5,8,15,.98)); }
+  .sv-intent::before {
+    content:''; position:absolute; inset:14px; border-radius:50%; border:1px solid rgba(92,144,255,.22);
+    box-shadow: 0 0 0 22px rgba(92,144,255,.05), 0 0 0 44px rgba(92,144,255,.03);
+  }
+  .sv-guardrails { background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.78)), linear-gradient(135deg, rgba(25,25,30,.75), rgba(9,9,12,.96)); }
+  .sv-guardrails::before {
+    content:''; position:absolute; inset:0; opacity:.72;
+    background-image: linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px), linear-gradient(rgba(255,255,255,.03) 0 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+  .signal-icon { color: var(--red); font-size: 2rem; line-height: 1; margin-bottom: .95rem; position: relative; z-index: 1; }
+  .signal-card-title { font-size: 1.95rem; font-weight: 900; line-height: .98; letter-spacing: -.03em; position: relative; z-index: 1; }
+  .signal-card-line { width: 2.2rem; height: 4px; border-radius: 999px; background: var(--red); margin: 1rem 0 1rem; position: relative; z-index: 1; }
+  .signal-card-desc { color: var(--muted); font-size: .96rem; line-height: 1.62; position: relative; z-index: 1; }
+  .signals-dots { display:flex; justify-content:center; gap:.55rem; margin: 1rem 0 1.1rem; }
+  .signals-dots .dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
+  .signals-dots .dot.active { background: var(--red); }
+  .signals-summary-bar {
+    display:flex; align-items:center; gap:1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
+    background: linear-gradient(180deg, rgba(11,11,13,.96), rgba(7,7,9,.98)); padding: 1rem 1.25rem;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 36px rgba(0,0,0,.24);
+  }
+  .summary-icon { color: var(--red); font-size: 2rem; line-height: 1; }
+  .summary-copy { color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
 
-  /* ══ SLIDE 5 — OBJECTIVES ══ */
+/* ══ SLIDE 5 — OBJECTIVES ══ */
   #s5 { background: var(--dark); }
   .objectives-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; }
   .obj-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; transition: all .25s; }
@@ -370,7 +427,8 @@
 
   /* ── RESPONSIVE ── */
   @media (max-width: 1024px) {
-    .hero-grid, .signals-layout, .artwork-layout, .takeaways-layout, .coldstart-layout { grid-template-columns: 1fr; }
+    .hero-grid, .artwork-layout, .takeaways-layout, .coldstart-layout { grid-template-columns: 1fr; }
+    .signals-rail { grid-template-columns: repeat(2, 1fr); }
     .why-grid, .algo-intro, .objectives-grid, .tradeoffs-grid { grid-template-columns: 1fr 1fr; }
     .pipeline-steps, .pipeline-steps-row2 { grid-template-columns: 1fr 1fr; }
     .two-users, .profiles-grid-v3 { grid-template-columns: 1fr; }
@@ -380,6 +438,8 @@
   }
   @media (max-width: 640px) {
     .nav-links button { font-size: .55rem; padding: .22rem .38rem; }
+    .signals-rail { grid-template-columns: 1fr; }
+    .signals-summary-bar { flex-direction: column; align-items: flex-start; }
     .why-grid, .algo-intro, .objectives-grid, .tradeoffs-grid, .pipeline-steps, .pipeline-steps-row2 { grid-template-columns: 1fr; }
     .thumb-showcase { grid-template-columns: repeat(2, 1fr); }
     .ee-cols { grid-template-columns: 1fr; }
@@ -528,62 +588,70 @@
 
 <!-- ══════════════ SLIDE 4: SIGNALS ══════════════ -->
 <section class="slide" id="s4">
-  <div class="bg-glow"></div>
-  <div class="content" style="width:100%;max-width:1200px;margin:0 auto;">
+  <div class="bg-glow"></div><div class="bg-glow"></div>
+  <div class="content" style="width:100%;max-width:1320px;margin:0 auto;">
     <div class="slide-tag">Decode the Tech · Inputs to the System</div>
-    <h2 class="sec">WHAT GOES<br><span>INTO THE SYSTEM</span></h2>
-    <p class="subtitle">Netflix's recommendations are shaped by four categories of signals — interaction, collaborative, content, and context. Its public explanation also states that demographic attributes like age and gender are not part of the recommendation decision.</p>
-    <div class="signals-layout">
-      <div>
-        <div class="signal-categories">
-          <div class="sig-cat">
-            <div class="sig-cat-label">Interaction</div>
-            <div class="sig-cat-title">What You Actually Do</div>
-            <div class="sig-cat-items"><span>Watch history</span>, <span>completion rate</span>, <span>rewatches</span>, <span>thumbs feedback</span>, <span>searches</span>, <span>browse clicks</span>, <span>watch duration</span>, <span>session-to-session recency</span></div>
-          </div>
-          <div class="sig-cat">
-            <div class="sig-cat-label">Collaborative</div>
-            <div class="sig-cat-title">Patterns from Similar Members</div>
-            <div class="sig-cat-items">What members with <span>similar taste patterns</span> watched, finished, replayed, or ignored — useful for recommending titles you have never seen before</div>
-          </div>
-          <div class="sig-cat">
-            <div class="sig-cat-label">Content</div>
-            <div class="sig-cat-title">What the Title Is</div>
-            <div class="sig-cat-items"><span>Genre</span>, <span>cast and creators</span>, <span>release year</span>, <span>language</span>, <span>maturity profile</span>, <span>format</span>, <span>metadata tags</span>, <span>learned title representations</span></div>
-          </div>
-          <div class="sig-cat">
-            <div class="sig-cat-label">Context</div>
-            <div class="sig-cat-title">When the Request Happens</div>
-            <div class="sig-cat-items"><span>Device type</span>, <span>time of day</span>, <span>member language</span>, <span>current session state</span>, <span>recent actions</span>, <span>request-time context</span></div>
-          </div>
-        </div>
-        <div class="not-used">
-          <div class="not-used-label">⚠ Not used in recommendations</div>
-          <div class="not-used-desc">According to Netflix's public explanation, <strong style="color:var(--text);">age and gender are not used as recommendation inputs.</strong> The emphasis is on behavior, title information, similar-member patterns, and viewing context.</div>
-        </div>
+    <h2 class="sec">WHAT GOES INTO<br><span>THE SYSTEM</span></h2>
+    <p class="subtitle">The recommendation stack learns from multiple signal families at once. Together they help Netflix estimate taste, intent, context, and uncertainty before ranking the homepage.</p>
+
+    <div class="signals-rail">
+      <div class="signal-rail-card rail-active">
+        <div class="signal-visual sv-interaction"></div>
+        <div class="signal-icon">↻</div>
+        <div class="signal-card-title">Interaction<br>Signals</div>
+        <div class="signal-card-line"></div>
+        <div class="signal-card-desc">Watch history, completion, rewatches, searches, skips, and watch duration reveal what members actually do — not just what they say.</div>
       </div>
-      <div class="signal-story">
-        <div class="ss-title">WHAT NETFLIX <span>INFERS</span><br>FROM YOUR SIGNALS</div>
-        <div class="signal-scenario">
-          <div class="sc-action">You finish three tense crime episodes in one night</div>
-          <div class="sc-inference">The system infers short-term intent, high current appetite, and strong affinity for that viewing mode. Similar titles and rows gain weight in the next request.</div>
-          <div class="sc-tag">SESSION INTENT → RE-RANK</div>
-        </div>
-        <div class="signal-scenario">
-          <div class="sc-action">You stop a slow series early but fully finish fast-paced thrillers</div>
-          <div class="sc-inference">The model updates your profile away from slow-burn pacing and toward tighter, faster narrative patterns — even across unseen titles.</div>
-          <div class="sc-tag">IMPLICIT NEGATIVE + POSITIVE SIGNALS</div>
-        </div>
-        <div class="signal-scenario">
-          <div class="sc-action">You browse on phone at lunch and on TV at night</div>
-          <div class="sc-inference">Context changes the recommendation surface. The same member can receive different rows, orderings, and emphasis depending on device, time, and recent session behavior.</div>
-          <div class="sc-tag">REQUEST-TIME CONTEXT MATTERS</div>
-        </div>
+      <div class="signal-rail-card">
+        <div class="signal-visual sv-collab"></div>
+        <div class="signal-icon">◎</div>
+        <div class="signal-card-title">Collaborative<br>Patterns</div>
+        <div class="signal-card-line"></div>
+        <div class="signal-card-desc">The system compares you with members who behave similarly and uses those patterns to surface titles you have not discovered yet.</div>
+      </div>
+      <div class="signal-rail-card">
+        <div class="signal-visual sv-content"></div>
+        <div class="signal-icon">△</div>
+        <div class="signal-card-title">Content<br>Metadata</div>
+        <div class="signal-card-line"></div>
+        <div class="signal-card-desc">Genre, cast, language, release year, format, and learned title representations help the model understand what a title actually is.</div>
+      </div>
+      <div class="signal-rail-card">
+        <div class="signal-visual sv-context"></div>
+        <div class="signal-icon">◌</div>
+        <div class="signal-card-title">Request-Time<br>Context</div>
+        <div class="signal-card-line"></div>
+        <div class="signal-card-desc">Device, time of day, current session state, and recent actions shape what makes sense for this exact request — not just for the user overall.</div>
+      </div>
+      <div class="signal-rail-card">
+        <div class="signal-visual sv-intent"></div>
+        <div class="signal-icon">✦</div>
+        <div class="signal-card-title">Session Intent<br>Inference</div>
+        <div class="signal-card-line"></div>
+        <div class="signal-card-desc">A burst of similar plays, quick abandonment, or repeated rewatches helps infer short-term intent and re-rank the next page in real time.</div>
       </div>
-      <div class="signals-footer">
-        <strong>The key insight:</strong> Netflix learns from both explicit actions and implicit behavior. The system combines long-term taste, short-term session intent, title metadata, and request-time context to decide what to surface next.
+      <div class="signal-rail-card">
+        <div class="signal-visual sv-guardrails"></div>
+        <div class="signal-icon">⌁</div>
+        <div class="signal-card-title">Negative Signals<br>& Guardrails</div>
+        <div class="signal-card-line"></div>
+        <div class="signal-card-desc">Skipping, dropping, or ignoring recommendations matters too. Netflix also says age and gender are not used as recommendation inputs.</div>
       </div>
     </div>
+
+    <div class="signals-dots" aria-hidden="true">
+      <span class="dot active"></span>
+      <span class="dot"></span>
+      <span class="dot"></span>
+      <span class="dot"></span>
+      <span class="dot"></span>
+      <span class="dot"></span>
+    </div>
+
+    <div class="signals-summary-bar">
+      <div class="summary-icon">⌘</div>
+      <div class="summary-copy">Netflix combines long-term taste, short-term behavior, title understanding, and request-time context to decide what to rank now — while also learning what not to show next.</div>
+    </div>
   </div>
 </section>