:root{
  --bg:#f7f2e9;
  --paper:#fbf7f1;
  --ink:#2f2a26;
  --muted:#6a5f55;
  --gold:#c8a96a;
  /*--gold2:#b89252;*/
  --gold2:#eeb32b;
  --card:#ffffffcc;
  --stroke:rgba(47,42,38,.10);
  --olive:#3a4634;

  --serif:"Playfair Display", serif;
  /*--body:"Libre Baskerville", serif;*/
  --body:"Google Sans Flex, Google Sans, Helvetica Neue, sans-serif;", serif;

  --radius:22px;
  --shadow: 0 18px 60px rgba(30,20,10,.12);
  --shadow2: 0 10px 26px rgba(30,20,10,.10);
}
.color-gold{
  color: var(--gold2) !important;
}
.color-ink{  
  color: var(--ink) !important;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Paper layer */
.paper{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% 10%, rgba(255,255,255,.55), rgba(255,255,255,0)),
    radial-gradient(1200px 600px at 50% 110%, rgba(0,0,0,.06), rgba(0,0,0,0)),
    repeating-linear-gradient( 0deg, rgba(0,0,0,.018), rgba(0,0,0,.018) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 4px);
  mix-blend-mode:multiply;
  opacity:.35;
}

/* Topbar */
/*
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  background: rgba(247,242,233,.74);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(47,42,38,.08);
}
  */
.topbar{
  position:absolute;
  direction: ltr !important;
  width: 100%;
  top:0;
  z-index:50;
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  /*background: rgba(247,242,233,.74);*/
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(47,42,38,.08);
}

.brand{
  text-decoration:none;
  color:inherit;
}
.brand__monogram{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(200,169,106,.45);
  background: rgba(255,255,255,.45);
  box-shadow: var(--shadow2);
  font-family:var(--serif);
  letter-spacing:.08em;
  font-size:14px;
}

.topbar__nav{
  display:none;
  gap:16px;
}
.navlink{
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.02em;
  padding:10px 10px;
  border-radius:999px;
  transition: all .2s ease;
}
.navlink:hover{
  background: rgba(200,169,106,.12);
  color:var(--ink);
}

.lang{
  display:flex;
  gap:8px;
}
.lang__btn{
  appearance:none;
  border:1px solid rgba(200,169,106,.35);
  background: rgba(255,255,255,.35);
  color:var(--muted);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  letter-spacing:.06em;
  cursor:pointer;
  transition: all .2s ease;
  min-width: 54px;
}
.lang__btn:hover{ background: rgba(200,169,106,.12); color:var(--ink); }
.lang__btn.is-active{
  background: rgba(200,169,106,.18);
  color:var(--ink);
  color: white;
  border-color: rgba(200,169,106,.55);
}

/* Layout */
.page{ position:relative; }
.section{ padding: clamp(54px, 7vw, 92px) 18px; }
.section--soft{
  background: linear-gradient(180deg, rgba(200,169,106,.08), rgba(255,255,255,0));
}
.container{
  max-width: 980px;
  margin: 0 auto;
}

/* Typography */
.eyebrow{
  margin:0 0 10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  opacity: 0.8;
  /*color:var(--muted);*/
}
.h2{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.02em;
  font-size: clamp(26px, 4vw, 38px);
  margin:0 0 22px;
  text-align:center;
}

