@font-face {
  font-family: "Dachi the Lynx";
  src: url("Dachi the Lynx.otf") format("opentype");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Alk Katerina";
  src: url("alk-katerina.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
}

:root {
  --bg-dark: #150d28;
  --bg-deep: #0f0820;
  --white: #ffffff;
  --pink: #ff2e92;
  --pink-soft: #ff5aa9;
  --text-soft: #c9bfe0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background-color: var(--bg-deep);
}

body {
  font-family: "Alk Katerina", sans-serif;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* Custom scrollbar */
body::-webkit-scrollbar {
  width: 9px;
}
body::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
body::-webkit-scrollbar-thumb {
  background: var(--pink);
  border-radius: 9px;
}
html {
  scrollbar-color: var(--pink) var(--bg-deep);
  scrollbar-width: thin;
}

/* ---------- Opening screen ---------- */
body.is-locked {
  overflow: hidden;
}

.opening {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, #20143a 0%, var(--bg-deep) 60%),
    var(--bg-dark);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.opening.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Exit animations on click */
.opening.is-leaving .opening__logo,
.opening.is-leaving .opening__btn {
  animation: openFadeOut 0.6s ease forwards;
}

.opening.is-leaving .opening__bottom {
  animation: bottomFadeDown 0.7s ease forwards;
}

@keyframes openFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes bottomFadeDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(70px);
  }
}

.opening__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6rem;
  padding: 130px 28px 40px;
}

.opening__logo {
  position: relative;
  z-index: 1;
  width: 180px;
  max-width: 60%;
  height: auto;
  opacity: 0;
  animation: openFadeUp 1s ease 0.2s forwards;
}

@keyframes openFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes openFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.opening__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(2px 2px at 78% 16%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2.5px 2.5px at 36% 78%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(2px 2px at 70% 10%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(2px 2px at 92% 78%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 22% 52%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(2.5px 2.5px at 58% 88%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 46% 30%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 62% 30%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 88% 38%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 18% 62%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 54% 58%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 84% 64%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 6% 32%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 34% 28%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 96% 52%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 64% 52%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 78% 84%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 14% 74%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 28% 42%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 22% 8%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 50% 22%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 56% 40%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 92% 22%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 26% 56%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 46% 70%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 32% 92%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 72% 94%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 4% 52%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 16% 38%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 40% 48%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 52% 8%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 66% 24%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 82% 46%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 98% 34%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 10% 64%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 30% 68%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 60% 64%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 88% 88%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 24% 84%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 50% 96%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 68% 78%, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0.5;
  animation: starsTwinkle 7s ease-in-out infinite;
}

@keyframes starsTwinkle {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.65;
  }
}

.opening__btn {
  position: relative;
  z-index: 1;
  font-family: "Alk Katerina", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--white);
  background: transparent;
  border: 1.5px solid var(--pink);
  border-radius: 40px;
  padding: 16px 44px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 46, 146, 0.25);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  opacity: 0;
  animation: openFade 0.9s ease 0.55s forwards,
    ctaPulse 2.2s ease-in-out 1.4s infinite;
}

.opening__btn:hover {
  background-color: var(--pink);
  box-shadow: 0 0 32px rgba(255, 46, 146, 0.5);
  animation-play-state: paused;
}

.opening__bottom {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
  line-height: 0;
  opacity: 0;
  transform: translateY(40px);
  animation: bottomFadeUp 1.2s ease 0.3s forwards;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.5) 70px,
    #000 150px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.5) 70px,
    #000 150px
  );
}

@keyframes bottomFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.opening__bottom img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, #20143a 0%, var(--bg-deep) 60%),
    var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
}

.hero__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  max-width: 380px;
  height: auto;
  pointer-events: none;
  transform: translate(38%, -38%);
  opacity: 0;
}

body.is-entered .hero__corner {
  animation: cornerIn 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes cornerIn {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  text-align: center;
  width: 100%;
  gap: 18px;
}

.hero__logo {
  width: 140px;
  max-width: 58%;
  height: auto;
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "Dachi the Lynx", serif;
  font-weight: 400;
  line-height: 1.02;
}

.hero__title-line {
  font-size: 30px;
  color: var(--white);
  letter-spacing: 1px;
}

.hero__title-line--accent {
  color: var(--pink);
}

/* ---------- Timetable ---------- */
.timetable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.timetable__heading {
  font-family: "Alk Katerina", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--pink);
  position: relative;
  padding-bottom: 7px;
}

.timetable__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 1.5px;
  background: var(--pink);
}

.timetable__list {
  list-style: none;
  position: relative;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-self: flex-start;
}

.timetable__list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  bottom: 7px;
  width: 1.5px;
  background: var(--pink);
  opacity: 0.45;
}

.timetable__row {
  position: relative;
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: baseline;
  gap: 12px;
}

.timetable__row::before {
  content: "";
  position: absolute;
  left: -21.5px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
}

.timetable__time {
  font-family: "Alk Katerina", sans-serif;
  font-size: 12px;
  color: var(--white);
  white-space: nowrap;
}

