@font-face {
  font-family: "Gros Ventre";
  src: url("../example_party/Gros Ventre Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gros Ventre";
  src: url("../example_party/Gros Ventre Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Yazo";
  src: url("../example_party/Yazo.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --party-blue: #006efe;
  --party-pink: #ff0064;
  --party-yellow: #fedf35;
  --party-white: #fefffd;
  --party-field: #e3e7ed;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--party-blue);
}

body.party-body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background-color: var(--party-blue);
  color: var(--party-white);
  font-family: "Gros Ventre", Arial, sans-serif;
}

.party-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 1904;
  min-height: 900px;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--party-blue);
  background-image: url("../example_party/Frame 80.svg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.party-stage img {
  display: block;
  user-select: none;
}

.party-hero,
.party-intro,
.party-details,
.party-rsvp,
.party-footer {
  position: absolute;
}

.party-hero {
  inset: 0 0 auto;
  height: 18%;
}

.party-title-art {
  width: 100%;
  height: auto;
}

.party-date-art {
  position: absolute;
  top: 79.5%;
  left: 50%;
  width: 56.25%;
  transform: translateX(-50%);
}

.party-top-decor {
  position: absolute;
  z-index: 0;
  top: 17.5%;
  left: 0;
  width: 100%;
}

.party-intro {
  z-index: 2;
  top: 24.2%;
  left: 50%;
  width: 54%;
  transform: translateX(-50%);
  text-align: center;
}

.party-intro p {
  margin: 0;
  font-size: clamp(18px, 2vw, 29px);
  line-height: 1.16;
}

.party-intro span {
  display: inline-block;
  margin-top: .75%;
  padding: .15em .55em .24em;
  border-radius: 999px;
  background: var(--party-white);
  color: var(--party-blue);
  font-size: clamp(12px, 1.15vw, 17px);
  font-weight: 700;
}

.party-details {
  z-index: 2;
  inset: 36.5% 0 auto;
  height: 24%;
}

.party-house {
  position: absolute;
  top: 2%;
  left: 6.3%;
  width: 44.65%;
}

.party-sun {
  position: absolute;
  z-index: 2;
  top: -14%;
  left: .5%;
  width: 21.2%;
}

.party-description {
  position: absolute;
  top: 13%;
  left: 51.6%;
  width: 28.5%;
  margin: 0;
  font-size: clamp(19px, 2.05vw, 30px);
  line-height: 1.12;
}

.party-bottle {
  position: absolute;
  top: 20%;
  right: 3.4%;
  width: 18%;
}

.party-rsvp {
  z-index: 3;
  inset: 62.8% 0 auto;
  height: 17%;
}

.party-rsvp h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(28px, 2.65vw, 40px);
  line-height: 1;
  font-weight: 700;
}

.party-form {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 34%;
  transform: translateX(-50%);
}

.party-form label,
.party-form-row {
  display: block;
}

.party-form label > span {
  display: block;
  margin: 0 0 .1em .15em;
  font-size: clamp(12px, 1.05vw, 16px);
  line-height: 1;
}

.party-form input,
.party-form button {
  width: 100%;
  height: clamp(38px, 3.2vw, 47px);
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: clamp(20px, 2.05vw, 30px);
  line-height: 1;
}

.party-form input {
  margin: 0 0 7px;
  padding: .14em .45em .22em;
  outline: 0;
  background: var(--party-field);
  color: var(--party-blue);
}

.party-form input::placeholder {
  color: var(--party-blue);
  opacity: 1;
}

.party-form input:focus-visible {
  box-shadow: 0 0 0 4px var(--party-yellow);
}

.party-form-row {
  display: grid;
  grid-template-columns: 18% 1fr;
  align-items: end;
  gap: 5%;
}

.party-form-row > label,
.party-form-row > button {
  align-self: end;
}

.party-form-row input {
  margin-bottom: 0;
  text-align: center;
}

.party-form button {
  cursor: pointer;
  background: var(--party-pink);
  color: var(--party-white);
  transition: transform 160ms ease, filter 160ms ease;
}

