/* ==========================================================================
   Meg & Yash — Save the Date
   Built from Figma design (mobile node 69:1263, desktop node 54:578)
   ========================================================================== */

:root {
  --olive: #4a552a;
  --rust: #a42a25;
  --white: #ffffff;
  --ink: #000000;
  --placeholder: rgba(0, 0, 0, 0.25);

  --font-script: 'Luxurious Script', cursive;
  --font-label: 'Cinzel', serif;
  --font-body: 'EB Garamond', serif;

  --max-width: 1280px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Scroll reveal (1D, applied site-wide) ---------- */
/* Elements start hidden only once JS confirms it can animate + observe
   them (see js/main.js) -- without that gate everything must stay
   visible, since [hidden]/no-JS visitors would otherwise never see it. */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 140ms; }
.reveal-d2 { transition-delay: 280ms; }
.reveal-d3 { transition-delay: 420ms; }

/* ---------- Login gate ---------- */

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem 1.5rem;
  background-color: var(--olive);
  background-image: url("../images/texture.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: color-dodge;
  overflow: auto;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-gate[hidden] {
  display: none;
}

/* 2b: on a successful login the gate dissolves into the hero underneath
   instead of hard-cutting -- see revealSite() in js/main.js. */
.login-gate--opening {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.login-gate__visual {
  position: relative;
  flex: 0 0 auto;
}

.login-gate__photo-strip {
  position: relative;
  z-index: 2;
  display: block;
  width: 11rem;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
}

.login-gate__floral {
  position: absolute;
  z-index: 1;
  right: -4.5rem;
  top: -1.5rem;
  width: 6.5rem;
  transform: rotate(18deg);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.login-gate__text {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.login-gate__eyebrow {
  font-family: var(--font-label);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  margin: 0;
}

.login-gate__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 5rem;
  line-height: 0.75;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  margin: 0;
}

.login-gate__form {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-gate__form .field {
  text-align: left;
}

.login-gate__form .field label {
  color: var(--white);
  font-size: 1.5rem;
}

.login-gate__input-wrap {
  position: relative;
}

.login-gate__input-wrap input {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 1rem 3.25rem 1rem 1.25rem;
}

.login-gate__submit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.login-gate__submit:hover {
  background: transparent;
  opacity: 0.65;
}

.login-gate__submit:disabled {
  background: transparent;
  color: #8a8a8a;
  cursor: not-allowed;
}

.login-gate__arrow {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.login-gate__submit:hover .login-gate__arrow {
  transform: translateX(5px);
}

.login-gate__submit:disabled .login-gate__arrow {
  display: none;
}

.login-gate__submit .rsvp__spinner {
  display: none;
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: var(--olive);
}

.login-gate__submit:disabled .rsvp__spinner {
  display: inline-block;
}

.login-gate__form[hidden] {
  display: none;
}

/* ---------- Envelope / postcard reveal ---------- */
/* Shown once, right after a fresh login succeeds (never on the
   already-authed localStorage-skip path) -- see showEnvelopeThenReveal()
   in js/main.js. */

.envelope-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.envelope-scene[hidden] {
  display: none;
}

.envelope-scene__stage {
  position: relative;
  width: min(88vw, 22rem);
  aspect-ratio: 1314 / 1468;
}

.envelope-scene__body {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.envelope-scene__body--open {
  opacity: 0;
}

.envelope-scene__body--closed {
  opacity: 1;
  transform: translateX(-50%) scale(1.2);
}

.envelope-scene.is-opening .envelope-scene__body--closed {
  opacity: 0;
}

.envelope-scene.is-opening .envelope-scene__body--open {
  opacity: 1;
}

.envelope-scene__postcard {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 82%;
  aspect-ratio: 953 / 690;
  transform: translate(-50%, 6%) scale(0.5) rotate(-3deg);
  opacity: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transition:
    transform 1700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms,
    opacity 500ms ease 500ms;
}

.envelope-scene.is-opening .envelope-scene__postcard {
  transform: translate(-50%, -18%) scale(1) rotate(-2deg);
  opacity: 1;
}

.envelope-scene__postcard-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.envelope-scene__postcard-message,
.envelope-scene__postcard-name {
  position: absolute;
  margin: 0;
  color: var(--ink);
}

.envelope-scene__postcard-message {
  left: 8%;
  top: 10%;
  width: 38%;
  font-family: var(--font-label);
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.envelope-scene__postcard-name {
  left: 54%;
  top: 43%;
  width: 38%;
  font-family: var(--font-script);
  font-size: 1.5rem;
  line-height: 1.2rem;
  color: var(--olive);
}

/* Visible only on keyboard focus -- standard skip-link pattern, so a
   keyboard/screen-reader user isn't stuck for the full 30s pause with
   no discoverable way forward. */
.envelope-scene__skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: none;
}

.envelope-scene__skip:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  margin-top: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-label);
  font-size: 0.9rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--white);
  cursor: pointer;
}

@media (min-width: 900px) {
  .envelope-scene__stage {
    width: min(46vw, 26rem);
  }
}

.envelope-scene__postcard-name {
  line-height: 1.05;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(20, 24, 12, 0.15) 0%, rgba(20, 24, 12, 0.45) 100%),
    url("../images/hero.jpg");
  background-size: cover;
  background-position: center 30%;
  text-align: center;
}

.hero__overlay {
  position: relative;
  z-index: 1;
  color: var(--white);
}

.hero__eyebrow {
  font-family: var(--font-label);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.hero__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 4.6rem;
  line-height: 0.6;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* ---------- Our Story ---------- */

.story {
  background: var(--olive);
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: center;
}

.story__card {
  background: var(--white);
  padding: 1rem 1.5rem 1.5rem;
  max-width: 420px;
  width: 100%;
}

.story__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.drop-cap {
  font-family: var(--font-script);
  font-size: 3rem;
  line-height: 0.7;
  color: var(--olive);
  padding-right: 0.05em;
}

/* ---------- Save the Date panel ---------- */

.date-panel {
  position: relative;
  height: auto;
  aspect-ratio: 402 / 297;
  overflow: hidden;
  background: #38401f;
}

.date-panel__grid {
  position: absolute;
  inset: 0;
  background-image: url("../images/calendar-grid-mobile.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.date-panel__floral {
  position: absolute;
  top: 11.94%;
  left: 16.1%;
  width: 19%;
  max-width: 11rem;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.date-panel__floral-accent {
  position: absolute;
  top: 37.75%;
  left: 64.18%;
  width: 25.36%;
  max-width: 7rem;
  height: auto;
  opacity: 0.9;
  z-index: 1;
}

.date-panel__seal {
  position: absolute;
  width: 12.71%;
  height: auto;
  aspect-ratio: 1 / 1;
  left: 62.4%;
  top: 70.68%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transform: rotate(-7deg);
  z-index: 2;
}

.date-panel__text {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  text-align: center;
}

.date-panel__script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 3rem;
  line-height: 0.65;
  color: var(--white);
  margin: 0;
}

.date-panel__date {
  font-family: var(--font-label);
  font-size: 1rem;
  color: var(--white);
  margin: 0.4rem 0 0;
}

/* These two carry their own resting transform (rotate / recentering),
   so the generic [data-reveal] transform can't just overwrite it --
   compose the entrance offset with it instead, per element. */
.has-reveal .date-panel__seal {
  opacity: 0;
  transform: translateY(16px) rotate(-7deg);
}

.has-reveal .date-panel__seal.is-visible {
  opacity: 1;
  transform: rotate(-7deg);
}

.has-reveal .date-panel__text {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(16px) rotate(-5deg);
}

.has-reveal .date-panel__text.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-5deg);
}

/* ---------- Countdown ---------- */

.countdown {
  background: var(--white);
  color: var(--olive);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.25rem 0.5rem;
}

.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 5rem;
}

.countdown__value {
  font-family: var(--font-label);
  font-size: 2rem;
  line-height: 1;
}

.countdown__label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

/* ---------- Itinerary ---------- */

.itinerary {
  background: var(--olive);
  color: var(--white);
  padding: 2rem 1.5rem;
}

.itinerary__eyebrow {
  font-family: var(--font-label);
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.itinerary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.5rem;
}

.itinerary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-basis: 100%;
}

