/* =============================================================
   Adriana & Cameron — wedding site
   Faithful production rebuild of the Claude Design prototype
   (Direction A: terracotta letterpress, Oaxaca display face).
   ============================================================= */

@font-face {
  font-family: 'Oaxaca';
  src: url('../assets/Oaxaca.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  background: #F3ECDC url('../assets/cream-texture.png');
  background-size: 540px auto;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

/* The whole document is set in the couple's uploaded display face,
   with Poller One / Jost as graceful fallbacks. */
body {
  font-family: 'Oaxaca', 'Poller One', 'Jost', sans-serif;
  color: #3A2E26;
}

@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

@keyframes stampIn {
  0%   { transform: scale(2.4) rotate(-5deg); opacity: 0; }
  55%  { transform: scale(0.93) rotate(1.5deg); opacity: 1; }
  75%  { transform: scale(1.05) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

input::placeholder, textarea::placeholder { color: #B09A7E; opacity: 1; }

/* ---- interactive states (were style-hover / style-active / style-focus) ---- */
.nav-link { color: #F6EDDC; text-decoration: none; transition: color 0.15s ease; }
.nav-link:hover { color: #FFF8EA; text-decoration: underline; }

.nav-rsvp {
  color: #BE4630; background: #FFF8EA; padding: 9px 20px; border-radius: 999px;
  text-decoration: none; box-shadow: 0 2px 0 rgba(96,36,16,0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.nav-rsvp:hover { background: #FFFFFF; }
.nav-rsvp:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(96,36,16,0.35); }

/* Big stamped red buttons — UNLOCK and SEND RSVP — physically depress. */
.btn-press {
  background: #BE4630; color: #FFF8EA; border-radius: 12px; text-align: center;
  font-family: 'Oaxaca', 'Poller One', sans-serif; cursor: pointer;
  box-shadow: 0 3px 0 rgba(96,36,16,0.4);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
  user-select: none;
}
.btn-press:hover { background: #A93C28; }
.btn-press:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(96,36,16,0.4); }

input, textarea {
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus { border-color: #BE4630 !important; }

.registry-card { transition: border-color 0.15s ease; }
.registry-card:hover { border-color: #BC5B33 !important; }

.faq-item { cursor: pointer; }

/* RSVP attendance chips (were the dynamic chip(active) styles) */
.attend-chip {
  padding: 15px 10px; border-radius: 12px; text-align: center; font-size: 12px;
  font-weight: 600; letter-spacing: 0.18em; cursor: pointer;
  background: #FFFDF6; color: #7A5A33; border: 2px solid rgba(154,98,51,0.3);
  box-shadow: none;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
  user-select: none;
}
.attend-chip.active {
  background: #BE4630; color: #FFF8EA; border: 2px solid #BE4630;
  box-shadow: inset 0 2px 4px rgba(96,36,16,0.35);
}

/* ---- gallery placeholder frames (stand-ins for drag-in photos) ---- */
.photo-slot {
  position: relative;
  border-radius: 12px;
  background: #EFE3CC url('../assets/cream-texture.png');
  background-size: 540px auto;
  border: 2px dashed rgba(154,98,51,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #B0895C;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Respect reduced-motion: the JS also checks this, but make sure nothing
   that depends on JS reveal stays invisible if scripts are disabled. */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
}

/* Fallback: if JavaScript is disabled, reveal everything and drop the gate. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
.no-js #gate { display: none !important; }