.party-form button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.party-form button:focus-visible {
  outline: 4px solid var(--party-yellow);
  outline-offset: 3px;
}

.party-form-status {
  min-height: 1em;
  margin: .35em 0 0;
  color: var(--party-yellow);
  text-align: center;
  font-size: 14px;
}

.party-counter {
  position: absolute;
  top: 27%;
  text-align: center;
  color: var(--party-white);
}

.party-counter > span {
  display: block;
  font-family: "Gros Ventre", sans-serif;
  font-size: clamp(20px, 2.22vw, 32px);
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.02em;
}

.party-counter--left {
  left: 8.5%;
  width: 16%;
}

.party-countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 .12em;
  margin-top: .2em;
  color: var(--party-yellow);
  font-family: "Yazo", "Gros Ventre", sans-serif;
  font-size: clamp(38px, 4.17vw, 60px);
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.party-countdown b {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  width: auto;
  white-space: nowrap;
  font-weight: 400;
}

.party-countdown b:first-child {
  flex-basis: 100%;
}

.party-countdown em,
.party-counter--right strong {
  font-family: "Yazo", "Gros Ventre", sans-serif;
  font-style: normal;
  font-size: clamp(38px, 4.17vw, 60px);
  line-height: .8;
  letter-spacing: -.02em;
  font-weight: 400;
}

.party-countdown small {
  margin-left: .08em;
  font-family: "Yazo", "Gros Ventre", sans-serif;
  font-size: 1em;
  line-height: .8;
  letter-spacing: -.02em;
  font-weight: 400;
}

.party-counter--right {
  top: 31%;
  right: 9%;
  width: 16%;
}

.party-counter--right strong {
  display: block;
  margin-top: .25em;
  color: var(--party-yellow);
  white-space: nowrap;
  text-transform: uppercase;
}

.party-footer {
  inset: auto 0 0;
  width: 100%;
}

.party-footer img {
  width: 100%;
}

/* Opening scene */
.party-motion:not(.party-is-ready) .party-title-art,
.party-motion:not(.party-is-ready) .party-date-art,
.party-motion:not(.party-is-ready) .party-top-decor,
.party-motion:not(.party-is-ready) .party-intro,
.party-motion:not(.party-is-ready) .party-house,
.party-motion:not(.party-is-ready) .party-sun,
.party-motion:not(.party-is-ready) .party-description,
.party-motion:not(.party-is-ready) .party-bottle,
.party-motion:not(.party-is-ready) .party-rsvp h1,
.party-motion:not(.party-is-ready) .party-counter,
.party-motion:not(.party-is-ready) .party-form,
.party-motion:not(.party-is-ready) .party-footer {
  opacity: 0;
}

.party-motion.party-is-ready .party-title-art {
  animation: party-reveal-down .9s .06s cubic-bezier(.2, .8, .2, 1) both;
}

