/* «עיצובים» 2026 — effects per family, on top of site-designs.css. Body: dz cat-<category> fx-<family>.
   Rules: CSS first (scroll-driven animations where supported), tiny JS in site-fx.js, nothing heavy.
   Everything here is decoration: without support / with reduced motion the page is complete and still. */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ---------- Shared base ---------- */
/* Fine grain (an SVG noise tile, ~400 bytes) */
body.dz::after { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.dz.dk::after { opacity: .07; }
body.fx-minimal::after { opacity: .025; }
.a11y-contrast body.dz::after { display: none; }

/* Micro-interactions */
.dz .s-btn { transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, filter .22s, background-color .22s; will-change: transform; }
.dz .s-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--p) 70%, transparent); }
.dz .s-btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.dz .s-btn svg { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.dz .s-btn:hover svg { transform: translateX(-3px); }
.dz .s-card, .dz .s-why-list li, .dz .s-steps li:not(.s-line), .dz .s-faq, .dz .s-tool { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.dz .s-card:hover, .dz .s-why-list li:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--ink) 45%, transparent); }
.dz .s-card-ic { transition: transform .4s cubic-bezier(.3, .7, .4, 1.5); }
.dz .s-card:hover .s-card-ic { transform: rotate(-8deg) scale(1.08); }
.dz .s-chips li, .dz .s-run-track li { transition: transform .2s, box-shadow .2s; }
.dz .s-chips li:hover, .dz .s-run-track li:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--p); }
.dz :focus-visible { outline: 3px solid var(--a); outline-offset: 3px; border-radius: 4px; }
.dz .s-nav a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 2px; transition: background-size .3s; }
.dz .s-nav a:hover { background-size: 100% 2px; }

/* Spotlight that follows the pointer (site-fx.js sets --mx/--my; only on devices with a fine pointer) */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--p) 16%, transparent), transparent 70%); }
.fx-spot:hover::before { opacity: 1; }

/* Scroll-driven: a reading-progress line, a soft zoom on pictures, parallax depth in the hero */
@supports (animation-timeline: scroll()) {
  .motion .dz .s-top::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; transform-origin: 100% 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--a), var(--p)); animation: fx-progress linear both; animation-timeline: scroll(root); }
  @keyframes fx-progress { to { transform: scaleX(1); } }
  .motion .dz main figure:not(.hx-fig):not(.hx-bg) > img { animation: fx-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes fx-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
  .motion .dz .hx-fig, .motion .dz .hx-collage, .motion .dz .hx-cards { animation: fx-depth linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  @keyframes fx-depth { to { transform: translateY(70px); } }
  .motion .dz .hx-bg > * { animation: fx-depth-bg linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes fx-depth-bg { to { transform: translateY(18%) scale(1.06); } }
  .motion .dz .hx-text { animation: fx-lift linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  @keyframes fx-lift { to { transform: translateY(-40px); opacity: .35; } }
  /* Kinetic section titles: the letters close in as the heading enters */
  .motion .dz .s-head h2 { animation: fx-kin linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
  @keyframes fx-kin { from { letter-spacing: .12em; opacity: .15; } }
}

/* ---------- «טכנולוגי»: glass, living grid, particles, glow, tilt, typed line ---------- */
.fx-tech { --glow: color-mix(in srgb, var(--p) 55%, var(--a)); }
.fx-tech .hx { position: relative; overflow: hidden; isolation: isolate; }
.fx-tech .fx-grid { position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--p) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--p) 16%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 75%); }
.motion .fx-tech .fx-grid { animation: fx-grid 18s linear infinite; }
@keyframes fx-grid { to { background-position: 56px 56px, 56px 56px; } }
.fx-tech .fx-grid::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 50% at 75% 30%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%), radial-gradient(35% 45% at 20% 70%, color-mix(in srgb, var(--p) 24%, transparent), transparent 70%); filter: blur(20px); }
.fx-tech .fx-particles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* Glass + glowing gradient edges */
.fx-tech .s-card, .fx-tech .s-why-list li, .fx-tech .s-faq, .fx-tech .s-form, .fx-tech .s-tool, .fx-tech .s-stat-list, .fx-tech .s-steps li:not(.s-line) {
  background: linear-gradient(color-mix(in srgb, var(--card) 72%, transparent), color-mix(in srgb, var(--card) 72%, transparent)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--p) 55%, transparent), color-mix(in srgb, var(--a) 30%, transparent) 40%, color-mix(in srgb, var(--line) 100%, transparent) 70%) border-box;
  border: 1px solid transparent; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.fx-tech .s-card:hover, .fx-tech .s-why-list li:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 40%, transparent), 0 24px 70px -26px var(--glow); }
