/* =====================================================================
   שרון וגבריאל · 29.10.2026
   נייר לבן עם קצה תלוש, אקליפטוס, וטיפוגרפיה בירוק מרווה.
   ===================================================================== */

:root{
  --linen:    #EFEDE7;
  --linen-dk: #E3E0D7;
  --paper:    #FDFDFA;

  --sage:     #8A9A78;
  --sage-dk:  #6C7B5B;
  --sage-lt:  #B3C0A3;
  --ink:      #59624F;
  --muted:    #8A9080;

  --ease: cubic-bezier(.22,.61,.36,1);

  --display: 'Frank Ruhl Libre', Georgia, serif;
  --body:    'Heebo', system-ui, sans-serif;
  --latin:   'Cormorant Garamond', Georgia, serif;
  --script-he: 'Amatic SC', cursive;
  --script-en: 'Dancing Script', cursive;
}

*,*::before,*::after{ box-sizing:border-box; }

/* [hidden] מפסיד לכל display מפורש. בלי זה סעיפים מוסתרים
   ממשיכים לתפוס מקום ולהראות את הקווים שלהם. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* אריג פשתן: שני גרדיאנטים מוצלבים על בסיס חם */
  background:
    repeating-linear-gradient(90deg, rgba(150,146,132,.026) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg,  rgba(150,146,132,.026) 0 1px, transparent 1px 5px),
    radial-gradient(130% 85% at 50% -5%, #F7F6F2 0%, var(--linen) 58%, var(--linen-dk) 100%);
  background-attachment:fixed;
}
body.is-sealed{ overflow:hidden; height:100dvh; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
button{ font:inherit; color:inherit; }


/* ══════════════ המעטפה, על כל המסך ══════════════ */

.envelope-scene{
  position:fixed; inset:0; z-index:900;
  perspective:820px; perspective-origin:50% 18%;
  background:inherit;
  transition:opacity .5s ease-in, visibility .5s;
}
body.is-open .envelope-scene{ opacity:0; visibility:hidden; pointer-events:none; }

/* מצב הסוף נשמר גם אחרי שהמחלקה is-opening יורדת. בלי זה
   ה-transform חוזר ל-scale(1) עם מעבר, והמעטפה "יוצאת
   ונכנסת שוב" ממש בסיום. */
body.is-open .envelope{
  transform-origin:50% 34%;
  transform:scale(2.15) translateY(-5%);
  animation:none; transition:none;
}
body.is-open .env-pocket{ transform:translateY(108%); transition:none; }
body.is-open .env-flap{ transform:rotateX(114deg); opacity:0; transition:none; }
body.is-open .seal{ opacity:0; transition:none; }

.envelope{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}

/* ── שלב 4: הכרטיס שבפנים. תמונת האולם, בדיוק כמו במסך שאחרי,
   כך שהזום נכנס אליה ברצף אחד ולא קופץ למסך אחר. ── */
.env-inner{
  position:absolute; inset:0; z-index:1;
  background:url('assets/venue-bg.jpg') center 36%/cover no-repeat;
}
.env-inner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,26,16,.16) 0%, transparent 42%);
}

