/* ===== אמא בת שש – דף נחיתה ===== */

@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/frank-ruhl-libre-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/frank-ruhl-libre-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/rubik-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/rubik-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}

/* צמד הגופנים כמו בכריכה: Rubik עגול ומלא לכותרת הספר ולטקסט הרץ, פרנק-ריהל לחלקים הספרותיים */
:root{
  /* הצבעים נדגמו מהכריכה */
  --paper:#f8f2ea;      /* טיח בהיר */
  --plaster:#efe5d9;    /* טיח חם */
  --blush:#ecd0c7;      /* ורוד מרוח */
  --rose:#b4605d;       /* אדום-ורוד של הכותרת */
  --rose-deep:#96494a;
  --ink:#2b2624;        /* שמלת האם */
  --ink-soft:#5d524c;
  --taupe:#9a897c;
  --ochre:#c39a55;      /* פס הזהב */
  --serif:"Frank Ruhl Libre","David Libre","David","Times New Roman",serif;
  --sans:"Rubik","Arial Hebrew",Arial,sans-serif;
  --wrap:1120px;
  --gut:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(1.06rem,1rem + .3vw,1.2rem);font-weight:350;line-height:1.85;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure,blockquote,ul{margin:0;padding:0}
h1,h2,h3{font-family:var(--serif);line-height:1.1;text-wrap:balance}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);font-weight:700}
a{color:inherit}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px;border-radius:4px}

