/* ============================================================
   Saloni & Praful — "Our Story" flip-through photo album
   A Heyzine-style page-turn photo book, revealed on scroll-down.
   Self-contained: the invitation stage above is untouched.
   ============================================================ */

/* page can scroll now; the fixed .stage is the first screen,
   this album scrolls up over it. (style.css locks overflow:hidden) */
html.has-album{ overflow-x:hidden; overflow-y:auto; height:auto; min-height:100%; overscroll-behavior-y:none; }
html.has-album body{ overflow:visible; height:auto; min-height:100dvh; }

/* ---- scroll-down cue on the invitation — a single, centre-aligned line,
   shown only on the opening screen so it never overlaps the garden nav ---- */
.scrolldown{
  position:fixed; z-index:46;   /* above the album (45) so the cue is never covered */
  left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 1rem);
  display:flex; flex-direction:row; align-items:center; gap:.45rem; white-space:nowrap;
  padding:.5rem 1rem; border-radius:999px;
  background:rgba(40,60,80,.38); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  color:#fff; opacity:0; pointer-events:none; transition:opacity .6s ease;
}
.scrolldown span{ font-family:var(--sans); font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; }
.scrolldown svg{ width:1rem; height:1rem; animation:sd-bob 2.2s ease-in-out infinite; }
.scrolldown.show{ opacity:.9; pointer-events:auto; }
@keyframes sd-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }
/* lift the "tap to open" hint so the centred cue sits cleanly below it */
.is-intro .hint{ bottom:calc(env(safe-area-inset-bottom, 0px) + 3.7rem); }

/* ---- the album section (scrolls over the pinned invite) ---- */
.album{
  position:relative; z-index:45; margin-top:100dvh;
  min-height:100dvh; width:100%;
  padding:clamp(2rem,7vh,4.5rem) 4vw calc(env(safe-area-inset-bottom,0px) + 2.2rem);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:
    radial-gradient(120% 80% at 50% 0%, #fbf6ec 0%, #f3ece0 45%, #e9e0cf 100%);
  box-shadow:0 -22px 50px rgba(60,45,30,.22);
}
.album::before{   /* a hairline gold rule across the top edge */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, #e7cf93 50%, var(--gold) 80%, transparent);
  opacity:.8;
}

.album__head{ text-align:center; margin-bottom:clamp(1rem,3.5vh,2rem); }
.album__eyebrow{
  display:block; font-family:var(--sans); font-size:.66rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.35rem;
}
.album__title{
  font-family:var(--script); font-weight:400; color:var(--wine);
  font-size:clamp(2.3rem,9vw,3.6rem); line-height:.95;
}
.album__dates{
  display:block; font-family:var(--serif); font-style:italic; color:var(--ink-2);
  font-size:.95rem; letter-spacing:.06em; margin-top:.3rem;
}

/* ---- the book ---- */
.book-wrap{
  position:relative; perspective:2400px;
  width:100%; display:flex; justify-content:center; align-items:center;
  flex:1 1 auto; min-height:0;
}
.book{
  position:relative;
  height:min(66dvh, 116vw);
  aspect-ratio:1 / 1.08;          /* near-square album page: balances portrait & landscape photos */
  transform-style:preserve-3d;
  /* book body: spine on the left, a little edge thickness on the right/bottom */
  filter:drop-shadow(0 18px 30px rgba(50,35,20,.28));
}
.book::after{   /* page-stack thickness down the right/bottom edge */
  content:""; position:absolute; right:-6px; top:6px; bottom:-6px; width:8px;
  background:repeating-linear-gradient(0deg,#efe7d6 0 2px,#d9cfb8 2px 3px);
  border-radius:0 3px 3px 0; z-index:0; transform:translateZ(-1px);
}

.page{
  position:absolute; inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.33,.08,.25,1);
  will-change:transform;
}
.page.flipped{ transform:rotateY(-179.6deg); }
.page.turning{ filter:drop-shadow(0 10px 26px rgba(30,20,10,.35)); }

.page__front,.page__back{
  position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:3px 7px 7px 3px;
  background:var(--paper);
}
.page__back{ transform:rotateY(180deg); display:grid; place-items:center; }
.page__mono{ width:clamp(1.9rem,6vw,2.7rem); height:auto; opacity:.1; }

/* binding shadow down the spine edge (left) — on both faces */
.page__front::before,.page__back::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:13%;
  background:linear-gradient(90deg, rgba(60,40,20,.22), rgba(60,40,20,.06) 40%, transparent);
  pointer-events:none; z-index:3;
}
/* a faint sheen that reads as paper curve near the outer edge */
.page__front::after,.page__back::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:22%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14));
  pointer-events:none; z-index:3;
}

.face{ position:absolute; inset:0; display:flex; }

