:root{
  --cream:#f4e8dd;
  --cream2:#f8f1ea;
  --ink:#6e4741;
  --rose:#c88d88;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:var(--cream);
}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 35%),
    linear-gradient(180deg,var(--cream2),var(--cream));
  overflow-x:hidden;
}
main{width:100%}

/* Cover remains a full-screen entry point. */
.cover{
  min-height:100svh;
  width:100%;
  display:grid;
  place-items:center;
  position:relative;
  padding:
    max(10px, env(safe-area-inset-top))
    8px
    max(16px, env(safe-area-inset-bottom));
  transition:
    opacity .8s ease,
    transform 1s cubic-bezier(.2,.72,.2,1),
    filter .8s ease;
}
.cover.opening{
  transform:scale(1.025);
  opacity:.14;
  filter:blur(1px);
}

/* Pages 2 and 3 behave as one continuous invitation after opening. */
.page{
  width:100%;
  display:flex;
  justify-content:center;
  padding:14px 8px;
}
.page2{padding-top:18px}
.page3{padding-top:6px;padding-bottom:28px}

.card{
  position:relative;
  width:min(96vw, 700px);
  margin:0 auto;
}
.card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:center;
  border-radius:22px;
  box-shadow:0 18px 42px rgba(92,60,53,.12);
}

.cover-card{width:min(96vw, 690px)}
.page2-card{width:min(96vw, 690px)}
.page3-card{width:min(96vw, 690px)}

/* Stronger, unmistakable open affordance. */
.open-zone{
  position:absolute;
  inset:0;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:5;
  -webkit-tap-highlight-color:transparent;
}
.open-cta{
  position:absolute;
  left:50%;
  bottom:3.2%;
  transform:translateX(-50%);
  min-width:220px;
  padding:10px 16px 9px;
  border-radius:999px;
  background:rgba(249,241,234,.94);
  border:1px solid rgba(110,71,65,.18);
  box-shadow:0 8px 24px rgba(83,52,47,.12);
  backdrop-filter:blur(8px);
  color:var(--ink);
  text-align:center;
  pointer-events:none;
  animation:ctaPulse 2.1s ease-in-out infinite;
}
.open-cta-main{
  display:block;
  font:600 14px/1.15 Georgia,serif;
  letter-spacing:.02em;
}
.open-cta-arrow{
  display:block;
  margin-top:2px;
  font-size:18px;
  line-height:1;
  animation:arrowBounce 1.4s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.025)}
}
@keyframes arrowBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

/* Hidden only before opening. Once revealed, the pages remain in normal document flow. */
.hidden{
  display:none;
}
.visible{
  display:flex;
  animation:pageReveal .7s ease both;
}
@keyframes pageReveal{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

.fade{
  position:fixed;
  inset:0;
  background:rgba(244,232,221,0);
  pointer-events:none;
  z-index:50;
  transition:background .42s ease;
}
.fade.on{background:rgba(244,232,221,.96)}

/* Map tap areas on page 3. */
.map-zone{
  position:absolute;
  left:55%;
  right:7%;
  height:7%;
  border-radius:999px;
  z-index:5;
}
.map-zone.church{top:42.5%}
.map-zone.party{top:75.8%}

/* Small phones */
@media (max-width:390px){
  .cover,
  .page{
    padding-left:4px;
    padding-right:4px;
  }
  .card,
  .cover-card,
  .page2-card,
  .page3-card{
    width:min(98vw, 690px);
  }
  .open-cta{
    min-width:205px;
    padding:9px 14px 8px;
  }
  .open-cta-main{font-size:13px}
}

/* Tablets and desktops */
@media (min-width:700px){
  .cover-card,
  .page2-card,
  .page3-card{
    width:min(72vw, 720px);
  }
  .page{
    padding-top:22px;
    padding-bottom:22px;
  }
}
@media (min-width:1100px){
  .cover-card,
  .page2-card,
  .page3-card{
    width:min(48vw, 720px);
  }
}

/* Landscape phones: don't force the card to be tiny just to fit vertically.
   The user can scroll naturally. */
@media (orientation:landscape) and (max-height:600px){
  .cover{
    min-height:auto;
    padding-top:12px;
    padding-bottom:12px;
  }
  .cover-card,
  .page2-card,
  .page3-card{
    width:min(58vw, 680px);
  }
}


/* Accessibility */
.open-zone:focus-visible{
  outline:3px solid rgba(110,71,65,.45);
  outline-offset:5px;
  border-radius:22px;
}
@media (prefers-reduced-motion:reduce){
  *{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

/* Fix opening position: page 2 must always be the first visible page after opening */
.page2{
  scroll-margin-top:0;
}

/* Desktop refinement: keep the invitation elegant and readable without becoming oversized. */
@media (min-width:900px){
  .cover{
    padding:28px 24px;
  }

  .cover-card,
  .page2-card,
  .page3-card{
    width:clamp(480px, 42vw, 620px);
    max-width:calc(100vw - 48px);
  }

  .page{
    padding:28px 24px;
  }

  .card img{
    border-radius:24px;
  }
}

/* Large / ultra-wide desktops: cap the card instead of letting it grow with the monitor. */
@media (min-width:1600px){
  .cover-card,
  .page2-card,
  .page3-card{
    width:620px;
  }
}


/* Single-pass opening: page 2 is rendered only once. */
body.opened .page2-card{
  animation:singlePage2Reveal .72s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes singlePage2Reveal{
  from{opacity:0; transform:translateY(10px) scale(.992)}
  to{opacity:1; transform:none}
}