.itinerary__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.itinerary__day {
  font-family: var(--font-label);
  font-size: 3rem;
  min-width: 3.5rem;
  text-align: center;
}

@media (max-width: 400px) {
  .itinerary__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .itinerary__day {
    font-size: 2rem;
    min-width: 2rem;
    margin-top: 1rem;
  }
}

.itinerary__name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.35rem;
  line-height: 1.1;
  margin: 0;
}

.itinerary__meta {
  font-family: var(--font-label);
  font-size: 0.75rem;
  margin: 0;
}

.dot {
  opacity: 0.7;
  margin: 0 0.15em;
}

.itinerary__photo {
  flex: 0 0 auto;
  width: 9.375rem;
  aspect-ratio: 583 / 700;
  border-radius: 50%;
  background: var(--white);
  padding: 0.3rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.itinerary__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.itinerary__note {
  flex: 1 1 10rem;
  background: var(--white);
  color: var(--ink);
  padding: 1rem;
  align-self: center;
  transform: rotate(4.5deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* .itinerary__photo / __note carry their own resting rotation, so
   compose the entrance offset with it rather than overwriting it
   (mobile values here; desktop overrides sit by the desktop rotation). */
.has-reveal .itinerary__photo {
  opacity: 0;
  transform: translateY(16px) rotate(-3deg);
}

.has-reveal .itinerary__photo.is-visible {
  opacity: 1;
  transform: rotate(-3deg);
}

.has-reveal .itinerary__note {
  opacity: 0;
  transform: translateY(16px) rotate(4.5deg);
}

.has-reveal .itinerary__note.is-visible {
  opacity: 1;
  transform: rotate(4.5deg);
}

.itinerary__note-title {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--olive);
  margin: 0 0 0.35rem;
}

.itinerary__note-text {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
}

/* ---------- Mailing Details ---------- */

.rsvp {
  background: var(--white);
  padding: 2rem 1.5rem;
}

.rsvp__intro {
  text-align: center;
  margin-bottom: 1.5rem;
}

.rsvp__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 3rem;
  color: var(--olive);
  margin: 0 0 0.6rem;
}

.rsvp__text,
.rsvp__deadline {
  font-family: var(--font-body);
  font-size: 1.125rem;
  margin: 0.4rem 0;
}

.rsvp__deadline {
  color: var(--rust);
}

.rsvp__form {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rsvp__form[hidden] {
  display: none;
}

/* 2d: on submit the form fades up and out before the sealed confirmation
   takes its place -- see showSuccess() in js/main.js. */
.rsvp__form--sending-out {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.field--half {
  flex-basis: 100%;
}

.field--city {
  flex: 2 1 8rem;
}

.field--state {
  flex: 1 1 6rem;
}

.field--postal {
  flex: 1 1 100%;
}

.field label {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
  transition: color 240ms ease-out;
}

.field:focus-within label {
  color: var(--olive);
}

.login-gate__form .field label,
.login-gate__form .field:focus-within label {
  color: var(--white);
}

.field__required {
  color: var(--rust);
}

.field input,
.field select {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.4;
  padding: 0.6rem 1rem;
  border: 1px solid var(--olive);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(74, 85, 42, 0);
  transition: box-shadow 240ms ease-out;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-width: 1px;
  box-shadow: none;
  margin: 0;
  padding-right: 3.33rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a552a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.33rem;
  cursor: pointer;
}

.field input::placeholder {
  color: var(--placeholder);
}

.field select:invalid {
  color: var(--placeholder);
}

.field input:focus,
.field select:focus {
  outline: none;
  box-shadow: 0 0 0 5px rgba(74, 85, 42, 0.18);
}

.field input.is-invalid,
.field select.is-invalid {
  border-color: var(--rust);
}

.field__error {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--rust);
  margin-top: 0.35rem;
}

#login-error {
  background: #f9dede;
  padding: 0.35rem 0.6rem;
}

.rsvp__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  background: var(--olive);
  color: var(--white);
  border: none;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.rsvp__submit:hover {
  background: #3c4522;
}

.rsvp__submit:disabled {
  background: #8a8a8a;
  cursor: not-allowed;
}

.rsvp__spinner {
  display: none;
  width: 1em;
  height: 1em;
  border: 0.15em solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: rsvp-spin 0.7s linear infinite;
}

.rsvp__submit:disabled .rsvp__spinner {
  display: inline-block;
}

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

.rsvp__success {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 100%;
  width: fit-content;
  margin: 1.5rem auto 0;
  text-align: left;
  color: var(--olive);
  background: rgba(74, 85, 42, 0.1);
  padding: 1.1rem 1.5rem;
}

.rsvp__success[hidden] {
  display: none;
}

/* 2d: the wax seal stamps down beside the script "Thank you" once the
   form has finished fading out -- .is-visible is added a frame after
   [hidden] is removed so the transition actually runs. */
.rsvp__success-seal {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-18px) scale(0.6) rotate(-7deg);
  transition: opacity 320ms ease, transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rsvp__success-text {
  display: flex;
  flex-direction: column;
}

.rsvp__success-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 0.8;
  color: var(--olive);
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms ease 160ms, transform 380ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}

