/* Wedding party landing page styles */

/* Design tokens */
:root {
  --font-base: 'Vazir', sans-serif;
  --color-bg-light: #f6fbf7;
  --color-bg-light-2: #ffffff;
  --color-text: #333;
  --color-accent: #4caf50;
  --color-accent-dark: #2e8b57;
  --color-card-bg: #f5fcf7;
  --color-card-border: #a4d5b1;
  --radius: 12px;
}

/* Root & typography */
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-light-2) 70%);
  color: var(--color-text);
  /* Allow natural page height so the user can scroll if needed */
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain; /* softer mobile bounce */
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Hero section */
main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

/* Card */
.card {
  max-width: min(34rem, 90vw);
  background: var(--color-card-bg);
  border: 2px solid var(--color-card-border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 28px 72px rgba(0,0,0,0.06);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 6vw, 6rem);
  text-align: center;
  animation: weddingIntro 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) both, float 6s ease-in-out infinite 1.2s;
  position: relative;
  z-index: 1;
}

/* Decorative headline */
.card h1 {
  position: relative;
  font-size: clamp(1.75rem, 4vw + 1rem, 2.4rem);
  font-weight: 700;
  margin: 0 0 1.25rem; /* tighter */
}

.card h1::before,
.card h1::after {
  width: 35%;
  background: #6bb47e;
}

/* Subtitle */
.subtitle {
  margin: 0 0 0.75rem; /* tighter */
  font-size: 1.05rem;
  line-height: 1.8;
  color: #444;
}

/* Heart */
.heart {
  font-size: 1.2rem;
  display: inline-block;
  margin-bottom: 1.25rem;
}

/* Names */
.names {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: inherit;
  position: relative;
  display: inline-block;
  cursor: default;
}

/* Disable previous name animations */
.names,
.names:hover {
  animation: none !important;
  transform: none !important;
}

.names::before,
.names::after {
  display: none !important;
}

/* DateTime & Venue */
.datetime,
.venue {
  font-size: 1rem;
  margin: 0.25rem 0;
  color: #555;
}

/* Adjust actions gap */
.card .actions {
  gap: 1rem;
}

h1 {
  font-size: 1.9rem;
  margin: 0 0 1rem;
}

p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

/* CTA buttons */
.actions {
  margin-top: 0.5rem; /* tighter */
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  flex: 1 1 160px;
  display: block;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: var(--btn-bg, var(--color-accent));
}

.btn.neshan { --btn-bg: var(--color-accent); }
.btn.balad { --btn-bg: var(--color-accent-dark); }

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 20px rgba(46,139,87,0.25);
}

/* Venue details inside info-box */
.venue-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: right;
  width: 100%;
}

.address-text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

/* Footer */
footer {
  padding: 1rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: #666;
}

