/* ============================================================
   Edwin & Lotte — 24.09.2026
   A moving version of the handmade linocut invitation
   ============================================================ */

:root{
  --red:        #e0394d;
  --red-deep:   #c22c40;
  --red-soft:   rgba(224,57,77,.14);
  --red-line:   rgba(224,57,77,.22);
  --ink:        #4a2b28;   /* warm dark for body copy */
  --ink-soft:   #7a5a54;
  --paper:      #fbf4ea;
  --paper-2:    #f7ead7;
  --paper-3:    #f3e2cc;
  --white:      #fffaf3;

  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 18px 40px -24px rgba(74,43,40,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:"pacaembu","Trebuchet MS",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* warm vignette on the paper */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(120% 120% at 50% 120%, rgba(224,57,77,.06), transparent 60%),
    radial-gradient(140% 120% at 120% 50%, rgba(120,60,40,.05), transparent 55%);
}

.defs{position:absolute}
img{display:block;max-width:100%}

/* ---------- paper grain overlay ---------- */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- particles ---------- */
#particles{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ============================================================
   Layout helpers
   ============================================================ */
main{position:relative;z-index:3}
.wrap{width:min(100% - 2.6rem, var(--maxw));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.6rem, 720px)}

section{position:relative;padding:clamp(3.4rem,8vw,7rem) 0}
section[id]{scroll-margin-top:74px}

.section-title{
  font-size:clamp(1.9rem,5.4vw,3.1rem);
  line-height:1.02;
  color:var(--red);
  margin:0 0 .5rem;
  font-weight:800;
  letter-spacing:.01em;
}
.lead{color:var(--ink-soft);font-size:clamp(1rem,2.4vw,1.18rem);margin:.2rem 0 0}
.whisper{color:var(--red-deep);font-style:italic;opacity:.85}
p{margin:.6rem 0}
em{font-style:italic;color:var(--red-deep)}
b{color:var(--ink);font-weight:800}

.sec-head{text-align:center;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.sec-head img{width:104px;height:auto;margin:0 auto .4rem;opacity:1}
.sec-head .lead{max-width:34ch;margin-inline:auto}

.section-title{position:relative;display:inline-block}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bg:var(--red);
  display:inline-block;margin-top:1.2rem;
  padding:.85em 1.7em;border-radius:999px;
  background:var(--bg);color:var(--white);
  font-weight:800;font-size:1.02rem;letter-spacing:.01em;
  text-decoration:none;border:2px solid var(--bg);
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 22px 42px -20px rgba(224,57,77,.6)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--red-deep);border-color:var(--red-line);box-shadow:none;font-size:.98rem}
.btn--ghost:hover{background:var(--red-soft);box-shadow:none}
.btn--big{font-size:1.22rem;padding:1em 2.4em;margin-top:1.6rem}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2rem);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.nav.is-stuck{
  background:rgba(251,244,234,.86);
  backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 1px 0 var(--red-line);
}
.nav__brand{
  display:flex;align-items:center;gap:0;text-decoration:none;
  color:var(--red);font-weight:800;font-size:2.03rem;letter-spacing:.04em;
}
.nav__brand img{width:1.35em;height:1.35em;position:relative;top:.09em;margin:0 -.2em}
.nav__links{display:flex;align-items:center;gap:clamp(.6rem,1.8vw,1.4rem)}
.nav__links a{
  color:var(--ink);text-decoration:none;font-weight:700;font-size:.98rem;
  opacity:.82;transition:opacity .2s,color .2s;
}
.nav__links a:hover{opacity:1;color:var(--red-deep)}
.nav__cta{
  padding:.42em 1.1em;border-radius:999px;background:var(--red);color:var(--white)!important;
  opacity:1!important;box-shadow:0 10px 20px -12px rgba(224,57,77,.7);
}
.nav__cta:hover{background:var(--red-deep)}
@media (max-width:620px){
  .nav__links a:not(.nav__cta){display:none}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  min-height:100svh;
  display:grid;place-items:center;
  padding:6rem 1.4rem 4rem;
  overflow:hidden;
}
/* three independent anchors: logo dead-center, date hung below it, tag pinned at the bottom */
.hero{--logo-w:clamp(200px,min(34vw,42svh),350px)}
.hero__inner{position:absolute;inset:0;z-index:4;text-align:center}
.hero__logo{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:var(--logo-w);
  animation:breathe 7s var(--ease) infinite;
}
.hero__date{
  position:absolute;left:50%;translate:-50% 0;
  top:calc(50% + var(--logo-w)/2 + 1.2rem);
  width:clamp(150px,24vw,240px);
}
.count__tag{width:clamp(230px,42vw,400px);margin:clamp(1.5rem,6vw,3.5rem) auto 1.6rem}

