:root {
  color-scheme: light;
  --ink: #5b514c;
  --gold: #a37b3f;
  --paper: #f9f6ef;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #f4f1f3;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
}

button { font: inherit; }

.scene {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255,255,255,1) 0 24%, rgba(255,255,255,.7) 47%, transparent 72%),
    linear-gradient(112deg, #edf1ef 0%, #f8f7f8 47%, #eadfea 100%);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  pointer-events: none;
}

.glow {
  position: absolute;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
  z-index: -1;
}
.glow--rose { top: -16vw; right: -12vw; background: #e7c8de; }
.glow--sage { bottom: -20vw; left: -12vw; background: #dbe5db; }

.locket {
  position: relative;
  width: min(42vw, 575px, calc(82svh * 1100 / 1500));
  aspect-ratio: 1100 / 1500;
  animation: arrive 1.25s cubic-bezier(.22,.8,.22,1) both;
  filter: drop-shadow(0 24px 23px rgba(84, 68, 50, .16));
}

.locket__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 10; pointer-events: none; filter: grayscale(.42) saturate(.58) brightness(1.09) drop-shadow(7px 12px 9px rgba(55, 45, 38, .38)); }

.locket__inside {
  position: absolute;
  z-index: 11;
  inset: 14.1% 15.8% 14.1%;
  overflow: visible;
  border-radius: 47% 47% 45% 45% / 41% 41% 45% 45%;
}

.swans { position: absolute; inset: 14% 4% auto; height: 56%; z-index: 2; transform: translateX(11%); }
.swan { position: absolute; top: 0; width: 62%; height: 100%; object-fit: contain; filter: drop-shadow(9px 13px 9px rgba(55, 45, 39, .48)); }
.swan--left { left: -3%; width: 58%; }
.swan--right { top: -5%; right: -5%; width: 64%; }
.swan--left { animation: swanLeftIn 1.05s .5s cubic-bezier(.2,.82,.2,1) both; }
.swan--right { animation: swanRightIn 1.05s .62s cubic-bezier(.2,.82,.2,1) both; }

.calla { position: absolute; z-index: 6; left: -9%; bottom: 3%; width: 53%; height: 82%; object-fit: contain; transform: rotate(1deg); transform-origin: bottom; filter: drop-shadow(8px 13px 8px rgba(53, 50, 36, .43)); animation: flowerIn 1.05s .9s cubic-bezier(.16,.85,.22,1) both; }
.pearls { position: absolute; z-index: 1; width: 73%; right: -8%; bottom: 6%; transform: rotate(-10deg); mix-blend-mode: multiply; opacity: .96; filter: drop-shadow(8px 12px 8px rgba(58, 49, 41, .42)); animation: pearlsIn 1.1s 1.05s cubic-bezier(.2,.82,.2,1) both; }

.invitation-trigger {
  position: absolute;
  z-index: 7;
  left: 20%;
  top: 44%;
  width: 74%;
  height: 21%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.card {
  position: absolute;
  top: 2%;
  display: grid;
  width: 54%;
  height: 88%;
  place-items: center;
  padding: 6% 7%;
  color: #514842;
  font-family: "Parisienne", cursive;
  font-size: clamp(20px, 2.45vw, 38px);
  line-height: .84;
  text-align: center;
  background: transparent;
  filter: drop-shadow(5px 7px 4px rgba(68, 56, 49, .42));
  box-shadow: none;
  clip-path: none;
  transition: transform .3s ease, filter .3s ease;
  animation: letteringIn .85s 1.25s ease both;
}
.card--left { left: 2%; transform: rotate(-4deg) scale(.9); padding-right: 10%; }
.card--right { top: -2%; right: -7%; transform: rotate(-11deg) scale(1.04); padding-left: 10%; }
.invitation-trigger:hover .card--left { transform: rotate(-4deg) scale(.9); }
.invitation-trigger:hover .card--right { transform: rotate(-11deg) scale(1.04); }
.invitation-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 40%; }

.pearl-button {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 12.5%;
  width: 17%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  animation: buttonIn .75s 1.45s cubic-bezier(.16,.9,.2,1) both, pulse 2.4s 2.2s ease-in-out infinite;
}
.pearl-button img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.pearl-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.hint {
  position: absolute;
  left: 50%;
  bottom: 2.8vh;
  display: none;
  margin: 0;
  transform: translateX(-50%);
  color: #8d827a;
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.details {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: clamp(28px, 4vh, 48px) 18px 28px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.98) 0 28%, rgba(255,255,255,.65) 55%, transparent 76%),
    linear-gradient(112deg, #edf1ef 0%, #faf9f7 48%, #eee3ec 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4%);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.85,.2,1), visibility .6s;
}
.details__close { position: absolute; z-index: 20; top: 16px; right: 18px; width: 40px; height: 40px; border: 1px solid rgba(126,105,72,.35); border-radius: 50%; background: rgba(255,255,255,.75); color: #7d6d55; font-size: 29px; line-height: 1; cursor: pointer; }
.details__header { position: relative; z-index: 8; opacity: 0; transform: translateY(-18px); }
.details__header p { margin: 0 0 4px; color: #6d624f; font-size: clamp(17px, 2vw, 25px); letter-spacing: .05em; }
.details__header h1 { margin: 0; color: #746344; font-family: "Parisienne", cursive; font-size: clamp(48px, 7vw, 84px); font-weight: 400; line-height: 1; }

.photo-booth { position: relative; width: min(72vw, 520px, calc(68svh * 1100 / 1500)); aspect-ratio: 1100 / 1500; margin-top: -4px; }
.photo-booth__frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: grayscale(.42) saturate(.58) brightness(1.09) drop-shadow(7px 12px 9px rgba(55,45,38,.3)); opacity: 0; transform: scale(.9); }
.photo-booth__flower { position: absolute; z-index: 6; left: 9%; bottom: 9%; width: 34%; height: 55%; object-fit: contain; filter: drop-shadow(6px 10px 7px rgba(53,50,36,.35)); opacity: 0; transform: translateY(45px) rotate(6deg); }
.photo-booth__pearls { position: absolute; z-index: 5; top: 25%; right: -4%; width: 47%; object-fit: contain; filter: drop-shadow(5px 8px 6px rgba(58,49,41,.32)); opacity: 0; transform: translate(30px,-20px) rotate(-8deg); }

.film-output { position: absolute; z-index: 4; top: 29.35%; left: 50%; width: 35.5%; height: 58%; overflow: hidden; transform: translateX(-50%); }
.film-strip { position: relative; width: 100%; padding: 8px 8px 4px; background: #fbfaf6; box-shadow: none; transform: translateY(-100%); opacity: 1; }
.photo-booth__slot-mask { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; object-fit: contain; clip-path: inset(27.2% 27% 68.4%); filter: grayscale(.42) saturate(.58) brightness(1.09); opacity: 0; pointer-events: none; }
.film-strip__photo { position: relative; width: 100%; aspect-ratio: 1.5; margin-bottom: 7px; overflow: hidden; background-image: url("assets/fotos-pareja.png?v=24"); background-repeat: no-repeat; background-size: 100% 300%; filter: contrast(1.04); }
.film-strip__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 52%, rgba(0,0,0,.1)); }
.film-strip__photo--one { background-position: center top; }
.film-strip__photo--two { background-position: center center; }
.film-strip__photo--three { background-position: center bottom; }
.film-strip p { margin: 4px 0 1px; color: #6e604f; font-family: "Parisienne", cursive; font-size: clamp(14px, 2vw, 20px); }

.details__cta { position: relative; z-index: 10; width: min(82vw, 430px); margin-top: -8px; padding: 12px 20px; border: 0; border-radius: 3px; color: #fff; background: linear-gradient(90deg,#a68a56,#b8a16e,#9f824f); font-family: "Italiana", serif; font-size: clamp(16px, 2vw, 22px); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 9px 18px rgba(78,61,37,.2); opacity: 0; transform: translateY(16px); }

.invitation-page { position: absolute; inset: 0; z-index: 50; min-height: 100svh; overflow-x: hidden; overflow-y: auto; background: radial-gradient(ellipse at 50% 45%, #fff 0 28%, rgba(255,255,255,.72) 58%, transparent 78%), linear-gradient(112deg,#edf1ef 0%,#faf8f5 48%,#eee1ea 100%); opacity: 0; visibility: hidden; transform: translateY(5%); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.85,.2,1), visibility .7s; }
.invitation-page__back { position: fixed; z-index: 80; top: 16px; left: 18px; width: 42px; height: 42px; border: 1px solid rgba(126,105,72,.35); border-radius: 50%; background: rgba(255,255,255,.82); color: #78684f; font-size: 25px; line-height: 1; cursor: pointer; }
.invitation-composition { position: relative; width: min(1120px, 96vw); height: min(880px, 100svh); min-height: 720px; margin: 0 auto; overflow: hidden; }
.invitation-envelope { position: absolute; z-index: 2; top: 2%; left: 50%; width: min(36%, 405px); transform: translate(-50%,-55px) scale(.92); opacity: 0; filter: drop-shadow(0 18px 16px rgba(58,44,35,.24)); }
.invitation-flowers { position: absolute; z-index: 3; left: 21%; top: 20%; width: 17%; transform: translate(-55px,20px) rotate(-14deg); opacity: 0; filter: drop-shadow(4px 10px 8px rgba(45,38,27,.25)); }
.record-player { position: absolute; z-index: 7; left: 9%; bottom: 5%; width: min(37%, 390px); aspect-ratio: 1; transform: translate(-70px,40px) rotate(-8deg); opacity: 0; filter: drop-shadow(0 18px 16px rgba(31,25,21,.3)); }
.record-player__disc { display: block; width: 100%; height: 100%; object-fit: contain; }
.record-player__legend { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.record-player__legend text { fill: #f5eee2; font-family: "Italiana", serif; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; filter: drop-shadow(0 2px 1px #000); }
.record-player__button { position: absolute; top: 50%; left: 50%; width: 25%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%,-50%); cursor: pointer; filter: drop-shadow(0 6px 5px rgba(0,0,0,.42)); transition: transform .25s ease; }
.record-player__button:hover { transform: translate(-50%,-50%) scale(1.06); }
.record-player__button:focus-visible { outline: 3px solid #d4b982; outline-offset: 5px; }
.record-player__button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.record-player.is-playing .record-player__disc { animation: recordSpin 8s linear infinite; }
.record-player.is-playing .record-player__button { transform: translate(-50%,-50%) scale(.94); }
.photo-locket { position: absolute; left: 4%; top: 58%; width: min(30%, 360px); height: auto; opacity: 0; filter: drop-shadow(0 14px 12px rgba(55,42,30,.25)); pointer-events: none; }
.photo-locket--back { z-index: 6; }
.photo-locket--pearls { z-index: 8; clip-path: inset(0 0 43% 0); filter: none; }
.wedding-card { position: absolute; z-index: 8; right: -1%; bottom: -28%; width: min(46%, 500px); aspect-ratio: 2 / 3; transform: translate(65px,50px) scale(.9); opacity: 0; filter: drop-shadow(0 18px 15px rgba(65,51,39,.22)); }
.wedding-card > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wedding-card__copy { position: absolute; inset: 21% 18% 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #4e3a2c; text-align: center; }
.wedding-card__copy p { margin: 0; }
.wedding-card__eyebrow { font-family: "Italiana", serif; font-size: clamp(11px,1.25vw,17px); letter-spacing: .12em; text-transform: uppercase; }
.wedding-card__small { margin-top: 5px !important; font-size: clamp(13px,1.4vw,18px); letter-spacing: .08em; text-transform: uppercase; }
.wedding-card h2 { margin: 10px 0 4px; font-family: "Parisienne", cursive; font-size: clamp(30px,3.4vw,46px); font-weight: 400; line-height: .95; white-space: nowrap; }
.wedding-card h2 span { display: inline-block; margin: 0 .08em; font-size: .75em; }
.wedding-card__flourish { display: flex; width: 72%; align-items: center; gap: 8px; margin: 8px 0 4px; color: #8f7653; font-size: 20px; }
.wedding-card__flourish span { flex: 1; height: 1px; background: #9c8564; }
.wedding-card time { font-family: "Italiana", serif; font-size: clamp(12px,1.5vw,18px); letter-spacing: .12em; }
.lower-gallery { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0; width: min(1160px,98vw); min-height: 760px; margin: -160px auto 0; padding: 35px 0 90px; }
.lower-gallery img { position: relative; display: block; width: 100%; height: min(70vw,730px); object-fit: contain; object-position: top center; opacity: 0; filter: drop-shadow(0 18px 15px rgba(54,42,33,.22)); }
.lower-gallery__swans { top: 35px; left: 5%; width: 112% !important; transform: translate(-55px,55px) rotate(-3deg); }
.lower-gallery__photos { right: 9%; transform: translate(55px,55px) rotate(3deg); }
.rsvp-collage { position: relative; width: min(1100px,98vw); height: 820px; margin: -280px auto 0; }
.rsvp-collage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rsvp-collage__confirm { position: absolute; z-index: 6; top: 0; right: 0; display: block; width: 42%; aspect-ratio: 1; opacity: 0; transform: translate(45px,45px) scale(.9); filter: drop-shadow(0 15px 13px rgba(58,44,31,.23)); }
.rsvp-collage__confirm:focus-visible { outline: 3px solid #b69151; outline-offset: 6px; border-radius: 42%; }
.rsvp-collage__polaroid { position: absolute; z-index: 3; top: 14%; left: -4%; width: 54% !important; height: auto !important; opacity: 0; transform: translate(-50px,45px) rotate(-8deg); filter: drop-shadow(0 17px 14px rgba(43,35,28,.28)); }
.rsvp-collage__story { position: absolute; z-index: 5; top: 28%; right: -5%; width: 68% !important; height: auto !important; opacity: 0; transform: translate(50px,45px) rotate(-2deg); filter: drop-shadow(0 17px 14px rgba(54,43,34,.26)); }

@media (min-width: 901px) {
  .lower-gallery__photos { z-index: 12; }
}
.wedding-info-envelope { position: relative; z-index: 4; width: min(900px,96vw); aspect-ratio: 1200 / 1257; margin: 70px auto 110px; opacity: 0; transform: translateY(65px) scale(.96); filter: drop-shadow(0 22px 18px rgba(54,43,34,.22)); }
.wedding-info-envelope > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wedding-info-envelope__copy { position: absolute; z-index: 1; top: 23%; left: 17%; width: 66%; color: #4e3a27; text-align: center; font-family: "Cormorant Garamond", serif; font-size: clamp(18px,1.7vw,24px); line-height: 1.2; }
.wedding-info-envelope__copy p { margin: .34em 0; }
.wedding-info-envelope__copy strong { font-weight: 500; }
.wedding-info-envelope__copy small { font-size: .75em; letter-spacing: .08em; text-transform: uppercase; }
.invitation-footer { width: min(720px,88vw); margin: -35px auto 0; padding: 30px 20px 52px; color: #66513a; text-align: center; font-family: "Cormorant Garamond", serif; font-size: clamp(16px,1.7vw,21px); opacity: 0; transform: translateY(30px); }
.invitation-footer__names { margin: 0 0 4px; font-family: "Parisienne", cursive; font-size: clamp(40px,6vw,68px); line-height: 1; }
.invitation-footer__names span { display: inline-block; margin: 0 .08em; font-size: .72em; }
.invitation-footer > p:not(.invitation-footer__names) { margin: 0; letter-spacing: .04em; }
.invitation-footer__ornament { display: flex; width: min(310px,70%); align-items: center; gap: 12px; margin: 16px auto 10px; color: #a18251; }
.invitation-footer__ornament span { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,#a18251); }
.invitation-footer__ornament span:last-child { background: linear-gradient(90deg,#a18251,transparent); }
.invitation-footer time { font-family: "Italiana", serif; font-size: .75em; letter-spacing: .2em; }
.invitation-footer .invitation-footer__copyright { margin-top: 28px; font-family: "Italiana", serif; font-size: .56em; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.invitation-footer__copyright a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(102,81,58,.35); }
.invitation-footer__copyright a:hover { border-bottom-color: currentColor; }
.scene.is-invitation .details { opacity: 0; visibility: hidden; transform: translateY(-5%); pointer-events: none; }
.scene.is-invitation .invitation-page { opacity: 1; visibility: visible; transform: translateY(0); }
.scene.is-invitation .invitation-envelope { animation: invitationEnvelopeIn 1s .25s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .invitation-flowers { animation: invitationFlowerIn .9s .65s ease both; }
.scene.is-invitation .record-player { animation: invitationRecordIn 1s .8s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .photo-locket { animation: invitationLocketIn 1s .95s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .wedding-card { animation: invitationCardIn 1s 1s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .lower-gallery__swans { animation: lowerSwansIn 1s 1.25s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .lower-gallery__photos { animation: lowerPhotosIn 1s 1.4s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .rsvp-collage__confirm { animation: rsvpConfirmIn .9s 1.55s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .rsvp-collage__polaroid { animation: rsvpPolaroidIn 1s 1.7s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .rsvp-collage__story { animation: rsvpStoryIn 1s 1.9s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .wedding-info-envelope { animation: weddingInfoIn 1s 2.05s cubic-bezier(.2,.84,.2,1) both; }
.scene.is-invitation .invitation-footer { animation: invitationFooterIn .9s 2.2s ease both; }

.scene.is-open .locket { transform: scale(.88); opacity: 0; filter: blur(8px); transition: opacity .45s ease, transform .6s ease, filter .45s ease; pointer-events: none; }
.scene.is-open .hint { opacity: 0; }
.scene.is-open .details { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.scene.is-open .details__header { animation: detailHeaderIn .75s .35s ease both; }
.scene.is-open .photo-booth__frame { animation: detailFrameIn .9s .55s cubic-bezier(.2,.85,.2,1) both; }
.scene.is-open .photo-booth__slot-mask { animation: fadeIn .35s 1.05s ease both; }
.scene.is-open .film-strip { animation: filmEject 1.9s 1.3s cubic-bezier(.2,.78,.2,1) both; }
.scene.is-open .photo-booth__flower { animation: detailFlowerIn .9s 2.25s ease both; }
.scene.is-open .photo-booth__pearls { animation: detailPearlsIn .9s 2.45s ease both; }
.scene.is-open .details__cta { animation: detailCtaIn .7s 2.8s ease both; }

@keyframes arrive { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { transform: translateX(-50%) scale(1); filter: none; } 50% { transform: translateX(-50%) scale(1.07); filter: none; } }
@keyframes swanLeftIn { from { opacity: 0; transform: translate(-36px, -10px) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes swanRightIn { from { opacity: 0; transform: translate(36px, 12px) rotate(-3deg); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes flowerIn { from { opacity: 0; transform: translateY(70px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(1deg); } }
@keyframes pearlsIn { from { opacity: 0; transform: translate(38px, -38px) rotate(-17deg); } to { opacity: .96; transform: translate(0, 0) rotate(-10deg); } }
@keyframes letteringIn { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: drop-shadow(5px 7px 4px rgba(68, 56, 49, .42)); } }
@keyframes buttonIn { from { opacity: 0; transform: translateX(-50%) scale(.25); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes detailHeaderIn { to { opacity: 1; transform: translateY(0); } }
@keyframes detailFrameIn { to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes filmEject {
  0% { transform: translateY(-100%); }
  18% { transform: translateY(-83%); }
  42% { transform: translateY(-56%); }
  48% { transform: translateY(-56%); }
  72% { transform: translateY(-27%); }
  78% { transform: translateY(-27%); }
  100% { transform: translateY(0); }
}
@keyframes detailFlowerIn { to { opacity: 1; transform: translateY(0) rotate(6deg); } }
@keyframes detailPearlsIn { to { opacity: 1; transform: translate(0,0) rotate(-8deg); } }
@keyframes detailCtaIn { to { opacity: 1; transform: translateY(0); } }
@keyframes invitationEnvelopeIn { to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes invitationFlowerIn { to { opacity: 1; transform: translate(0,0) rotate(-8deg); } }
@keyframes invitationRecordIn { to { opacity: 1; transform: translate(0,0) rotate(-8deg); } }
@keyframes invitationLocketIn { from { opacity: 0; transform: translateY(55px) rotate(5deg); } to { opacity: 1; transform: translateY(0) rotate(5deg); } }
@keyframes invitationCardIn { to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes lowerSwansIn { to { opacity: 1; transform: translate(0,0) rotate(-3deg); } }
@keyframes lowerPhotosIn { to { opacity: 1; transform: translate(0,0) rotate(3deg); } }
@keyframes rsvpConfirmIn { to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes rsvpPolaroidIn { to { opacity: 1; transform: translate(0,0) rotate(-8deg); } }
@keyframes rsvpStoryIn { to { opacity: 1; transform: translate(0,0) rotate(-2deg); } }
@keyframes weddingInfoIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes invitationFooterIn { to { opacity: 1; transform: translateY(0); } }
@keyframes recordSpin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .locket { width: min(91vw, 450px, calc(76svh * 1100 / 1500)); }
  .card { font-size: clamp(18px, 6.3vw, 31px); }
  .hint { bottom: max(2.6vh, 18px); }
  .details { padding-top: max(28px, 4svh); }
  .photo-booth { width: min(92vw, calc(65svh * 1100 / 1500)); }
  .details__cta { margin-top: -3px; }
  .invitation-composition { width: 100%; height: auto; min-height: 1080px; }
  .invitation-envelope { top: 5%; width: 65%; }
  .invitation-flowers { left: 4%; top: 21%; width: 25%; }
  .record-player { left: -7%; bottom: 52%; width: 64%; }
  .photo-locket { left: -6%; top: 43%; width: 60%; }
  .record-player__legend text { font-size: 17px; letter-spacing: 1.5px; }
  .wedding-card { right: -10%; bottom: 35%; width: 70%; }
  .wedding-card__copy { inset: 22% 17% 20%; }
  .wedding-card h2 { font-size: clamp(21px,5.8vw,32px); }
  .lower-gallery { left: 50%; gap: 0; width: 135%; min-height: 590px; margin-top: -445px; padding: 20px 0 70px; transform: translateX(-50%); }
  .lower-gallery img { height: 510px; }
  .lower-gallery__swans { top: 42px; left: 5%; width: 118% !important; }
  .lower-gallery__photos { right: 12%; }
  .rsvp-collage { width: 100%; height: 720px; margin-top: -255px; }
  .rsvp-collage__confirm { top: 0; right: -3%; width: 58%; }
  .rsvp-collage__polaroid { top: 13%; left: -19%; width: 76% !important; }
  .rsvp-collage__story { top: 27%; right: -12%; width: 82% !important; }
  .wedding-info-envelope { left: -5%; width: 110%; margin: -300px 0 70px; }
  .wedding-info-envelope__copy { top: 24%; left: 16%; width: 68%; font-size: clamp(14px,4vw,17px); }
}

@media (max-width: 390px) {
  .locket { width: min(91vw, calc(69svh * 1100 / 1500)); }
}

@media (max-height: 680px) and (orientation: landscape) {
  .locket { width: auto; height: 89svh; }
  .hint { display: none; }
  .details { padding-top: 12px; }
  .details__header p { display: none; }
  .photo-booth { width: auto; height: 76svh; }
  .details__cta { position: absolute; right: 3vw; bottom: 5vh; width: 30vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}