/* ── חזית המעטפה. מתחילה בקו הקיפול — מעליה זה הפתח. ── */
.env-pocket{
  position:absolute; left:0; right:0; top:18%; bottom:0; z-index:3;
  overflow:hidden;
  background:
    radial-gradient(90% 70% at 26% 0%, rgba(255,255,255,.9) 0%, transparent 62%),
    linear-gradient(168deg, #FCFCF8 0%, #F4F3ED 52%, #EBE9E1 100%);
  box-shadow:0 -3px 8px rgba(120,124,104,.22);
}

/* שלושת הקפלים, בתוך החזית */
.fold{ position:absolute; inset:0; }
.fold-l{
  clip-path:polygon(0 0, 50% 26%, 0 100%);
  background:linear-gradient(100deg, #F7F6F0 0%, #EFEDE5 100%);
}
.fold-r{
  clip-path:polygon(100% 0, 50% 26%, 100% 100%);
  background:linear-gradient(260deg, #F5F4EE 0%, #ECEAE2 100%);
}
.fold-b{
  clip-path:polygon(0 100%, 50% 26%, 100% 100%);
  background:linear-gradient(0deg, #F2F1E9 0%, #F8F7F1 100%);
  filter:drop-shadow(0 -2px 3px rgba(126,128,110,.14));
}

.grain{
  position:absolute; inset:0; pointer-events:none;
  opacity:.4; mix-blend-mode:multiply;
  background:url('assets/paper.jpg') center/cover no-repeat;
}
.env-flap .grain{ background-position:22% 78%; background-size:170% auto; }

/* ── המכסה. בלי backface-visibility, אחרת הוא נעלם ב-90 מעלות
   במקום להראות את הצד הפנימי שלו. ── */
.env-flap{
  position:absolute; left:0; right:0; top:0; height:44%;
  z-index:5; transform-origin:top center;
  background:
    radial-gradient(110% 100% at 26% 0%, rgba(255,255,255,.96) 0%, transparent 64%),
    linear-gradient(180deg, #FEFEFC 0%, #F7F6F0 60%, #F0EFE7 100%);
  clip-path:polygon(0 0, 100% 0, 100% 42%, 50% 100%, 0 42%);
  box-shadow:0 6px 14px rgba(104,108,88,.24);
  will-change:transform;
}
/* אקווארל אמיתי. הרקע לבן, ו-multiply הופך אותו לניטרלי —
   העלים נספגים בנייר ומרקם הסיבים עובר דרכם, בדיוק כמו
   צבע מים על נייר. בלי צורך בערוץ שקיפות. */
.env-botanical{
  position:absolute; left:50%; top:4%; width:min(84%, 32rem);
  transform:translateX(-50%);
  mix-blend-mode:multiply;
  opacity:.95;
  transition:opacity .35s ease;
}
/* מעבר ל-90 מעלות רואים את גב המכסה, והציור היה מופיע מראה */
body.is-opening .env-botanical{ opacity:0; transition:opacity .3s ease .72s; }

/* ── החותם, בקצה המכסה ── */
.seal{
  position:absolute; left:50%; top:44%; z-index:7;
  width:clamp(116px,30vw,168px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:none; border:0; padding:0; cursor:pointer;
}
.seal:hover{ transform:translate(-50%,-50%) scale(1.05); }
.seal:focus-visible{ outline:2px solid var(--sage); outline-offset:8px; border-radius:50%; }

@keyframes sealPulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.04); }
}

.seal-wax{
  position:absolute; inset:0; display:grid; place-items:center; border-radius:50%;
  animation:sealPulse 3.4s ease-in-out infinite;
  background:
    radial-gradient(circle at 32% 26%, #ADBA9A 0%, #93A37E 34%, var(--sage) 58%, #5F6E4E 86%, #4C5A3E 100%);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.5),
    inset 0 -6px 14px rgba(0,0,0,.34),
    inset 4px 0 10px rgba(0,0,0,.14),
    0 2px 3px rgba(88,100,72,.45),
    0 12px 24px rgba(88,100,72,.38);
  clip-path:polygon(50% 0%,63% 3%,75% 2%,85% 11%,94% 20%,98% 33%,100% 47%,97% 61%,97% 75%,88% 85%,78% 95%,64% 98%,50% 100%,36% 98%,22% 96%,12% 88%,4% 78%,2% 64%,0% 50%,3% 36%,2% 22%,13% 12%,24% 3%,38% 2%);
}
.seal-ring{
  position:absolute; inset:13%; border-radius:50%;
  border:1px solid rgba(216,192,138,.5);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.14);
}
.seal-ring::before{
  content:''; position:absolute; inset:5%; border-radius:50%;
  border:1px solid rgba(216,192,138,.22);
}
.seal-mono{
  position:relative; z-index:2;
  font-family:var(--latin); font-size:clamp(1.85rem,6.2vw,2.7rem);
  font-weight:400; line-height:1;
  background:linear-gradient(168deg, #F2DFAE 0%, #D9BE84 38%, #B4955A 72%, #E7D3A2 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 1px 0 rgba(60,70,48,.85))
    drop-shadow(0 2px 3px rgba(40,48,32,.5))
    drop-shadow(0 -1px 0 rgba(255,248,224,.28));
}
.seal-mono i{ font-style:italic; font-size:.76em; margin:0 .05em; }
.seal-sheen{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side at 30% 22%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.1) 42%, transparent 68%);
}

/* ── הדיוקן והשמות, על חזית המעטפה ── */
.env-face{
  position:absolute; left:0; right:0; top:47%;
  display:grid; justify-items:center; gap:.4rem;
  padding:0 1.5rem;
}
.engraved{
  position:relative;
  width:min(84%, 19rem); aspect-ratio:1200/930;
  background:var(--couple, none) center/contain no-repeat;
  margin-bottom:.2rem;
  mix-blend-mode:multiply;
}
body:not(.has-couple) .engraved{ display:none; }

.env-rule{ width:56px; height:1px; background:var(--sage-lt); }
.env-names{
  margin:0; font-family:var(--latin); font-weight:300;
  font-size:clamp(1.25rem,5.4vw,1.75rem); letter-spacing:.14em; color:var(--sage-dk);
}
.env-date{
  margin:0; font-family:var(--latin);
  font-size:clamp(.76rem,3.2vw,.92rem); letter-spacing:.2em; color:var(--muted);
  direction:ltr; font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1;
}

.tap-hint{
  position:absolute; left:0; right:0; bottom:max(1.4rem, env(safe-area-inset-bottom));
  z-index:7; margin:0; text-align:center;
  letter-spacing:.32em; font-size:.66rem; color:var(--muted);
  animation:hintFade 2.6s ease-in-out infinite;
}
@keyframes hintFade{ 0%,100%{opacity:.45} 50%{opacity:.95} }


/* ══════════════ רצף הפתיחה ══════════════
   1. השעווה מתקלפת כלפי מעלה          0.00 – 0.70
   2. המכסה נפתח כמו מעטפה             0.45 – 1.55
   3. הצצה אל תמונת האולם שבפנים       1.55 – 2.00
   4. זום אל תוך הכרטיס                2.00 – 3.10
   ═══════════════════════════════════════════════ */

/* 1 */
body.is-opening .seal-wax{ animation:none; }
body.is-opening .seal{
  opacity:0;
  transform:translate(-50%,-50%) translateY(-52px) rotate(-14deg) scale(1.1);
  transition:transform .75s cubic-bezier(.3,.85,.4,1), opacity .55s ease .2s;
}

/* 2 — 168 מעלות, לא 180: המכסה נשאר מעט מוטה כמו נייר אמיתי */
/* 128 מעלות ולא 168: המכסה נשאר בפריים כל הקיפול, ונעצר
   פתוח ומוטה אחורה כמו מעטפה אמיתית שנפתחה. */
body.is-opening .env-flap{
  transform:rotateX(114deg);
  transition:transform 1.15s cubic-bezier(.33,.02,.24,1) .52s;
}

/* המצלמה נסוגה מעט (0–0.5), מחזיקה בזמן שהמכסה מתקפל ובהצצה,
   ואז נדחפת פנימה (1.9–3.1). בלי הנסיגה אין מקום מעל המעטפה
   והמכסה פשוט יוצא מהמסך במקום להיראות מתקפל.
   forwards משאיר את מצב הסוף, וזה גם מה שמונע את ה"יוצא ונכנס". */
@keyframes envOpen{
  0%   { transform:scale(1)    translateY(0); }
  17%  { transform:scale(.82)  translateY(5%); }
  61%  { transform:scale(.82)  translateY(5%); }
  100% { transform:scale(2.15) translateY(-5%); }
}
body.is-opening .envelope{
  transform-origin:50% 34%;
  animation:envOpen 3.1s cubic-bezier(.42,0,.5,1) forwards;
}

/* החזית והתוכן שעליה נשמטים החוצה בזמן הזום */
body.is-opening .env-pocket{
  transform:translateY(108%);
  transition:transform 1.2s cubic-bezier(.45,0,.55,1) 1.9s;
}
body.is-opening .env-flap{ opacity:0; transition:transform 1.15s cubic-bezier(.33,.02,.24,1) .52s, opacity .6s ease 2.2s; }
body.is-opening .tap-hint{ opacity:0; transition:opacity .3s; }


/* ══════════════ ההזמנה ══════════════ */

.invite{
  opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease) .1s, visibility .9s .1s;
}
body.is-open .invite{ opacity:1; visibility:visible; }

.corner-controls{
  position:fixed; top:max(1rem, env(safe-area-inset-top)); z-index:80;
  display:flex; gap:.5rem; inset-inline-end:1rem;
}
.pill-btn{
  min-width:44px; height:38px; padding:0 .8rem;
  border:1px solid rgba(138,154,120,.4); border-radius:999px; cursor:pointer;
  background:rgba(253,253,250,.8); backdrop-filter:blur(10px);
  color:var(--sage-dk); font-size:.76rem; letter-spacing:.1em;
  display:grid; place-items:center;
  transition:background .25s, transform .25s;
}
.pill-btn:hover{ background:#FDFDFA; transform:translateY(-1px); }
.icon-btn{ padding:0; }
.icon-btn svg{ width:19px; height:19px; fill:currentColor; }
.icon-btn .ico-off{ display:none; }
body.muted .icon-btn .ico-on{ display:none; }
body.muted .icon-btn .ico-off{ display:block; }


/* ── הנייר ── */

.stage{
  min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(3.5rem,9vw,6rem) 1.1rem;
  position:relative;
}
.stage-tight{ min-height:0; padding-block:clamp(2rem,6vw,3.5rem); }

/* מסך הפתיחה: תצלום האולם מאחורי הכרטיס */
.stage-photo{
  position:relative; overflow:hidden;
  /* הכרטיס יורד לשליש התחתון — הקשת והאגם נשארים גלויים מעליו */
  align-items:end;
  padding-bottom:clamp(1.8rem,6vw,3.2rem);
}
.stage-photo .paper-verse{
  width:min(80%, 20rem);
  padding-block:clamp(1.3rem,4.2vw,2rem);
}
.stage-photo .verse-ring{ width:min(94%, 16rem); margin-bottom:.7rem; }
.stage-photo .verse{ font-size:clamp(.76rem,3.1vw,.92rem); line-height:1.9; padding-inline:23%; }
.stage-photo .verse-credit{ font-size:.68rem; }
.stage-photo .verse-date{ font-size:.78rem; }
.photo-bg{
  position:absolute; inset:0; z-index:0;
  background:url('assets/venue-bg.jpg') center 36%/cover no-repeat;
  animation:bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{ from{ transform:scale(1) } to{ transform:scale(1.028) } }

/* צעיף חלבי: התצלום נשאר קריא, הכרטיס הלבן עדיין צף מעליו */
.photo-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(239,237,231,.3) 0%,
      rgba(239,237,231,.02) 26%,
      rgba(239,237,231,.02) 52%,
      rgba(239,237,231,.34) 74%,
      rgba(239,237,231,.9) 100%);
}
.stage-photo .paper{ z-index:1; }
.stage-photo .paper::before{ filter:url(#deckle) drop-shadow(0 20px 40px rgba(72,78,60,.3)); }

.paper{
  position:relative;
  width:min(100%, 30rem);
  padding:clamp(2.6rem,7vw,3.6rem) clamp(1.6rem,6vw,2.8rem);
  text-align:center;
}
/* שכבת הנייר עצמה — הפילטר מרעיד רק אותה, לא את הטקסט */
.paper::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--paper);
  filter:url(#deckle) drop-shadow(0 14px 26px rgba(100,104,86,.16));
}
/* הסיבים גם על הכרטיסים, בעוצמה נמוכה יותר — הם קטנים מהמעטפה
   ומרקם חזק מדי היה מתחרה בטקסט. */
.paper::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('assets/paper.jpg') center/cover no-repeat;
  opacity:.42; mix-blend-mode:multiply;
}

/* מסגרת פנימית דקה, כמו בהזמנה מודפסת */
.paper-main .frame{
  position:absolute; inset:clamp(.7rem,2.6vw,1.15rem);
  border:1px solid rgba(179,192,163,.32); pointer-events:none;
}

.basad{
  position:absolute; top:1.1rem; inset-inline-start:1.3rem;
  font-size:.62rem; color:var(--muted); letter-spacing:.04em;
}
.basad:empty{ display:none; }

.corner{
  position:absolute; width:clamp(74px,20vw,104px); height:auto;
  pointer-events:none; mix-blend-mode:multiply; opacity:.94;
}
/* הציור צויר כפינה שמאלית־תחתונה. כל שאר המופעים הם שיקופים
   שלו, כך שהענפים תמיד יוצאים מהפינה פנימה. */
.corner-tr{ top:.15rem; inset-inline-end:.15rem; transform:scaleY(-1) scaleX(-1); }
.corner-bl{ bottom:.15rem; inset-inline-start:.15rem; }

/* הענפים שלאורך שני הצדדים */
.corner-ml, .corner-mr{ width:clamp(52px,14vw,72px); top:38%; opacity:.72; }
.corner-ml{ inset-inline-start:.15rem; transform:scaleY(-1); }
.corner-mr{ inset-inline-end:.15rem;  transform:scaleX(-1); }

/* זר קטן מעל השמות */
.garland{
  width:min(54%, 12.5rem); height:auto; display:block; margin:1rem auto .2rem;
  mix-blend-mode:multiply; opacity:.95;
}

/* מפריד: קו דק, שני עלים, קו דק */
.leaf-div{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:1.4rem auto 1.5rem; width:min(72%, 15rem);
}
.leaf-div span{ flex:1; height:1px; background:linear-gradient(to right, transparent, rgba(179,192,163,.75), transparent); }
.leaf-div img{ width:74px; height:auto; flex:none; mix-blend-mode:multiply; opacity:.9; }

.names{
  margin:.2rem 0 1.7rem;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.5rem,2.6vw,.9rem);
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.9rem,8vw,2.9rem); line-height:1.25;
  letter-spacing:.06em; color:var(--sage-dk);
}
.heart{
  font-style:normal; color:var(--sage-lt);
  font-size:.42em; line-height:1; transform:translateY(-.1em);
}

