#portada {
  padding-block: 72px 0;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 110% 55% at 50% 0%, rgba(232,164,184,.10) 0%, transparent 62%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(107,29,52,.18) 0%, transparent 60%);
}

#monogram-mark {
  width: 70px;
  margin-inline: auto;
  margin-bottom: 16px;
  opacity: .2;
  filter: drop-shadow(0 0 8px var(--gold));
  animation: monogram-breathe 4s ease-in-out infinite alternate;
}
@keyframes monogram-breathe {
  0%   { opacity: .12; }
  100% { opacity: .28; }
}

#portada-pretitle {
  font-family: var(--ff-grace);
  font-style: italic;
  font-size: clamp(.88rem, 3.5vw, 1rem);
  letter-spacing: .22em;
  color: var(--blush-muted);
  margin-bottom: 8px;
}

#portada-name {
  font-family: var(--ff-queen);
  font-size: clamp(2.6rem, 12vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  position: relative;
}
#portada-name::before {
  content: '✦';
  position: absolute;
  top: -12px; left: 8%;
  font-size: .7rem;
  color: var(--gold-bright);
  opacity: 0;
  animation: name-spark1 6s ease-in-out 0.5s infinite;
}
#portada-name::after {
  content: '✦';
  position: absolute;
  top: -8px; right: 10%;
  font-size: .55rem;
  color: var(--blush);
  opacity: 0;
  animation: name-spark1 6s ease-in-out 2.5s infinite;
}
@keyframes name-spark1 {
  0%,100% { opacity: 0; transform: translateY(0) scale(.6); }
  25%     { opacity: .8; transform: translateY(-14px) scale(1.2); }
  50%     { opacity: 0; transform: translateY(-28px) scale(.5); }
}

#portada-surname {
  font-family: var(--ff-grace);
  font-size: clamp(.92rem, 4.2vw, 1.25rem);
  font-weight: 300;
  letter-spacing: .14em;
  margin-top: 12px;
  color: var(--cream-80);
  transition: letter-spacing .5s var(--ease-silk), color .4s;
}

.polaroid-card {
  --rot: 0deg;
  position: relative;
  display: inline-block;
  cursor: pointer;
  perspective: 1000px;
  margin-block: 20px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.polaroid-inner {
  position: relative; width: 100%;
  transition: transform .8s var(--ease-regal);
}

.polaroid-front {
  border-radius: 3px;
  padding: 10px 10px 34px;
  background: #eae0dc;
  box-shadow:
    0 20px 60px rgba(0,0,0,.72),
    0 4px 12px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06);
}

.polaroid-frame { width:100%; overflow:hidden; }
.polaroid-frame img {
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  filter: sepia(.1) contrast(1.06) brightness(.98);
  transition: filter .5s, transform .6s var(--ease-silk);
}
.polaroid-card:hover .polaroid-frame img {
  filter: sepia(.15) contrast(1.1);
  transform: scale(1.02);
}

.polaroid-label {
  margin-top: 6px; padding-top:4px;
  font-family: var(--ff-grace); font-style:italic; font-size:.78rem;
  color: #5a4a38; text-align:center; letter-spacing:.05em;
}

.polaroid-tap-hint {
  font-family:var(--ff-grace); font-style:italic; font-size:.72rem;
  color:var(--cream-30); text-align:center; margin-top:6px;
  transition:opacity .4s;
}

