/* Album styles; the adjacent intro rule only tightens the requested section gap. */
.save-date {
  --album-paper:#fcf6e9;
  --album-ink:#5d4531;
  --album-edge:#b89b73;
  max-width:760px;
  margin:0 auto;
  padding:52px 16px 0;
  text-align:center;
}

.album-stage {
  width:100%;
  aspect-ratio:4 / 3;
  perspective:1600px;
  -webkit-perspective:1600px;
}

.album-spread {
  position:relative;
  width:100%;
  height:100%;
  transform:translateX(-25%);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

.save-date:is([data-state="opening"],[data-state="open"],[data-state="turning"]) .album-spread {
  transform:translateX(0);
}

.album-pages {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-radius:3px;
}

.save-date .album-page,
.album-face {
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:var(--album-ink);
  border-radius:0;
}

.save-date .album-page {
  position:relative;
  height:100%;
  box-shadow:none;
}

.save-date .album-left {
  visibility:hidden;
  border-right:0;
}

.save-date:is([data-state="open"],[data-state="turning"]) .album-left {
  visibility:visible;
}

.save-date .album-right {
  border-left:0;
}

.album-photo {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.album-photo-surface {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  filter:drop-shadow(0 1px 0 #9c8871) drop-shadow(0 5px 5px #37251b33);
}

/* A single high-resolution surface keeps the photo and its curved edge seamless. */
.album-photo-surface.is-rendered > .album-photo {
  opacity:0;
}

.album-photo-canvas {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

.album-spread::after {
  content:'';
  position:absolute;
  z-index:4;
  top:3.1%;
  bottom:3.1%;
  left:50%;
  width:clamp(28px,9vw,64px);
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#22170e12 24%,#1f160f61 45%,#150e09bf 50%,#35261852 55%,transparent 82%);
  -webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);
  opacity:0;
}

.save-date:is([data-state="open"],[data-state="turning"]) .album-spread::after {
  opacity:1;
}

.save-date .album-cover {
  position:absolute;
  z-index:5;
  left:50%;
  top:0;
  width:50%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  border-radius:2px 5px 5px 2px;
  transform-origin:left center;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  color:var(--album-ink);
}

.album-cover-front,
.album-cover-back,
.album-leaf-front,
.album-leaf-back {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.album-cover-front {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #745035;
  border-radius:3px 7px 5px 2px;
  background:#a9815e url('../assets/images/save-the-date/portada-album-karen-damian.webp') center / cover no-repeat;
  box-shadow:inset 3px 0 9px #30201840,2px 1px 0 #a78e6a,4px 3px 0 #e3d3b6,5px 4px 0 #90734e,7px 6px 0 #d2bd97,8px 7px 0 #634526,9px 14px 23px #49321c38;
}

/* The supplied cover already contains its monogram, title and ornamentation. */
.album-cover-front .album-cover-frame,
.album-cover-front .album-cover-corner,
.album-cover-front .album-cover-monogram,
.album-cover-front .album-cover-rule,
.album-cover-front .album-cover-title,
.album-cover-front .album-cover-name {
  display:none;
}

.album-cover-frame {
  position:absolute;
  inset:16px 12px 16px 17px;
  border:1px solid #66452470;
  outline:1px solid #f9eccc38;
  outline-offset:3px;
  border-radius:9px 2px 10px 2px;
  pointer-events:none;
}

.album-cover-frame::before,
.album-cover-frame::after {
  content:'';
  position:absolute;
  left:50%;
  width:7px;
  height:7px;
  margin-left:-4px;
  border:1px solid #84623f80;
  transform:rotate(45deg);
}

.album-cover-frame::before { top:17px; }
.album-cover-frame::after { bottom:17px; }

.album-cover-monogram {
  font:clamp(2.1rem,7vw,4.5rem)/1.2 var(--serif);
  letter-spacing:-.065em;
  text-shadow:0 1px 0 #f3ddb37a,0 -1px 0 #49321c38;
}

.album-cover-rule {
  width:23%;
  height:1px;
  margin:15px 0;
  background:#80613d66;
}

.album-cover-name {
  font:clamp(.65rem,1.8vw,.9rem)/1.8 var(--serif);
  letter-spacing:.17em;
}

.album-cover-back,
.album-leaf-back {
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
}

.album-leaf {
  position:absolute;
  z-index:3;
  left:50%;
  top:0;
  width:50%;
  height:100%;
  transform-origin:left center;
  transform:rotateY(0deg);
  transform-style:preserve-3d;
  -webkit-transform:rotateY(0deg);
  -webkit-transform-style:preserve-3d;
  pointer-events:none;
}

.album-leaf[data-direction="backward"] {
  left:0;
  transform-origin:right center;
}

.album-face {
  box-shadow:none;
}

.album-footer {
  display:grid;
  place-items:center;
  min-height:44px;
  margin-top:14px;
}

.save-date .album-open-label {
  min-height:44px;
  padding:8px 16px;
  border:0;
  background:transparent;
  color:#7b6350;
  font:italic 1rem/1.5 var(--serif);
  text-underline-offset:5px;
}

.album-open-label:hover { text-decoration:underline; }

.album-navigation {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.save-date .album-navigation button {
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--album-ink);
}

.save-date .album-navigation .album-arrow {
  width:20px;
  height:20px;
  margin:auto;
  stroke-width:1.35;
}

.album-counter {
  color:#7b6350;
  font-size:.68rem;
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}

.save-date button:disabled {
  opacity:1;
  cursor:default;
}

.save-date .album-navigation button:disabled {
  opacity:.3;
}

.save-date button:focus-visible {
  outline:2px solid var(--navy);
  outline-offset:5px;
}

.save-date[aria-busy="true"] .album-cover,
.save-date[aria-busy="true"] .album-page {
  cursor:progress;
}

.album-error {
  margin:12px auto 0;
  max-width:36ch;
  color:#8b4b59;
  font-size:.85rem;
}

.save-date + .intro.section {
  padding-top:32px;
}