/* עדי & אביב — guest landing */

:root{
  color-scheme: light;
  --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}
[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;
}
@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(2rem,5vh,3.5rem) 1.5rem; max-width:var(--measure); margin-inline:auto }

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:3rem 1.5rem 1.5rem;
  position:relative;
  text-align:center;
}

.hero-image-wrap{
  position:relative;
  width:min(88vw,25rem);
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  animation:fade-in 1.3s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-img{ width:100%; height:auto; display:block; object-fit:cover; }

@keyframes fade-in{ from{opacity:0; transform:scale(0.97)} to{opacity:1; transform:none} }

/* the name fades in smoothly */
.lockup{ position:relative; text-align:center; opacity:0; animation:rise 1.1s ease-out 0.6s forwards; margin-top: 1.75rem; }
@keyframes rise{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.lockup h1{ margin:0; font-size:clamp(2.2rem,9vw,3.2rem); line-height:1.15; 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:1.05rem; letter-spacing:.22em; color:var(--ink-muted) }

.hebdate{ margin:.45rem 0 0; font-size:.85rem; letter-spacing:.06em; color:var(--ink-muted) }

.scroll-hint{
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--ink-muted);
  opacity: 0;
  animation: rise 1s ease-out 1.2s forwards;
}
.scroll-arrow{
  animation: bounce 2s infinite ease-in-out;
  stroke: var(--ink-muted);
}
@keyframes bounce{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------- 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-top:clamp(4.5rem, 10vh, 7rem); padding-bottom:clamp(3.5rem, 8vh, 6rem); }
.signoff{ font-size:clamp(1.3rem,5vw,1.7rem); margin:2.75rem 0 0; color:var(--ink) }

.couple-wrap{
  overflow:hidden;
  border-radius:10px;
  width:min(90vw,28rem);
  margin-inline:auto;
  display: grid;
  place-items:center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
}
.couple-img{ 
  width:100%; height:auto; display:block; object-fit:cover;
  clip-path:inset(0 0 0 100%); transition:clip-path 1.8s cubic-bezier(.33,1,.68,1);
}
.couple-wrap.in .couple-img{ clip-path:inset(0 0 0 0) }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .hero-image-wrap{ animation:none; opacity:1; transform:none }
  .lockup{ opacity:1; transform:none; animation:none }
  .scroll-hint{ animation-delay:.01ms; animation-duration:.01ms }
  .reveal{ transition-duration:.01ms; opacity:1; transform:none }
  .couple-img{ transition-duration:.01ms; clip-path:inset(0 0 0 0) }
}