/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body, #root { height: 100%; }
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: #f9f4ec;
  color: #2c2018;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,168,75,0.3); border-radius: 3px; }
/* Prevent tap highlight on mobile */
button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* ── Keyframe Animations ── */
@keyframes medallion-pulse {
  0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); }
  50%      { opacity:1;  transform:translate(-50%,-50%) scale(1.04); }
}
@keyframes float-petal {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-18px) rotate(8deg); }
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  15%      { transform:translateX(-8px); }
  30%      { transform:translateX(8px); }
  45%      { transform:translateX(-6px); }
  60%      { transform:translateX(6px); }
  75%      { transform:translateX(-3px); }
  90%      { transform:translateX(3px); }
}
@keyframes pulse-dot {
  0%,100% { transform:scale(1);   opacity:1; }
  50%      { transform:scale(1.5); opacity:0.6; }
}
@keyframes initial-spin { to { transform: rotate(360deg); } }

/* ── Initial loader (visible until React mounts and replaces #root) ── */
.initial-loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f9f4ec;
}
.initial-loader .spinner {
  width: 38px; height: 38px;
  border: 2px solid rgba(212,168,75,.18);
  border-top-color: rgba(212,168,75,.7);
  border-radius: 50%;
  animation: initial-spin 0.9s linear infinite;
}

/* ── Animation utility classes ── */
.fu1 { opacity:0; animation:fade-up .8s .2s forwards; }
.fu2 { opacity:0; animation:fade-up .8s .4s forwards; }
.fu3 { opacity:0; animation:fade-up .8s .6s forwards; }
.fu4 { opacity:0; animation:fade-up .8s .8s forwards; }
.fu5 { opacity:0; animation:fade-up .8s 1.0s forwards; }
.fu6 { opacity:0; animation:fade-up .8s 1.2s forwards; }
.shaking { animation:shake .55s ease; }

/* ── Passcode input focus ring (can't do :focus in inline styles) ── */
#pc-input:focus {
  border-color: rgba(212,168,75,.7) !important;
  box-shadow: 0 0 0 1px rgba(212,168,75,.2),
              0 0 24px rgba(212,168,75,.15),
              0 0 48px rgba(180,100,140,.1) !important;
}
#pc-input::placeholder { color:rgba(200,180,220,.25); letter-spacing:.1em; font-size:.75rem; }

/* ── Form focus states ── */
.form-field:focus {
  border-color:rgba(212,168,75,.5) !important;
  box-shadow:0 0 0 3px rgba(212,168,75,.08) !important;
}

/* ── Nav active state ── */
.nav-btn { transition:color .2s; }
.nav-btn:hover { color:#d4a84b !important; }
.nav-btn.active { color:#d4a84b !important; }

/* ── Card hover ── */
.nav-card { transition:transform .3s, box-shadow .3s, background .3s; }
.nav-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.08); background:rgba(255,255,255,.82) !important; }

/* ── Gift option hover ── */
.gift-opt { transition:transform .2s, box-shadow .2s; }
.gift-opt:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.07); }

/* ── Submit button hover ── */
.submit-btn { transition:opacity .3s, transform .2s; }
.submit-btn:hover { opacity:.88 !important; transform:translateY(-1px); }

/* ── Passcode btn hover ── */
.pc-btn:hover {
  background:linear-gradient(135deg,rgba(212,168,75,.25),rgba(180,100,140,.25)) !important;
  border-color:rgba(212,168,75,.7) !important;
  color:#e8c878 !important;
  box-shadow:0 0 20px rgba(212,168,75,.12);
}

/* ── Countdown separator ── */
.cd-sep { font-size:1.6rem; color:rgba(212,168,75,.4); font-weight:200; margin-top:.2rem; }

/* ── Responsive ── */
@media (max-width:640px) {
  .az-corner { width:110px !important; height:110px !important; }
  .nav-links-desktop { display:none !important; }
  .nav-links-mobile { display:flex !important; }
  .home-names { font-size:clamp(2.2rem,10vw,3.5rem) !important; }
  .nav-cards-grid { grid-template-columns:1fr 1fr !important; }
  .venue-grid { grid-template-columns:1fr !important; }
  .dress-grid { grid-template-columns:1fr !important; }
  .contact-name-grid { grid-template-columns:1fr !important; }
  .countdown-wrap { padding:1.2rem 1.4rem !important; }
  .inner-page { padding:2rem 1rem 4rem !important; }
}
@media (max-width:420px) {
  .nav-cards-grid { grid-template-columns:1fr !important; }
  .cd-units { gap:.7rem !important; }
}