/* =========================================================
   SHELLY — film.css
   טקסטורת פילם רק על צבעים ורקעים. הטקסט, התמונות והסרטונים נשארים חדים.
   הגרעיניות נכנסת כשכבת רקע שמתמזגת עם צבע הרקע (background-blend-mode),
   ולכן היא לא נוגעת בתוכן שמעליה.
   עוצמה לפי מחלקה על body: film-1 עדין · film-2 בינוני · film-3 כמו בהשראה
   ========================================================= */
:root{
  --grain-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.5' intercept='.25'/%3E%3CfeFuncG type='linear' slope='.5' intercept='.25'/%3E%3CfeFuncB type='linear' slope='.5' intercept='.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.95' intercept='.03'/%3E%3CfeFuncG type='linear' slope='.95' intercept='.03'/%3E%3CfeFuncB type='linear' slope='.95' intercept='.03'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.film-1{--grain:var(--grain-1)}
.film-2{--grain:var(--grain-2)}
.film-3{--grain:var(--grain-3)}

/* כל משטח צבע באתר: רקע העמוד, סקשנים, כפתורים, מדבקות, צ'אט */
:is(.film-1,.film-2,.film-3) :is(
  .header,.after,.dark,.how,.cta-sec,.footer,
  .btn-choc,.btn-lilac,.mini-tg,.mini-tg button.on,.sticker,.now .pstat2,
  .chat,.chat-h,.msg,.bub.dark,.bub.lil,.voice button,.tg button.on,
  .logo-tile,.note-cell,.hl-detail,.hl-in,.cutout,.pnav button:hover,.mbar,.wa-float,.mnav
){background-image:var(--grain);background-size:300px 300px;background-blend-mode:overlay}
:is(.film-1,.film-2,.film-3){background-image:var(--grain);background-size:300px 300px;background-blend-mode:overlay}

/* בהירו יש כתמי צבע זזים, אז הגרעיניות יושבת מעליהם ומתחת לטקסט */
.hr::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;display:none;background-image:var(--grain);background-size:300px 300px;mix-blend-mode:overlay}
:is(.film-1,.film-2,.film-3) .hr::after{display:block}

/* ---------- בורר עוצמה (לבדיקה בלבד) ---------- */
.film-switch{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:120;display:flex;gap:4px;background:var(--color-ink);padding:5px;border-radius:999px;box-shadow:0 12px 28px -12px rgba(0,0,0,.5)}
.film-switch span{color:var(--color-paper-60);font:500 13px var(--font-body);padding:8px 10px}
.film-switch button{border:0;background:transparent;color:var(--color-paper);font:600 14px var(--font-body);padding:8px 16px;border-radius:999px;cursor:pointer}
.film-switch button.on{background:var(--color-lilac);color:var(--color-choc)}
@media(max-width:767px){.film-switch{bottom:84px}.film-switch span{display:none}}