.portada-reveal-line {
  animation: portada-line-up .9s var(--ease-silk, cubic-bezier(.25,.46,.45,.94)) .3s both;
}
@keyframes portada-line-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.portada-reveal-name .pname-char {
  display: inline-block;
  background: linear-gradient(90deg, #a07830 0%, var(--gold-bright) 30%, var(--gold-pale) 50%, var(--gold-bright) 70%, #a07830 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: char-drop .6s cubic-bezier(.34,1.56,.64,1) both, shimmer-gold 4s linear infinite;
}
.portada-reveal-name .pname-char:nth-child(1) { animation-delay: .25s; }
.portada-reveal-name .pname-char:nth-child(2) { animation-delay: .31s; }
.portada-reveal-name .pname-char:nth-child(3) { animation-delay: .37s; }
.portada-reveal-name .pname-char:nth-child(4) { animation-delay: .43s; }
.portada-reveal-name .pname-char:nth-child(5) { animation-delay: .49s; }
.portada-reveal-name .pname-char:nth-child(6) { animation-delay: .55s; }
.portada-reveal-name .pname-char:nth-child(7) { animation-delay: .61s; }
.portada-reveal-name .pname-char:nth-child(8) { animation-delay: .67s; }
.portada-reveal-name .pname-char:nth-child(9) { animation-delay: .73s; }
@keyframes char-drop {
  from { opacity: 0; transform: translateY(36px) rotate(5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

.scrapbook-polaroid-wrap {
  position: relative;
  width: min(300px, 85vw);
  margin: 36px auto 8px;
  display: inline-block;
}

.scrapbook-polaroid {
  position: relative;
  background: #eae0dc;
  padding: 12px 12px 52px;
  border-radius: 2px;
  transform: rotate(2.5deg);
  will-change: transform;
  box-shadow:
    0 2px 4px  rgba(0,0,0,.12),
    0 6px 18px rgba(0,0,0,.28),
    0 22px 55px rgba(0,0,0,.45),
    0 0 0 .5px rgba(0,0,0,.06);
  transition: transform .45s var(--ease-silk), box-shadow .45s;
}
.scrapbook-polaroid:hover {
  transform: rotate(1deg) translateY(-4px);
  box-shadow:
    0 4px 8px  rgba(0,0,0,.14),
    0 10px 28px rgba(0,0,0,.32),
    0 32px 70px rgba(0,0,0,.52);
}

.scrapbook-polaroid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px;
}

.scrapbook-polaroid-img-wrap {
  position: relative;
  overflow: hidden;
  line-height: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}

.scrapbook-polaroid-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  filter: sepia(.12) contrast(1.06) brightness(.97) saturate(1.08);
  transition: transform .7s var(--ease-silk), filter .5s;
}
.scrapbook-polaroid:hover .scrapbook-polaroid-img {
  transform: scale(1.025);
  filter: sepia(.08) contrast(1.09) brightness(.99) saturate(1.12);
}

.scrapbook-photo-sheen {
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg,
    transparent,
    rgba(255,255,255,.06) 40%,
    rgba(255,248,220,.10) 50%,
    rgba(255,255,255,.06) 60%,
    transparent);
  transform: skewX(-18deg);
  animation: sheen-pass 8s ease-in-out 3s infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes sheen-pass {
  0%,70%  { transform: translateX(0) skewX(-18deg);     opacity: 0; }
  2%      { opacity: 1; }
  38%     { transform: translateX(480%) skewX(-18deg);   opacity: .6; }
  40%,100%{ transform: translateX(480%) skewX(-18deg);   opacity: 0; }
}

.scrapbook-polaroid-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.scrapbook-polaroid-text {
  font-family: var(--ff-grace);
  font-style: italic;
  font-size: .78rem;
  color: #6b5c46;
  letter-spacing: .06em;
}
.scrapbook-polaroid-diamond {
  color: #c9a84c;
  font-size: .5rem;
  opacity: .65;
}

.scrapbook-tape {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.scrapbook-tape--tl {
  top: -10px; left: 14px;
  width: 52px; height: 22px;
  transform: rotate(-38deg);
}
.scrapbook-tape--tr {
  top: -10px; right: 14px;
  width: 52px; height: 22px;
  transform: rotate(38deg);
}
.scrapbook-tape--bl {
  bottom: 36px; left: 10px;
  width: 42px; height: 22px;
  transform: rotate(32deg);
}
.scrapbook-tape--br {
  bottom: 36px; right: 10px;
  width: 42px; height: 22px;
  transform: rotate(-32deg);
}

.scrapbook-tape svg {
  width: 100%; height: 100%;
  display: block;
}

#main-content { position: relative; z-index: 1; display: none; }
#main-content.visible { display: block; }