.invite-line{
  margin:0 0 .45rem; font-size:clamp(.86rem,3.4vw,.96rem);
  line-height:1.85; color:var(--ink); font-weight:300;
}
.invite-line:last-of-type{ margin-bottom:1.7rem; }

.date-big{
  margin:0 0 1.7rem;
  font-family:var(--latin); font-weight:400;
  font-size:clamp(1.5rem,6.4vw,2.1rem);
  letter-spacing:.22em; color:var(--sage-dk);
  font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1;
  direction:ltr;
}

.venue-line{
  margin:0 0 .3rem; font-family:var(--latin);
  font-size:clamp(1.02rem,4.2vw,1.28rem); letter-spacing:.07em; color:var(--sage-dk);
}
.city-line{
  margin:0 0 1.9rem; font-size:.82rem; color:var(--muted); letter-spacing:.04em;
}

.times{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(.8rem,4vw,1.6rem); margin-bottom:1.9rem;
}
.time-col{ display:grid; gap:.35rem; }
.time{
  font-family:var(--latin); font-weight:400;
  font-size:clamp(1.2rem,5vw,1.55rem); color:var(--sage-dk);
  font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1;
}
.time-label{ font-size:.74rem; color:var(--muted); letter-spacing:.06em; }
.time-div{ width:1px; height:34px; background:var(--sage-lt); opacity:.7; }

