/* ============================================================
   John & Marlena — Wedding Invitation
   Palette: navy #1c2a4a · gold #b08d4f · cream #f5efe2
   ============================================================ */
:root{
  --navy:#1c2a4a;
  --gold:#b08d57;
  --gold-soft:#c9a86a;
  --cream:#f5efe2;
  --paper-bg:#e9dccb;        /* matches the parchment background of the page art */
  --page-max:480px;          /* max on-screen width of each 1080x1920 page */
  --ink:#3a3326;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper-bg);
  font-family:"Cormorant Garamond",Georgia,serif;
  color:var(--ink);
  overscroll-behavior:none;
}
body.locked{overflow:hidden;height:100vh;}
img{display:block;}

/* ====================== ENVELOPE (Page 1) ====================== */
.envelope{
  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#26344f 0%,#101829 100%);
  cursor:pointer;overflow:hidden;
  transition:opacity .6s ease, transform .6s ease;
}
/* phones: the envelope COVERS the screen (fills height); tablets/laptops CONTAIN it */
.env-frame{
  position:relative;
  aspect-ratio:1080/1920;
  width:max(100vw, calc(100vh  * 1080 / 1920));
  width:max(100vw, calc(100dvh * 1080 / 1920));
  overflow:hidden;
  background:#e2c9ab;
}
@media (min-width:700px), (orientation:landscape){
  .env-frame{
    width:min(100vw, calc(100dvh * 1080 / 1920), var(--page-max));
    box-shadow:0 30px 80px rgba(0,0,0,.55);
  }
}

/* the 3-D stage that holds the stacked envelope layers.
   NB: keep transform-style FLAT (the default). With preserve-3d the flat body
   layers sit at z=0 and occlude the flap as it rotates back, making it vanish.
   Flat keeps the perspective foreshortening but composites layers in DOM order. */
.env-stage{
  position:absolute;inset:0;
  perspective:1150px;
  perspective-origin:50% 34%;
  /* slow cinematic "living photo" drift on the sealed envelope */
  animation:envAmbient 13s ease-in-out infinite alternate;
}
@keyframes envAmbient{
  0%  {transform:scale(1.03) translateY(0)      rotate(0deg);}
  100%{transform:scale(1.065) translateY(-0.5%) rotate(.45deg);}
}
.env-layer{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}

/* inner-shadow backing seen through the open mouth */
.env-inside{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#4f3c28 0%,#7a5e3e 16%,#a98a64 30%,#cdb088 46%,#dcc3a3 60%);
}

/* the hinged top flap + seal: folds open about its top edge */
.env-flap{
  transform-origin:50% 0%;
  transform:rotateX(0deg);
  filter:drop-shadow(0 4px 8px rgba(30,20,10,0));
  will-change:transform,filter;
}

/* soft golden glow breathing over the wax seal — "click the seal" */
.seal-glow{
  position:absolute;left:48%;top:46.5%;
  width:34%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,238,200,.55) 0%,rgba(214,178,110,.28) 38%,transparent 68%);
  mix-blend-mode:screen;
  animation:sealBreathe 2.6s ease-in-out infinite;
}
@keyframes sealBreathe{
  0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.9);}
  50%    {opacity:.9; transform:translate(-50%,-50%) scale(1.12);}
}
.envelope.opening .seal-glow{animation:none;opacity:0;transition:opacity .25s;}

/* tap hint — muted ink on the cream paper, legible and never clipped */
.tap-hint{
  position:absolute;bottom:6%;left:0;right:0;
  display:flex;justify-content:center;
  padding:0 1rem;
}
.tap-hint p{
  margin:0;text-align:center;
  color:rgba(58,44,28,.64);
  text-shadow:0 1px 2px rgba(255,250,240,.5);
  letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(.62rem,2.7vw,.85rem);
}
.tap-pulse{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--gold-soft);box-shadow:0 0 0 0 rgba(201,168,106,.7);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,168,106,.6);transform:scale(1);}
  70%{box-shadow:0 0 0 18px rgba(201,168,106,0);transform:scale(1.15);}
  100%{box-shadow:0 0 0 0 rgba(201,168,106,0);transform:scale(1);}
}

/* --- opening sequence --- */
.envelope.opening .tap-hint{opacity:0;transition:opacity .3s;}