@keyframes breathe{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.025) rotate(-.5deg)}
}

/* full-height side branches — two different vines, never cropped */
.branch{position:absolute;z-index:3;pointer-events:none}
.branch--left,.branch--right{top:50%;transform:translateY(-50%);height:min(92svh,58vw,720px);width:auto;opacity:1}
.branch--left{left:0}
.branch--right{right:0}

@keyframes sway{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(2.2deg)}
}

/* ============================================================
   Countdown
   ============================================================ */
.count{text-align:center;background:
  linear-gradient(180deg,transparent, rgba(224,57,77,.03) 40%, transparent);}
.count__grid{
  display:flex;justify-content:center;gap:clamp(.5rem,2.4vw,1.4rem);
  margin-top:1.8rem;flex-wrap:wrap;
}
.count__cell{
  background:var(--white);border:2px solid var(--red-line);border-radius:18px;
  padding:clamp(.7rem,2.4vw,1.3rem) clamp(.9rem,3vw,1.8rem);min-width:clamp(72px,20vw,120px);
  box-shadow:var(--shadow);
}
.count__cell b{
  display:block;font-size:clamp(1.9rem,7vw,3.2rem);color:var(--red);font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums;
}
.count__cell span{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ============================================================
   Intro
   ============================================================ */
.intro{text-align:center}
.intro p{font-size:clamp(1.05rem,2.7vw,1.28rem)}
.deco{position:absolute;pointer-events:none;opacity:1;z-index:2}
.deco--flower{width:74px;top:9%;right:8%;animation:sway 8s ease-in-out infinite}

/* ============================================================
   Programma
   ============================================================ */
.programma{background:var(--paper-2)}
.tabs{
  display:flex;gap:.4rem;justify-content:center;margin:0 auto 2rem;
  background:var(--white);padding:.35rem;border-radius:999px;width:max-content;max-width:100%;
  border:2px solid var(--red-line);box-shadow:var(--shadow);
}
.tab{
  appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:1rem;
  padding:.6em 1.5em;border-radius:999px;background:transparent;color:var(--ink-soft);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.tab.is-active{background:var(--red);color:var(--white)}

.timeline{list-style:none;margin:0 auto;padding:0;max-width:640px;position:relative}
.timeline::before{
  content:"";position:absolute;left:calc(4.6rem + 6px);top:.6rem;bottom:.6rem;width:2px;
  background:repeating-linear-gradient(var(--red-line) 0 6px, transparent 6px 12px);
}
@media(max-width:520px){.timeline::before{left:calc(3.6rem + 6px)}}
.timeline{display:none}
.timeline.is-active{display:block;animation:fadeUp .5s var(--ease) both}
.timeline li{
  position:relative;display:grid;grid-template-columns:4.6rem 1fr;gap:1rem;align-items:baseline;
  padding:.55rem 0;
}
@media(max-width:520px){.timeline li{grid-template-columns:3.6rem 1fr;gap:.7rem}}
.timeline li::before{
  content:"";position:absolute;left:calc(4.6rem + 6px);top:.66em;width:17px;height:17px;
  transform:translateX(-50%);opacity:1;
  background:no-repeat center/contain url("../assets/svg/heart.svg");
}
@media(max-width:520px){.timeline li::before{left:calc(3.6rem + 6px)}}
.timeline .t{font-weight:800;color:var(--red-deep);font-variant-numeric:tabular-nums}
.timeline .e{color:var(--ink);padding-left:.75rem}
.timeline li.hl .e{font-weight:800;color:var(--red-deep)}
.timeline li.hl::before{
  width:27px;height:27px;top:.52em;opacity:1;
  filter:drop-shadow(0 2px 3px rgba(224,57,77,.4));
  animation:heartbeat 1.5s var(--ease) infinite;
}
@keyframes heartbeat{
  0%,100%{transform:translateX(-50%) scale(1)}
  12%{transform:translateX(-50%) scale(1.32)}
  24%{transform:translateX(-50%) scale(1.06)}
  36%{transform:translateX(-50%) scale(1.24)}
  52%{transform:translateX(-50%) scale(1)}
}

/* ============================================================
   Praktisch cards
   ============================================================ */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);
}
.card{
  background:var(--white);border:2px solid var(--red-line);border-radius:22px;
  padding:1.6rem 1.5rem;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-6px) rotate(-.4deg)}