/* הכיתוב היחיד בכתב יד — נקודת החום היחידה בכרטיס */
.closing{
  margin:0; color:var(--sage);
  font-family:var(--script-he); font-weight:700;
  font-size:clamp(1.75rem,7.4vw,2.3rem); line-height:1.25; letter-spacing:.02em;
}
html[lang="en"] .closing{ font-family:var(--script-en); font-weight:500; }

.parents{
  display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;
  margin-top:2.1rem; padding-top:1.5rem;
  border-top:1px solid rgba(179,192,163,.45);
}
/* מרווח נוסף בתחתית כשיש הורים, כדי שהשמות לא יידחסו לענף שבפינה */
.paper-main:has(.parents:not([hidden])){ padding-bottom:clamp(4.6rem,12vw,6rem); }
.parent-col{ display:grid; gap:.4rem; }
.parent-label{ font-size:.68rem; color:var(--muted); letter-spacing:.08em; }
.parent-names{ font-size:.82rem; color:var(--ink); line-height:1.65; }


/* ── כרטיס הפסוק ── */

.paper-verse{ padding-block:clamp(2.4rem,7vw,3.4rem); }

/* הזר הוא רקע מוחלט, הפסוק יושב במרכזו — בלי שוליים שליליים */
.verse-ring{
  position:relative; display:grid; place-items:center;
  width:min(90%, 19rem); aspect-ratio:1;
  margin:0 auto 1.5rem;
}
.wreath{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  mix-blend-mode:multiply; opacity:.96;
}
.verse{
  position:relative; z-index:1; margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(.95rem,4.1vw,1.22rem); line-height:1.95;
  color:var(--sage-dk); letter-spacing:.02em;
  padding-inline:16%;
}
.verse-credit{ margin:0 0 .25rem; font-size:.76rem; color:var(--muted); letter-spacing:.06em; }
.verse-date{
  margin:0; font-family:var(--latin); font-size:.9rem; color:var(--muted);
  letter-spacing:.1em; direction:ltr;
  font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1;
}