/* Hero */
.hero{
  /*
  padding-top: clamp(72px, 9vw, 110px);
  padding-bottom: clamp(56px, 7vw, 86px);
  */
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.hero__inner{
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
  position: absolute;
  color: #fff;
}
.hero__names{
  display: flex;
  flex-direction: column;
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.02em;
  font-size: clamp(54px, 7vw, 84px);
  line-height: 1.02;
}
.hero__names__line{ display:inline-block; }
.amp{
  display:inline-block;
  margin: 8px .18em;
  font-weight:400;
  color: var(--gold2);
}
.hero__date{
  margin: 14px 0 0;
  /*color: var(--muted);*/
  font-size: 14px;
  letter-spacing:.03em;
  opacity: 0.8;
}
.divider{
  display:flex;
  justify-content:center;
  margin: 22px 0 14px;
  /*color: var(--gold2);*/
  opacity: .92;
}
.divider__svg{
  width:min(560px, 92vw);
  height:auto;
}
.hero__sub{
  margin:0;
  font-style:italic;
  opacity: 0.8;
  /*color: var(--muted);*/
}
.hero__cta{ margin-top: 22px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(200,169,106,.45);
  background: rgba(200,169,106,.16);
  color: var(--ink);
  text-decoration:none;
  font-size: 13px;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(200,169,106,.22);
  border-color: rgba(200,169,106,.60);
}
.btn--ghost{
  background: rgba(255,255,255,.38);
  border-color: rgba(200,169,106,.35);
}
.btn--ghost:hover{ background: rgba(255,255,255,.55); }

/* Cards */
.cards{
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
  margin-top: 20px;
}
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 22px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(200,169,106,.16), rgba(255,255,255,0) 55%);
  transform: rotate(-8deg);
}
.card > *{ position:relative; z-index:1; }
.card__icon{
  margin: 2px auto 10px;
  display: flex;
  justify-content: center;
  /*width: 64px; height: 64px;*/
  color: var(--gold2);
  opacity: 1;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.card__icon svg{ width:100%; height:100%; display:block; }
.card__title{
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight:600;
}
.card__time{
  margin: 10px 0 12px;
  color: var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
    font-size: 22px;
    font-weight: 600;
}
.card__venue{
  margin: 0;
  font-weight:700;
  letter-spacing:.02em;
}
.card__addr{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.note{
  margin: 18px auto 0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  max-width: 760px;
  color: var(--muted);
}
.note__dot{
  width:10px; height:10px;
  margin-top: 6px;
  border-radius:999px;
  background: rgba(200,169,106,.6);
  box-shadow: 0 0 0 6px rgba(200,169,106,.12);
}
.note__text{ margin:0; font-size: 13px; }

/* Countdown */
.countdown{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}
.cd{
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(47,42,38,.08);
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: var(--shadow2);
  text-align: center;
}
.cd__num{
  font-family: var(--serif);
  font-size: 34px;
  font-weight:600;
  letter-spacing:.02em;
}
.cd__lbl{
  margin-top: 4px;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--muted);
}
.muted{
  color: var(--muted);
  margin: 14px 0 0;
  text-align:center;
}

/* Location */
.location{ display:flex; justify-content:center; }
.location__card{
  width: min(980px, 100%);
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(47,42,38,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.location__header{
  display:flex;
  gap:14px;
  align-items:center;
  padding: 18px 18px 12px;
}
.pin{
  width: 44px; height: 44px;
  color: var(--gold2);
  opacity:.9;
}
.pin svg{ width:100%; height:100%; }
.location__name{
  font-weight:700;
  letter-spacing:.02em;
}
.location__addr{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}
.mapframe{
  height: 250px;
  border-top: 1px solid rgba(47,42,38,.06);
  border-bottom: 1px solid rgba(47,42,38,.06);
  background: #f2ebdf;
}
.mapframe svg{ width:100%; height:100%; display:block; }

.location__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  padding: 14px 18px 6px;
}
.copyhint{
  min-height: 20px;
  text-align:center;
  color: var(--muted);
  margin: 0 0 14px;
  font-size: 13px;
}

/* Footer */
.footer{
  padding: 54px 18px 70px;
}
.footer__inner{
  max-width: 980px;
  margin: 0 auto;
  display:grid;
  align-items:center;
  justify-items:center;
  gap: 10px;
  color: var(--muted);
}
.footer__line{
  width: min(520px, 92vw);
  height: 1px;
  background: rgba(200,169,106,.35);
}
.footer__date{
  letter-spacing:.18em;
  font-size: 12px;
}
.footer__mono{
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink);
  opacity:.85;
}

/* Reveal animations */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Subtle icon animation (very gentle) */
.icon-animate{
  transform: translateY(8px) scale(.98);
  opacity: .86;
  transition: transform .9s ease, opacity .9s ease;
  will-change: transform;
}
.reveal.is-in .icon-animate{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Our Story */
.section--story{
  background: linear-gradient(180deg, rgba(200,169,106,.06), rgba(255,255,255,0));
}
.story{ text-align:center; }
.story__divider{
  display:flex;
  justify-content:center;
  margin: 16px 0 26px;
  color: var(--gold2);
}
.story__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 10px;
}
.story__block{
  max-width: 720px;
  margin: 0 auto;
  padding: 6px 0;
}
.story__icon{
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  color: var(--gold2);
}
.story__icon svg{ width:100%; height:100%; display:block; }
.story__subtitle{
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  margin: 10px 0 12px;
}
.story__text{
  font-size: 22px;
  color: var(--muted);
  line-height: 1.7;
  font-style: italic;
  margin: 0;
}

/* =========================
   Mockup-like Stationery SVG
   ========================= */
.svg-foil {
  fill: none;
  stroke: var(--gold2);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.35))
    drop-shadow(0 6px 14px rgba(30,20,10,.06));
}
.svg-foil--fine { stroke-width: 1.85; opacity: .88; }

