/* Full-bleed background image */
body {
  /* You already load the image via body or a bg class — keep your url() */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* iOS address bar safe area */
  padding-top: env(safe-area-inset-top, 0);
}

/* Hero block centers content and adds air on mobile */
.hero {
  display: grid;
  place-items: center;
  min-height: 48vh;
  padding: 16px;
}

/* The frosted panel behind the text */
.hero-card {
  max-width: min(680px, 92vw);
  margin: 40px auto 10px;
  padding: 24px 22px;
  color: #fff;
  background: rgba(0,0,0,0.44);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

/* Typographic scale (desktop defaults) */
.hero-title   { font-size: clamp(28px, 5vw, 56px); line-height: 1.05; margin: 0 0 10px; text-align: center; }
.hero-subtitle{ font-size: clamp(14px, 2.6vw, 22px); line-height: 1.3; margin: 0 0 12px; text-align: center; }
.hero-welcome { font-size: clamp(14px, 2.2vw, 18px); line-height: 1.5; margin: 0; text-align: center; }

/* Mobile tuning */
@media (max-width: 600px) {
  body {
    /* If your face is cut off on phones, nudge the image up */
    background-position: center 28%;
  }

  .hero-card {
    margin: 20px auto 8px;
    padding: 18px 16px;
    border-radius: 14px;
  }
}



/* Global styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  /* Background image */
  background: url("public/bg.JPG") center 80% / cover no-repeat fixed;
}

.container {
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(0,0,0,.3);
}

/* Landing page styles */
body.landing {
  color: #fff;
	
}

.landing .container {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.title {
  font-size: 3rem;
  margin: 0;
}

.subtitle {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.description {
  margin: 1rem 0;
  font-size: 1rem;
}

/* RSVP form styles */
body.rsvp .container,
body.success .container {
  max-width: 500px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  font-weight: bold;
  text-align: left;
}

select,
input[type="number"],
textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  padding: 0.75rem;
  background-color: #5a67d8;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

button:hover {
  background-color: #434190;
}
/* Mobile tuning */
@media (max-width: 600px) {
  body {
    /* If your face is cut off on phones, nudge the image up */
    background-position: center 28%;
  }

  .hero-card {
    margin: 20px auto 8px;
    padding: 18px 16px;
    border-radius: 14px;
  }
}
/* ===== Stars canvas overlay ===== */
#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9; /* more visible */
  mix-blend-mode: screen;
}
/* ===== Hero styles ===== */
.hero {
  position: fixed;
  left: 50%;
  top: 28px;                 /* adjust as you like */
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;                /* above stars and notes */
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,0.35); /* soft glassy chip; remove if you want pure text */
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(3px);
}


/* Give the notes wall a bit more top space so it doesn’t tuck under the hero */
.wall { margin-top: 140px; }
.wall { column-width: 260px; column-gap: 18px; }
.note { transform: rotate(var(--rot, 0deg));}

/* Text entrance animation */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Individual sticky notes */
.note {
  position: absolute;
  transform: rotate(var(--rot));
  background-color: var(--paper, #fff9c4);
  width: 180px;
  min-height: 140px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}
.hero-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  color: #fff;
  animation: fadeSlideIn .85s ease-out both;
}

.hero-subtitle {
  margin: 4px 0 4px;
  font-size: clamp(18px, 2.3vw, 24px);
  color: #f4f4f4;
  letter-spacing: .5px;
  animation: fadeSlideIn .95s .05s ease-out both;
}

.hero-welcome {
  margin: 6px 0 2px;
  font-size: clamp(14px, 1.7vw, 18px);
  color: #ffffffcc;
  animation: fadeSlideIn 1s .1s ease-out both;
}

@media (max-width: 480px) {
  .note { padding: 14px 14px 16px; }
  .note .from { font-size: 15px; }
  .note .text { font-size: 14px; }
}

/* ---------- MOBILE OVERRIDES (iPhone friendly) ---------- */
@media (max-width: 480px) {

  /* HERO: smaller, tighter card and type */
  .hero {
    min-height: 36vh;          /* was taller */
    padding: 12px 14px;
  }
  .hero-card {
    max-width: 92vw;           /* fit screen */
    padding: 16px;             /* less padding */
    border-radius: 14px;
    background: rgba(0,0,0,.36); /* slightly lighter so it feels less heavy */
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
  }
  .hero-title   { font-size: clamp(24px, 7vw, 36px); line-height: 1.1; }
  .hero-subtitle{ font-size: clamp(13px, 3.8vw, 16px); line-height: 1.35; }
  .hero-welcome { font-size: clamp(12px, 3.4vw, 15px); line-height: 1.45; }

  /* WALL: turn off CSS columns (Safari makes notes too wide) and use a single, centered column */
  .wall {
    /* disable masonry columns on phones */
    column-count: 1;
    column-width: auto;
    column-gap: 0;

    /* turn into a simple vertical stack */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    width: 100%;
    padding: 10px 0 28px;
    margin: 8px auto 24px;   /* give space under hero */
  }

  /* NOTES: narrower width, no rotation on tiny screens */
  .note {
    width: 86vw;           /* ~86% of screen */
    max-width: 360px;      /* guard for larger phones */
    padding: 14px 14px 16px;
    transform: none;       /* remove tilt so text doesn’t clip */
    box-sizing: border-box;
  }
  .note::before {
    width: 44px; height: 14px; top: -8px;   /* smaller tape */
  }
  .note .from  { font-size: 15px; }
  .note .text  { font-size: 14px; line-height: 1.35; }
}

/* Slightly wider phones (small tablets/Plus models) */
@media (min-width: 481px) and (max-width: 768px) {
  .hero-card { max-width: 560px; padding: 18px; }
  .hero-title   { font-size: clamp(26px, 5.4vw, 40px); }
  .hero-subtitle{ font-size: clamp(14px, 2.8vw, 18px); }
  .hero-welcome { font-size: clamp(13px, 2.6vw, 16px); }

  .wall {
    column-count: 1; column-width: auto; column-gap: 0;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  .note { width: 82vw; max-width: 420px; transform: rotate(0.6deg); }
}