/* ── רצועות ── */

.band{
  padding:clamp(3.2rem,10vw,5rem) 1.5rem;
  text-align:center; max-width:40rem; margin-inline:auto;
}
.band-title{
  margin:0 0 .5rem; font-family:var(--display); font-weight:300;
  font-size:clamp(1.35rem,5.4vw,1.8rem); color:var(--sage-dk); letter-spacing:.04em;
}
.band-lead{ margin:.5rem 0 2.2rem; color:var(--muted); font-size:.88rem; }

/* הספירה תמיד נקראת ימים → שניות משמאל לימין, גם בעמוד RTL.
   בלי זה הסדר מתהפך והשניות קופצות לשמאל. */
.countdown{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(.5rem,3vw,1.3rem); margin-top:1.8rem;
  direction:ltr;
}
.cd-unit{ display:grid; gap:.5rem; min-width:clamp(46px,15vw,70px); }
.cd-unit b{
  font-family:var(--latin); font-weight:300;
  font-size:clamp(1.8rem,7.5vw,2.7rem); line-height:1; color:var(--sage-dk);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:'lnum' 1,'tnum' 1;
}
.cd-unit span{ font-size:.62rem; letter-spacing:.16em; color:var(--muted); }
.cd-sep{ color:var(--sage-lt); font-size:1.3rem; line-height:1.2; }

