/* ===================================================================
   מעבדת עיצוב – ערכות צבע, טקסטורות, גופנים ואפקטים
   =================================================================== */

/* ---------- ערכות צבע ---------- */
html[data-palette] { --title-shadow: none; }
html[data-palette="noir"] { --title-shadow: 0 6px 40px rgba(0, 0, 0, .55); }

html[data-palette="pearl"] {   /* פנינה ושמפניה */
  --bg: #f8f4ee; --bg-2: #f0e9df; --bg-3: #e7ddd0;
  --ink: #2b2521; --ink-soft: #6f655c; --ink-faint: #a0958a;
  --gold: #a9855a; --gold-soft: rgba(169, 133, 90, .32); --line: rgba(43, 37, 33, .12);
  --shade: rgba(248, 244, 238, .9); --header-bg: rgba(248, 244, 238, .9);
}
html[data-palette="sand"] {    /* חול ומוקה */
  --bg: #efe7dc; --bg-2: #e6dbcc; --bg-3: #d9cab6;
  --ink: #3a2c24; --ink-soft: #6e5c50; --ink-faint: #9d8b7d;
  --gold: #8f6a4c; --gold-soft: rgba(143, 106, 76, .32); --line: rgba(58, 44, 36, .14);
  --shade: rgba(239, 231, 220, .9); --header-bg: rgba(239, 231, 220, .9);
}
html[data-palette="rose"] {    /* ורד עתיק */
  --bg: #f7eeeb; --bg-2: #f0e2dd; --bg-3: #e6d1ca;
  --ink: #3b2a2a; --ink-soft: #745f5d; --ink-faint: #a8918e;
  --gold: #a8736b; --gold-soft: rgba(168, 115, 107, .32); --line: rgba(59, 42, 42, .12);
  --shade: rgba(247, 238, 235, .9); --header-bg: rgba(247, 238, 235, .9);
}
html[data-palette="sage"] {    /* מרווה ושמנת */
  --bg: #f4f2eb; --bg-2: #e9e8dd; --bg-3: #d9dbcb;
  --ink: #2c3630; --ink-soft: #5f6a62; --ink-faint: #949c94;
  --gold: #7f9177; --gold-soft: rgba(127, 145, 119, .35); --line: rgba(44, 54, 48, .12);
  --shade: rgba(244, 242, 235, .9); --header-bg: rgba(244, 242, 235, .9);
}
html[data-palette="gallery"] { /* לבן גלריה וזהב */
  --bg: #ffffff; --bg-2: #f7f5f2; --bg-3: #ece8e2;
  --ink: #171717; --ink-soft: #5b5b5b; --ink-faint: #9a9a9a;
  --gold: #b08d57; --gold-soft: rgba(176, 141, 87, .35); --line: rgba(0, 0, 0, .1);
  --shade: rgba(255, 255, 255, .9); --header-bg: rgba(255, 255, 255, .92);
}
html[data-palette="lilac"] {   /* לילך ערפילי */
  --bg: #f4f1f4; --bg-2: #ebe5eb; --bg-3: #ddd3de;
  --ink: #2f2834; --ink-soft: #675d6c; --ink-faint: #9d93a2;
  --gold: #9a7f9e; --gold-soft: rgba(154, 127, 158, .35); --line: rgba(47, 40, 52, .12);
  --shade: rgba(244, 241, 244, .9); --header-bg: rgba(244, 241, 244, .92);
}
html[data-palette="noir"] { color-scheme: dark; }
html[data-palette]:not([data-palette="noir"]) .hero-frame { border-color: var(--gold-soft); }
html[data-palette]:not([data-palette="noir"]) .wa-float { background: var(--bg); }

/* ---------- טקסטורות רקע ---------- */
html[data-texture] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-texture="paper"] body::before {
  background-image: 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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-texture="linen"] body::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(90, 70, 50, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(90, 70, 50, .03) 0 1px, transparent 1px 4px),
    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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-texture="plaster"] body::before {   /* טיח ונציאני */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='5' seed='4'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='3'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .26 -1.1 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 700px; opacity: .55;
}
html[data-texture="marble"] body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0025 .009' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .35 -2.4 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 1200px 900px; opacity: .4;
}
html[data-texture="wash"] body::before {   /* צבעי מים */
  background:
    radial-gradient(40vw 34vw at 85% 12%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%),
    radial-gradient(36vw 30vw at 10% 55%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    radial-gradient(44vw 30vw at 70% 95%, color-mix(in srgb, var(--ink-faint) 18%, transparent), transparent 70%);
  filter: blur(20px); animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-3vw, 2vh, 0) scale(1.08); } }

