@font-face {
  font-family: Cormorant;
  src: url("/static/fonts/cormorant-garamond-latin-400-normal.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Cormorant;
  src: url("/static/fonts/cormorant-garamond-latin-400-italic.woff2")
    format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Cormorant;
  src: url("/static/fonts/cormorant-garamond-latin-500-normal.woff2")
    format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: DM Sans;
  src: url("/static/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: DM Sans;
  src: url("/static/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
:root {
  --serif: Cormorant, Georgia, serif;
  --paper: #f8f3e9;
  --ink: #4a5144;
  --accent: #9d895d;
  --line: #d9d2bd;
  --muted: #7b7f6d;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "DM Sans", sans-serif;
}
.scene {
  padding: 100px 30px;
}
.scene h2 {
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.03;
  letter-spacing: -1.4px;
}
.scene h3 {
  font-size: 29px;
  line-height: 1.15;
}
.scene > p {
  font-size: 13px;
  line-height: 1.95;
}
.scene .scene-kicker {
  font-size: 8px;
  line-height: 1.8;
}
.scene > h2,
.scene > p,
.scene
  > div:not(.petals):not(.cinema-shade):not(.world-sparkles):not(.cloud):not(
    .island-cast
  ):not(.island-welcome) {
  transition:
    opacity 0.8s,
    translate 0.8s;
}
.scene:not(.hero-scene):not(.seen) > h2,
.scene:not(.hero-scene):not(.seen) > p {
  opacity: 0;
  translate: 0 18px;
}
.invitation-content {
  max-width: 100%;
  box-shadow: none;
}
.invitation-gate {
  padding-top: 65px;
  padding-bottom: 48px;
}
.gate-kicker {
  text-align: center;
  max-width: 320px;
  line-height: 1.9;
  font-family: "DM Sans", sans-serif;
}
.wedding-gate .gate-title {
  font-size: 40px;
  line-height: 1.05;
  max-width: 400px;
  margin-bottom: 34px;
}
.wedding-gate {
  background:
    radial-gradient(ellipse at 80% 10%, #ebe9d2, transparent 50%),
    radial-gradient(ellipse at 10% 80%, #e0e3d2, transparent 50%), #f5eee0;
}
.wedding-gate:before {
  border-radius: 240px 240px 5px 5px;
  inset: 24px 9%;
}
.wedding-gate .envelope {
  margin-top: 25px;
}
.gate-instruction {
  font-size: 9px;
  letter-spacing: 0.6px;
  margin-top: 27px;
  margin-bottom: 14px;
}
.gate-audio-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ink);
  color: #fff9ea;
  border: 1px solid var(--ink);
  border-radius: 30px;
  padding: 13px 25px;
  font-size: 11px;
  z-index: 8;
  min-height: 46px;
  margin-top: 5px;
}
.gate-audio-button span {
  font-size: 17px;
}
.skip-intro {
  position: relative;
  bottom: auto;
  margin-top: 10px;
  padding: 10px 15px;
  font-size: 10px;
  letter-spacing: 0.3px;
  text-underline-offset: 4px;
  z-index: 8;
}
.gate-flower.f1 {
  left: -40px;
  font-size: 190px;
  bottom: 10px;
}
.gate-flower.f2 {
  font-size: 140px;
  right: -30px;
  top: 80px;
}
.envelope-letter > span {
  font-size: 27px;
}
.envelope-letter small {
  font-size: 7px;
}
.wax-seal span {
  font-size: 25px;
}
.opening .gate-audio-button,
.opening .skip-intro,
.opening .gate-instruction,
.opening .gate-recipient {
  opacity: 0;
  transition: opacity 0.2s;
}
.music-player {
  position: fixed;
  right: 22px;
  bottom: 23px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 80;
  border: 1px solid #ffffff72;
  border-radius: 35px;
  background: #f8f5e7ed;
  color: #405540;
  padding: 7px 14px 7px 7px;
  box-shadow: 0 8px 35px #13271d20;
  backdrop-filter: blur(15px);
  max-width: calc(100vw - 35px);
}
.music-toggle {
  position: static;
  box-shadow: none !important;
  border: 0;
  background: #3e5541;
  color: #fff8e6;
  width: 39px;
  height: 39px;
  min-width: 39px;
  font-size: 16px;
  margin: 0;
}
.music-caption {
  line-height: 1.5;
  max-width: 155px;
}
.music-caption b {
  display: block;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.music-caption small {
  font-size: 7px;
  display: block;
  color: #687b65;
}
.music-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 3px;
  height: 23px;
}
.music-bars i {
  width: 2px;
  background: #81916d;
  height: 12px;
  animation: equalize 0.8s infinite alternate;
  animation-play-state: paused;
}
.music-bars i:nth-child(2) {
  height: 20px;
  animation-delay: -0.5s;
}
.music-bars i:nth-child(3) {
  height: 15px;
  animation-delay: -0.25s;
}
.music-player.is-playing .music-bars i {
  animation-play-state: running;
}
.volume-control {
  width: 48px;
  accent-color: #526c4d;
  height: 18px;
  margin-left: 4px;
}
.closed .music-player {
  visibility: hidden;
}
.demo-bar {
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  background: #243c32;
  height: 39px;
}
.invitation-footer h2 {
  font-size: 44px;
  line-height: 1.1;
}
.invitation-footer {
  padding-bottom: 125px;
}
.made-with {
  margin-top: 55px;
}
.date-stamp {
  font-size: 35px;
}
.date-stamp small {
  font-family: "DM Sans", sans-serif;
  font-size: 9px;
}
.countdown {
  gap: 15px;
  max-width: 480px;
}
.countdown b {
  font-size: 67px;
}
.countdown span {
  font-size: 8px;
}
.countdown i {
  margin-top: 10px;
  font-size: 26px;
}
.invite-button {
  border-radius: 30px;
  font-size: 10px;
  padding: 13px 24px;
  letter-spacing: 0.5px;
}
.location-arch {
  padding-top: 75px;
  border-radius: 230px 230px 8px 8px;
}
.location-arch h2 {
  font-size: 40px;
}
.location-arch h3 {
  font-size: 26px;
}
.family-names {
  font-size: 27px !important;
}
.story-moment h3 {
  font-size: 29px;
}
.story-moment p {
  font-size: 12px;
}
.schedule h3 {
  font-size: 27px;
}
.gallery-photo {
  max-width: 305px;
  flex-basis: 220px;
}
.form-field input,
.form-field textarea,
.form-field select {
  border-radius: 7px;
  background: #fffaf5b0;
  font-size: 13px;
}
.rsvp-scene form {
  padding: 30px;
  background: #fff9ee77;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.rsvp-scene .invite-button {
  margin-top: 12px;
}
.rsvp-privacy {
  font-size: 8px;
  line-height: 1.8;
}
.form-field label {
  font-size: 10px;
}
.rsvp-counts {
  gap: 13px;
}
.gifts-scene > p {
  max-width: 450px;
}
.scene.seen .story-moment,
.scene.seen .schedule article {
  animation: rise-in 0.9s both;
  animation-delay: calc(var(--order) * 0.12s);
}
/* Eterna: full frame portrait, moving light and a paper envelope. */
.eterna {
  background: #f4f0e6;
}
.eterna .cinema-hero {
  height: 100svh;
  min-height: 730px;
  max-height: 1100px;
  padding: 125px 30px 68px;
  justify-content: flex-end;
  color: #fff8e9;
  isolation: isolate;
}
.cinema-photo,
.cinema-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  object-fit: cover;
}
.cinema-photo {
  animation: cinema-breathe 22s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.in-view .cinema-photo {
  animation-play-state: running;
}
.cinema-shade {
  z-index: -1;
  background:
    linear-gradient(0deg, #172c23ed, transparent 85%),
    linear-gradient(90deg, #11261d33, transparent 80%);
}
.eterna .cinema-hero h1 {
  font-size: clamp(78px, 9vw, 135px);
  line-height: 0.88;
  letter-spacing: -3px;
  margin: 26px auto 24px;
  max-width: 90%;
  text-shadow: 0 3px 35px #15221966;
}
.eterna .cinema-hero .ampersand {
  font-size: 0.46em;
  color: #decb9c;
  margin: 8px auto;
  font-family: var(--serif);
  line-height: 0.6;
}
.eterna .cinema-hero .scene-kicker {
  color: #fff7d5;
  font-size: 8px;
  letter-spacing: 3px;
}
.eterna .cinema-hero .cinema-date {
  font-size: 11px;
  letter-spacing: 4px;
  margin: 18px 0 25px;
  color: #eae3c4;
}
.cinema-hero .scroll-note {
  color: #ece3c8;
  font-size: 7px;
  letter-spacing: 2.5px;
  margin-top: 20px;
}
.cinema-hero .scroll-note span {
  font-size: 25px;
}
.eterna .cinema-hero:before,
.eterna .cinema-hero:after {
  z-index: 0;
  background: #eee5c53b;
  top: 70px;
  bottom: 35px;
  width: 1px;
}
.eterna .cinema-hero:before {
  left: 28px;
}
.eterna .cinema-hero:after {
  right: 28px;
}
.wedding-welcome {
  background: #f6f1e5;
  padding-top: 95px;
  padding-bottom: 75px;
}
.welcome-flower {
  display: block;
  font-size: 36px;
  color: #b4a679;
  margin-bottom: 24px;
}
.wedding-welcome h2 {
  max-width: 500px;
  font-style: italic;
  color: #77795c;
}
.wedding-welcome .hero-message {
  max-width: 490px;
  font-size: 13px;
  line-height: 2;
}
.wedding-welcome .ornament {
  margin-top: 35px;
}
.eterna .countdown-scene {
  background: #e8e8d8;
}
.eterna .location-scene {
  background: #f8f3e9;
}
.eterna .location-arch {
  background: #efeddc;
  border-color: #c8cbb1;
  max-width: 490px;
}
.eterna .story-scene {
  background: #eeeade;
}
.eterna .story-moment p,
.eterna .story-moment h3,
.eterna .story-moment small,
.eterna .story-dot {
  background: #eeeade;
}
.eterna .family-scene {
  background: #dce1cc;
}
.eterna .gallery-scene {
  background: #e8e5d7;
}
.eterna .rsvp-scene {
  background: #e5e4d4;
}
.eterna .invitation-content {
  background: #f6f1e5;
}
.eterna .invitation-footer {
  background: #f6f1e5;
}
.eterna .scene h2:after {
  margin-top: 25px;
}
.eterna .cinema-hero .petals i {
  background: #ead6aa8f;
  animation-duration: 14s;
}
/* Isla: playful scenery, a floating companion and a birthday surprise. */
.isla {
  --serif: Cormorant, Georgia, serif;
}
.isla .scene h2 {
  font-size: 47px;
  line-height: 1.04;
  font-weight: 500;
}
.isla .scene h3 {
  font-weight: 500;
}
.isla .island-hero {
  max-width: 1100px;
  margin: auto;
  padding-top: 108px;
}
.isla .island-hero h1 {
  font-size: clamp(69px, 9vw, 115px);
  font-weight: 500;
}
.isla .island-subtitle {
  font-size: 26px;
}
.island-gate .gate-title {
  font-size: 42px;
  line-height: 1.06;
  font-weight: 500;
  max-width: 390px;
  margin-bottom: 67px;
}
.island-gate .gift-box {
  transform: scale(0.9) rotate(-5deg);
  width: 162px;
  height: 155px;
}
.island-gate .gate-instruction {
  margin-top: 26px;
  margin-bottom: 6px;
}
.island-gate .gate-audio-button {
  background: #287f72;
  border-color: #287f72;
  color: #fff8db;
}
.island-gate .skip-intro {
  margin-top: 8px;
}
.isla .scene .hero-message {
  font-size: 13px;
}
.isla .island-welcome {
  padding-bottom: 60px;
}
.isla .countdown {
  max-width: 450px;
}
.isla .countdown b {
  font-size: 49px;
}
.isla .countdown > div {
  padding: 23px 8px 18px;
}
.isla .rsvp-scene form {
  max-width: 450px;
}
.isla .music-toggle {
  background: #317b67;
}
.isla .invitation-content {
  max-width: 1100px;
  margin: auto;
}
/* Five original illustrated worlds. */
.world-gate {
  background: var(--paper);
  isolation: isolate;
}
.world-gate-halo {
  position: absolute;
  width: 370px;
  height: 500px;
  border: 1px solid var(--line);
  border-radius: 50% 50% 8px 8px;
  z-index: -1;
  transform: rotate(-5deg);
  opacity: 0.7;
}
.world-gate-halo:after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line);
  border-radius: inherit;
  transform: rotate(10deg);
}
.world-gate .gate-title {
  font-size: 47px;
  line-height: 1.03;
  margin: 5px 0 34px;
  max-width: 430px;
}
.world-seal {
  border: 1px solid var(--accent);
  height: 132px;
  width: 132px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px #ac986919,
    0 0 0 25px #ac98690b;
  margin-bottom: 33px;
  animation: seal-glow 3s infinite ease-in-out;
}
.world-seal > span {
  font-size: 38px;
  color: var(--accent);
  line-height: 1;
}
.world-seal > i {
  font-family: var(--serif);
  font-size: 36px;
  font-style: italic;
  line-height: 1;
  margin-top: 4px;
}
.gate-recipient {
  font-size: 10px;
  color: var(--muted);
  margin: 6px 0 15px;
}
.gate-recipient b {
  font-weight: 500;
}
.opening .world-seal {
  animation: seal-unlock 1.2s ease-in both;
}
.opening.world-gate {
  animation: world-open 1.4s ease-in both;
}
.world-hero {
  min-height: 840px;
  height: 100svh;
  max-height: 1150px;
  justify-content: flex-start;
  padding: 100px 25px 38px;
  isolation: isolate;
}
.world-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.world-title {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
}
.world-title h1 {
  font-size: clamp(72px, 10vw, 125px);
  letter-spacing: -3px;
  line-height: 1.01;
  margin: 12px 0 17px;
}
.world-title .scene-kicker {
  font-size: 9px;
  letter-spacing: 3px;
}
.world-title .world-date {
  font-size: 10px;
  letter-spacing: 4px;
  margin: 20px auto 0;
}
.world-title .world-age {
  font-size: 8px;
  letter-spacing: 2px;
  margin: 10px auto;
  color: inherit;
}
.world-age b {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  display: block;
  line-height: 1.5;
}
.world-scroll {
  position: absolute;
  bottom: 35px;
  left: 20px;
  right: 20px;
  font-size: 8px;
  letter-spacing: 2px;
  z-index: 3;
}
.world-scroll > span {
  display: block;
  font-size: 27px;
  margin-top: 8px;
  animation: arrow 2.5s infinite;
}
.world-welcome-symbol {
  font-size: 55px;
  color: var(--accent);
  display: block;
  margin: 0 auto 30px;
}
.world-welcome .hero-message {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.5;
  max-width: 520px;
}
.world-welcome .scroll-note {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-top: 33px;
}
.world-welcome .scroll-note > span {
  display: block;
  font-size: 24px;
  margin-top: 12px;
}
.world-personal-photo {
  width: 260px;
  height: 330px;
  border-radius: 150px 150px 5px 5px;
  border: 8px solid #fff9ed;
  outline: 1px solid var(--line);
  box-shadow: 0 15px 30px #383b3214;
  overflow: hidden;
  margin: 5px auto 34px;
}
.world-personal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-x) var(--photo-y);
}
.world-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.world-sparkles i {
  position: absolute;
  font-size: 25px;
  font-style: normal;
  color: #f8e4af;
  animation: world-twinkle 4s infinite;
  animation-delay: calc(var(--i) * -0.4s);
  animation-play-state: paused;
}
.in-view .world-sparkles i {
  animation-play-state: running;
}
.cosmos {
  --paper: #f3f0e6;
  --ink: #3f4969;
  --accent: #98714d;
  --muted: #73778c;
  --line: #d4cdb9;
  background: #1b2445;
}
.cosmos .invitation-content {
  max-width: 1100px;
  margin: auto;
  background: var(--paper);
}
.gate-cosmos {
  background: radial-gradient(ellipse, #354265, #1a2344);
  --ink: #f4dfbe;
  --accent: #e6ba89;
  --muted: #d5d7e3;
  --line: #878caa;
  color: #f4dfbe;
}
.gate-cosmos .gate-audio-button {
  background: #e9c39b;
  color: #24324e;
  border-color: #e9c39b;
}
.world-cosmos {
  color: #f3e4c7;
}
.world-cosmos .scene-kicker {
  color: #f3cd9f;
}
.world-cosmos .world-backdrop {
  object-position: center 65%;
}
.world-cosmos .world-title {
  padding-top: 5px;
}
.world-cosmos .world-title h1 {
  text-shadow: 0 4px 28px #161b44;
}
.launch-button {
  position: absolute;
  right: 8%;
  bottom: 24%;
  border: 1px solid #efdcbc80;
  border-radius: 100%;
  background: #272848a8;
  backdrop-filter: blur(5px);
  color: #fff0d1;
  width: 135px;
  height: 135px;
  z-index: 5;
  font-size: 12px;
  padding: 22px;
  line-height: 1.6;
  transform: rotate(7deg);
}
.launch-button span {
  display: block;
  font-size: 29px;
}
.world-cosmos.launched .world-backdrop {
  animation: launch 2s ease-in-out both;
}
.world-cosmos.launched .world-sparkles i {
  animation: star-warp 1.5s both;
}
.cosmos .countdown-scene {
  background: #2c3553;
  color: #f8e6c8;
  --accent: #d0ac7b;
  --muted: #c2c6da;
}
.cosmos .countdown {
  background: #ffffff0b;
  border-radius: 15px;
  padding: 28px 18px;
}
.cosmos .countdown-scene .invite-button.secondary {
  border-color: #d0ac7b;
}
.cosmos .family-scene {
  background: #e8e5d7;
}
.cosmos .schedule-scene {
  background: #e0e2e8;
}
.cosmos .rsvp-scene {
  background: #e6e5da;
}
.aurora {
  --paper: #f8f2f4;
  --ink: #665069;
  --accent: #a27588;
  --muted: #8a778d;
  --line: #decbd5;
  background: #eae1e8;
}
.gate-aurora {
  background: radial-gradient(ellipse at top, #ede1ed, #f8f2f2 65%);
}
.aurora .world-hero {
  color: #fff0da;
}
.aurora .world-backdrop {
  object-position: center 55%;
}
.aurora .world-title {
  padding-top: 25px;
}
.aurora .world-title h1 {
  font-size: clamp(98px, 13vw, 163px);
  font-style: italic;
  line-height: 0.9;
  letter-spacing: -5px;
}
.aurora .world-title .scene-kicker {
  color: #edcfdd;
}
.aurora .world-title .world-date {
  margin-top: 32px;
}
.aurora .world-welcome {
  background: #f8f2f4;
}
.aurora .countdown-scene {
  background: #e9dce7;
}
.aurora .countdown > div {
  border-bottom: 1px solid #b694a6;
  padding-bottom: 14px;
}
.aurora .family-scene {
  background: #ece1e7;
}
.aurora .story-moment p,
.aurora .story-moment h3,
.aurora .story-moment small {
  background: var(--paper);
}
.aurora .rsvp-scene {
  background: #ebdfe8;
}
.flutter {
  font-size: 75px;
  color: #e8c7e0;
  position: absolute;
  top: 58%;
  left: 11%;
  transform: rotate(25deg);
  animation: butterfly 7s ease-in-out infinite;
  opacity: 0.85;
}
.butterfly-two {
  top: 76%;
  left: 73%;
  font-size: 46px;
  animation-delay: -3s;
}
.noche {
  --paper: #202624;
  --ink: #f0e3c4;
  --accent: #c6a875;
  --muted: #b4b7a6;
  --line: #615c43;
  background: #202624;
}
.gate-noche {
  background: radial-gradient(ellipse at 50% 35%, #3b3d32, #1e2522 70%);
}
.gate-noche .gate-audio-button {
  background: #ddc99e;
  border-color: #ddc99e;
  color: #252c23;
}
.noche .world-hero {
  color: #f5e8bf;
  justify-content: flex-end;
  padding-bottom: 130px;
}
.noche .world-title h1 {
  font-size: clamp(100px, 13vw, 145px);
  margin-top: 5px;
}
.noche .world-title .scene-kicker {
  font-size: 8px;
  color: #f1d59b;
}
.noche .world-title .world-age {
  font-size: 8px;
}
.noche .world-title .world-age b {
  font-size: 34px;
  display: inline;
  margin-right: 7px;
}
.noche .world-title .world-date {
  font-size: 9px;
  margin-top: 15px;
}
.noche .world-backdrop {
  object-position: center 40%;
  filter: brightness(0.8);
}
.noche .world-title {
  z-index: 3;
}
.noche .world-hero:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, #1c2423cc);
  z-index: 0;
}
.noche .world-welcome {
  background: #242c27;
}
.noche .countdown-scene {
  background: #33382c;
}
.noche .date-stamp small {
  color: #d5ccb0;
}
.noche .family-scene,
.noche .gifts-scene {
  background: #292f26;
}
.noche .gallery-photo {
  background: #e8ddbd;
}
.noche .form-field input,
.noche .form-field textarea,
.noche .form-field select {
  background: #f9f1db;
  color: #283428;
}
.noche .rsvp-scene form {
  background: #2c342c;
}
.noche .rsvp-result {
  color: #c0d8ac;
}
.noche .invitation-footer {
  background: #202624;
}
.dulce {
  --paper: #f8f4e9;
  --ink: #6a6750;
  --accent: #9a8868;
  --muted: #908b74;
  --line: #dcd7c1;
  background: #e4e5d7;
}
.gate-dulce {
  background: radial-gradient(ellipse at 80% 10%, #fefcf0, #e7e8d8);
}
.gate-dulce .world-seal {
  background: #f8eed7;
  border: 1px solid #ccbf9c;
}
.dulce .world-hero {
  color: #696149;
  max-height: 1100px;
}
.dulce .world-backdrop {
  object-position: center 50%;
}
.dulce .world-title {
  padding-top: 25px;
}
.dulce .world-title h1 {
  font-size: clamp(72px, 10vw, 113px);
  letter-spacing: -2px;
}
.dulce .world-title .scene-kicker {
  color: #7d7965;
}
.dulce .world-sparkles {
  display: none;
}
.dulce .world-scroll {
  color: #685d44;
  background: #f8f2e19c;
  border-radius: 15px;
  left: 25%;
  right: 25%;
  font-size: 7px;
  padding-top: 8px;
}
.dulce .countdown-scene {
  background: #e5e7d8;
}
.dulce .countdown > div {
  background: #f9f7ed;
  border-radius: 60px 60px 6px 6px;
  padding: 21px 5px;
}
.dulce .countdown {
  gap: 13px;
}
.dulce .countdown i {
  display: none;
}
.dulce .family-scene {
  background: #ece7d7;
}
.dulce .rsvp-scene {
  background: #e9eadb;
}
.alma {
  --paper: #f8f5eb;
  --ink: #586851;
  --accent: #999366;
  --muted: #7c886e;
  --line: #d5d9bc;
  background: #e6e8db;
}
.gate-alma {
  background: radial-gradient(ellipse at top, #fdfcf0, #e6e8d8);
}
.alma .world-hero {
  justify-content: center;
  padding-top: 145px;
  color: #56654d;
}
.alma .world-title {
  margin-top: 110px;
}
.alma .world-title h1 {
  font-size: clamp(90px, 12vw, 155px);
  font-style: italic;
}
.alma .world-title .scene-kicker {
  color: #6e7854;
}
.alma .world-sparkles {
  display: none;
}
.alma .countdown-scene {
  background: #e5e8d7;
}
.alma .family-scene {
  background: #e9ebdf;
}
.alma .rsvp-scene {
  background: #e6e8d7;
}
.alma .invitation-footer {
  background: var(--paper);
}
/* User-selected palettes affect the paper sections while preserving each scene. */
body.palette-salvia {
  --paper: #f1f3e8;
  --ink: #435741;
  --accent: #718258;
  --muted: #74816a;
  --line: #cad2b8;
}
body.palette-arena {
  --paper: #f8f0e0;
  --ink: #655943;
  --accent: #a28a55;
  --muted: #8a8068;
  --line: #e1d2b2;
}
body.palette-rosa {
  --paper: #fcf1ee;
  --ink: #775653;
  --accent: #aa7b77;
  --muted: #987f7c;
  --line: #e6cbc4;
}
body[class*="palette-"]:not(.palette-original)
  .invitation-content
  > .scene:not(.hero-scene):not(.world-welcome) {
  background: var(--paper);
}
body.type-modern {
  --serif: "DM Sans", sans-serif;
}
body.type-modern .hero-scene h1 {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  letter-spacing: -2px;
}
body.type-modern .scene h2 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  letter-spacing: -1px;
}
body.type-modern .gate-title {
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.3;
}
@keyframes equalize {
  to {
    transform: scaleY(0.3);
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cinema-breathe {
  to {
    transform: scale(1.075);
  }
}
@keyframes seal-glow {
  50% {
    box-shadow:
      0 0 0 12px #ac986919,
      0 0 0 33px #ac986908;
    transform: translateY(-4px);
  }
}
@keyframes seal-unlock {
  to {
    opacity: 0;
    transform: scale(4) rotate(70deg);
  }
}
@keyframes world-open {
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes world-twinkle {
  50% {
    opacity: 0.3;
    transform: scale(0.6) rotate(20deg);
  }
}
@keyframes launch {
  35% {
    transform: translate(-50px, -190px) rotate(-4deg) scale(1.1);
  }
  70% {
    transform: translate(-25px, -350px) rotate(-8deg) scale(1.2);
    filter: brightness(1.3);
  }
  100% {
    transform: none;
  }
}
@keyframes star-warp {
  60% {
    transform: translateY(140px) scaleY(5);
    opacity: 0.2;
  }
}
@keyframes butterfly {
  50% {
    transform: translate(40px, -40px) rotate(-20deg) scaleX(0.6);
  }
}
@media (min-width: 900px) {
  .world-hero {
    max-width: 1100px;
    margin: auto;
  }
  .world-backdrop {
    object-fit: cover;
  }
  .scene {
    padding: 115px 55px;
  }
  .eterna .cinema-hero {
    max-width: none;
  }
  .cinema-hero h1 {
    max-width: 70%;
  }
  .wedding-gate .envelope {
    width: 365px;
    height: 235px;
  }
  .wedding-gate .wax-seal {
    top: 106px;
  }
  .wedding-gate .gate-title {
    font-size: 44px;
  }
  .eterna .cinema-hero .cinema-photo {
    object-position: 65% 55% !important;
  }
  .world-hero .world-backdrop {
    object-fit: contain;
    background: inherit;
  }
  .world-cosmos {
    background: #1c2449;
  }
  .world-aurora {
    background: #3e3255;
  }
  .world-dulce {
    background: #e8e6d4;
  }
  .world-noche {
    background: #191c1a;
  }
  .world-alma {
    background: #e4e4d6;
  }
}
@media (max-width: 600px) {
  .scene {
    padding: 75px 25px;
  }
  .scene h2 {
    font-size: 40px;
  }
  .scene h3 {
    font-size: 26px;
  }
  .scene > p {
    font-size: 12px;
  }
  .scene .scene-kicker {
    font-size: 7px;
    letter-spacing: 2.1px;
  }
  .invitation-gate .gate-kicker {
    font-size: 7px;
    letter-spacing: 2px;
  }
  .wedding-gate:before {
    inset: 50px 15px 15px;
    border-radius: 230px 230px 3px 3px;
  }
  .wedding-gate .gate-title {
    font-size: 33px;
    max-width: 285px;
    margin-bottom: 20px;
  }
  .wedding-gate .envelope {
    margin-top: 23px;
    width: 290px;
    height: 195px;
  }
  .wedding-gate .wax-seal {
    top: 83px;
  }
  .envelope-letter > span {
    font-size: 24px;
  }
  .envelope-letter {
    padding-top: 19px;
  }
  .gate-instruction {
    margin-top: 26px;
    font-size: 8px;
  }
  .gate-audio-button {
    padding: 12px 22px;
    font-size: 10px;
  }
  .skip-intro {
    font-size: 9px;
  }
  .gate-flower.f2 {
    font-size: 120px;
  }
  .music-player {
    right: 13px;
    bottom: 13px;
    padding: 6px 11px 6px 6px;
    gap: 9px;
  }
  .music-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 15px;
  }
  .music-caption {
    max-width: 120px;
  }
  .music-caption b {
    font-size: 8px;
  }
  .music-caption small {
    font-size: 6px;
  }
  .volume-control {
    display: none;
  }
  .music-bars {
    margin: 0 0 0 1px;
  }
  .demo-bar {
    font-size: 9px;
    padding: 9px 12px;
  }
  .demo-bar span {
    font-size: 8px;
  }
  .eterna .cinema-hero {
    height: 100svh;
    min-height: 700px;
    padding: 100px 25px 57px;
  }
  .eterna .cinema-hero h1 {
    font-size: 82px;
    line-height: 0.86;
    margin: 20px 0 25px;
    letter-spacing: -2px;
  }
  .eterna .cinema-hero .cinema-date {
    font-size: 9px;
    letter-spacing: 3px;
    margin-top: 9px;
  }
  .eterna .cinema-hero .scene-kicker {
    font-size: 7px;
    letter-spacing: 2.5px;
  }
  .eterna .cinema-hero:before {
    left: 15px;
  }
  .eterna .cinema-hero:after {
    right: 15px;
  }
  .eterna .cinema-hero:before,
  .eterna .cinema-hero:after {
    top: 60px;
    bottom: 24px;
  }
  .cinema-shade {
    background: linear-gradient(0deg, #173027f2, transparent 90%);
  }
  .cinema-hero .scroll-note {
    font-size: 6px;
    margin-top: 16px;
  }
  .wedding-welcome h2 {
    font-size: 43px;
  }
  .wedding-welcome .hero-message {
    font-size: 12px;
    line-height: 2;
  }
  .welcome-flower {
    font-size: 30px;
  }
  .date-stamp {
    font-size: 30px;
  }
  .countdown {
    gap: 9px;
    margin-top: 30px;
  }
  .countdown b {
    font-size: 49px;
  }
  .countdown span {
    font-size: 7px;
  }
  .countdown i {
    font-size: 20px;
  }
  .location-arch {
    padding: 60px 22px 40px;
  }
  .location-arch h2 {
    font-size: 35px;
  }
  .family-names {
    font-size: 24px !important;
  }
  .schedule article {
    gap: 12px;
    grid-template-columns: 55px 18px 1fr;
  }
  .schedule article:before {
    left: 75px;
  }
  .schedule h3 {
    font-size: 25px;
  }
  .gallery-photo {
    max-width: 250px;
  }
  .gallery-photo img {
    height: 260px;
  }
  .rsvp-scene form {
    padding: 21px;
  }
  .invitation-footer {
    padding-top: 55px;
    padding-bottom: 110px;
  }
  .invitation-footer h2 {
    font-size: 38px;
  }
  .isla .island-hero {
    padding-top: 94px;
  }
  .isla .island-hero h1 {
    font-size: 76px;
    letter-spacing: -2px;
  }
  .isla .island-subtitle {
    font-size: 22px;
  }
  .isla .island-cast {
    height: 340px;
    max-width: 375px;
  }
  .isla .hero-dragon {
    height: 340px;
    left: -13px;
  }
  .isla .age-bubble {
    width: 116px;
    height: 135px;
    right: -4px;
  }
  .isla .age-bubble b {
    font-size: 49px;
  }
  .isla .scene h2 {
    font-size: 39px;
  }
  .island-gate .gate-title {
    font-size: 35px;
    max-width: 300px;
    margin-bottom: 65px;
  }
  .island-gate .gate-kicker {
    font-size: 7px;
    max-width: 240px;
  }
  .island-gate .gift-box {
    height: 146px;
    width: 160px;
  }
  .island-gate .gate-instruction {
    font-size: 9px;
    margin-top: 23px;
  }
  .world-hero {
    height: 100svh;
    min-height: 750px;
    max-height: 920px;
    padding: 110px 22px 30px;
  }
  .world-gate-halo {
    width: 290px;
    height: 475px;
  }
  .world-gate .gate-title {
    font-size: 36px;
    max-width: 290px;
  }
  .world-seal {
    height: 112px;
    width: 112px;
    margin-bottom: 30px;
  }
  .world-seal > span {
    font-size: 31px;
  }
  .world-seal > i {
    font-size: 31px;
  }
  .gate-recipient {
    font-size: 9px;
    margin-bottom: 12px;
  }
  .world-title h1 {
    font-size: 77px;
    letter-spacing: -2px;
  }
  .world-title .scene-kicker {
    font-size: 7px;
  }
  .world-title .world-date {
    font-size: 9px;
    letter-spacing: 3px;
  }
  .world-title .world-age {
    font-size: 7px;
  }
  .world-age b {
    font-size: 32px;
  }
  .world-scroll {
    font-size: 6px;
    letter-spacing: 1.8px;
    bottom: 31px;
  }
  .world-scroll > span {
    font-size: 23px;
    margin-top: 5px;
  }
  .world-welcome .hero-message {
    font-size: 27px;
  }
  .world-personal-photo {
    width: 225px;
    height: 290px;
  }
  .launch-button {
    width: 115px;
    height: 115px;
    right: 3%;
    bottom: 24%;
    font-size: 10px;
    padding: 15px;
  }
  .aurora .world-title {
    padding-top: 14px;
  }
  .aurora .world-title h1 {
    font-size: 100px;
    letter-spacing: -3px;
  }
  .aurora .world-title .world-date {
    margin-top: 22px;
  }
  .noche .world-hero {
    padding-bottom: 125px;
  }
  .noche .world-title h1 {
    font-size: 105px;
    letter-spacing: -3px;
  }
  .noche .world-title .world-age b {
    font-size: 31px;
  }
  .noche .world-title .world-age {
    font-size: 7px;
  }
  .dulce .world-title {
    padding-top: 3px;
  }
  .dulce .world-title h1 {
    font-size: 71px;
  }
  .dulce .world-scroll {
    left: 15%;
    right: 15%;
  }
  .alma .world-hero {
    padding-top: 100px;
  }
  .alma .world-title {
    margin-top: 80px;
  }
  .alma .world-title h1 {
    font-size: 100px;
  }
  .flutter {
    font-size: 51px;
  }
  .butterfly-two {
    font-size: 36px;
  }
}
@media (max-width: 360px) {
  .wedding-gate .envelope {
    width: 255px;
    height: 177px;
  }
  .wedding-gate .wax-seal {
    top: 73px;
    transform: scale(0.85);
  }
  .wedding-gate .gate-title {
    font-size: 30px;
  }
  .envelope-letter > span {
    font-size: 20px;
  }
  .envelope-letter {
    padding-top: 15px;
  }
  .envelope-letter small {
    font-size: 6px;
  }
  .envelope-letter b {
    font-size: 6px;
  }
  .wedding-gate .gate-instruction {
    margin-top: 18px;
  }
  .gate-audio-button {
    min-height: 41px;
  }
  .eterna .cinema-hero h1 {
    font-size: 70px;
  }
  .world-title h1 {
    font-size: 66px;
  }
  .island-gate .gate-title {
    font-size: 31px;
  }
  .isla .island-hero h1 {
    font-size: 62px;
  }
  .isla .hero-dragon {
    height: 310px;
  }
  .isla .age-bubble {
    width: 105px;
    height: 123px;
  }
  .isla .age-bubble b {
    font-size: 43px;
  }
  .world-gate .gate-title {
    font-size: 32px;
  }
  .gate-kicker {
    max-width: 240px;
  }
  .world-gate-halo {
    width: 260px;
  }
  .aurora .world-title h1 {
    font-size: 90px;
  }
  .noche .world-title h1 {
    font-size: 94px;
  }
  .dulce .world-title h1 {
    font-size: 62px;
  }
  .countdown b {
    font-size: 44px;
  }
}
@media (max-height: 740px) {
  .invitation-gate {
    padding-top: 55px;
    padding-bottom: 18px;
  }
  .wedding-gate .gate-title {
    font-size: 29px;
    margin-bottom: 8px;
  }
  .wedding-gate .envelope {
    transform: scale(0.85);
    margin-top: 4px;
    margin-bottom: -10px;
  }
  .wedding-gate .gate-instruction {
    margin-top: 18px;
    margin-bottom: 8px;
  }
  .gate-audio-button {
    padding: 10px 20px;
    min-height: 39px;
  }
  .skip-intro {
    margin-top: 3px;
    padding: 7px;
  }
  .island-gate .gate-title {
    font-size: 31px;
    margin-bottom: 45px;
  }
  .island-gate .gift-box {
    height: 130px;
    transform: scale(0.85);
    margin-top: 8px;
  }
  .island-gate .gate-instruction {
    margin-top: 22px;
    font-size: 8px;
  }
  .world-gate .gate-title {
    font-size: 32px;
    margin-bottom: 25px;
  }
  .world-seal {
    height: 95px;
    width: 95px;
    margin-bottom: 22px;
  }
  .world-seal > span {
    font-size: 28px;
  }
  .world-seal > i {
    font-size: 26px;
  }
  .world-gate-halo {
    height: 400px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .scene:not(.hero-scene):not(.seen) > h2,
  .scene:not(.hero-scene):not(.seen) > p {
    opacity: 1;
    translate: none;
  }
  .opening.world-gate {
    opacity: 0;
  }
  .world-sparkles,
  .petals,
  .flutter {
    display: none;
  }
  .cinema-photo {
    animation: none;
  }
  .scene > p,
  .scene > h2 {
    transition: none;
  }
}