/* paper reverse side */
.face--paper,.page__back > .face{ background:
  linear-gradient(135deg,#f6f0e4,#efe7d6);
}

/* photo page — full-page ivory mat with a mounted print centred in it.
   grid gives the photo row a DEFINITE height so the image fills it reliably */
.face--photo{
  display:grid; grid-template-rows:1fr auto;
  padding:6% 6% 4.5%; row-gap:3.2%;
  background:linear-gradient(140deg,#fbf6ec,#f0e8d6);
}
.photo-well{
  grid-row:1; min-height:0; min-width:0;   /* stretches to fill the 1fr cell */
  display:flex; align-items:center; justify-content:center;
}
.photo-well img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  background:#fff; padding:2.6%; border-radius:2px;
  box-shadow:0 5px 16px rgba(60,45,25,.24), inset 0 0 0 1px rgba(120,95,60,.14);
}
.face--photo .pg-no{
  grid-row:2; text-align:center;
  font-family:var(--serif); font-style:italic; color:var(--ink-2); font-size:.8rem; letter-spacing:.05em;
}

/* hard cover — the couple's painted cover art, shown whole on a matched maroon page */
.face--cover{
  background:radial-gradient(130% 110% at 50% 42%, #8e2230 0%, #6e1216 62%, #551019 100%);
  align-items:center; justify-content:center; padding:0;
}
.cover-img{ width:100%; height:100%; object-fit:contain; display:block; }
.cover-inner{
  position:relative; inset:0; margin:5%; width:90%; height:90%;
  border:1px solid rgba(233,207,147,.55); border-radius:2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  text-align:center; padding:8%;
  box-shadow:inset 0 0 0 4px rgba(233,207,147,.12);
}
.cover-eyebrow{ font-family:var(--sans); font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:#e6c98f; }
.cover-names{ font-family:var(--script); font-size:clamp(2.6rem,13vw,3.8rem); line-height:.9; color:#f6e8cf; }
.cover-names i{ font-style:normal; font-size:.6em; display:inline-block; margin:0 .08em; color:#e6c98f; }
.cover-sub{ font-family:var(--serif); font-size:.82rem; letter-spacing:.14em; color:#ecd7ac; margin-top:.4rem; }
.cover-tap{ margin-top:1.3rem; font-family:var(--sans); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:#e6c98f; opacity:.85; animation:sd-bob 2.4s ease-in-out infinite; }
.cover-motif{ width:34px; height:34px; opacity:.8; margin-bottom:.2rem; }

/* closing + back cover */
.face--closing{ background:linear-gradient(135deg,#faf5ea,#efe6d4); align-items:center; justify-content:center; }
.closing-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:10%; }
.closing-script{ font-family:var(--serif); font-style:italic; color:var(--ink-2); font-size:1.05rem; }
.closing-names{ font-family:var(--script); font-size:clamp(2.2rem,11vw,3rem); color:var(--wine); line-height:.95; }
.closing-btn{
  margin-top:1.1rem; font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:#fff; background:var(--wine); padding:.7rem 1.3rem; border-radius:999px; text-decoration:none;
  box-shadow:0 4px 14px rgba(154,42,53,.35);
}
.face--back{
  background:radial-gradient(120% 120% at 30% 20%, #a6303b 0%, #8e2530 45%, #6f141d 100%);
  color:#e6c98f; align-items:center; justify-content:center;
}
.backcover-inner{ font-family:var(--script); font-size:clamp(1.6rem,8vw,2.2rem); opacity:.9; border-top:1px solid rgba(233,207,147,.4); border-bottom:1px solid rgba(233,207,147,.4); padding:.5rem 1.2rem; }

/* ---- book nav ---- */
.book-nav{
  flex:0 0 auto; margin-top:clamp(.9rem,2.5vh,1.5rem);
  display:flex; align-items:center; gap:1rem;
}
.book-btn{
  width:2.7rem; height:2.7rem; border-radius:50%;
  background:#fff; color:var(--wine); font-size:1.4rem; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 3px 12px rgba(80,55,30,.2); transition:transform .2s ease, opacity .2s ease;
}
.book-btn:hover{ transform:scale(1.07); }
.book-btn.is-off{ opacity:.3; pointer-events:none; }
.book-page{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); min-width:5.5rem; text-align:center; }

/* back to the invitation */
.album__up{
  flex:0 0 auto; margin-top:clamp(1rem,3vh,1.7rem);
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--sans); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-2);
}
.album__up svg{ width:.9rem; height:.9rem; }

/* wide screens: give the book more presence, keep flipped leaves in view */
@media (min-width:860px){
  .book{ height:min(74dvh, 46vw); }
}

@media (prefers-reduced-motion:reduce){
  .page{ transition:transform .35s ease; }
  .scrolldown svg,.cover-tap{ animation:none; }
}