/* a slow cinematic push-in takes over from the ambient drift while opening */
.envelope.opening .env-stage{
  animation:envPushIn 2.3s ease-out forwards;
}
@keyframes envPushIn{
  0%  {transform:scale(1.05);}
  100%{transform:scale(1.12);}
}

/* the flap eases open, tilting its sealed end TOWARD the viewer (positive
   rotateX about the top hinge = +Z), so it lifts off the envelope rather than
   sinking back into it. Stays open (no fold-away). */
.envelope.opening .env-flap{
  animation:flapOpen 1.9s cubic-bezier(.25,.6,.25,1) forwards;
}
@keyframes flapOpen{
  0%  {transform:rotateX(0deg)  rotateZ(0deg);    filter:drop-shadow(0 4px 8px rgba(30,20,10,0));}
  100%{transform:rotateX(25deg) rotateZ(-1.5deg); filter:drop-shadow(0 -26px 26px rgba(30,20,10,.40));}
}

/* a soft cast shadow deepens under the lifting flap (the contact shadow stays) */
.envelope.opening .env-shadow{
  animation:shadowLift 1.9s ease-out forwards;
}
@keyframes shadowLift{
  0%  {opacity:1;}
  100%{opacity:.7;}
}

.envelope.gone{opacity:0;transform:scale(1.12);pointer-events:none;}

/* soft warm light bloom (emanates from the seal) */
.flash{
  position:fixed;inset:0;z-index:60;opacity:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%,#fffaf0 0%,#fff6e6 30%,rgba(255,246,230,.65) 52%,rgba(255,246,230,0) 78%),
    #fdf7ec;
}
.flash.on{animation:bloom 1.5s ease-in-out forwards;}
@keyframes bloom{
  0%  {opacity:0;   transform:scale(1.18);}
  40% {opacity:1;   transform:scale(1.04);}
  62% {opacity:1;   transform:scale(1);}
  100%{opacity:0;   transform:scale(1);}
}

/* ====================== INVITATION (Pages 2–5) ====================== */
.invite{
  opacity:0;
  transform:scale(.965);
  transform-origin:50% 42%;
  transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.25,1);
  background:var(--paper-bg);
}
body.revealed .invite{opacity:1;transform:none;}

