@font-face {
  font-family: "PP Rader";
  src: url("assets/fonts/PPRader-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "PP Rader";
  src: url("assets/fonts/PPRader-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Bamini";
  src: url("assets/fonts/BAMINI-Tamil12.ttf") format("truetype");
  font-display: block;
}

:root {
  --red: #9b1d14;
  --red-dark: #5c0602;
  --lavender: #c7d1ff;
  --lavender-dim: rgb(199 209 255 / 0.62);
  --line: rgb(199 209 255 / 0.28);
  --cream: #f9f7da;
  --ink: #eceefa;
  --ink-dim: rgb(236 238 250 / 0.62);
  --yellow: #fee62e;
  --nav-h: 56px;
  --pad: 20px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--red-dark);
  color: var(--ink);
  font-family: "PP Rader", sans-serif;
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
img { display: block; }
em { font-style: italic; }
button, input, textarea { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::selection { background: var(--lavender); color: var(--red); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---------- Text reveal: each line rises into place ---------- */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.1em 0.14em 0;
  margin: 0 -0.1em -0.14em 0;
}
.w__i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease) var(--d, 0s);
}
.revealed .w__i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .w__i { transform: none; transition: none; }
}

/* ---------- Loader ---------- */
/* Sizes follow the Figma frame, where the phone is 393 units wide. */
.loader {
  --u: min(min(100vw, 480px) / 393, 100dvh / 720);
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #e63e2e url("assets/img/backdrop.jpg") center / cover no-repeat;
  color: #ffc7c7;
}
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.loader__tamil { width: calc(371 * var(--u)); margin: 0 0 calc(42.6 * var(--u)); }
.bamini { font-family: "Bamini", serif; font-size: calc(18 * var(--u)); line-height: 1.21; }
.loader__photo {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(235 * var(--u));
  height: calc(352.5 * var(--u));
}
.loader__trees { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loader__mark {
  position: relative;
  width: calc(50 * var(--u));
  height: auto;
  animation: spin 3.2s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.loader__en {
  width: calc(337.4 * var(--u));
  margin: calc(15.1 * var(--u)) 0 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: calc(13.8 * var(--u));
  line-height: 1.39;
}
.loader__skip {
  position: absolute;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 12px 14px;
  background: none;
  border: 0;
  color: #ffc7c7;
  font-size: 15px;
  cursor: pointer;
}
.loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader.is-dissolving > :not(canvas) { visibility: hidden; }
.loader.is-dissolving { background: transparent; pointer-events: none; }

/* ---------- App shell ---------- */
.app {
  position: relative;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--red);
}

.nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: grid;
  grid-template-columns: var(--nav-h) 1fr 1fr;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgb(70 4 2 / 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav a {
  display: grid;
  place-items: center;
  color: var(--lavender);
  text-decoration: none;
  font-size: 17px;
  transition: background 0.25s, color 0.25s;
}
.nav a + a { border-left: 1px solid var(--line); }
.nav__home img { width: 30px; transition: rotate 0.6s var(--ease); }
.nav__home:hover img { rotate: 90deg; }
.nav a[aria-current="page"] { background: var(--lavender); color: var(--red); }
.nav a.nav__home[aria-current="page"] { background: transparent; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + var(--pad)) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.screen.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* ---------- Home ---------- */
.screen--home {
  padding-bottom: 0;
  background: var(--red-dark) url("assets/img/backdrop.jpg") center / cover no-repeat;
  color: var(--lavender);
}
.home__type {
  flex: 1;
  display: grid;
  align-content: center;
  font-size: min(calc((100vw - 2 * var(--pad)) / 6.3), 8.4dvh, 68px);
  line-height: 0.88;
  text-transform: uppercase;
}
.home__names, .home__date {
  grid-area: 1 / 1;
  margin: 0;
  font-weight: 400;
  font-size: 1em;
}
.home__date { justify-self: end; text-align: right; padding-top: 2.74em; color: #ffcfcc; }
.venue {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
}
.venue__label { margin: 0 0 2px; color: var(--lavender-dim); font-size: 13px; }
.venue__name { margin: 0; color: var(--lavender); font-size: 17px; line-height: 1.3; }
.venue__go {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  color: var(--lavender);
  text-decoration: none;
  font-size: 16px;
  transition: border-color 0.25s, background 0.25s;
}
.venue__go:hover { border-color: var(--lavender); background: rgb(199 209 255 / 0.08); }
.venue--events { flex: none; margin: 0; padding-top: 14px; }
.home__foot { margin: 0 calc(var(--pad) * -1); }

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--pad);
  background: var(--lavender);
  color: var(--red);
  text-decoration: none;
  font-size: 26px;
  transition: background 0.25s;
}
.cta:hover { background: var(--cream); }
.cta__by { font-size: 16px; }

.marquee {
  overflow: hidden;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--red);
  color: var(--lavender);
  font-size: 17px;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
  animation: marquee 16s linear infinite;
}
.marquee__track img { width: 20px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Events ---------- */
.screen--events { background: #a80000; }
.events {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: min(3.5dvh, 32px);
}
.day__title {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin: 0 0 0.35em;
  color: var(--lavender);
  font-weight: 400;
  font-size: min(8.4vw, 4dvh, 36px);
  line-height: 1;
}
.day__title img { width: 0.62em; }
.day__sub {
  margin: 0.8em 0 0.2em;
  color: var(--lavender-dim);
  font-weight: 400;
  font-size: min(4.4vw, 2.3dvh, 17px);
}
.rows { margin: 0; font-size: min(4.8vw, 2.5dvh, 19px); line-height: 1.25; }
.rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: min(0.28em, 0.45dvh) 0;
  border-bottom: 1px solid rgb(199 209 255 / 0.14);
}
.rows dt { color: var(--ink); }
.rows dd { margin: 0; color: var(--ink-dim); text-align: right; }


/* ---------- RSVP ---------- */
.screen--rsvp {
  background: var(--red-dark) url("assets/img/backdrop.jpg") center / cover no-repeat;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s, background-color 0.4s;
}
.screen--rsvp.is-form { background: var(--red); }
.rsvp-intro, .rsvp-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rsvp-intro[hidden], .rsvp-form[hidden] { display: none; }
.rsvp-form { margin-top: calc(var(--pad) * -1); }

.letter {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #e8ecff;
  font-size: max(14px, min(4.8vw, 2.3dvh, 20px));
  line-height: 1.46;
  text-align: center;
}
.letter p { margin: 0 0 0.85em; font-style: italic; }
.letter .letter__sign { margin: 1.2em 0 0; font-style: normal; }
.letter__flower { width: 2.6em; height: auto; margin: 1em auto; }
.letter__parents {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.letter .letter__parents p { margin: 0; font-style: normal; text-align: left; }
.letter .letter__parents p + p { text-align: right; }
.cta--block {
  flex: none;
  width: 100%;
  margin-top: 20px;
  border: 0;
  cursor: pointer;
}

.progress { height: 2px; margin: 0 calc(var(--pad) * -1); background: var(--line); }
.progress__bar { height: 100%; width: 0; background: var(--yellow); transition: width 0.5s var(--ease); }
.progress__label {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 0;
  color: var(--lavender-dim);
  font-size: 14px;
}

.wizard {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: min(7dvh, 56px);
}
.step { margin: 0; padding: 0; border: 0; min-width: 0; }
.q {
  display: block;
  margin: 0 0 24px;
  padding: 0;
  color: var(--lavender);
  font-size: min(8.6vw, 4.6dvh, 38px);
  line-height: 1.05;
}
.hint { margin: -12px 0 22px; color: var(--ink-dim); font-size: 16px; }
.sub { display: block; margin: 0 0 4px; color: var(--lavender-dim); font-size: 14px; }
.sub ~ .sub { margin-top: 22px; }

.wizard input[type="text"], .wizard input[type="email"], .wizard input[type="tel"], .wizard textarea {
  width: 100%;
  padding: 6px 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-size: 22px;
  transition: border-color 0.25s;
}
.wizard textarea { resize: none; line-height: 1.35; }
.wizard input::placeholder, .wizard textarea::placeholder { color: rgb(236 238 250 / 0.3); }
.wizard input:focus, .wizard textarea:focus { outline: none; border-bottom-color: var(--lavender); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }

.options { display: grid; gap: 10px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  color: var(--lavender);
  font-size: 20px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.opt small { color: inherit; opacity: 0.7; font-size: 14px; }
.opt--check span { display: grid; grid-template-columns: 1fr auto; }
.opt--check small { grid-column: 1; }
.opt--check span::after {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  background: center / 14px no-repeat;
}
.opt:hover span { border-color: var(--lavender); }
.opt input:checked + span { background: var(--lavender); color: var(--red); border-color: var(--lavender); }
.opt--check input:checked + span::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 3.5' fill='none' stroke='%239b1d14' stroke-width='2'/%3E%3C/svg%3E");
}
.opt input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }

.stepper { display: inline-flex; border: 1px solid var(--line); margin-bottom: 10px; }
.stepper__btn {
  width: 60px; height: 56px;
  background: none; border: 0;
  color: var(--lavender); font-size: 28px;
  cursor: pointer;
}
.stepper__btn:hover { background: rgb(199 209 255 / 0.1); }
.stepper input {
  width: 64px; height: 56px;
  text-align: center;
  background: none; border: 0;
  border-inline: 1px solid var(--line);
  font-size: 26px;
  -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; background: rgb(199 209 255 / 0.08); }
.group-size { margin: 0 0 24px; }

.err { display: none; margin: 10px 0 0; color: var(--yellow); font-size: 15px; }
.step.invalid .err { display: block; }

.done__body { margin: 0; color: var(--cream); font-size: 20px; line-height: 1.4; }
.step--done:focus { outline: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wizard__nav {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-top: 32px;
}
.btn {
  height: 58px;
  border: 1px solid var(--line);
  background: none;
  color: var(--lavender);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.btn--primary { background: var(--lavender); border-color: var(--lavender); color: var(--red); }
.btn--primary:hover { background: var(--cream); border-color: var(--cream); }
.btn--ghost:hover { border-color: var(--lavender); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn.is-hidden { visibility: hidden; }
.wizard__status { margin: 14px 0 0; color: var(--yellow); font-size: 15px; }