.timetable__desc {
  font-family: "Alk Katerina", sans-serif;
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ---------- Dress code ---------- */
.dresscode {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dresscode__icon {
  display: inline-flex;
  color: var(--pink);
}

.dresscode__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.dresscode__text {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 2px;
}

.dresscode__label {
  font-family: "Alk Katerina", sans-serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--pink);
}

.dresscode__note {
  font-family: "Alk Katerina", sans-serif;
  font-size: 14px;
  color: var(--text-soft);
}

.dresscode__strong {
  /* color: var(--white); */
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Alk Katerina", sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--white);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--pink);
  border-radius: 40px;
  padding: 17px 30px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 46, 146, 0.25);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  animation: ctaPulse 2.2s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 46, 146, 0.2);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 34px rgba(255, 46, 146, 0.55);
  }
}

.hero__cta:hover {
  background-color: var(--pink);
  box-shadow: 0 0 32px rgba(255, 46, 146, 0.5);
  animation-play-state: paused;
}

.hero__cta-icon {
  display: inline-flex;
  color: var(--pink);
  transition: color 0.3s ease;
}

.hero__cta:hover .hero__cta-icon {
  color: var(--white);
}

.hero__cta-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Scale up as the viewport gets taller (mobile-first by height) */
@media (min-height: 600px) {
  .hero {
    padding: 26px 28px;
  }
  .hero__inner {
    justify-content: center;
    gap: 34px;
  }
  .hero__logo {
    width: 160px;
  }
  .hero__title-line {
    font-size: 36px;
  }
  .timetable__time,
  .timetable__desc {
    font-size: 13px;
  }
}

@media (min-height: 760px) {
  .hero {
    padding: 34px 28px;
  }
  .hero__inner {
    gap: 46px;
  }
  .hero__logo {
    width: 180px;
  }
  .hero__title-line {
    font-size: 42px;
  }
  .timetable {
    gap: 16px;
  }
  .timetable__list {
    gap: 12px;
  }
}

/* ---------- RSVP ---------- */
.rsvp {
  position: relative;
  min-height: calc(var(--vh) * 50);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #20143a 0%, var(--bg-deep) 60%),
    var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 28px;
}

.rsvp__corner {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 46%;
  max-width: 170px;
  height: auto;
  transform: rotate(180deg);
  opacity: 0.6;
  pointer-events: none;
}

.rsvp__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 44px 30px 40px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(40, 24, 64, 0.85), rgba(20, 12, 34, 0.9));
  border: 1px solid rgba(255, 46, 146, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 50px rgba(255, 46, 146, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.rsvp__card > :not(.rsvp__corner) {
  position: relative;
  z-index: 1;
}

.rsvp__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
}

.rsvp__eyebrow {
  font-family: "Alk Katerina", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--pink);
}

.rsvp__title {
  font-family: "Dachi the Lynx", serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--white);
  margin-top: -6px;
}

.rsvp__divider {
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
  opacity: 0.7;
}

.rsvp__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.rsvp__input {
  width: 100%;
  font-family: "Alk Katerina", sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--white);
  background: rgba(20, 12, 34, 0.55);
  border: 1.5px solid rgba(255, 46, 146, 0.35);
  border-radius: 14px;
  padding: 13px 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.rsvp__input::placeholder {
  color: var(--text-soft);
  opacity: 0.7;
}

.rsvp__input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 18px rgba(255, 46, 146, 0.3);
}

.rsvp__options {
  display: flex;
  gap: 16px;
  width: 100%;
}

.rsvp__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Alk Katerina", sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 13px 18px;
  border-radius: 14px;
  cursor: pointer;
  border: 1.5px solid var(--pink);
  transition: background-color 0.3s ease, color 0.3s ease,
    box-shadow 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
}

.rsvp__btn-icon {
  display: inline-flex;
}

.rsvp__btn-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.rsvp__btn--yes {
  color: var(--white);
  background: transparent;
}

.rsvp__btn--no {
  color: var(--white);
  background: transparent;
}

.rsvp__btn:hover {
  transform: translateY(-2px);
}

.rsvp__btn--yes:hover {
  background: rgba(255, 46, 146, 0.12);
}

.rsvp__btn--no:hover {
  background: rgba(255, 46, 146, 0.12);
}

.rsvp__options.is-sending {
  opacity: 0.6;
  pointer-events: none;
}

.rsvp__options.is-answered .rsvp__btn {
  cursor: default;
  transform: none;
}

.rsvp__options.is-answered .rsvp__btn:not(.is-selected) {
  opacity: 0.35;
  box-shadow: none;
}

.rsvp__btn.is-selected {
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 0 30px rgba(255, 46, 146, 0.5);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  max-width: 86%;
  text-align: center;
  font-family: "Alk Katerina", sans-serif;
  font-size: 13px;
  color: var(--white);
  background: rgba(20, 12, 34, 0.96);
  border: 1px solid rgba(255, 46, 146, 0.5);
  border-radius: 40px;
  padding: 13px 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(255, 46, 146, 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Map ---------- */
.map {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 28px 60px;
}

.map__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 40px 26px 34px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(40, 24, 64, 0.85), rgba(20, 12, 34, 0.9));
  border: 1px solid rgba(255, 46, 146, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 50px rgba(255, 46, 146, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.map__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
}

.map__eyebrow {
  font-family: "Alk Katerina", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--pink);
}

.map__title {
  font-family: "Dachi the Lynx", serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--white);
  margin-top: -6px;
}

