/* עלה והצמח - mint sequence section (scroll-scrubbed frames from video-mint.mp4) */
:root{--header:88px;--ease-out:cubic-bezier(.23,1,.32,1)}
@media(max-width:760px){:root{--header:72px}}
/* the track starts under the sticky header, so the stage sits at the top of the viewport from the first pixel (the drawing and the captions already leave room for the header) */
.mint-track{position:relative;height:calc(4.2 * 100vh);background:#f0f0ee;margin-top:calc(-1 * var(--header))}
@supports(height:100svh){.mint-track{height:calc(4.2 * 100svh)}}
.mint-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#f0f0ee}
/* dvh: follows the phone browser bar as it collapses, so the stage always covers the whole screen */
@supports(height:100dvh){.mint-stage{height:100dvh}}
.mint-poster,.mint-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mint-poster{object-fit:contain;object-position:30% 50%;padding-top:var(--header);box-sizing:border-box;background:#f0f0ee;transition:opacity .5s var(--ease-out) .1s}
.mint-poster.is-hidden{opacity:0}
.mint-canvas{opacity:0;transition:opacity .5s var(--ease-out)}
.mint-canvas.is-live{opacity:1}

/* copy layers (right column, over the plain studio background) */
.mint-copy,.mint-cap{position:absolute;z-index:3;right:max(56px,7vw);text-align:right;transform:translate3d(0,var(--shift,0px),0);will-change:opacity,transform}
.mint-copy::before,.mint-cap::before{content:'';position:absolute;inset:-48px -72px;z-index:-1;background:radial-gradient(closest-side,#f0f0eef2 55%,#f0f0ee00);pointer-events:none}
.mint-copy{top:calc(50% + var(--header) / 2);transform:translate3d(0,calc(-50% + var(--shift,0px)),0);width:min(560px,44vw)}
.mint-copy h2{margin:16px 0 20px}
.mint-copy>p:not(.eyebrow){font-size:17px;line-height:1.75;color:var(--muted);max-width:440px;margin-inline-start:0;margin-inline-end:auto}
.mint-caps{position:absolute;z-index:3;right:max(56px,7vw);top:calc(var(--header) + 9vh);width:min(400px,40vw);display:flex;flex-direction:column;gap:20px;text-align:right}
.mint-cap{position:relative;right:auto;width:auto;opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.mint-cap>span{display:block;font-size:10px;letter-spacing:.2em;color:#8a9280;margin-bottom:12px;direction:ltr;text-align:inherit}
.mint-cap p{font-size:clamp(17px,1.45vw,22px);line-height:1.4;letter-spacing:-.3px;color:var(--ink);margin:0}  /* 13.10: four stacked captions must fit a 768px laptop */
.mint-cap p b{font-weight:500;color:#58674c;display:block}
.mint-fine{position:absolute;z-index:3;left:max(24px,3vw);bottom:22px;max-width:360px;text-align:right;direction:rtl;font-size:10px;line-height:1.7;color:#737c68;background:#f0f0eecc;padding:6px 10px;border-radius:12px;margin:0}
.mint-track .image-label{z-index:3;bottom:auto;top:calc(var(--header) + 18px);left:18px;right:auto}
.mint-progress{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:#dfe1d9;opacity:0;transition:opacity .3s}
.mint-progress i{display:block;height:100%;background:#58674c;transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease-out)}
.mint-track.is-loading .mint-progress{opacity:1}
.mint-dots{position:absolute;z-index:3;left:24px;top:calc(50% + var(--header) / 2);transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.mint-dots li{width:8px;height:8px;border-radius:50%;background:#c9cec0;transition:background .3s,transform .3s}
.mint-dots li[aria-current=step]{background:#58674c;transform:scale(1.3)}

/* reduced motion: one still frame, all captions laid out statically */
.mint-track.is-reduced{height:auto;margin-top:0}
.mint-track.is-reduced .mint-stage{position:relative;height:auto;display:flex;flex-direction:column}
.mint-track.is-reduced .mint-canvas,.mint-track.is-reduced .mint-poster{position:relative;height:62vh;order:-1;inset:auto;padding-top:0}
.mint-track.is-reduced .mint-copy{position:static;transform:none;width:auto;padding:32px max(56px,7vw) 8px}
.mint-track.is-reduced .mint-caps{position:static;width:auto;padding:0 max(56px,7vw) 20px}.mint-track.is-reduced .mint-cap{opacity:1!important;transform:none}
.mint-track.is-reduced .mint-copy::before,.mint-track.is-reduced .mint-cap::before{display:none}
.mint-track.is-reduced .mint-dots,.mint-track.is-reduced .mint-progress,.mint-track.is-reduced .mint-poster.is-hidden{display:none}
.mint-track.is-reduced .mint-fine{position:static;margin:0 max(56px,7vw) 28px}

/* no JS: poster + copy, nothing sticky */
html:not(.js) .mint-track{height:auto;margin-top:0}
html:not(.js) .mint-stage{position:relative;height:auto;display:flex;flex-direction:column}
html:not(.js) .mint-canvas,html:not(.js) .mint-progress,html:not(.js) .mint-dots{display:none}
html:not(.js) .mint-poster{position:relative;height:auto;aspect-ratio:16/9;padding-top:0;order:-1;inset:auto;object-fit:cover}
html:not(.js) .mint-copy,html:not(.js) .mint-caps{position:static;width:auto;max-width:720px;margin:24px auto 0;padding:0 24px}html:not(.js) .mint-cap{opacity:1;transform:none}
html:not(.js) .mint-copy::before,html:not(.js) .mint-cap::before{display:none}
html:not(.js) .mint-fine{position:static;margin:16px auto 32px;max-width:720px}

@media(max-width:760px){
  .mint-copy{right:20px;left:20px;width:auto;top:calc(var(--header) + 16px);bottom:auto;transform:translate3d(0,var(--shift,0px),0)}
  .mint-caps{right:20px;left:20px;width:auto;top:calc(var(--header) + 18px);gap:12px}
  .mint-cap{right:auto;left:auto;width:auto}
  .mint-cap>span{font-size:9px;margin-bottom:4px}
  .mint-copy h2{font-size:36px;margin:12px 0 12px}
  .mint-copy>p:not(.eyebrow){font-size:15px;line-height:1.7;max-width:none}
  .mint-copy::before,.mint-cap::before{inset:-28px -32px}
  .mint-cap p{font-size:15px;line-height:1.45}
  .mint-poster{object-fit:cover;object-position:50% 70%;padding-top:0}
  .mint-track .image-label{top:auto;bottom:16px;left:16px}
  .mint-fine{display:none}
  .mint-dots{left:auto;right:16px;top:auto;bottom:24px;transform:none;flex-direction:row}
}
@media(prefers-reduced-motion:reduce){.mint-canvas,.mint-poster,.mint-copy,.mint-cap,.mint-progress i{transition:none}}

/* opening caption = the page hero */
.mint-copy{width:min(540px,40vw)}
.mint-copy .eyebrow{display:inline-flex;align-items:center;gap:9px;justify-content:flex-start}
.mint-copy h1{font-size:clamp(44px,4.4vw,68px);line-height:1.45;margin:12px 0 14px;letter-spacing:0}
.mint-copy .hero-description{font-size:17px;line-height:1.75;color:var(--muted);max-width:440px;margin-inline-start:0;margin-inline-end:auto}
.mint-copy .hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.mint-copy .hero-footnote{font-size:11px;line-height:1.7;color:var(--muted);margin-top:14px}
@media(max-width:760px){
  .mint-copy h1{font-size:38px;margin:10px 0 10px}
  .mint-copy .hero-footnote{display:none}
  .mint-copy .hero-description{font-size:15px;line-height:1.7;max-width:none}
  .mint-copy .hero-actions{flex-direction:column;align-items:center;gap:12px;margin-top:16px}
  /* 13.10.2026, Yarden: on a phone the copy sits centred above the plant instead of as a column over it */
  .mint-copy{text-align:center;width:auto;right:20px;left:20px}  /* the desktop width rule below this block would shrink it to 40vw */
  .mint-copy h1 br,.mint-copy h2 br{display:none}
  .mint-copy h1{font-size:34px;line-height:1.35;max-width:320px;margin:8px auto 10px}
  .mint-copy .eyebrow{display:flex;justify-content:center}
  .mint-copy .hero-description,.mint-copy>p:not(.eyebrow){text-align:center;max-width:300px;margin:0 auto}
  .mint-copy .hero-actions .text-link{margin:0}
  .mint-copy::before{inset:-28px -24px -36px}
  /* 13.10: the plant sits low in the portrait frame; the captions move down toward it instead of hugging the header */
  .mint-copy .hero-actions .button{white-space:nowrap}
  .mint-copy .hero-actions .button{min-height:44px;font-size:11px;padding:10px 16px;gap:14px}
  .mint-copy .hero-footnote{font-size:10px;margin-top:10px}
}

/* opening caption alignment: everything flush to the right edge of the column (RTL: inline-start = right) */
.mint-copy .hero-description,.mint-copy .hero-footnote{max-width:440px;margin-inline-start:0;margin-inline-end:auto;text-align:right}
.mint-copy .hero-footnote{margin-top:14px}
.mint-copy .hero-actions{justify-content:flex-start}

/* lemon chapter: mid-page (no header pull-up), warm window-light tones, five beats so the track is a little longer */
.mint-track--lemon{margin-top:0;height:calc(4.8 * 100vh);background:#d4cfcb}
@supports(height:100svh){.mint-track--lemon{height:calc(4.8 * 100svh)}}
.mint-track--lemon .mint-stage,.mint-track--lemon .mint-poster{background:#d4cfcb}
.mint-track--lemon .mint-poster{object-position:50% 50%}
.mint-track--lemon .mint-copy::before,.mint-track--lemon .mint-cap::before{background:radial-gradient(closest-side,#dbd2c8f0 55%,#dbd2c800)}
@media(min-width:761px){.mint-track--lemon .mint-copy{width:min(560px,42vw)}}
@media(max-width:760px){.mint-track--lemon .mint-copy h2 br{display:none}.mint-track--lemon .mint-copy h2{font-size:34px}}
.mint-track--lemon .mint-copy h2{margin:14px 0 18px}
.mint-track--lemon .mint-cap p b{color:#5f6a3d}
.mint-track--lemon .mint-progress{background:#c6beb5}
.mint-track--lemon .mint-dots li{background:#b7aea4}
.mint-track--lemon .mint-dots li[aria-current=step]{background:#5f6a3d}
.mint-track--lemon .mint-fine{background:#d4cfcbcc}
.mint-track.is-reduced.mint-track--lemon,html:not(.js) .mint-track--lemon{height:auto}

/* finished state (13.10.2026): a plain picture in normal flow. No sticky stage, no canvas, no viewport-height
   dependence, so scrolling back over it is as smooth as any other section */
.mint-track.is-done{height:auto!important}
.mint-track.is-done .mint-stage{position:relative;height:auto;overflow:hidden}
.mint-track.is-done .mint-canvas,.mint-track.is-done .mint-progress{display:none}
.mint-track.is-done .mint-poster{position:relative;inset:auto;display:block;width:100%;height:auto;opacity:1!important;padding-top:0;object-fit:contain;transition:none}  /* no padding: the top of the picture simply sits under the sticky header (13.10: the padding showed as a grey strip) */

/* desktop finished state: the canvas keeps the last frame, the stage just stops being sticky (13.10.2026) */
.mint-track.is-frozen{height:auto!important}
.mint-track.is-frozen .mint-stage{position:relative}
.mint-track.is-frozen .mint-progress{display:none}