@font-face {
  font-family: 'Party Display';
  src: url('assets/fonts/party-display.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.party-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 850px;
  height: 100svh;
  max-height: 1150px;
  background: #fff8e9;
  color: var(--wine);
}
.party-cover__sunlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(130deg, transparent 8%, #f3dfb83d 8.5%, transparent 13%, transparent 21%, #e7d0a233 21.5%, transparent 26%),
    radial-gradient(ellipse at 38% 30%, #fffdf5 5%, #fff8e9 67%, #f9e9cb 100%);
  pointer-events: none;
}
.party-photo {
  position: absolute;
  z-index: 0;
  right: -1%;
  bottom: -4%;
  width: auto;
  aspect-ratio: 2 / 3;
  height: 105%;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 24%, #000 95%, transparent);
}
.party-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.party-title-block { position: absolute; z-index: 3; top: 15%; left: 6.5%; width: 55%; }
.party-kicker {
  display: inline-flex;
  margin: 0 0 27px;
  border: 1px solid currentColor;
  border-radius: 40px;
  padding: 10px 25px;
  font-size: 14px;
  letter-spacing: 5px;
  background: #fffaf1b3;
}
.party-headline { margin: 0; font: 400 clamp(85px, 8vw, 130px)/1.04 'Party Display', var(--sans); letter-spacing: -.055em; rotate: -4deg; }
.party-headline > span { display: block; }
.party-headline > span:last-child { white-space: nowrap; }
.party-headline b { font-weight: 400; }
.party-doodle { width: 78%; max-width: 520px; height: 45px; overflow: visible; margin-top: 3px; }
.party-doodle path { stroke: var(--wine); stroke-width: 3; fill: none; stroke-linecap: round; }
.party-doodle path:last-child { stroke: var(--blue); stroke-width: 4; }
.party-date {
  position: absolute;
  z-index: 4;
  right: 5%;
  top: 38%;
  width: 130px;
  min-height: 118px;
  padding: 15px 10px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  background: #ffdb54;
  color: #b82b22;
  border-radius: 50%;
  rotate: -12deg;
  font-family: var(--serif);
  box-shadow: 0 6px 15px #c79b3721;
}
.party-date > span { font-size: 30px; }
.party-date > strong { font-size: 32px; }
.party-date > i { width: 28px; height: 1px; background: currentColor; }
.party-decorations, .party-confetti { position: absolute; inset: 0; pointer-events: none; }
.party-decorations { z-index: 2; }
.party-balloon { position: absolute; width: 210px; height: auto; overflow: visible; animation: party-balloon-sway 7s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.party-balloon--heart { right: -5%; top: -6%; width: 315px; }
.party-balloon--cream { left: -5%; top: 50%; width: 150px; animation-delay: -4s; }
@keyframes party-balloon-sway { from { transform: translateY(5px) rotate(-3deg); } to { transform: translateY(-9px) rotate(3deg); } }
.party-cover__footer { position: absolute; z-index: 5; left: 7%; bottom: 7%; width: min(40%, 520px); text-align: center; }
.party-names { margin: 0; font: 42px/1.25 var(--serif); letter-spacing: 5px; color: #ca352a; }
.party-names > span { font-size: .7em; margin: 0 7px; }
.party-names::after { content: '♡'; display: block; font: 17px/1 Arial, sans-serif; margin-top: 9px; }
.party-caption { font-size: 12px; letter-spacing: 3px; margin: 13px 0 22px; }
.party-cta { display: flex; justify-content: center; gap: 18px; width: 100%; min-height: 62px; border: 0; border-radius: 60px; background: #e53e2f; color: #fffaf0; box-shadow: 0 8px 0 #f9d7a0, 0 15px 25px #c86b201a; font: 23px var(--serif); letter-spacing: 3px; }
.party-cta:hover { background: #ca3226; }
.party-shortcuts { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 15px 2px 0; }
.party-shortcuts button, .party-shortcuts a { padding: 7px 2px; border: 0; background: none; color: #a83429; font-size: 10px; letter-spacing: 1px; }
.party-shortcuts button { display: flex; gap: 6px; align-items: center; }
.party-scroll { display: inline-block; margin-top: 8px; padding: 6px; font-size: 9px; letter-spacing: 2px; }
.party-confetti { z-index: 4; overflow: hidden; }
.party-paper { position: absolute; top: -24px; width: var(--paper-size, 7px); height: calc(var(--paper-size, 7px) * 1.4); background: var(--paper-color, #eb4d39); border-radius: 1px; opacity: 0; animation: party-paper-fall var(--paper-duration, 14s) var(--paper-delay, 0s) linear infinite; }
.party-paper:nth-child(3n) { border-radius: 50%; }
.party-paper--once { animation-iteration-count: 1; }
@keyframes party-paper-fall {
  0% { opacity: 0; transform: translate3d(0, -25px, 0) rotate(0); }
  8% { opacity: .7; }
  50% { transform: translate3d(var(--paper-drift, 40px), 52vh, 0) rotate(160deg) rotateY(130deg); }
  90% { opacity: .65; }
  100% { opacity: 0; transform: translate3d(calc(var(--paper-drift, 40px) * -.4), 115vh, 0) rotate(330deg) rotateY(260deg); }
}
.party-intro .party-title-block { animation: party-title-arrive .75s .12s cubic-bezier(.2,.7,.2,1) both; }
.party-intro .party-photo { animation: party-photo-arrive 1s ease-out both; }
@keyframes party-title-arrive { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes party-photo-arrive { from { opacity: 0; } to { opacity: 1; } }
.party-cover.is-still .party-paper, .party-cover.is-still .party-balloon { animation-play-state: paused; }
.party-celebration { position: fixed; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
@media (min-width: 1800px) {
  .party-title-block { left: max(6.5%, calc((100vw - 1500px) / 2)); }
  .party-photo { right: max(1%, calc((100vw - 1660px) / 2)); }
  .party-cover__footer { left: max(7%, calc((100vw - 1480px) / 2)); }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .party-title-block { left: 5%; top: 16%; }
  .party-headline { font-size: 10vw; }
  .party-photo { right: -9%; }
  .party-cover__footer { left: 5%; width: 42%; }
  .party-caption { font-size: 10px; letter-spacing: 1px; }
  .party-cta { font-size: 19px; }
}
@media (max-width: 760px) {
  .party-cover { height: 100svh; min-height: 815px; max-height: 1000px; }
  .party-photo { top: 172px; bottom: auto; left: 50%; right: auto; width: min(90%, 400px); height: auto; aspect-ratio: auto; transform: translateX(-50%); mask-image: linear-gradient(to bottom, transparent 0%, #000 2%, #000 91%, transparent 100%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
  .party-photo img { height: auto; width: 100%; }
  .party-title-block { top: 60px; left: 7%; width: 87%; }
  .party-kicker { margin-bottom: 6px; font-size: 9px; letter-spacing: 3px; padding: 5px 13px; }
  .party-headline { font-size: clamp(52px, 18.5vw, 75px); line-height: .87; letter-spacing: -.04em; }
  .party-doodle { height: 14px; width: 84%; margin-top: 0; }
  .party-doodle path { stroke-width: 2.5; }
  .party-date { right: 3%; top: 32%; width: 82px; min-height: 75px; padding: 8px 4px; gap: 3px; }
  .party-date > span { font-size: 20px; }
  .party-date > strong { font-size: 23px; }
  .party-date > i { width: 21px; }
  .party-balloon--heart { top: -29px; right: -110px; width: 245px; }
  .party-balloon--cream { top: 39%; left: -64px; width: 102px; }
  .party-cover__footer { left: 7%; bottom: 15px; width: 86%; }
  .party-names { font-size: 33px; line-height: 1.15; letter-spacing: 3px; }
  .party-names::after { content: none; }
  .party-caption { font-size: 10px; letter-spacing: 1px; margin: 6px 0 11px; }
  .party-cta { min-height: 51px; font-size: 20px; padding: 13px 18px; letter-spacing: 2px; box-shadow: 0 5px 0 #f8dda9, 0 10px 20px #d2771214; }
  .party-shortcuts { margin-top: 10px; }
  .party-shortcuts button, .party-shortcuts a { font-size: 9px; padding: 5px 1px; }
  .party-scroll { font-size: 8px; margin-top: 0; padding: 2px; }
}
@media (max-width: 360px) {
  .party-cover { min-height: 735px; }
  .party-photo { top: 164px; width: 92%; }
  .party-title-block { left: 6%; }
  .party-headline { font-size: 56px; }
  .party-date { top: 33%; right: 2%; width: 72px; min-height: 67px; }
  .party-date > span { font-size: 18px; }
  .party-date > strong { font-size: 20px; }
  .party-cover__footer { left: 6%; width: 88%; bottom: 13px; }
  .party-names { font-size: 29px; }
  .party-cta { min-height: 48px; font-size: 18px; }
  .party-caption { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .party-balloon, .party-paper, .party-intro .party-title-block, .party-intro .party-photo { animation: none !important; }
  .party-confetti, .party-celebration { display: none; }
}