/* --clear-l / --clear-r: שומרים בצדדים "מסלולים" פנויים לשתי הדמויות המלוות את הגלילה */
.wrap{--edge:max(0px,(100vw - var(--wrap)) / 2);--clear-l:max(var(--gut),calc(var(--girl-w) + var(--side) - 8px - var(--edge)));--clear-r:max(var(--gut),calc(var(--mother-w) + var(--side) - 6px - var(--edge)));width:100%;max-width:var(--wrap);margin-inline:auto;padding-left:var(--clear-l);padding-right:var(--clear-r)}
.wrap--narrow{--wrap:760px}
.buy .wrap{padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{inset-inline-start:8px}

.eyebrow{font-size:.95rem;font-weight:400;color:var(--rose-deep);margin-bottom:.7em}
.eyebrow::before{content:"";display:inline-block;width:1.6em;height:1px;background:currentColor;vertical-align:middle;margin-inline-end:.6em;opacity:.7}
.eyebrow--light{color:var(--blush)}
.stars{color:var(--ochre);letter-spacing:.12em}

/* ===== כפתורים ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:.5em 1.9em;border-radius:5px;background:var(--rose);color:#fff;font-family:var(--sans);font-weight:500;font-size:1.1rem;text-decoration:none;box-shadow:0 8px 20px -12px rgba(150,73,74,.7);transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.btn:hover{background:var(--rose-deep);transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(150,73,74,.8)}
.btn:active{transform:translateY(0)}
.btn--small{min-height:44px;padding:.25em 1.2em;font-size:.98rem;box-shadow:none}
.btn--light{background:var(--paper);color:var(--rose-deep);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.btn--light:hover{background:#fff}
.btn--big{min-height:62px;font-size:1.3rem;padding-inline:2.6em}
.btn{text-align:center;line-height:1.3}
@media (max-width:760px){.btn--big{font-size:1.15rem;padding-inline:1.3em}}
.link{font-weight:400;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--blush);padding-block:.2em}
.link{border-bottom-width:1px;border-color:var(--rose)}
.link:hover{color:var(--rose-deep)}

/* ===== סרגל עליון ===== */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px var(--gut);background:rgba(248,242,234,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(154,137,124,.25)}
.bar__name{text-decoration:none;display:flex;align-items:baseline;gap:.6em;min-width:0;white-space:nowrap}
.bar__name strong{font-family:var(--sans);font-weight:700;font-size:1.2rem;color:var(--rose)}
.bar__name span{font-size:.95rem;color:var(--ink-soft)}

/* ===== פתיח ===== */
.hero{position:relative;isolation:isolate;padding-block:clamp(36px,7vw,96px) clamp(56px,8vw,110px);overflow:hidden}
.hero__wash{position:absolute;inset:-12%;z-index:-1;background:url(img/cover-blur.webp) center/cover no-repeat;filter:blur(46px) saturate(1.08);opacity:.6;transform:scaleX(-1)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(248,242,234,.5) 0%,rgba(248,242,234,.3) 55%,var(--paper) 100%)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(28px,6vw,90px)}
.hero h1{font-family:var(--sans);font-size:clamp(4rem,1.8rem + 10vw,8.6rem);font-weight:800;line-height:.98;color:var(--rose);letter-spacing:-.015em;margin-bottom:.18em}
.hero__author{font-family:var(--serif);font-size:clamp(1.6rem,1.3rem + 1.3vw,2.3rem);font-weight:400;margin-bottom:.8em}
.hero__lead{font-size:clamp(1.12rem,1.02rem + .45vw,1.32rem);line-height:1.7;max-width:31em;color:#3a3330}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:1.7em}
.hero__cover{justify-self:center;width:min(100%,380px);position:relative}
.hero__cover img{border-radius:3px 8px 8px 3px;transform:rotate(-2.5deg);box-shadow:0 2px 4px rgba(43,38,36,.2),0 30px 60px -18px rgba(43,38,36,.55),-18px 26px 50px -24px rgba(180,96,93,.6);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.seal{position:absolute;top:-22px;right:-26px;width:104px;height:104px;border-radius:50%;display:grid;align-content:center;justify-items:center;background:var(--ink);color:var(--paper);font-family:var(--sans);line-height:1.05;transform:rotate(9deg);box-shadow:0 10px 22px -10px rgba(43,38,36,.7);outline:1px solid var(--ochre);outline-offset:-7px}
.seal span{font-size:.82rem;font-weight:400;letter-spacing:.04em}
.seal strong{font-size:1.75rem;font-weight:800;color:#e9c98a;margin-block:-.02em .02em}
@media (max-width:760px){.seal{width:84px;height:84px;top:-16px;right:-22px;outline-offset:-6px}.seal span{font-size:.7rem}.seal strong{font-size:1.4rem}}
.hero__cover:hover img{transform:rotate(0) translateY(-6px)}

/* ===== ציטוט פותח ===== */
.epigraph{padding-block:clamp(40px,7vw,90px)}
.epigraph blockquote{position:relative;padding-inline-start:clamp(20px,4vw,40px);border-inline-start:3px solid var(--ochre)}
.epigraph p{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1.5vw,2.1rem);line-height:1.7;font-weight:400}
.epigraph footer{margin-top:1em;font-size:.92rem;color:var(--taupe)}

/* ===== על הספר ===== */
.about{background:var(--plaster);padding-block:clamp(56px,9vw,120px)}
/* פריסה: טקסט באמצע, ומקום שמור לכל דמות (בנייד – מתחת לטקסט, זו לצד זו) */
.about__grid{display:grid;direction:ltr;grid-template-columns:1fr 1fr;grid-template-areas:"text text" "girl mother";align-items:end;column-gap:44px;row-gap:26px}
.about__intro{grid-area:text;direction:rtl;min-width:0}
.about__intro h2{margin-bottom:.55em}
.about__intro p+p{margin-top:.9em}
.spot{position:relative;margin-top:2.6rem;width:calc(var(--w) * var(--spot-s));height:calc(var(--h) * var(--spot-s))}
.spot--girl{grid-area:girl;justify-self:end;--w:var(--girl-w);--h:var(--girl-h)}
.spot--mother{grid-area:mother;justify-self:start;--w:var(--mother-w);--h:var(--mother-h)}
.spot__halo{position:absolute;inset:-20% -58% -4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,248,234,.95) 0%,rgba(236,208,199,.6) 42%,rgba(195,154,85,.2) 68%,transparent 100%)}
.spot--mother .spot__halo{background:radial-gradient(closest-side,rgba(255,248,234,.95) 0%,rgba(226,214,200,.65) 42%,rgba(195,154,85,.22) 68%,transparent 100%)}
.spot::after{content:"";position:absolute;left:-18%;right:-18%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(43,38,36,.3),transparent)}
.spot{z-index:2}
.spot__ghost{position:relative;width:100%;height:100%;max-width:none;opacity:.13;filter:grayscale(.5) blur(1.5px)}
.spot__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transform-origin:0 0;will-change:transform}
.spot.is-docked .spot__img{opacity:1}
.spot__name{position:absolute;bottom:calc(100% - 2px);left:50%;transform:translateX(-50%);direction:rtl;white-space:nowrap;font-family:var(--serif);font-weight:800;font-size:1.7rem;line-height:1;opacity:.38;transition:opacity .5s ease}
.spot.is-docked .spot__name{opacity:1;transition-delay:.45s}
.spot--girl .spot__name{color:var(--rose)}
.spot--mother .spot__name{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.spot__halo{animation:breathe 3.6s ease-in-out infinite}}
@keyframes breathe{50%{scale:1.1}}
@media (min-width:1000px){
  .about__grid{grid-template-columns:auto minmax(0,600px) auto;grid-template-areas:"girl text mother";justify-content:center;column-gap:clamp(40px,6vw,96px);align-items:center}
  .spot--girl{align-self:end}
  .spot__name{font-size:2.3rem}
}
.about__end{font-family:var(--serif);font-weight:400;font-size:1.22em;line-height:1.7;color:var(--rose-deep)}