/* Responsive */
@media (min-width: 720px){
  .topbar__nav{ display:flex; }
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .countdown{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .story__grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); align-items:start; }
  .story__block{ max-width: none; }
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{ transition:none; transform:none; opacity:1; }
  .btn{ transition:none; }
  .icon-animate{ transition:none; transform:none; opacity:1; }
}

/* RTL refinements */
html[dir="rtl"] body{
  letter-spacing: normal;
}
html[dir="rtl"] .topbar{ direction: rtl; }
html[dir="rtl"] .topbar__nav{ direction: rtl; }
html[dir="rtl"] .location__header{ direction: rtl; }


/* Google Maps iframe */
.mapframe{ position:relative; }
.mapframe iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#f2ebdf;
}


/* =========================
   Parents Section
   ========================= */
.section--parents{
  background: linear-gradient(180deg, rgba(200,169,106,.05), rgba(255,255,255,0));
}

.parents{
  text-align:center;
}

.parents__divider{
  display:flex;
  justify-content:center;
  margin: 16px 0 28px;
  color: var(--gold2);
}

.parents__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 10px;
}

.parents__block{
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(47,42,38,.08);
  border-radius: var(--radius);
  padding: 26px 20px;
  box-shadow: var(--shadow2);
}

.parents__role{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 10px;
}

.parents__names{
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  letter-spacing: .02em;
}

@media (min-width: 720px){
  .parents__grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}



/* =========================
   Hebrew Serif + Size Fix
   ========================= */

   /*
html[lang="he"] body{
  font-family: "Frank Ruhl Libre", serif;
  font-size: 17px;
}
  */
  
html[lang="he"] .eyebrow{
  font-family: "Frank Ruhl Libre", serif;
  font-size: 17px;
}

html[lang="he"] .hero__date{
  font-family: "Frank Ruhl Libre", serif;
  font-size: 17px;
}
/*
html[lang="he"] .hero__names{
  font-size: clamp(55px, 7vw, 84px);
  letter-spacing: normal;
}
*/
html[lang="he"] .h2{
  font-size: clamp(32px, 4.8vw, 44px);
}

html[lang="he"] .story__subtitle,
html[lang="he"] .parents__role,
html[lang="he"] .card__title{
  font-size: 34px;
}

html[lang="he"] .story__text,
html[lang="he"] .parents__names,
html[lang="he"] .card__addr,
html[lang="he"] .note__text,
html[lang="he"] .muted{
  font-size: 22px;
  line-height: 1.75;
}

html[lang="ru"] .story__subtitle{
  font-size: 24px;
}

html[lang="ru"] .story__text{
  font-size: 22px;
  line-height: 1.75;
}


html[lang="he"] .cd__lbl{
  font-size: 17px;
}
.carattere-regular {
  font-family: "Carattere", cursive !important;
  font-weight: 400;
  font-style: normal;
}


/* =========================
   Landing Gate (Video + Ad)
   ========================= */
.app.is-hidden{ display:none; }