/* ---------- אפקט: גרעין קולנועי ---------- */
.fx-grain body::after {
  content: ""; position: fixed; inset: -50%; z-index: 70; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(4%, -6%); } 60% { transform: translate(-3%, 7%); } 80% { transform: translate(6%, 2%); } 100% { transform: translate(-2%, -4%); } }

/* ---------- אפקט: מילים עולות ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.fx-split .w > span { transform: translateY(115%); animation: wordUp 1.2s var(--ease) forwards; animation-delay: calc(var(--i) * 110ms + .25s); }
@keyframes wordUp { to { transform: none; } }

/* ---------- אפקט: כותרות מתכת שמפניה ---------- */
.fx-gold h1, .fx-gold h2, .fx-gold .w > span, .fx-gold .statement blockquote {
  background: linear-gradient(105deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 35%, #fff) 22%, var(--gold) 40%, color-mix(in srgb, var(--gold) 70%, #000) 60%, var(--gold) 80%, color-mix(in srgb, var(--gold) 35%, #fff) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}
.fx-gold.fx-split .w > span { animation: wordUp 1.2s var(--ease) forwards, shimmer 9s linear infinite; animation-delay: calc(var(--i) * 110ms + .25s), 0s; }
.fx-gold .hero-title h1 { text-shadow: none; }
@keyframes shimmer { to { background-position: -250% 0; } }

/* ---------- אפקט: וילון על תמונות ---------- */
.fx-curtain .framed img, .fx-curtain .pkg .img, .fx-curtain .review img, .fx-curtain .masonry button {
  clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease);
}
.fx-curtain .reveal.in .framed img, .fx-curtain .framed.in img, .fx-curtain .pkg.in .img,
.fx-curtain .review.in img, .fx-curtain .masonry button.in { clip-path: inset(0); }

/* ---------- אפקט: פס טקסט נע ---------- */
.marquee { display: none; overflow: hidden; padding: clamp(18px, 3vw, 36px) 0; border-block: 1px solid var(--line); }
.fx-marquee .marquee { display: block; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font: var(--dw) calc(clamp(48px, 9vw, 140px) * var(--ds)) / 1 var(--display); white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--gold); padding-inline-end: .4em; }
.marquee i { font-style: normal; font-size: .4em; vertical-align: middle; -webkit-text-stroke: 0; color: var(--gold); }
@keyframes marquee { to { transform: translateX(50%); } }

/* ---------- אפקט: מילה עם תמונה בתוכה ---------- */
.image-word { display: none; }
.fx-imagetext .image-word {
  display: block; font: var(--dw) calc(clamp(110px, 24vw, 360px) * var(--ds)) / .9 var(--display);
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-size: cover; background-position: center 30%; margin: 0 0 24px; letter-spacing: -.01em;
  animation: pan 20s ease-in-out infinite alternate;
}
@keyframes pan { to { background-position: center 70%; } }

/* ---------- אפקט: מילה באנגלית בכתב יד ---------- */
.script-word { display: none; }
.fx-script .script-word { display: block; font: 400 clamp(34px, 5vw, 64px) / 1 var(--script, "Pinyon Script"), cursive; color: var(--gold); direction: ltr; margin-bottom: -.25em; position: relative; z-index: 1; transform: rotate(-4deg); }

/* ---------- אפקט: הילת אור בעקבות העכבר ---------- */
.glow-el { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .6s; }
.fx-glow .glow-el { opacity: 1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%); mix-blend-mode: soft-light; }

/* ---------- אפקט: סמן מעוצב ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--gold); border-radius: 50%; display: none; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s; font: 300 12px var(--sans); letter-spacing: .2em; color: var(--bg); }
.fx-cursor .cursor { display: grid; }
.cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--gold); }
.cursor.link { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: var(--gold-soft); }
@media (hover: none) { .cursor, .glow-el { display: none !important; } }

/* ---------- אפקט: עומק (פרלקסה) ---------- */
.fx-parallax .collage figure { transition: transform .2s linear; will-change: transform; }