.fx-tech .s-btn:not(.s-btn-light):not(.s-btn-wa):not(.s-btn-ghost) { background: linear-gradient(120deg, var(--p), color-mix(in srgb, var(--p) 60%, var(--a))); box-shadow: 0 0 0 1px color-mix(in srgb, var(--p) 30%, transparent), 0 12px 34px -12px var(--glow); }
.fx-tech .hx-band .s-btn:not(.s-btn-light):not(.s-btn-wa):not(.s-btn-ghost) { background: var(--on); } /* band hero: a solid light button on the coloured band (the gradient made its text invisible) */
.fx-tech .s-btn:not(.s-btn-light):not(.s-btn-wa):not(.s-btn-ghost):hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 50%, transparent), 0 18px 46px -10px var(--glow); }
.fx-tech .s-card-ic { background: linear-gradient(135deg, color-mix(in srgb, var(--p) 20%, transparent), color-mix(in srgb, var(--a) 18%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 25%, transparent); }
.fx-tech .s-kicker { font-family: 'IBM Plex Sans Hebrew', var(--fb), monospace; letter-spacing: .14em; }
.fx-tech .hx-fig { box-shadow: 0 0 0 1px color-mix(in srgb, var(--p) 30%, transparent), 0 40px 90px -40px var(--glow); }
.fx-tech .s-top { backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
/* 3D tilt (site-fx.js sets --rx/--ry) */
.fx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.fx-tilt.fx-tilting { transition-duration: .08s; }
/* Typed line under the headline */
.fx-type { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 12px; padding: 6px 12px; border-radius: 10px; font: 600 .95rem/1.4 'IBM Plex Sans Hebrew', var(--fb), monospace; color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 30%, transparent); }
.fx-type-pre { color: var(--a); direction: ltr; }
.fx-caret { width: 2px; height: 1.1em; background: var(--a); }
.motion .fx-caret { animation: fx-blink 1s steps(1) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }
/* Counters glow */
.fx-tech .s-stat-list b, .fx-tech .s-stat-list strong { background: linear-gradient(120deg, var(--p), var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The chat in a futuristic frame */
.fx-tech .wc-phone { background: linear-gradient(160deg, color-mix(in srgb, var(--p) 70%, #000), #05070d 40%, color-mix(in srgb, var(--a) 50%, #000)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 40%, transparent), 0 40px 100px -30px var(--glow), 0 0 60px -20px var(--glow); }
.fx-tech .wc-head { background: linear-gradient(120deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--a))); }
.fx-tech .s-wchat::before { content: ''; position: absolute; inset: 10% -10% auto; height: 70%; pointer-events: none; background: radial-gradient(40% 50% at 30% 50%, color-mix(in srgb, var(--p) 18%, transparent), transparent 70%); filter: blur(30px); }
.fx-tech .s-wchat { position: relative; }
.fx-tech.dk .s-sec:nth-of-type(even) { background: color-mix(in srgb, var(--bg2) 70%, transparent); }

/* ---------- «נועז»: kinetic type, a horizontal services rail, magnetic buttons ---------- */
@media (min-width: 900px) {
  .fx-bold .s-services .s-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 34%); grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 18px; padding: 6px 4px 20px; scrollbar-width: thin; scrollbar-color: var(--p) transparent; }
  .fx-bold .s-services .s-card { scroll-snap-align: start; min-height: 280px; }
}
@supports (animation-timeline: view()) {
  .motion .fx-bold .s-head h2 { animation: fx-kin-bold linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes fx-kin-bold { from { transform: translateX(-12%) skewX(8deg); opacity: .1; } }
  .motion .fx-bold .hx .s-title { animation: fx-squash linear both; animation-timeline: scroll(root); animation-range: 0 70vh; transform-origin: 100% 0; }
  @keyframes fx-squash { to { transform: scale(.9); letter-spacing: -.01em; } }
}
.fx-bold .s-btn { font-weight: 800; }

/* ---------- «מודרני»: bento services, stacked cards, layered hero ---------- */
@media (min-width: 900px) {
  .fx-modern .s-services .s-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
  .fx-modern .s-services .s-card:nth-child(1) { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; color: var(--on); background: linear-gradient(150deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--a))); }
  .fx-modern .s-services .s-card:nth-child(1) h3, .fx-modern .s-services .s-card:nth-child(1) p { color: var(--on); }
  .fx-modern .s-services .s-card:nth-child(1) .s-card-ic { background: color-mix(in srgb, var(--on) 18%, transparent); color: var(--on); }
  .fx-modern .s-services .s-card:nth-child(4) { grid-column: span 2; }
}
/* Sticky stack: the «why» cards pile up as you scroll */
@media (min-width: 700px) {
  .fx-modern .s-why-list, .fx-classic .s-why-list { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 760px; margin-inline: auto; }
  .fx-modern .s-why-list li, .fx-classic .s-why-list li { position: sticky; top: calc(92px + var(--i, 0) * 16px); min-height: 140px; box-shadow: 0 -10px 40px -24px color-mix(in srgb, var(--ink) 40%, transparent); }
}

/* ---------- «יוקרה»: slow curtain reveals, a golden line, soft light ---------- */
@supports (animation-timeline: view()) {
  .motion .fx-luxe main figure:not(.hx-fig):not(.hx-bg) { animation: fx-curtain linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes fx-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  .motion .fx-luxe .s-head::after { content: ''; display: block; height: 1px; margin-top: 14px; max-width: 160px; background: linear-gradient(90deg, transparent, var(--a), transparent); transform-origin: 100% 50%; animation: fx-line linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  .motion .fx-luxe .s-head.s-areas-head::after { margin-inline: auto; }
  @keyframes fx-line { from { transform: scaleX(0); } }
}
.fx-luxe .s-btn { letter-spacing: .04em; }

/* ---------- «קלאסי»: magazine pace — curtain reveals ---------- */
@supports (animation-timeline: view()) {
  .motion .fx-classic main figure:not(.hx-fig):not(.hx-bg) { animation: fx-curtain-side linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes fx-curtain-side { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
}

/* ---------- «חם ומשפחתי»: soft floating shapes, bouncy cards ---------- */
.fx-warm .hx { position: relative; isolation: isolate; }
.fx-warm .hx::before, .fx-warm .hx::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(2px); opacity: .5; }
.fx-warm .hx::before { width: 260px; height: 240px; top: 8%; inset-inline-start: -60px; background: color-mix(in srgb, var(--a) 45%, transparent); }
.fx-warm .hx::after { width: 180px; height: 170px; bottom: 6%; inset-inline-end: 4%; background: color-mix(in srgb, var(--p) 25%, transparent); }
.motion .fx-warm .hx::before { animation: fx-blob 14s ease-in-out infinite alternate; }
.motion .fx-warm .hx::after { animation: fx-blob 11s ease-in-out infinite alternate-reverse; }
@keyframes fx-blob { to { border-radius: 58% 42% 37% 63% / 56% 59% 41% 44%; transform: translate(20px, -16px) rotate(20deg); } }
.fx-warm .s-card:hover, .fx-warm .s-why-list li:hover { transform: translateY(-6px) rotate(-.6deg); }
.fx-warm .s-card:hover .s-card-ic { animation: fx-wiggle .5s; }
@keyframes fx-wiggle { 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg) scale(1.1); } }

/* ---------- «מינימלי»: almost still — only the progress line and clean reveals ---------- */
.fx-minimal .s-card:hover, .fx-minimal .s-why-list li:hover { transform: none; box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- Motion off (system setting, the accessibility menu, or a still design) ---------- */
@media (prefers-reduced-motion: reduce) {
  .dz *, .dz *::before, .dz *::after { animation: none !important; transition-duration: .01ms !important; }
  .fx-tilt { transform: none !important; }
}
html:not(.motion) .fx-tilt { transform: none; }
.mo-none .fx-particles, html:not(.motion) .fx-particles { display: none; }