/* Animations */
@keyframes weddingIntro {
  0%   { opacity: 0; transform: translateY(40px) scale(0.9) rotate(-2deg); }
  50%  { opacity: 1; transform: translateY(-8px) scale(1.05) rotate(2deg); }
  80%  { transform: translateY(4px) scale(0.98) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(3px, -6px) rotate(0.6deg); }
  50%  { transform: translate(0px, -12px) rotate(0deg); }
  75%  { transform: translate(-3px, -6px) rotate(-0.6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Responsive */
@media (max-width: 480px) {
  .card {
    padding: 2.5rem 1.5rem 3.5rem; /* taller on mobile too */
  }
  .card h1 {
    font-size: 2rem;
  }
}

/* Floral corner decorations */
.card::before,
.card::after {
  content: '🌱';
  position: absolute;
  font-size: 1.6rem;
  line-height: 1;
}

.card::before {
  bottom: 0.75rem; /* keep inside card */
  left: 0.75rem;
  transform: scaleX(-1); /* horizontally flipped */
}

.card::after {
  bottom: 0.75rem; /* keep inside card */
  right: 0.75rem;
  transform: scaleX(-1);
}

/* Emoji burst (floating) */
.emoji-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.emoji-burst span {
  position: absolute;
  bottom: -48px;
  font-size: 3.2rem;
  opacity: 0;
  animation: rise 10s ease-out infinite;
}

/* Individual positions & delays */
.emoji-burst span:nth-child(1) { left: 10%; animation-delay: 0.2s; }
.emoji-burst span:nth-child(2) { left: 25%; animation-delay: 0.5s; }
.emoji-burst span:nth-child(3) { left: 40%; animation-delay: 0.1s; animation-duration: 9s; }
.emoji-burst span:nth-child(4) { left: 55%; animation-delay: 0.4s; animation-duration: 7.5s; }
.emoji-burst span:nth-child(5) { left: 70%; animation-delay: 0.2s; animation-duration: 8.5s; }
.emoji-burst span:nth-child(6) { left: 85%; animation-delay: 0.6s; animation-duration: 9.5s; }
.emoji-burst span:nth-child(7) { left: 15%; animation-delay: 0.9s; animation-duration: 8s; }
.emoji-burst span:nth-child(8) { left: 60%; animation-delay: 1s; animation-duration: 7s; }
.emoji-burst span:nth-child(9)  { left: 5%;   animation-delay: 1.3s; animation-duration: 10s; font-size: 3.8rem; }
.emoji-burst span:nth-child(10) { left: 35%;  animation-delay: 0.8s; animation-duration: 9.5s; font-size: 3.2rem; }
.emoji-burst span:nth-child(11) { left: 50%;  animation-delay: 1.6s; animation-duration: 8.5s; font-size: 3rem; }
.emoji-burst span:nth-child(12) { left: 75%;  animation-delay: 0.3s; animation-duration: 9s;  font-size: 3.6rem; }
.emoji-burst span:nth-child(13) { left: 90%;  animation-delay: 1.1s; animation-duration: 10.5s; font-size: 3.4rem; }
.emoji-burst span:nth-child(14) { left: 20%;  animation-delay: 1.8s; animation-duration: 8s;  font-size: 3.7rem; }
.emoji-burst span:nth-child(15) { left: 42%;  animation-delay: 1.9s; animation-duration: 9s;  font-size: 3.1rem; }
.emoji-burst span:nth-child(16) { left: 68%;  animation-delay: 1.5s; animation-duration: 8.3s; font-size: 3.3rem; }

@keyframes rise {
  0%   { transform: translateY(0) scale(0.8) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-120vh) scale(1.2) rotate(360deg); opacity: 0; }
}

/* Motion safe */
@media (prefers-reduced-motion: reduce) {
  .emoji-burst span { animation: none; }
}

/* Hover elevate */
.card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.1), 0 24px 60px rgba(0,0,0,0.06);
  transform: translateY(-3px);
}

/* Info box containing venue + weather */
.info-box {
  margin: 0.85rem 0 0.55rem; /* tighter vertical */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  align-self: center; /* center align like buttons */
  width: auto; /* shrink to content to align nicely with buttons */
  font-size: 0.95rem;
  color: #2e7d4f;
  background: linear-gradient(135deg, rgba(236, 255, 238, 0.9) 0%, rgba(253, 255, 254, 0.9) 100%);
  padding: 0.55rem 1.1rem;
  border-radius: 14px;
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.8s ease-out 0.3s both;
  border: 1px solid rgba(76, 175, 80, 0.24);
  background-size: 200% 100%; /* enable gradient slide */
  transition: transform 0.35s ease, box-shadow 0.35s ease, background-position 0.35s ease;
}

@media (max-width: 480px) {
  .info-box {
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
  }
}

.venue-text {
  font-weight: 700;
  font-size: 1.05rem;
}

.weather {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
  background: rgba(46, 139, 87, 0.08);
  padding: 0.3rem 0.55rem;
  border-radius: 10px;
}

.weather-icon {
  font-size: 1.25rem;
}

.weather-temp {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Hand wave animation */
.wave-hand {
  display: inline-block;
  transform-origin: 70% 70%;
}

h1:hover .wave-hand {
  animation: wave 0.9s ease-in-out;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(20deg); }
  30% { transform: rotate(-18deg); }
  45% { transform: rotate(15deg); }
  60% { transform: rotate(-12deg); }
  75% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* Dark / toggle styles removed */

/* Cute hover animation */
.info-box:hover {
  transform: translateY(-4px) scale(1.03) rotate(-1deg);
  background-position: 100% 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .info-box:hover { transform: none; }
}

/* Funny prank message */
.prank-message {
  font-size: 1rem;
  font-weight: 700;
  color: #e91e63;
  margin-top: 1rem;
  animation: shake 0.6s ease-in-out both;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}