.gate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.gate__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 50% 18%, rgba(255,255,255,.70), rgba(255,255,255,0)),
    radial-gradient(1200px 600px at 50% 110%, rgba(0,0,0,.14), rgba(0,0,0,0)),
    rgba(247,242,233,.92);
  backdrop-filter: blur(10px);
}
/*
.gate__panel{
  position:relative;
  width:min(520px, 92vw);
  border-radius: 26px;
  border: 1px solid rgba(47,42,38,.10);
  background: rgba(255,255,255,.52);
  box-shadow: var(--shadow);
  padding: 28px 22px 22px;
  text-align:center;
  cursor:pointer;
}
*/
.gate__panel{
  position:relative;
  text-align:center;
  cursor:pointer;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.gate__panel > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gate__ornament{
  display:flex;
  justify-content:center;
  color: var(--gold2);
  margin-bottom: 10px;
}

.gate__eyebrow{
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color: var(--muted);
}

.gate__names{
  font-family: var(--serif);
  font-weight:600;
  letter-spacing:.02em;
  font-size: clamp(34px, 6vw, 52px);
  margin-top: 10px;
}

.gate__amp{
  color: var(--gold2);
  font-weight:400;
  margin: 0 .18em;
}

.gate__hint{
  margin-top: 10px;
  color: var(--muted);
  font-style: italic;
}

.gate__btn{
  margin-top: 18px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(200,169,106,.45);
  background: rgba(200,169,106,.18);
  color: var(--ink);
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing:.02em;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.gate__btn:hover{
  transform: translateY(-1px);
  background: rgba(200,169,106,.24);
  border-color: rgba(200,169,106,.60);
}
.gate__btnIcon{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(200,169,106,.55);
  background: rgba(255,255,255,.4);
  font-size: 12px;
  padding-left: 1px;
}

.gate__videoLayer,
.gate__adLayer{
  position:absolute;
  inset:0;
  display:none;
}

.gate__videoLayer.is-active,
.gate__adLayer.is-active{
  display:block;
}

.gate__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background: #000;
}

.gate__skip{
  position:absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding: 10px 12px;
  font-size: 12px;
  cursor:pointer;
}

html[dir="rtl"] .gate__skip{
  right:auto;
  left: 14px;
}

.gate__adLayer{
  display:none;
  place-items:center;
  background: rgba(247,242,233,.92);
  backdrop-filter: blur(10px);
}
.gate__adLayer.is-active{
  display:grid;
}
.gate__adCard{
  width:min(520px, 92vw);
  border-radius: 26px;
  border: 1px solid rgba(47,42,38,.10);
  background: rgba(255,255,255,.56);
  box-shadow: var(--shadow);
  padding: 26px 22px 22px;
  text-align:center;
}
.gate__adTitle{
  font-family: var(--serif);
  font-weight:600;
  font-size: 30px;
  margin-bottom: 10px;
}
.gate__adText{
  color: var(--muted);
  font-style: italic;
  margin-bottom: 18px;
}

/* When finished, hide gate */
.gate.gate--done{ display:none; }


/* =========================
   Helpers
   ========================= */

.bg-black\/55 {
    background-color: #0000008c;
}
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.absolute {
    position: absolute;
}

.object-center {
    -o-object-position: center;
    object-position: center;
}
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
img, video {
    max-width: 100%;
    height: auto;
}
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}

.d-none{
  display: none !important;
}



.gate__video {
  opacity: 1;
  transition: opacity 1s ease-out; /* Adjust 1s to change fade speed */
}

/* This class will be added via JavaScript */
.video-fade-out {
  opacity: 0;
}


.join__wrap{
  position: absolute;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.join__sub{
  margin:0;
  font-style:italic;
  opacity: 0.8;
  color: #fff;
  /*color: var(--muted);*/
}

/* The animation keyframes */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px); /* Adjust this number for a bigger/smaller bounce */
  }
}

/* Applying it to a class */
.scroll-icon {
  display: inline-block;
  animation: bounce 2s infinite ease-in-out;
  color: white;
}


.sound__btn{
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  z-index: 100;
  appearance:none;
  border:0px solid rgba(200,169,106,.35);
  background:var(--gold2);/* rgba(255,255,255,.35);*/
  color:var(--paper);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  letter-spacing:.06em;
  cursor:pointer;
  transition: all .2s ease;
}
.sound__btn:hover{
  background:var(--gold2);
  color:var(--paper);
}
.sound__btn.is-active{
  background:var(--gold2);
  color:var(--paper);
  /*border-color: rgba(200,169,106,.55);*/
}

.dir-rtl{
  direction: rtl !important;
}
.dir-ltr{
  direction: ltr !important;
}

.fs-18{
  font-size: 1.125rem !important;
}





.pulse {
  /*
    background: rgb(222, 84, 72);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    box-shadow: 0 0 0 0 rgba(222, 84, 72, 1);
    */
    transform: scale(1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 var(--gold2);/* rgba(222, 84, 72, 0.7);*/
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(222, 84, 72, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(222, 84, 72, 0);
    }
}           

.basad{
  min-width: 40px;
  color: white;
  font-size: 20px;
  font-weight: 600;
  opacity: 0.5;
}