/* ===== שיר ===== */
.poem{position:relative;background:var(--ink);color:#f1e7dc;padding-block:clamp(64px,10vw,130px);overflow:hidden}
.poem::before{content:"";position:absolute;inset-block:-10%;inset-inline-end:-18%;width:60%;background:radial-gradient(closest-side,rgba(180,96,93,.38),transparent 72%);pointer-events:none}
.poem .wrap{position:relative}
.poem h2{font-size:clamp(2.4rem,1.6rem + 3.4vw,4rem);color:var(--blush);margin-bottom:.7em}
.poem__body{font-family:var(--serif);font-size:clamp(1.3rem,1.1rem + .95vw,1.75rem);line-height:1.95}
.poem__body p+p{margin-top:1.25em}
.poem__last{color:var(--blush);font-weight:700}

/* ===== המלצות ===== */
.reviews{padding-block:clamp(56px,9vw,116px);overflow:hidden}
.reviews h2{text-align:center}
.marquee{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin-top:clamp(28px,4vw,48px);overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee::-webkit-scrollbar{display:none}
.marquee__track{display:flex;width:max-content;padding-block:14px 26px}
.marquee__inner{overflow:clip}
.marquee.is-rolling .marquee__track{animation:roll var(--dur,40s) linear infinite;will-change:transform}
.marquee.is-held .marquee__track{animation-play-state:paused}
@media (hover:hover){.marquee.is-rolling:hover .marquee__track{animation-play-state:paused}}
@keyframes roll{to{transform:translateX(calc(-1 * var(--g,50%)))}}
.marquee__group{display:flex;gap:22px;padding-inline:11px}
.review{flex:none;width:min(78vw,360px);display:flex;flex-direction:column;justify-content:space-between;gap:1.1em;padding:26px 26px 22px;background:#fffaf4;border-radius:3px;border:1px solid rgba(154,137,124,.32)}
.review:nth-child(3n+2){background:#f7e4dd}
.review:nth-child(3n){background:var(--plaster)}
.review blockquote{font-family:var(--serif);font-size:1.24rem;line-height:1.6}
.review blockquote::before{content:"״";display:block;font-size:3rem;line-height:.6;height:.42em;color:var(--rose);font-weight:800}

/* ===== מחברת ===== */
.author{background:var(--plaster);padding-block:clamp(56px,9vw,116px)}
.author__grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center}
.author__photo{width:clamp(150px,22vw,200px)}
.author__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:999px 999px 14px 14px;box-shadow:14px 14px 0 var(--blush)}
.author__photo figcaption{margin-top:22px;font-size:.82rem;color:var(--taupe)}
.author__text h2{margin-bottom:.5em}
.author__text p+p{margin-top:.85em}
.author__text{max-width:38em}

/* ===== רכישה + המפגש ===== */
.buy{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);text-align:center;padding-block:clamp(64px,9vw,120px) calc(var(--mother-h) + var(--feet) + 28px)}
.buy__wash{position:absolute;inset:-15%;z-index:-1;background:url(img/cover-blur.webp) center/cover no-repeat;filter:blur(50px) saturate(1.1);opacity:.75}
.buy::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--paper) 0%,rgba(248,242,234,.35) 45%,rgba(248,242,234,.2) 100%)}
.buy__inner{display:flex;flex-direction:column;align-items:center;max-width:600px}
.buy h2{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.8rem);font-weight:500;line-height:1.45;color:var(--rose-deep)}
.buy p{margin-top:1.1em;font-size:1.1rem}
.buy .btn{margin-top:1.6em}

