/* Story — « התשוקה שלנו » + 3 façons de manger + bandeau défilant (4 langues, propriétés logiques) */
.story{background:var(--washi);border-block:1px solid var(--line);padding-block-end:0;overflow:hidden;overflow:clip;--story-hk:-6deg}
[dir="ltr"] .story{--story-hk:6deg}

.story-intro{display:grid;gap:var(--sp-5);margin-block-end:var(--sp-7)}
.story-head .eyebrow{margin-block-end:var(--sp-3)}
.story-title{font-size:var(--fs-2xl);font-weight:500;color:var(--ink);position:relative;padding-block-end:var(--sp-4)}
.story-title::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:56px;height:2px;border-radius:2px;background:var(--plum)}
.story-body{display:grid;gap:var(--sp-5)}
.story-text{font-size:var(--fs-lg);line-height:1.75;color:var(--ink-2);max-width:46ch}

/* Citation + sceau */
.story-quote{margin:0;display:flex;align-items:center;gap:var(--sp-4);padding-block-start:var(--sp-5);border-block-start:1px solid var(--line)}
.story-hanko{flex:none;width:52px;height:52px;color:var(--plum);opacity:.85;transform:rotate(var(--story-hk))}
.story-hanko text{font-weight:700}
.story-quote-text{margin:0;min-width:0}
.story-quote-text p{font-family:var(--f-display);font-size:var(--fs-xl);line-height:1.35;color:var(--plum-deep)}
.story-line{display:block;overflow:hidden;padding-block-end:.08em}
.story-line > span{display:block}

/* Chorégraphie : lignes de la citation qui montent une à une */
.js-motion .story-line > span{transition:transform .6s var(--ease),opacity .6s var(--ease);transition-delay:calc(.25s + var(--line-i,0) * .12s)}
.js-motion .story-quote:not(.is-revealed) .story-line > span{transform:translateY(105%);opacity:0}
/* Sceau qui se « tamponne », une seule fois */
.js-motion .story-quote:not(.is-revealed) .story-hanko{opacity:0}
.js-motion .story-quote.is-revealed .story-hanko{animation:story-stamp .55s var(--ease) .1s both}
@keyframes story-stamp{
  0%{opacity:0;transform:scale(1.3) rotate(calc(var(--story-hk) * 3))}
  60%{opacity:.9;transform:scale(.96) rotate(var(--story-hk))}
  100%{opacity:.85;transform:scale(1) rotate(var(--story-hk))}
}

/* Modes */
.story-modes{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.story-mode{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-4);row-gap:var(--sp-1);align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.story-icon{grid-row:1 / span 3;width:30px;height:30px;margin-block-start:2px;fill:none;stroke:var(--plum);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.story-mode-title{font-size:var(--fs-lg);font-weight:500;color:var(--ink)}
.story-mode-text{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
.story-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4)}
.story-link{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:600;font-size:var(--fs-sm);color:var(--plum)}
.story-link:hover{color:var(--plum-deep)}
.story-arrow{display:inline-block;transition:transform var(--dur) var(--ease)}
.story-link:hover .story-arrow{transform:translateX(-4px)}
[dir="ltr"] .story-link:hover .story-arrow{transform:translateX(4px)}
.story-partners{display:inline-flex;gap:var(--sp-2)}
.story-partners a{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--sp-3);font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--rice);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.story-partners a:hover{border-color:var(--plum);color:var(--plum)}

/* Bandeau défilant */
.story-marquee{margin-block-start:var(--sp-7);border-block-start:1px solid var(--line);padding-block:var(--sp-4);overflow:hidden;overflow:clip;contain:paint;max-width:100%;white-space:nowrap}
.story-marquee.mo-mq{overflow:hidden;overflow:clip}
.story-marquee-track{display:inline-flex;align-items:center;gap:var(--sp-5);padding-inline:var(--sp-5)}
.story-marquee-item{font-family:var(--f-display);font-size:var(--fs-xl);line-height:1.2;color:rgba(152,31,125,.5);letter-spacing:.01em}
.story-marquee-dot{flex:none;width:6px;height:6px;border-radius:50%;background:rgba(152,31,125,.35)}

@media (min-width:760px){
  .story-intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-7);align-items:end;margin-block-end:var(--sp-8)}
  .story-hanko{width:64px;height:64px}
  .story-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
  .story-mode{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-6) var(--sp-5) var(--sp-5)}
  .story-icon{width:36px;height:36px;margin:0 0 var(--sp-3)}
  .story-mode-title{font-size:var(--fs-xl)}
  .story-mode-text{flex:1}
  .story-mode:hover{border-color:rgba(152,31,125,.35);box-shadow:var(--shadow-1);transform:translateY(-2px)}
  .story-marquee{margin-block-start:var(--sp-8);padding-block:var(--sp-5)}
  .story-marquee-item{font-size:var(--fs-2xl)}
}

@media (prefers-reduced-motion:reduce){
  .story-mode,.story-arrow,.js-motion .story-line > span{transition:none}
  .story-mode:hover{transform:none}
  .js-motion .story-quote .story-line > span{transform:none !important;opacity:1 !important}
  .js-motion .story-quote .story-hanko{animation:none !important;opacity:.85 !important}
}