:root {
  --bg: #fbf5f0;
  --bg-alt: #f6e8e2;
  --blush: #ecc9cd;
  --rose: #c98a9c;
  --plum: #5c2a3a;
  --plum-deep: #3f1c28;
  --gold: #b6893f;
  --text: #4a2530;
  --white: #ffffff;

  --font-display: 'Aref Ruqaa', serif;
  --font-body: 'Tajawal', sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--plum) transparent;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--plum);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--plum-deep); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.9;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

main { position: relative; z-index: 1; }

/* ---------- Sections ---------- */

.stage {
  min-height: 78vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  position: relative;
}

.stage--bismillah { background: var(--plum-deep); color: var(--bg-alt); overflow: hidden; }

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bg-overlay {
  position: absolute;
  inset: 0;
  /* Starts light enough for the video to read, ends fully on the hero
     section's own color so the two sections pour into one another. */
  background: linear-gradient(
    180deg,
    rgba(63, 28, 40, 0.35) 0%,
    rgba(63, 28, 40, 0.55) 45%,
    rgba(63, 28, 40, 0.85) 80%,
    var(--plum-deep) 100%
  );
  z-index: 1;
}
.stage--bismillah .reveal,
.stage--bismillah .scroll-cue {
  position: relative;
  z-index: 2;
}
/* Each section's background is itself a gradient that starts at the color
   the previous section ends on and ends at the color the next one begins
   with, so the whole page reads as one continuous wash instead of hard
   section-to-section cuts. */
.stage--hero { background: linear-gradient(180deg, var(--plum-deep), var(--plum) 55%, var(--bg) 100%); color: var(--bg-alt); }
.stage--intro { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 78%, var(--bg-alt) 100%); gap: 1.75rem; }
.stage--details { background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg-alt) 72%, var(--bg) 100%); }
.stage--message { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 70%, var(--blush) 100%); }
.stage--invite { background: linear-gradient(180deg, var(--blush) 0%, var(--blush) 72%, var(--bg) 100%); }
.stage--location { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 50%, var(--bg) 100%); }
.stage--outro { background: linear-gradient(180deg, var(--bg), var(--plum) 55%, var(--plum-deep) 100%); color: var(--bg-alt); }

/* ---------- Bismillah ---------- */

.bismillah {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.02em;
  margin: 0;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  opacity: 0.7;
}
.scroll-cue span {
  width: 1px;
  height: 34px;
  background: currentColor;
  animation: scrollcue 1.8s ease-in-out infinite;
}
.scroll-cue p { margin: 0; font-size: 0.8rem; letter-spacing: 0.05em; }
@keyframes scrollcue {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- Hero ---------- */

.kicker {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin: 0 0 0.5rem;
}

.names {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 6rem);
  margin: 0;
  line-height: 1.15;
}
.names .amp {
  font-size: 0.6em;
  color: var(--gold);
  margin: 0 0.15em;
}

.date-teaser {
  margin-top: 1rem;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.ornament {
  color: var(--gold);
  opacity: 0.8;
  margin: 1.25rem 0;
}

/* ---------- Intro / photo ---------- */

.intro-text p {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  max-width: 30rem;
  margin: 0 auto;
}

.photo-stack {
  position: relative;
  width: 74vw;
  max-width: 280px;
  margin: 0.5rem auto 3.5rem;
}

.polaroid {
  margin: 0;
  background: var(--white);
  border: 10px solid var(--white);
  border-radius: 4px;
  box-shadow: 0 20px 45px rgba(92, 42, 58, 0.25);
}
.polaroid img { display: block; width: 100%; height: auto; border-radius: 2px; }

.polaroid--back { transform: rotate(-4deg); }

.polaroid--front {
  position: absolute;
  width: 58%;
  right: -10%;
  bottom: -16%;
  transform: rotate(6deg);
  box-shadow: 0 15px 35px rgba(92, 42, 58, 0.3);
  z-index: 2;
}

/* ---------- Details ticket ---------- */

.ticket {
  background: var(--white);
  border: 1px solid var(--blush);
  border-radius: 18px;
  padding: 2.8rem 2.2rem;
  max-width: 24rem;
  width: 100%;
  box-shadow: 0 25px 60px rgba(92, 42, 58, 0.12);
}

.ticket-eyebrow {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.ticket-day {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--plum);
  margin: 0 0 1.5rem;
}

.ticket-divider {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px);
  margin: 0 0 1.5rem;
  opacity: 0.7;
}

.ticket-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.98rem;
  margin-bottom: 1rem;
  text-align: right;
}
.ticket-row:last-child { margin-bottom: 0; }
.ticket-icon { color: var(--gold); flex-shrink: 0; }

/* ---------- Message blocks ---------- */

.message-block { max-width: 32rem; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--plum);
  margin: 0 0 1.5rem;
}

.message-block p {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  margin: 0 0 1rem;
}

.emphasis {
  color: var(--gold);
  font-size: 1.15rem !important;
  font-weight: 500;
}

.signature {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--plum);
  margin-top: 1.5rem !important;
}

/* ---------- Location ---------- */

.location-block p { font-size: 1.1rem; margin: 0 0 1.5rem; }

.map-embed {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  margin: 0 auto 2rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(92, 42, 58, 0.2);
  border: 1px solid var(--blush);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--plum);
  color: var(--white);
  text-decoration: none;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 15px 35px rgba(92, 42, 58, 0.3);
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
  min-height: 44px;
}
.map-btn:hover { background: var(--plum-deep); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(92, 42, 58, 0.4); }
.map-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Outro ---------- */

.outro-text {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  margin: 0 0 1.5rem;
}
.names--outro { font-size: clamp(2.2rem, 8vw, 3.5rem); }

.credit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3rem;
  padding: 0.4rem 0.2rem;
  color: rgba(246, 232, 226, 0.55);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}
.credit:hover,
.credit:focus-visible { color: rgba(246, 232, 226, 0.9); }
.credit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.credit img { width: 18px; height: auto; filter: brightness(1) saturate(0.85); }

/* ---------- Animated heart ---------- */

.heart-beat {
  display: flex;
  justify-content: center;
  color: var(--rose);
  margin-bottom: 0.75rem;
}
.heart-beat svg {
  animation: heartbeat 1.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); }
  56% { transform: scale(1); }
}

/* ---------- Floating music button ---------- */

.music-btn {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--plum);
  color: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(92, 42, 58, 0.35);
  transition: transform 200ms ease, background 200ms ease;
}
.music-btn:hover { transform: scale(1.06); }
.music-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.music-bars {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 3px;
  height: 10px;
  align-items: flex-end;
}
.music-btn[aria-pressed="true"] .music-bars { display: flex; }
.music-bars i {
  width: 2.5px;
  background: var(--gold);
  border-radius: 2px;
  animation: musicbar 900ms ease-in-out infinite;
}
.music-bars i:nth-child(1) { height: 6px; animation-delay: 0ms; }
.music-bars i:nth-child(2) { height: 10px; animation-delay: 150ms; }
.music-bars i:nth-child(3) { height: 4px; animation-delay: 300ms; }
@keyframes musicbar {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* ---------- Petals background ---------- */

.petals { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

/* ---------- Scroll reveal base state ---------- */

.reveal { opacity: 1; }

/* ---------- Responsive ---------- */

@media (min-width: 768px) {
  .stage { padding: 3rem 3rem; }
  .photo-stack { max-width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span { animation: none; }
  .music-bars i { animation: none; }
  .heart-beat svg { animation: none; }
}