/* =========================
   Global
========================= */
:root{
  --ink: #f6efe3;
  --ink-soft: rgba(246,239,227,.85);
  --gold: #c6a85a;
  --gold-soft: rgba(198,168,90,.55);
  --night: #0b0b12;
  --panel: rgba(10,10,16,.35);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: Georgia, serif;
  background: #0e0e0e;
  color: var(--ink);
  text-align: center;
}

/* Utility containers for inner pages */
.container{
  padding: 40px 20px;
  max-width: 640px;
  margin: auto;
}

h1{ margin: 0 0 10px; }
h2{ margin: 0 0 12px; font-weight: 400; opacity: .92; }

button, .button{
  background: var(--gold);
  border: none;
  padding: 12px 20px;
  margin-top: 15px;
  color: #0b0b12;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .2px;
}

.button--ghost{
  background: rgba(198,168,90,.18);
  color: var(--ink);
  border: 1px solid rgba(198,168,90,.55);
  backdrop-filter: blur(6px);
}

input, select, textarea{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,15,20,.75);
  color: var(--ink);
}

textarea{ min-height: 90px; }

#status{ margin-top: 12px; min-height: 22px; opacity: .95; }

.small{ font-size: .95em; opacity: .85; }

/* =========================
   Homepage Poster Layout
========================= */
.poster{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 18px 14px;
}

.poster__bg{
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(246,239,227,.18), transparent 55%),
    linear-gradient(to bottom, rgba(8,8,14,.55), rgba(8,8,14,.25) 35%, rgba(8,8,14,.75)),
    url("../assets/hero-save-the-date.png");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

.poster::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.40) 78%, rgba(0,0,0,.72));
  pointer-events:none;
}

.poster__content{
  position: relative;
  z-index: 2;
  width: min(720px, 92vw);
  padding: clamp(18px, 4vw, 36px);
  border-radius: 24px;
  background: linear-gradient(to bottom, rgba(10,10,16,.32), rgba(10,10,16,.18));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

.poster__names{
  font-size: clamp(44px, 9vw, 78px);
  line-height: 1.0;
  letter-spacing: .6px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.poster__names .amp{
  font-weight: 400;
  opacity: .92;
}

.poster__sub{
  margin: 8px 0 0;
  font-size: clamp(16px, 3.2vw, 22px);
  letter-spacing: .6px;
  color: var(--ink-soft);
}

.poster__spacer{ height: clamp(16px, 4vw, 26px); }

.poster__invite{
  margin: 0;
  font-size: clamp(16px, 3.2vw, 22px);
  color: var(--ink-soft);
}

.poster__date{
  margin: 6px 0 10px;
  font-size: clamp(34px, 7.5vw, 56px);
  line-height: 1.05;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.poster__addr1, .poster__addr2{
  margin: 0;
  font-size: clamp(16px, 3.2vw, 22px);
  color: var(--ink-soft);
}

.poster__rule{
  margin: 18px auto 14px;
  height: 1px;
  width: min(420px, 78%);
  background: linear-gradient(to right, transparent, rgba(198,168,90,.85), transparent);
}

.poster__time{
  margin: 0;
  font-size: clamp(14px, 2.9vw, 18px);
  letter-spacing: .6px;
  color: rgba(246,239,227,.78);
}

.poster__actions{
  margin-top: 16px;
}

.poster__countdown{
  margin-top: 16px;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(12,12,18,.40);
  border: 1px solid rgba(255,255,255,.10);
}

.poster__countdownLabel{
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(246,239,227,.72);
}

.poster__countdownValue{
  font-size: 14px;
  letter-spacing: .6px;
  color: rgba(246,239,227,.92);
}

/* Fireflies canvas */
#fireflies{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Keep inner pages usable */
@media (max-width: 420px){
  .container{ padding: 28px 16px; }
}


/* =========================
   Homepage: image-first with fallback text
   - Fallback hidden unless hero image fails.
========================= */
.poster__fallback{
  display: none; /* default: hidden (image contains the text) */
  position: relative;
  z-index: 2;
  width: min(720px, 92vw);
  padding: clamp(18px, 4vw, 36px);
  border-radius: 24px;
  background: linear-gradient(to bottom, rgba(10,10,16,.40), rgba(10,10,16,.18));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}

html.hero-failed .poster__fallback{
  display: block;
}

.poster__rsvp{
  position: relative;
  z-index: 3;
  margin-top: 72vh; /* sits near the lower portion like an overlay button */
  padding-bottom: 24px;
}

/* On small screens, keep RSVP accessible without scrolling too far */
@media (max-width: 520px){
  .poster__rsvp{ margin-top: 68vh; }
}

/* If fallback shows, keep RSVP closer */
html.hero-failed .poster__rsvp{
  margin-top: 18px;
}

/* Hide countdown label/value when hero-loaded (they exist in fallback only anyway) */
html.hero-loaded #countdown{ display:none; }