G84 · סקשן יוצא מפוקוס כשהבא נכנס

CSS

/* G84 · סקשן יוצא מפוקוס כשהבא נכנס */
.df{position:relative;background:var(--ink, #16182b)}
.df-sec{position:sticky;top:0;min-height:100vh;display:grid;place-items:center;padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));text-align:center;transform-origin:50% 40%;overflow:hidden}
.df-sec::after{content:"";position:absolute;inset:0;background:var(--ink, #16182b);opacity:var(--dim,0);border-radius:inherit;pointer-events:none}
.df-sec:nth-child(1){background:var(--card, #fff);z-index:1}
.df-sec:nth-child(2){background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);z-index:2}
.df-sec:nth-child(3){background:var(--ink, #16182b);color:var(--bg, #f7f7fa);z-index:3}
.df-sec h2{margin:0 0 12px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));max-width:20ch}
.df-sec p{margin:0;max-width:44ch;opacity:.8;line-height:1.7}

HTML

<div class="df">
  <section class="df-sec"><div><h2>מתחילים מהשאלה של הלקוח</h2><p>לא מהצבעים ולא מהלוגו. מה הוא מחפש, ומה עוצר אותו מלפנות.</p></div></section>
  <section class="df-sec"><div><h2>כותבים משפט אחד שמוכר</h2><p>ואז בונים סביבו את כל העמוד, מלמעלה למטה.</p></div></section>
  <section class="df-sec"><div><h2>מודדים, ורק אז משנים</h2><p>כל פנייה נספרת. כל שינוי נבחן מול מספר.</p></div></section>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  const secs=gsap.utils.toArray(".df-sec"),mob=matchMedia("(max-width:767px)").matches;
  secs.slice(0,-1).forEach((sec,i)=>{
    const tw={scale:.92,borderRadius:28,"--dim":.62,ease:"none",
      scrollTrigger:{trigger:secs[i+1],start:"top bottom",end:"top top",scrub:.4}};
    if(!mob)tw.filter="blur(6px)";   // blur יקר בטלפון; ההחשכה עצמה היא שכבת דיו ולא brightness
    gsap.to(sec,tw);
  });
})();