.card__icon{width:54px;height:54px;margin-bottom:.5rem}
.card h3{margin:.1rem 0 .3rem;color:var(--red);font-size:1.3rem;font-weight:800}
.card p{margin:.35rem 0;color:var(--ink);font-size:1rem}
.card .whisper{margin-top:.6rem;font-size:.98rem}

/* ============================================================
   Slapen
   ============================================================ */
.slapen{background:var(--paper-2);text-align:center;overflow:hidden}
.pricebox{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:0 0 1.6rem}
.price{
  background:var(--white);border:2px solid var(--red-line);border-radius:22px;
  padding:1.4rem 1.6rem;box-shadow:var(--shadow);flex:1 1 240px;max-width:320px;
}
.price b{display:block;font-size:2.2rem;color:var(--red);font-weight:800;line-height:1}
.price span{display:block;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:.2rem 0 .6rem}
.price p{font-size:.95rem;color:var(--ink-soft);margin:0}

.facts{list-style:none;margin:0 auto 1.4rem;padding:0;max-width:560px;text-align:left}
.facts li{
  position:relative;padding:.6rem 0 .6rem 2rem;border-bottom:1px dashed var(--red-line);
}
.facts li:last-child{border-bottom:0}
.facts li::before{
  content:"";position:absolute;left:.1rem;top:.95rem;width:12px;height:12px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0394d' d='M12 21s-8-5.3-8-11a5 5 0 019-3 5 5 0 019 3c0 5.7-8 11-8 11z'/%3E%3C/svg%3E");
}
.note{
  background:var(--white);border:2px solid var(--red-line);border-radius:22px;
  padding:1.5rem 1.6rem;text-align:left;box-shadow:var(--shadow);
}
.note p{font-size:.98rem}
.note .btn{margin-top:1rem}

/* ============================================================
   Parkeren
   ============================================================ */
.map{margin:1.8rem auto 0;text-align:center}
.map__img{width:100%;height:auto;display:block}
.map figcaption{margin:1rem auto 0;color:var(--ink-soft);font-size:1rem;max-width:46ch}

/* ============================================================
   Ceremoniemeesters
   ============================================================ */
.cm{text-align:center;background:var(--paper-2)}
.deco--love{position:static;width:70px;margin:0 auto .4rem;opacity:1}
.cm__names{font-size:clamp(1.6rem,4.5vw,2.3rem);color:var(--red-deep);font-weight:800;margin:.2rem 0 .6rem}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp{text-align:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, rgba(224,57,77,.07), transparent 60%);}
.rsvp__logo{width:clamp(150px,26vw,220px);margin:0 auto 1rem}
.branch--rsvp-l{position:absolute;left:-2%;bottom:-6%;width:clamp(70px,10vw,130px);opacity:1;animation:sway 11s ease-in-out infinite}
.branch--rsvp-r{position:absolute;right:-6%;top:-6%;width:clamp(120px,18vw,240px);opacity:1;animation:sway 13s ease-in-out infinite reverse}

/* ============================================================
   Footer
   ============================================================ */
.foot{
  position:relative;z-index:3;text-align:center;background:var(--red);color:var(--white);
  padding:clamp(2.6rem,6vw,4rem) 1.4rem;
}
.foot__tag{width:min(78vw,560px);margin:0 auto 1.6rem;filter:brightness(0) invert(1)}
.foot__names{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;margin:0;letter-spacing:.02em}
.foot__meta{opacity:.9;margin:.3rem 0;letter-spacing:.08em}
.foot__mail a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.foot__heart{width:34px;height:34px;margin:1rem auto 0;filter:brightness(0) invert(1);opacity:1;
  animation:beat 1.8s var(--ease) infinite}
@keyframes beat{0%,100%{transform:scale(1)}45%{transform:scale(1.18)}}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}