.venue-name{
  margin:1.4rem 0 .4rem; font-family:var(--latin);
  font-size:clamp(1.15rem,4.6vw,1.5rem); letter-spacing:.06em; color:var(--ink);
}
.venue-addr{ margin:0 0 1.9rem; color:var(--muted); font-size:.86rem; direction:ltr; }

.map-btns{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }

.btn{
  display:inline-grid; place-items:center; min-height:48px;
  padding:0 1.7rem; border-radius:999px; border:1px solid transparent;
  font-size:.79rem; letter-spacing:.1em; text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease), background .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--sage); color:#FCFDF9; box-shadow:0 10px 22px -12px rgba(108,123,91,.85); }
.btn-solid:hover{ background:var(--sage-dk); }
.btn-outline{ border-color:rgba(138,154,120,.5); color:var(--sage-dk); background:transparent; }
.btn-outline:hover{ background:rgba(138,154,120,.09); }
.btn-wide{ width:100%; }

.gift-note{ margin:1.4rem 0 .5rem; color:var(--ink); }
.gift-zelle{ margin:0; font-family:var(--latin); font-size:1.1rem; letter-spacing:.06em; color:var(--sage-dk); direction:ltr; }


/* ── הטופס ── */

.paper-form{ width:min(100%, 27rem); }
.paper-form .band-title{ margin-bottom:.4rem; }
.rsvp-form{ display:grid; gap:1.35rem; text-align:start; margin-top:.6rem; }