.rsvp__success-note {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--olive);
  margin: 0.4rem 0 0;
  opacity: 0;
  transition: opacity 380ms ease 220ms;
}

.rsvp__success.is-visible .rsvp__success-seal {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-7deg);
}

.rsvp__success.is-visible .rsvp__success-script,
.rsvp__success.is-visible .rsvp__success-note {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Footer ---------- */

.footer {
  background: var(--olive);
  color: var(--white);
  padding: 2rem 1.5rem;
  text-align: center;
}

.footer__collage {
  position: relative;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 346 / 325;
  margin: 0 auto 2rem;
}

.footer__floral-accent {
  position: absolute;
  left: 2%;
  top: 9%;
  width: 37%;
  height: auto;
  z-index: 1;
}

.footer__floral {
  position: absolute;
  left: 45%;
  top: 76%;
  width: 62%;
  height: auto;
  z-index: 1;
  transform: scaleY(-1);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.polaroid {
  position: absolute;
  background: var(--white);
  padding: 1.6%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease, opacity 480ms ease;
}

.polaroid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid--1 {
  left: 2%;
  top: 45%;
  width: 52%;
  aspect-ratio: 4 / 3;
  transform: rotate(-6deg);
  z-index: 2;
}

.polaroid--2 {
  left: 48%;
  top: 52%;
  width: 50%;
  aspect-ratio: 4 / 3;
  transform: rotate(5deg);
  z-index: 3;
}

.polaroid--3 {
  left: 41%;
  top: 6%;
  width: 50%;
  aspect-ratio: 4 / 3;
  transform: rotate(-4deg);
  z-index: 2;
}

/* Hover / touch pick-up: straighten toward level, lift, shadow spreads. */
.polaroid:hover,
.has-reveal .polaroid--1.is-visible:hover,
.has-reveal .polaroid--2.is-visible:hover,
.has-reveal .polaroid--3.is-visible:hover {
  box-shadow: 0 22px 38px rgba(0, 0, 0, 0.42);
  z-index: 9;
}

.polaroid--1:hover,
.has-reveal .polaroid--1.is-visible:hover {
  transform: rotate(-1deg) translateY(-10px) scale(1.03);
}

.polaroid--2:hover,
.has-reveal .polaroid--2.is-visible:hover {
  transform: rotate(1deg) translateY(-10px) scale(1.03);
}

.polaroid--3:hover,
.has-reveal .polaroid--3.is-visible:hover {
  transform: rotate(-1deg) translateY(-10px) scale(1.03);
}

/* Entrance: fires once as the collage scrolls into view, staggered
   right to left (polaroid--2, then --3, then --1). */
.has-reveal .polaroid {
  opacity: 0;
}

.has-reveal .polaroid--1 { transform: translateY(24px) rotate(-6deg); }
.has-reveal .polaroid--2 { transform: translateY(24px) rotate(5deg); }
.has-reveal .polaroid--3 { transform: translateY(24px) rotate(-4deg); }

.has-reveal .polaroid.is-visible {
  opacity: 1;
}

.has-reveal .polaroid--1.is-visible { transform: rotate(-6deg); }
.has-reveal .polaroid--2.is-visible { transform: rotate(5deg); }
.has-reveal .polaroid--3.is-visible { transform: rotate(-4deg); }

.footer__names {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 0.65;
  margin: 0;
}

.footer__date {
  font-family: var(--font-label);
  font-size: 1rem;
  margin: 0.6rem 0 0;
}

/* ==========================================================================
   Desktop (from Figma desktop node 54:578, ~1440px canvas)
   ========================================================================== */

@media (min-width: 900px) {
  .login-gate {
    flex-direction: row;
    gap: 6rem;
  }

  .login-gate__photo-strip {
    width: 16rem;
    filter: none;
  }

  .login-gate__floral {
    right: -6rem;
    top: -2rem;
    width: 9rem;
  }

  .login-gate__eyebrow {
    font-size: 2rem;
    width: 300px;
  }

  .login-gate__title {
    font-size: 8rem;
    width: 120%;
  }

  .hero {
    min-height: 92vh;
    justify-content: flex-end;
    padding: 4rem 8rem 4rem 2rem;
  }

  .hero__eyebrow {
    font-size: 3rem;
  }

  .hero__title {
    font-size: clamp(6rem, 11vw, 10.25rem);
  }

  .story {
    background: var(--white);
    padding: 4rem 5rem;
  }

  .story__card {
    max-width: var(--max-width);
    padding: 0;
    background: transparent;
  }

  .story__text {
    font-size: 1.5rem;
  }

  .drop-cap {
    font-size: 4rem;
  }

  .date-panel {
    height: auto;
    aspect-ratio: 1441 / 805;
    min-height: 28rem;
  }

  .date-panel__grid {
    background-image: url("../images/calendar-grid-desktop.png");
  }

  .date-panel__floral {
    max-width: 23rem;
  }

  .date-panel__floral-accent {
    max-width: 12.5rem;
  }

  .date-panel__text {
    top: 50%;
  }

  .date-panel__script {
    font-size: 7rem;
  }

  .date-panel__date {
    font-size: 2rem;
    margin-top: 0.75rem;
  }

  .countdown {
    gap: 3rem;
    padding: 2rem 0;
  }

  .countdown__item {
    width: 12rem;
  }

  .countdown__value {
    font-size: 4.5rem;
  }

  .countdown__label {
    font-size: 1.5rem;
  }

  .itinerary {
    padding: 4rem;
  }

  .itinerary__eyebrow {
    font-size: 1.75rem;
    margin: 0 auto 1.5rem;
    max-width: var(--max-width);
  }

  .itinerary__row {
    max-width: var(--max-width);
    margin: 0 auto;
    gap: 2.5rem;
  }

  .itinerary__list {
    flex-basis: 60%;
    flex-grow: 1;
  }

  .itinerary__item {
    gap: 2rem;
  }

  .itinerary__day {
    font-size: 5.5rem;
    min-width: 6rem;
  }

  .itinerary__name {
    font-size: 4.2rem;
  }

  .itinerary__meta {
    font-size: 1.25rem;
  }

  .itinerary__photo {
    width: 21rem;
    min-width: 35%;
    transform: rotate(5.7deg);
  }

  .has-reveal .itinerary__photo {
    transform: translateY(16px) rotate(5.7deg);
  }

  .has-reveal .itinerary__photo.is-visible {
    transform: rotate(5.7deg);
  }

  .itinerary__note {
    flex-basis: 100%;
    transform: none;
    text-align: center;
    padding: 2.5rem;
    margin-top: 2.5rem;
  }

  .has-reveal .itinerary__note {
    transform: translateY(16px);
  }

  .has-reveal .itinerary__note.is-visible {
    transform: none;
  }

  .itinerary__note-title {
    font-size: 1.75rem;
  }

  .itinerary__note-text {
    font-size: 1.25rem;
    margin: 0 auto;
  }

  .rsvp {
    padding: 4rem;
  }

  .rsvp__intro {
    max-width: var(--max-width);
    margin: 0 auto 2.5rem;
  }

  .rsvp__title {
    font-size: 6.5rem;
  }

  .rsvp__text,
  .rsvp__deadline {
    font-size: 1.5rem;
  }

  .rsvp__form {
    gap: 1.5rem;
  }

  .form-row {
    gap: 2rem;
  }

  .field--half {
    flex-basis: calc(50% - 1rem);
  }

  .field--city {
    flex: 2 1 0;
  }

  .field--state,
  .field--postal {
    flex: 1 1 0;
    min-width: 0;
  }

  .field label {
    font-size: 1.5rem;
  }

  .field input,
  .field select {
    font-size: 1.5rem;
    height: 4rem;
    border-width: 2px;
  }

  .rsvp__submit {
    align-self: flex-start;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
  }

  .footer {
    padding: 5rem 3rem;
  }

  .footer__collage {
    max-width: 61rem;
    aspect-ratio: 1035 / 958;
  }

  .footer__floral-accent {
    left: 6%;
    top: 7.6%;
    width: 29%;
  }

  .footer__floral {
    left: 45%;
    top: 80%;
    width: 51%;
  }

  .polaroid--1 {
    left: 0%;
    top: 37.3%;
    width: 42%;
    aspect-ratio: 1.3 / 1;
  }

  .polaroid--2 {
    left: 43%;
    top: 49.7%;
    width: 50.5%;
    aspect-ratio: 1.3 / 1;
  }

  .polaroid--3 {
    left: 36.5%;
    top: 6.3%;
    width: 50%;
    aspect-ratio: 1.3 / 1;
  }

  .footer__names {
    font-size: 5rem;
  }

  .footer__date {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}