/* שתי הדמויות מהכריכה – נצמדות לצדי המסך בזמן הגלילה.
   .fig הוא החלק שזז: --meet (מפגש באזור הרכישה) ו- --dx/--dy/--s (הליכה אל המקום השמור ב"על הספר") נקבעים ב-JS. */
:root{--girl-w:62px;--girl-h:124px;--mother-w:74px;--mother-h:217px;--side:4px;--feet:18px;--gap:22px;--spot-s:1.25}
main{position:relative}
.rail{overflow:clip;position:absolute;inset:0 0 var(--feet) 0;pointer-events:none;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;direction:ltr}
.girl,.mother{position:sticky;flex:none}
.girl{--w:var(--girl-w);--dir:1;width:var(--girl-w);height:var(--girl-h);margin-left:var(--side);top:calc(100vh - var(--girl-h) - 8px);top:calc(100svh - var(--girl-h) - 8px)}
.mother{--w:var(--mother-w);--dir:-1;width:var(--mother-w);height:var(--mother-h);margin-right:var(--side);top:calc(100vh - var(--mother-h) - 8px);top:calc(100svh - var(--mother-h) - 8px)}
.fig{width:100%;height:100%;transform-origin:0 0;will-change:transform;
  transform:translateX(calc(var(--dir) * var(--meet,0) * max(0px,50vw - var(--gap) - var(--w) - var(--side))))}
.fig img{width:100%;height:100%;max-width:none}
@media (min-width:1000px){
  :root{--girl-w:112px;--girl-h:224px;--mother-w:140px;--mother-h:411px;--side:10px;--feet:26px;--gap:330px;--spot-s:1.12}
  .buy{padding-block:clamp(90px,10vw,150px);min-height:calc(var(--mother-h) + var(--feet) + 90px);display:grid;align-items:center}
}

.foot{background:var(--ink);color:#cbbfb4;text-align:center;font-size:.9rem;padding:26px var(--gut);line-height:1.8}

/* ===== נייד ===== */
@media (max-width:760px){
  .bar__name span{display:none}
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__cover{order:-1;width:min(58vw,260px)}
  .hero__lead{margin-inline:auto}
  .hero .wrap{padding-inline:max(var(--clear-l),var(--clear-r))}
  .hero__actions{flex-direction:column;align-items:center;justify-content:center}
  .hero__actions .btn{width:100%;max-width:340px}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .poem__body{font-size:1.18rem}
  .author__grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .author__photo figcaption{text-align:center}
}

/* ===== תנועה עדינה (רק בדפדפנים תומכים, ורק למי שלא ביקש להפחית תנועה) ===== */
@media (prefers-reduced-motion:no-preference){
  .hero__text>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero__text>:nth-child(2){animation-delay:.08s}
  .hero__text>:nth-child(3){animation-delay:.16s}
  .hero__text>:nth-child(4){animation-delay:.24s}
  .hero__text>:nth-child(5){animation-delay:.32s}
  .hero__text>:nth-child(6){animation-delay:.4s}
  .hero__cover{animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both}
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.hero__cover img{transition:none}
}