/* once revealed, the <main> is the scroller and each page snaps into view */
body.revealed{overflow:hidden;height:100vh;height:100dvh;}
body.revealed .invite{
  height:100vh;height:100dvh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
body.revealed .invite::-webkit-scrollbar{display:none;}

.page{
  display:flex;justify-content:center;align-items:center;
  min-height:100vh;min-height:100dvh;
  background:var(--paper-bg);
  overflow:hidden;                 /* clip the cover-sized page on phones */
  scroll-snap-align:center;
  scroll-snap-stop:always;
}
/* phones (small→large): COVER — the page fills the screen height; the wrap stays
   9:16 so the overlaid buttons/fields keep their positions; a little of the
   left/right is clipped rather than leaving empty bands top & bottom. */
.page-wrap{
  position:relative;
  aspect-ratio:1080/1920;
  width:max(100vw, calc(100vh  * 1080 / 1920));
  width:max(100vw, calc(100dvh * 1080 / 1920));
}
/* tablets & laptops: CONTAIN — the whole page shows, parchment around it, never
   cropped, so the 9:16 wrap keeps the overlays perfectly aligned. */
@media (min-width:700px), (orientation:landscape){
  .page-wrap{
    width:min(100vw, calc(100vh  * 1080 / 1920), var(--page-max));
    width:min(100vw, calc(100dvh * 1080 / 1920), var(--page-max));
  }
}
.page-img{
  width:100%;height:100%;object-fit:cover;
  background:var(--cream);
}

/* ---- entrance animation as each page scrolls in ---- */
.page-wrap{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;}
.page-wrap.in{opacity:1;transform:none;}

/* ====================== PAGE 4 — location buttons ====================== */
.loc-btn{
  position:absolute;
  display:flex;align-items:center;justify-content:center;gap:.5em;
  text-decoration:none;
  color:var(--gold);
  font-weight:600;letter-spacing:.12em;
  font-size:clamp(.8rem,3.6vw,1.05rem);
  border:1.5px solid var(--gold);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(1px);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.loc-btn .pin{width:1.15em;height:1.15em;fill:var(--gold);}
.loc-btn:active{transform:scale(.96);}
.loc-btn:hover{background:rgba(176,141,87,.16);box-shadow:0 6px 18px rgba(176,141,87,.25);}

/* positions tuned to the original P4 design (clean WT image as base) */
#locChurch{ left:22%; top:49.0%; width:40%; height:6.0%; }
#locVenue { left:22%; top:71.3%; width:40%; height:6.0%; }

/* ====================== PAGE 5 — reservation form ====================== */
#rsvpForm{position:absolute;inset:0;}
.field{position:absolute;}

.field input[type="text"],
.add-btn,
.submit-btn{
  width:100%;height:100%;
  font-family:inherit;
  border:1.6px solid var(--gold);
  border-radius:12px;
  background:rgba(255,255,255,.55);
  color:var(--ink);
}

.field input[type="text"]{
  padding:0 1em;
  font-size:clamp(1rem,4.5vw,1.35rem);
  outline:none;
}
.field input::placeholder{color:#a99a78;font-style:italic;}
.field input:focus{border-color:var(--navy);background:rgba(255,255,255,.85);}

.add-btn{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  cursor:pointer;letter-spacing:.1em;font-weight:600;
  color:var(--gold);background:rgba(255,255,255,.3);
  font-size:clamp(.85rem,3.8vw,1.1rem);
  transition:background .2s ease,transform .15s ease;
}
.add-btn .plus{font-size:1.5em;line-height:0;}
.add-btn:active{transform:scale(.97);}
.add-btn:hover{background:rgba(176,141,87,.15);}

.submit-btn{
  cursor:pointer;letter-spacing:.28em;font-weight:600;
  font-size:clamp(1rem,4.5vw,1.35rem);
  color:var(--navy);background:rgba(255,255,255,.4);
  transition:background .2s ease,transform .15s ease;
}
.submit-btn:hover{background:rgba(176,141,87,.2);}
.submit-btn:active{transform:scale(.98);}
.submit-btn:disabled{opacity:.6;cursor:default;}

.hidden-input{display:none;}
.field.expanded .add-btn{display:none;}
.field.expanded .hidden-input{display:block;}

/* form field positions tuned to the original P5 design */
.fld-guest1{ left:12.6%; top:41.0%; width:68%; height:5.6%; }
.fld-add1  { left:12.6%; top:56.5%; width:68%; height:5.4%; }
.fld-add2  { left:12.6%; top:73.3%; width:68%; height:5.2%; }
.submit-btn{ position:absolute; left:17%; top:82.5%; width:59%; height:6.2%; }

/* status toast */
.form-status{
  position:absolute;left:8%;right:8%;top:92%;
  text-align:center;font-size:1rem;border-radius:10px;padding:.4em;
  opacity:0;transition:opacity .3s ease;
}
.form-status.show{opacity:1;}
.form-status.success{color:#2f6b34;background:rgba(214,240,214,.85);}
.form-status.error{color:#8a2b2b;background:rgba(245,214,214,.85);}

/* success overlay after submit — same parchment background as the pages */
.thankyou{
  position:fixed;inset:0;z-index:80;display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--paper-bg);
  color:var(--ink);padding:2rem;
}
.thankyou.show{display:flex;animation:fade .7s ease;}
.thankyou .ty-mono{
  font-size:1.05rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;padding-left:.42em;
}
.thankyou .ty-rule{width:54px;height:1px;background:var(--gold);opacity:.7;margin:0 0 1.2rem;}
.thankyou h2{
  font-size:clamp(2.4rem,9vw,3.4rem);color:var(--navy);
  font-weight:500;letter-spacing:.02em;margin:0 0 .6rem;
}
.thankyou .ty-names{
  font-size:clamp(1.3rem,5.6vw,1.75rem);color:var(--gold);
  font-style:italic;margin:0 0 1.3rem;line-height:1.45;max-width:22ch;
}
.thankyou .ty-msg{font-size:1.15rem;color:var(--ink);opacity:.82;max-width:24ch;line-height:1.6;}
.thankyou .ty-heart{color:var(--gold-soft);font-size:1.4rem;margin-top:1.4rem;}
@keyframes fade{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
body.submitted{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:opacity .3s ease!important;}
}