/* ---------- אפקט: מסגרות מזהב ---------- */
.fx-frames .masonry button, .fx-frames .collage figure { outline: 1px solid var(--gold-soft); outline-offset: 8px; }

@media (prefers-reduced-motion: reduce) {
  .fx-split .w > span, .marquee-track, .fx-gold h1, .fx-gold h2, .fx-imagetext .image-word, html[data-texture="wash"] body::before, .fx-grain body::after { animation: none !important; transform: none !important; }
}

/* ===================================================================
   החלונית
   =================================================================== */
.lab-btn { position: fixed; bottom: 24px; right: 24px; z-index: 96; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 30px; border: 0; cursor: pointer; background: #1d1a18; color: #f1e7d8; font: 400 15px "Assistant", sans-serif; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.lab-btn:hover { background: #000; }
.lab {
  position: fixed; top: 12px; bottom: 12px; right: 12px; z-index: 97; width: min(400px, calc(100vw - 24px));
  background: #fbf8f4; color: #29231f; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; font: 400 15px/1.5 "Assistant", sans-serif; overflow: hidden;
  animation: labin .35s cubic-bezier(.2, .7, .1, 1);
}
@keyframes labin { from { opacity: 0; transform: translateX(30px); } }
.lab-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e8dfd3; }
.lab-head strong { font-size: 18px; }
.lab-head button { background: none; border: 0; font-size: 28px; cursor: pointer; line-height: 1; color: inherit; }
.lab-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 14px; border-bottom: 1px solid #e8dfd3; background: #f5efe7; }
.lab-tabs button { border: 0; background: transparent; padding: 9px 4px; border-radius: 8px; font: 600 13.5px "Assistant", sans-serif; color: #6d5f53; cursor: pointer; }
.lab-tabs button.on { background: #29231f; color: #fff; }
.lab-body { overflow: auto; padding: 6px 20px 20px; flex: 1; }
.lab h4 { margin: 18px 0 10px; font: 600 13px "Assistant", sans-serif; letter-spacing: .12em; color: #8d7a66; }
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-opt { border: 1.5px solid #e6ddd1; background: #fff; border-radius: 10px; padding: 10px; cursor: pointer; text-align: right; font: inherit; color: inherit; transition: border-color .2s; }
.lab-opt:hover { border-color: #c9b59b; }
.lab-opt.on { border-color: #29231f; box-shadow: 0 0 0 1px #29231f; }
.lab-opt small { display: block; color: #8d7f72; font-size: 12px; }
.sw { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin-bottom: 6px; border: 1px solid rgba(0, 0, 0, .06); }
.sw i { flex: 1; }
.sw i:first-child { flex: 2.4; }
.tx { height: 40px; border-radius: 6px; margin-bottom: 6px; border: 1px solid rgba(0, 0, 0, .06); background-color: #f3ede5; }
.font-sample { font-size: 24px; line-height: 1.25; display: block; margin-bottom: 2px; }
.lab-fx { display: grid; gap: 6px; }
.lab-fx label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.lab-fx label:hover { background: #f2ece4; }
.lab-fx input { margin-top: 4px; width: 17px; height: 17px; accent-color: #29231f; grid-row: span 2; }
.lab-fx small { color: #8d7f72; font-size: 12.5px; }
.lab-foot { border-top: 1px solid #e8dfd3; padding: 14px 20px; display: grid; gap: 10px; background: #f5efe7; }
.lab-foot code { display: block; font: 12.5px/1.6 ui-monospace, Menlo, monospace; white-space: pre-wrap; direction: rtl; text-align: right; background: #fff; padding: 8px 10px; border-radius: 6px; color: #4a3f36; }
.lab-foot .row { display: flex; gap: 8px; }
.lab-foot button { flex: 1; font-size: 13.5px; padding: 10px; border-radius: 8px; border: 1px solid #29231f; background: #29231f; color: #fff; font: inherit; cursor: pointer; }
.lab-foot button.ghost { background: transparent; color: #29231f; }