.demo-notice{
  margin:0; padding:.7rem .9rem; border-radius:10px; text-align:center;
  background:rgba(138,154,120,.12); border:1px dashed rgba(138,154,120,.55);
  color:var(--sage-dk); font-size:.76rem;
}

.field{ display:grid; gap:.55rem; border:0; padding:0; margin:0; }
.field-label{ font-size:.7rem; letter-spacing:.14em; color:var(--muted); padding:0; }
.field-hint{ font-size:.72rem; color:var(--sage-lt); margin-top:-.35rem; }

.field input[type=text], .field input[type=tel]{
  width:100%; height:50px; padding:0 .95rem;
  background:rgba(255,255,255,.7); color:var(--ink);
  border:1px solid rgba(138,154,120,.35); border-radius:10px;
  font-family:inherit; font-size:.98rem;
  transition:border-color .2s, background .2s;
}
.field input:focus{ outline:0; border-color:var(--sage); background:#fff; }
.field input.invalid{ border-color:#A9705F; }

.choices{ display:grid; gap:.5rem; }
.choice{ position:relative; display:block; cursor:pointer; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice span{
  display:grid; place-items:center; min-height:46px; padding:0 1rem;
  border:1px solid rgba(138,154,120,.35); border-radius:10px;
  background:rgba(255,255,255,.55); font-size:.9rem;
  transition:all .22s var(--ease);
}
.choice input:checked + span{ background:var(--sage); color:#FCFDF9; border-color:var(--sage); }
.choice input:focus-visible + span{ outline:2px solid var(--sage-dk); outline-offset:2px; }

.stepper{
  display:grid; grid-template-columns:50px 1fr 50px; align-items:center;
  border:1px solid rgba(138,154,120,.35); border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.7);
}
.stepper .step{
  height:50px; border:0; background:transparent; cursor:pointer;
  font-size:1.3rem; color:var(--sage-dk); line-height:1;
  transition:background .2s;
}
.stepper .step:hover{ background:rgba(138,154,120,.12); }
.stepper input{
  height:50px; width:100%; border:0; background:transparent; text-align:center;
  font-family:var(--latin); font-size:1.3rem; color:var(--ink);
  -moz-appearance:textfield;
  font-variant-numeric:lining-nums; font-feature-settings:'lnum' 1;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* שמות המגיעים */
.guest-names{ display:grid; gap:.5rem; }
.guest-row{ position:relative; animation:rowIn .3s var(--ease) both; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1 } }
.guest-row input{ padding-inline-start:2.5rem !important; }
.guest-num{
  position:absolute; inset-inline-start:.9rem; top:50%; transform:translateY(-50%);
  font-family:var(--latin); font-size:.9rem; color:var(--sage-lt); pointer-events:none;
  font-variant-numeric:lining-nums;
}
#namesField, #guestsField{ transition:opacity .3s, max-height .35s var(--ease); overflow:hidden; max-height:640px; }
#namesField.hidden-soft, #guestsField.hidden-soft{
  opacity:0; max-height:0; margin-block:-.7rem; pointer-events:none;
}

.form-error{ margin:0; color:#9E6252; font-size:.84rem; text-align:center; }

.rsvp-done{ display:grid; gap:1.1rem; justify-items:center; padding:1.4rem 0 .4rem; }
.done-mark{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:var(--sage); color:#FCFDF9; animation:pop .5s var(--ease) both;
}
.done-mark svg{ width:32px; height:32px; }
@keyframes pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.done-msg{ margin:0; font-family:var(--display); font-size:1.15rem; color:var(--sage-dk); text-align:center; }
.done-demo{
  margin:0; padding:.7rem 1rem; border-radius:10px; text-align:center;
  background:rgba(138,154,120,.12); border:1px dashed rgba(138,154,120,.55);
  color:var(--sage-dk); font-size:.78rem; line-height:1.5;
}


/* ── שוליים ── */

.scroll-cue{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  width:1px; height:46px; background:rgba(138,154,120,.28); overflow:hidden;
}
.scroll-cue span{
  position:absolute; inset-inline:0; height:16px; background:var(--sage);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{top:-16px} 100%{top:46px} }

.rsvp-fab{
  position:fixed; z-index:70;
  bottom:max(1.3rem, env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%) translateY(140%);
  min-height:48px; padding:0 2rem; border-radius:999px;
  display:grid; place-items:center; text-decoration:none;
  background:var(--sage); color:#FCFDF9;
  font-size:.79rem; letter-spacing:.1em; white-space:nowrap;
  box-shadow:0 14px 28px -14px rgba(90,102,76,.8);
  transition:transform .5s var(--ease);
}
body.show-fab .rsvp-fab{ transform:translateX(-50%) translateY(0); }
body.rsvp-sent .rsvp-fab{ transform:translateX(-50%) translateY(140%); }

.foot{ padding:2.4rem 1.5rem 2.6rem; text-align:center; }
.foot-sprig{
  width:170px; height:auto; display:block; margin:0 auto .5rem;
  mix-blend-mode:multiply; opacity:.85;
}
.foot p{ margin:0; font-size:.74rem; letter-spacing:.18em; color:var(--muted); }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}


/* ══════════════ "מתנגן עכשיו" ══════════════
   פתק שנפתח לרגע כשהשיר מתחיל, ומתכווץ לארבעה פסים.
   לחיצה משתיקה. */

.now-playing{
  display:flex; align-items:center; gap:.55rem;
  padding:0 .85rem; max-width:60px; overflow:hidden;
  transition:max-width .7s var(--ease), background .25s;
}
body.np-open .now-playing{ max-width:15rem; }

.eq{ display:flex; align-items:flex-end; gap:2.5px; height:15px; flex:none; }
.eq i{
  width:2.5px; border-radius:2px; background:var(--sage);
  animation:eqBar .9s ease-in-out infinite alternate;
}
.eq i:nth-child(1){ height:40%; animation-delay:0s;    }
.eq i:nth-child(2){ height:95%; animation-delay:.18s;  }
.eq i:nth-child(3){ height:62%; animation-delay:.36s;  }
.eq i:nth-child(4){ height:80%; animation-delay:.54s;  }
@keyframes eqBar{ from{ transform:scaleY(.35) } to{ transform:scaleY(1) } }
.eq i{ transform-origin:bottom; }

/* מושתק: הפסים קופאים נמוך, כדי שברור שאין צליל */
body.muted .eq i{ animation-play-state:paused; transform:scaleY(.3); opacity:.45; }

.np-text{
  display:grid; gap:1px; text-align:start; white-space:nowrap;
  opacity:0; transition:opacity .4s var(--ease) .15s;
}
body.np-open .np-text{ opacity:1; }
.np-title{ font-size:.72rem; color:var(--sage-dk); letter-spacing:.02em; }
.np-artist{ font-size:.6rem; color:var(--muted); letter-spacing:.04em; }

/* בלי קובץ שיר אין מה להציג */
body.no-music .now-playing{ display:none; }