/* מאיה & צ'ארלס — guest landing
   Direction: "דיו אחד, שתי טמפרטורות". One paper, ink interpolates cool→warm
   down the page, so the art direction is a single animated variable. */

:root{
  --paper:#F6F3EE;
  --paper-deep:#EFEAE2;
  --ink-cool:#232323;
  --ink-warm:#3C302B;
  --ink:var(--ink-cool);
  --ink-muted:#6E655E;
  --rule:#D9D3CA;
  --sepia:#8A6F5C;
  --measure:34rem;
}

*,*::before,*::after{box-sizing:border-box}
/* any explicit display rule beats the [hidden] attribute — the language toggle
   relies on [hidden], so it has to win. */
[hidden]{ display:none !important }
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Assistant',system-ui,sans-serif; font-weight:300;
  font-size:1.0625rem; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* the gradient IS the art direction */
@supports (animation-timeline: scroll()){
  body{ animation:warm linear both; animation-timeline:scroll(root block); }
  @keyframes warm{ from{--ink:var(--ink-cool)} to{--ink:var(--ink-warm)} }
}
@property --ink{ syntax:'<color>'; inherits:true; initial-value:#232323 }

h1,h2,.date,.agenda b,.signoff{ font-family:'Bellefair',Georgia,serif; font-weight:400 }

section{ padding:clamp(4.5rem,14vh,8rem) 1.5rem; max-width:var(--measure); margin-inline:auto }

/* ---------- hero ---------- */
.hero{ min-height:100svh; display:grid; place-items:center; padding-top:2rem }
.wreath-wrap{ position:relative; width:min(88vw,26rem); aspect-ratio:750/760; display:grid; place-items:center }
.wreath-mask{ position:absolute; inset:0; width:100%; height:100% }
.art{ width:100%; height:100%;
  background:var(--ink);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-position:center;  mask-position:center;
}
.wreath{ -webkit-mask-image:url(/img/wreath.webp); mask-image:url(/img/wreath.webp) }
.couple{ -webkit-mask-image:url(/img/couple.webp); mask-image:url(/img/couple.webp);
  aspect-ratio:760/622; width:min(90vw,30rem); height:auto; margin-inline:auto }

.sweep{ animation:sweep 2.1s cubic-bezier(.22,1,.36,1) .25s forwards }
@keyframes sweep{ to{ stroke-dashoffset:0 } }

/* the name fades in only after the circle has closed */
.lockup{ position:relative; text-align:center; opacity:0; animation:rise 1.1s ease-out 1.9s forwards }
@keyframes rise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.lockup h1{ margin:0; font-size:clamp(2.1rem,9vw,3.1rem); line-height:1.1; letter-spacing:.01em }
.amp{ font-style:italic; color:var(--sepia); padding-inline:.15em }
.rule{ width:3.5rem; height:1px; background:var(--rule); margin:1.1rem auto .9rem }
.date{ margin:0; font-size:1rem; letter-spacing:.22em; color:var(--ink-muted) }

.hebdate{ margin:.45rem 0 0; font-size:.82rem; letter-spacing:.06em; color:var(--ink-muted) }
.parents{ display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:center;
  margin-top:3.5rem; font-size:.92rem; line-height:1.85; color:var(--ink-muted) }
.parents .lbl{ display:block; font-size:.68rem; letter-spacing:.2em; color:var(--rule-strong,#A89E93); margin-bottom:.3rem }
.scroll-hint{ position:absolute; bottom:2.2rem; font-size:.72rem; letter-spacing:.28em;
  color:var(--ink-muted); opacity:0; animation:rise 1s ease-out 2.8s forwards }

/* ---------- content ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s ease-out, transform .9s cubic-bezier(.22,1,.36,1) }
.reveal.in{ opacity:1; transform:none }

h2{ font-size:clamp(1.6rem,6vw,2.1rem); margin:0 0 1.5rem; line-height:1.2 }
.say{ text-align:center }
.say p{ font-family:'Bellefair',Georgia,serif; font-size:clamp(1.35rem,5.5vw,1.8rem); line-height:1.55; margin:0 }

.agenda{ list-style:none; margin:0; padding:0 }
.agenda li{ display:flex; align-items:baseline; gap:1.1rem; padding:1rem 0; border-block-end:1px solid var(--rule) }
.agenda li:last-child{ border-block-end:0 }
.agenda b{ font-size:1.45rem; font-weight:400; min-width:4.2rem; font-variant-numeric:tabular-nums }
.note{ color:var(--ink-muted); font-size:.95rem; margin-top:1.4rem }
.muted{ color:var(--ink-muted) }
.venue{ font-size:1.25rem; margin:0 0 .25rem }

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem }
.btn{
  flex:1 1 11rem; text-align:center; text-decoration:none;
  min-height:3.25rem; display:grid; place-items:center; padding:.75rem 1.25rem;
  background:var(--ink); color:var(--paper);
  border-radius:2px; font-size:1rem; letter-spacing:.02em;
  transition:opacity .2s;
}
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--rule) }
.btn:hover{ opacity:.82 }
.btn[aria-disabled="true"]{ opacity:.35; pointer-events:none }

/* ---------- closing ---------- */
.closing{ text-align:center; padding-block:clamp(5rem,16vh,9rem) }
.signoff{ font-size:clamp(1.3rem,5vw,1.7rem); margin:2rem 0 0; color:var(--ink) }

/* The couple draws itself open as it scrolls into view.
   The clip lives on the child, never on the observed element: IntersectionObserver
   factors clip-path into the intersection rect, so a fully-clipped target reports
   isIntersecting=false and the reveal can never fire itself. */
.couple-wrap{ overflow:hidden }
.couple{ clip-path:inset(0 0 0 100%); transition:clip-path 1.8s cubic-bezier(.33,1,.68,1) }
.couple-wrap.in .couple{ clip-path:inset(0 0 0 0) }

.lang{
  position:fixed; top:1rem; inset-inline-end:1rem; z-index:10;
  font-family:'Assistant',sans-serif; font-size:.78rem; letter-spacing:.12em;
  background:var(--paper); color:var(--ink-muted);
  border:1px solid var(--rule); border-radius:2px;
  min-width:3rem; min-height:2.25rem; cursor:pointer;
}
html[lang="en"]{ direction:ltr }

/* Reduced motion REDUCES, it does not delete — the content here IS the drawing,
   so removing it entirely would leave these users looking at blank paper. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .sweep{ animation-duration:.01ms }
  .lockup,.hebdate{ margin:.45rem 0 0; font-size:.82rem; letter-spacing:.06em; color:var(--ink-muted) }
.parents{ display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:center;
  margin-top:3.5rem; font-size:.92rem; line-height:1.85; color:var(--ink-muted) }
.parents .lbl{ display:block; font-size:.68rem; letter-spacing:.2em; color:var(--rule-strong,#A89E93); margin-bottom:.3rem }
.scroll-hint{ animation-delay:.01ms; animation-duration:.01ms }
  .reveal{ transition-duration:.01ms }
  .couple{ transition-duration:.01ms }
}