.love-intro {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 4rem);
  background: #f3f1eb;
  color: #11110f;
  isolation: isolate;
  transition: clip-path 1s cubic-bezier(.76, 0, .24, 1), visibility 1s;
  clip-path: inset(0);
}

.love-seen .love-intro { display: none; }

.love-intro::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 90, 54, .15), transparent 44%);
  content: "";
}

.love-intro__heart {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  color: #ff5a36;
  font-family: Georgia, serif;
  font-size: min(100vw, 92vh);
  line-height: .7;
  opacity: .065;
  transform: translate(-50%, -48%);
  animation: love-breathe 3.2s ease-in-out infinite;
}

.love-intro__inner {
  width: min(100%, 1260px);
  text-align: center;
}

.love-intro__eyebrow {
  margin: 0 0 clamp(1.75rem, 4vw, 3.5rem);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.love-intro h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.1rem, 8.6vw, 9.4rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.055em;
}

.love-intro h1 em { color: #ff5a36; font-weight: 400; }

.love-intro__actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 30rem);
  min-height: 6rem;
  margin: clamp(2.75rem, 6vw, 5rem) auto 0;
}

.love-intro button {
  border: 1px solid #11110f;
  border-radius: 999px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.love-intro__yes {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-width: 11rem;
  min-height: 4rem;
  padding: 1rem 1.6rem;
  background: #ff5a36;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .35s;
}

.love-intro__yes:hover, .love-intro__yes:focus-visible { background: #ff7254; transform: scale(1.045); }
.love-intro__yes span { font-size: 1rem; }

.love-intro__no {
  position: absolute;
  top: 1rem;
  right: 0;
  min-width: 7rem;
  min-height: 4rem;
  padding: 1rem 1.4rem;
  background: transparent;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.love-intro__answer {
  margin: 1.5rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}

.love-intro.is-accepted .love-intro__actions { opacity: 0; pointer-events: none; transition: opacity .35s; }
.love-intro.is-accepted .love-intro__answer { opacity: 1; transform: none; }
.love-intro.is-leaving { visibility: hidden; clip-path: inset(0 0 100% 0); }

@keyframes love-breathe {
  50% { transform: translate(-50%, -48%) scale(1.035); }
}

@media (max-width: 600px) {
  .love-intro h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); line-height: .94; }
  .love-intro__actions { width: 100%; min-height: 10rem; }
  .love-intro__yes { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
  .love-intro__yes:hover, .love-intro__yes:focus-visible { transform: translateX(-50%) scale(1.045); }
  .love-intro__no { top: 6rem; right: 50%; transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .love-intro__heart { animation: none; }
  .love-intro, .love-intro__answer, .love-intro__no, .love-intro__yes { transition-duration: .01ms; }
}