.party-motion.party-is-ready .party-date-art {
  animation: party-reveal-up .78s .25s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-top-decor {
  animation:
    party-reveal-scale .9s .42s cubic-bezier(.16, 1, .3, 1) both,
    party-water-drift 7s 1.5s ease-in-out infinite;
}

.party-motion.party-is-ready .party-intro {
  animation: party-reveal-up .82s .53s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-house {
  animation: party-reveal-photo 1s .7s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-sun {
  animation:
    party-reveal-left .85s .83s cubic-bezier(.16, 1, .3, 1) both,
    party-sun-float 5.6s 1.8s ease-in-out infinite;
}

.party-motion.party-is-ready .party-description {
  animation: party-reveal-up .85s .9s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-bottle {
  animation:
    party-reveal-right .85s 1s cubic-bezier(.16, 1, .3, 1) both,
    party-bottle-float 5s 1.95s ease-in-out infinite;
}

.party-motion.party-is-ready .party-rsvp h1 {
  animation: party-reveal-up .78s 1.08s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-counter--left {
  animation: party-reveal-left .8s 1.18s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-form {
  animation: party-reveal-up .85s 1.28s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-counter--right {
  animation: party-reveal-right .8s 1.38s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-footer {
  animation: party-reveal-up .9s 1.45s cubic-bezier(.16, 1, .3, 1) both;
}

.party-motion.party-is-ready .party-form button {
  animation: party-button-glow 1.15s 2s ease-out both;
}

@keyframes party-reveal-down {
  from {
    opacity: 0;
    translate: 0 -24px;
    scale: .985;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes party-reveal-up {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: .985;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes party-reveal-scale {
  from {
    opacity: 0;
    scale: .94;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes party-reveal-photo {
  from {
    opacity: 0;
    translate: 0 18px;
    scale: .965;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes party-reveal-left {
  from {
    opacity: 0;
    translate: -28px 10px;
    rotate: -3deg;
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}

@keyframes party-reveal-right {
  from {
    opacity: 0;
    translate: 28px 10px;
    rotate: 3deg;
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}

@keyframes party-water-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes party-sun-float {
  0%, 100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -8px;
    rotate: -2deg;
  }
}

@keyframes party-bottle-float {
  0%, 100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -7px;
    rotate: 2deg;
  }
}

@keyframes party-button-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 0, 100, 0); }
  45% { box-shadow: 0 0 0 8px rgba(255, 0, 100, .18); }
}

@media (max-width: 700px) {
  .party-stage {
    width: 100%;
    min-height: 215.6vw;
    aspect-ratio: auto;
  }

  .party-hero {
    height: 41.04vw;
  }

  .party-title-art {
    position: absolute;
    top: 12.94vw;
    left: 0;
    width: 100%;
    max-width: none;
  }

  .party-date-art {
    top: 34.58vw;
    width: 74%;
  }

  .party-top-decor {
    top: 39.05vw;
    left: 0;
    width: 100%;
    max-width: none;
  }

  .party-intro {
    top: 49vw;
    width: 76%;
  }

  .party-intro p {
    font-size: 2.99vw;
    line-height: 1.08;
  }

  .party-intro span {
    margin-top: 1vw;
    font-size: 1.99vw;
  }

  .party-details {
    inset: 70.15vw 0 auto;
    height: 76.37vw;
  }

  .party-house {
    top: 0;
    left: 8.2%;
    width: 83.6%;
  }

  .party-sun {
    top: -9.2vw;
    left: -2.5%;
    width: 39%;
  }

  .party-description {
    top: 58.46vw;
    left: 11.5%;
    width: 77%;
    text-align: center;
    font-size: 2.99vw;
    line-height: 1.08;
  }

  .party-bottle {
    top: 58.96vw;
    right: -3%;
    width: 25%;
  }

  .party-rsvp {
    inset: 151.24vw 0 auto;
    height: 67.16vw;
  }

  .party-rsvp h1 {
    font-size: 4.98vw;
  }

  .party-form {
    top: 8.96vw;
    width: 49%;
  }

  .party-form label > span {
    font-size: 1.99vw;
  }

  .party-form input,
  .party-form button {
    height: 7.46vw;
    border-radius: 1.99vw;
    font-size: 3.23vw;
  }

  .party-form input {
    margin-bottom: 1.24vw;
    padding-inline: 2.24vw;
  }

  .party-form-row {
    display: grid;
    grid-template-columns: 15% 1fr;
    gap: 6%;
  }

  .party-form-row input {
    margin-bottom: 0;
    padding: 0;
  }

  .party-form-status {
    margin-top: 1vw;
    font-size: 2.24vw;
  }

  .party-counter {
    top: 11.19vw;
  }

  .party-counter > span {
    font-size: 3.36vw;
  }

  .party-counter--left {
    left: 2.5%;
    width: 21%;
  }

  .party-countdown {
    gap: 0;
  }

  .party-countdown em,
  .party-counter--right strong {
    font-size: 9.41vw;
  }

  .party-countdown small {
    font-size: 1em;
  }

  .party-counter--right {
    top: 11.19vw;
    right: 2.5%;
    width: 21%;
  }

  .party-counter--right strong {
    margin-top: .16em;
  }

  .party-footer {
    top: 194.03vw;
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .party-motion *,
  .party-motion *::before,
  .party-motion *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
}