/* --- design tokens taken directly from the original InvitiApp CSS variables --- */
:root {
  --inv-accent: #f0a5b0;
  --inv-bg: #FBF1EF;
}

/* exact bg color + repeating bow/ribbon SVG pattern (50x50 tile, 8% opacity) */
body {
  background-color: var(--inv-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cg fill='%23f0a5b0' fill-opacity='0.08'%3E%3Cpath d='M25 20c-2.5-4-7-6-10-3s-1 8 3 9c-4 1-6 5-3 9s7.5 1 10-3c2.5 4 7 6 10 3s1-8-3-9c4-1 6-5 3-9s-7.5-1-10 3z'/%3E%3Ccircle cx='25' cy='25' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 50px 50px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: rgba(240, 165, 176, 0.25) 0px 8px 32px -8px, rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset;
}

.icon-badge {
  background: linear-gradient(135deg, rgb(240, 165, 176), rgba(240, 165, 176, 0.867));
  color: rgb(96, 66, 70);
  box-shadow: rgba(240, 165, 176, 0.4) 0px 4px 14px -2px;
}

/* cascading "polaroid" gallery like the original invitation */
.polaroid {
  background: #fff;
  padding: 0.5rem 0.5rem 2.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 12px 28px -8px rgba(0, 0, 0, 0.3);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* hovered photo comes to the front and grows */
.gallery-item {
  position: relative;
  z-index: 1;
}

.gallery-item:hover {
  z-index: 20;
}

/* small periodic wiggle so the photos read as something you can touch.
   Only runs while the photo is on screen (.en-vista is toggled by an
   IntersectionObserver in js/script.js): it wiggles shortly after it
   appears and then every 5s */
.gallery-item.en-vista .polaroid {
  animation: polaroid-wiggle 5s ease-in-out .4s infinite;
}

@keyframes polaroid-wiggle {
  0%, 16%, 100% { transform: rotate(0); }
  3% { transform: rotate(-2.5deg); }
  6% { transform: rotate(2.5deg); }
  9% { transform: rotate(-1.5deg); }
  12% { transform: rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item.en-vista .polaroid { animation: none; }
}

.gallery-item:hover .polaroid {
  animation: none;
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 24px 48px -10px rgba(0, 0, 0, 0.4);
}

.cd-box {
  background: rgb(240, 165, 176);
  color: #fff;
}

/* RSVP: one checkable row per invited name */
.rsvp-guest {
  transition: all .2s ease;
}

.rsvp-guest:has(input:checked) {
  border-color: #22c55e;
  background: #f0fdf4;
}

.rsvp-guest input {
  accent-color: #22c55e;
}

/* CTA button with the exact gradient + animated "shine" sweep from the original */
.cta-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(240, 165, 176) 0%, color-mix(in srgb, rgb(240, 165, 176) 88%, rgb(0, 0, 0)) 100%);
}

.cta-btn .shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shine-sweep 2.8s ease-in-out infinite;
}

@keyframes shine-sweep {

  0%,
  45% {
    transform: translateX(-100%);
  }

  65% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ---- Entry gate popup: same "cristal" (glass) technique as .glass-card, dark variant ---- */
#entry-gate {
  transition: opacity .5s ease;
}

#entry-gate.entry-gate-hidden {
  opacity: 0;
  pointer-events: none;
}

.entry-gate-backdrop {
  backdrop-filter: blur(15px);
  background: #68656557;
  -webkit-backdrop-filter: blur(40px);
}

.entry-card {
  background: linear-gradient(155deg, rgb(75 61 61) 0%, rgb(0 0 0 / 42%) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(240, 165, 176, 0.35);
  box-shadow: rgba(240, 165, 176, 0.1) 0px 0px 0px 9999px inset, rgba(255, 255, 255, 0.22) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px 24px 80px -16px;
}

.entry-icon-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--inv-accent);
}

.entry-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fbdce1, var(--inv-accent));
  color: rgb(96, 66, 70);
  box-shadow: rgba(240, 165, 176, 0.55) 0px 0px 24px 2px, rgba(240, 165, 176, 0.35) 0px 8px 20px -4px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.entry-btn:hover {
  transform: translateY(-3px);
  box-shadow: rgba(240, 165, 176, 0.7) 0px 0px 30px 4px, rgba(240, 165, 176, 0.4) 0px 10px 24px -4px;
}

.entry-btn .shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shine-sweep 2.8s ease-in-out infinite;
}

.entry-dot {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  animation: entry-dot-float 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes entry-dot-float {

  0%,
  100% {
    transform: translateY(0);
    opacity: .5;
  }

  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

/* ---- Scroll reveal: cards start hidden + shifted down, fade/slide in on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}