.map__divider {
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
  opacity: 0.7;
}

.map__frame {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 46, 146, 0.3);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 46, 146, 0.1);
}

.map__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(0.95)
    contrast(1.05);
}

.map__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  cursor: pointer;
}

.map__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Alk Katerina", sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--white);
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 14px;
  background: var(--pink);
  box-shadow: 0 0 24px rgba(255, 46, 146, 0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.map__btn-icon {
  display: inline-flex;
}

.map__btn-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.map__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(255, 46, 146, 0.55);
}

/* ---------- Register ---------- */
.register {
  position: relative;
  background-color: var(--bg-deep);
  padding: 64px 28px 0px;
}

.register__inner {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.register__eyebrow {
  align-self: center;
  font-family: "Alk Katerina", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--pink);
}

.register__title {
  align-self: center;
  font-family: "Dachi the Lynx", serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--pink);
  margin-top: 6px;
}

.register__lead {
  font-family: "Alk Katerina", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
  text-align: center;
  margin-top: 18px;
}

.register__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
}

.register__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.register__step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--pink);
  color: var(--pink);
  font-family: "Alk Katerina", sans-serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 0 16px rgba(255, 46, 146, 0.22);
}

.register__step-text {
  font-family: "Alk Katerina", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
  padding-top: 4px;
}

.register__block {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.register__label {
  font-family: "Alk Katerina", sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--pink);
}

.register__text {
  font-family: "Alk Katerina", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
}

.register__notice {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 46, 146, 0.3);
  background: rgba(255, 46, 146, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.register__notice-title {
  font-family: "Alk Katerina", sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--pink);
}

/* ---------- Bottom design ---------- */
.bottom-design {
  width: 100%;
  line-height: 0;
  background-color: var(--bg-deep);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.5) 70px,
    #000 150px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.5) 70px,
    #000 150px
  );
}

.bottom-design img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--bg-deep);
  display: flex;
  justify-content: center;
  padding: 22px 28px 26px;
}

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.footer__credit:hover {
  opacity: 0.85;
}

.footer__logo {
  width: 20px;
  height: 20px;
  background-color: #ff2e92;
  -webkit-mask: url("logo-vector.svg") center / contain no-repeat;
  mask: url("logo-vector.svg") center / contain no-repeat;
}

.footer__text {
  font-family: "Alk Katerina", sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #ff2e92;
}

/* ---------- Desktop notice ---------- */
.mobile-prompt {
  display: none;
}

@media (min-width: 769px) {
  .mobile-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-deep);
  }

  .mobile-prompt__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 32px;
  }

  .mobile-prompt__logo {
    width: 52px;
    height: 52px;
    opacity: 0.8;
    background-color: #ff2e92;
    -webkit-mask: url("logo-vector.svg") center / contain no-repeat;
    mask: url("logo-vector.svg") center / contain no-repeat;
  }

  .mobile-prompt__text {
    font-family: "Alk Katerina", sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--text-soft);
    max-width: 320px;
    line-height: 1.5;
  }
}


/* ===========================================================================
   Viewport pin + loading screen
   ---------------------------------------------------------------------------
   Shared across every Weddsite template; only the palette below is per design.

   --vh is written by the inline script in <head> and re-measured on width
   changes only, so Instagram's and Messenger's sliding nav bar cannot resize
   the layout. `vh`, `svh`, `lvh` and `dvh` all move with it, which is why the
   pin has to come from JS. The 100vh/100svh floors stay as the no-JS fallback
   and MUST be declared before the .vh-lock rule that overrides them.

   The loader exists so `font-display: block` is safe: the block period is spent
   behind the spinner instead of on an invisible page. It also holds the entry
   animation (via .is-loading) so the intro is not played out behind it.
   =========================================================================== */

:root {
    --vh: 1vh;
}

html {
    overscroll-behavior-y: none;
}

.vh-lock .hero {
    min-height: calc(var(--vh) * 100);
}

/* Entry animations must not play out behind the spinner - a guest who uncovers a
   finished, static scene has been shown nothing. `is-loading` is set by the
   inline script in <head> before first paint and removed on reveal, so a paused
   animation resumes from frame zero exactly when the guest can first see it.
   The spinner itself is excluded, and with JS off the class never lands. */
.is-loading body *:not(.loader):not(.loader__spinner) {
    animation-play-state: paused !important;
}

.loader {
    position: fixed;
    inset: 0;
    /* Out-ranks every entry overlay (envelopes / curtains / clouds live at 9999+). */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #150d28;
    opacity: 1;
    transition: opacity 0.55s ease;
}

.loader.is-hidden {
    opacity: 0;
}

.loader.is-gone {
    display: none;
}

.loader__spinner {
    display: block;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 46, 146, 0.25);
    border-top-color: #ff2e92;
    border-radius: 50%;
    animation: loader-spin 0.9s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}