:root {
  --green: #0d8a5b;
  --green-deep: #065c3c;
  --marigold: #ff8a00;
  --gold: #ffb800;
  --fuchsia: #e91e63;
  --crimson: #c41e3a;
  --ink: #1a2e24;
  --ivory: #fff9ef;
  --cream: #fff3dc;
  --font-mr: "Noto Sans Devanagari", sans-serif;
  --font-script: "Tangerine", cursive;
  --font-body: "Poppins", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
}
button, a { font: inherit; color: inherit; }

.en {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: rgba(26, 46, 36, 0.62);
}
.en--light { color: rgba(255, 249, 239, 0.82); }

/* Gate */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, #12a86e 0%, transparent 55%),
    linear-gradient(160deg, var(--green) 0%, var(--green-deep) 60%, #043d28 100%);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
  overflow: hidden;
}
.gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 85%, rgba(255, 138, 0, 0.4), transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(255, 184, 0, 0.3), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(233, 30, 99, 0.22), transparent 40%);
}
.gate__toran {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  background:
    radial-gradient(circle at 8% 100%, var(--marigold) 7px, transparent 8px),
    radial-gradient(circle at 20% 70%, var(--gold) 9px, transparent 10px),
    radial-gradient(circle at 34% 100%, #fff 5px, transparent 6px),
    radial-gradient(circle at 48% 65%, var(--marigold) 10px, transparent 11px),
    radial-gradient(circle at 62% 100%, var(--fuchsia) 6px, transparent 7px),
    radial-gradient(circle at 76% 72%, var(--gold) 9px, transparent 10px),
    radial-gradient(circle at 90% 100%, var(--marigold) 7px, transparent 8px);
}

.envelope {
  position: relative;
  width: min(92vw, 440px);
  height: 318px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.35));
}
.envelope:hover, .envelope:focus-visible { transform: translateY(-6px); outline: none; }
.envelope:active .envelope__wax { transform: scale(0.9); }
.envelope__body {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fff9ef, #ffe8b8);
  border: 3px solid var(--gold);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  padding: 1.5rem 1rem 2rem;
}
.envelope__wax {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: auto;
  bottom: -62px;
  width: 112px;
  height: 112px;
  margin-left: -56px;
  border-radius: 50% 48% 50% 46%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 220, 210, 0.55), transparent 26%),
    radial-gradient(circle at 70% 72%, rgba(80, 0, 16, 0.35), transparent 42%),
    radial-gradient(circle at 50% 48%, #e44555 0%, #b11d34 42%, #7c1024 100%);
  box-shadow:
    inset 0 7px 10px rgba(255, 190, 180, 0.35),
    inset 0 -10px 14px rgba(60, 0, 12, 0.35),
    0 10px 16px rgba(0, 0, 0, 0.32);
  animation: wax-land 0.85s var(--ease) both, wax-pulse 2.1s ease-in-out 0.85s infinite;
}
.envelope__wax::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  border: 1.5px solid rgba(246, 214, 140, 0.85);
  box-shadow: inset 0 0 0 4px rgba(120, 12, 28, 0.25);
}
.envelope__wax::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  bottom: auto;
  width: 24px;
  height: 30px;
  margin-left: -12px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 50% 20%, #d43348, #7a1022 70%);
  z-index: -1;
}
.envelope__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 90, 0.75);
  animation: wax-ring 2.1s ease-out 0.85s infinite;
}
.envelope:hover .envelope__wax,
.envelope:focus-visible .envelope__wax {
  animation: wax-tilt 0.7s ease-in-out infinite alternate;
}
.envelope.is-opening .envelope__wax {
  animation: wax-break 0.6s var(--ease) forwards;
}
.envelope.is-opening .envelope__ring { animation: none; opacity: 0; }
.envelope__mono {
  position: relative;
  font-family: "Great Vibes", Tangerine, cursive;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #f8e7b0;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.45), 0 2px 2px rgba(70, 0, 16, 0.45);
}
.envelope__flowers { display: flex; gap: 0.35rem; margin-bottom: 0.15rem; }
.envelope__marathi {
  margin: 0.1rem 0 0;
  font-family: var(--font-mr);
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--green);
}
.envelope__names {
  margin: 0.15rem 0 0;
  font-family: Amita, "Noto Sans Devanagari", serif;
  font-size: 2.15rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--crimson);
}
.envelope__names span { font-family: var(--font-body); color: var(--fuchsia); font-size: 1rem; }
.envelope__hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: rgba(26,46,36,.6);
}

@keyframes wax-land {
  0% { transform: translateY(-36px) scale(1.2) rotate(-10deg); opacity: 0; }
  65% { transform: translateY(5px) scale(0.96) rotate(3deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes wax-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06) rotate(-2deg); }
}
@keyframes wax-ring {
  0% { transform: scale(0.9); opacity: 0.75; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes wax-tilt {
  from { transform: rotate(-4deg) scale(1.04); }
  to { transform: rotate(4deg) scale(1.08); }
}
@keyframes wax-break {
  0% { transform: scale(1); filter: none; opacity: 1; }
  35% { transform: scale(0.86) rotate(-8deg); }
  100% { transform: scale(1.4) rotate(14deg); opacity: 0; filter: blur(2px); }
}

.invite { animation: fade 0.8s var(--ease) both; }
.invite[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.music-toggle {
  display: none !important;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 40;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--marigold);
  border-radius: 8px;
  background: rgba(255,249,239,.95);
  color: var(--green-deep);
  cursor: pointer;
}
.music-toggle__label { font-family: var(--font-mr); font-weight: 700; font-size: 0.85rem; }

.song-dock {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 113px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.2rem 3rem;
  color: #fff;
  overflow: hidden;
}
.hero__bg, .hero__wash { position: absolute; inset: 0; }
.hero__wash {
  background:
    linear-gradient(180deg, rgba(6,92,60,.72), rgba(13,138,91,.5) 40%, rgba(196,30,58,.55)),
    radial-gradient(circle at 15% 80%, rgba(255,138,0,.55), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,184,0,.4), transparent 35%),
    linear-gradient(145deg, #0d8a5b, #c41e3a);
}
.hero__bloom {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .4;
  animation: float 8s ease-in-out infinite alternate;
}
.hero__bloom--1 { top: 12%; left: -30px; background: radial-gradient(circle, var(--gold), transparent 70%); }
.hero__bloom--2 { bottom: 16%; right: -40px; background: radial-gradient(circle, var(--fuchsia), transparent 70%); animation-delay: -3s; }
.hero__bloom--3 { top: 40%; left: 42%; width: 140px; height: 140px; background: radial-gradient(circle, #ffe566, transparent 70%); }
@keyframes float { to { transform: translateY(-20px) scale(1.08); } }

.toran {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 88px;
  z-index: 2;
  pointer-events: none;
}
.toran__string {
  position: absolute;
  top: 10px; left: 6%; right: 6%;
  height: 3px;
  background: #5c2e0a;
}
.toran__flowers {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-top: 6px;
}
.toran__item { animation: sway 3.2s ease-in-out infinite; }
@keyframes sway {
  50% { transform: rotate(4deg) translateY(4px); }
}

.hero__content { position: relative; z-index: 1; max-width: 36rem; }
.hero__shubh {
  margin: 0;
  font-family: var(--font-mr);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffe566;
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
}
.hero__names {
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.hero__name {
  font-family: Amita, "Noto Sans Devanagari", serif;
  font-size: clamp(3.2rem, 12vw, 5rem);
  font-weight: 400;
  line-height: 1.25;
}
.hero__name-en {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  color: #ffe566;
  margin-top: -0.15rem;
}
.hero__and {
  margin: 0.3rem 0;
  font-family: var(--font-mr);
  font-weight: 700;
  color: var(--gold);
}
.hero__jubilee {
  margin: 0.8rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mr);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.hero__jubilee span {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #d5d8de);
  color: #3e4854;
  font-size: 0.85rem;
}
.hero__tagline {
  margin: 1rem 0 0;
  font-family: var(--font-mr);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.6;
}
.hero__cta {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.85rem 1.4rem;
  background: linear-gradient(135deg, var(--gold), var(--marigold));
  color: var(--green-deep);
  text-decoration: none;
  font-family: var(--font-mr);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.hero__cta:hover { transform: translateY(-2px); }

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin-top: 1.35rem;
  color: #ffe566;
  text-decoration: none;
  font-family: var(--font-mr);
  font-weight: 700;
  letter-spacing: 0.04em;
  animation: cue-bob 1.5s ease-in-out infinite;
}
.scroll-cue.is-gone {
  opacity: 0;
  pointer-events: none;
}
.scroll-cue__chevron {
  width: 12px;
  height: 12px;
  margin-top: 0.15rem;
  border-right: 2px solid #ffe566;
  border-bottom: 2px solid #ffe566;
  transform: rotate(45deg);
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.garland-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(180deg, #ffe8b8, var(--cream));
}
.garland-divider__line {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--marigold), transparent);
}
.garland-divider--sm { background: transparent; padding-bottom: 0.4rem; }

.when-where, .ceremonies, .timeline, .closing {
  padding: 3.2rem 1.2rem;
  text-align: center;
}
.when-where {
  background:
    radial-gradient(circle at 10% 50%, rgba(255,184,0,.28), transparent 40%),
    radial-gradient(circle at 90% 50%, rgba(13,138,91,.16), transparent 40%),
    var(--cream);
}
.when-where__label, .ceremony-panel__day, .timeline__date {
  margin: 0;
  font-family: var(--font-mr);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--fuchsia);
}
.when-where__dates, .ceremonies__title, .timeline__title, .ceremony-panel__name, .closing__names {
  margin: 0.35rem 0 0;
  font-family: var(--font-mr);
  font-weight: 700;
  color: var(--green-deep);
}
.when-where__dates { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.ceremonies__title, .timeline__title { font-size: clamp(1.7rem, 5vw, 2.3rem); color: var(--crimson); }
.when-where__venue, .ceremony-panel__place { margin: 0.55rem 0 0; color: rgba(26,46,36,.7); }
.when-where__map {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--font-mr);
  font-weight: 700;
  color: var(--crimson);
  text-decoration: none;
  border-bottom: 2px solid var(--marigold);
}

.ceremonies { max-width: 760px; margin: 0 auto; }
.section-flowers { display: flex; justify-content: center; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; }
.ceremonies__intro {
  margin: 0.45rem 0 0;
  font-family: var(--font-mr);
  font-weight: 600;
  color: var(--green);
}
.ceremony-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.4rem 0;
}
.ceremony-nav__btn {
  border: 2px solid transparent;
  background: #e8f7ef;
  color: var(--green-deep);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mr);
  font-weight: 700;
  cursor: pointer;
  min-width: 4.4rem;
}
.ceremony-nav__btn small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: .7;
}
.ceremony-nav__btn.is-active {
  background: linear-gradient(135deg, var(--gold), var(--marigold));
  border-color: var(--marigold);
  box-shadow: 0 4px 12px rgba(255,138,0,.35);
}
.ceremony-panel {
  display: grid;
  gap: 1rem;
  align-items: center;
  text-align: center;
  padding: 1.4rem;
  border: 2px solid rgba(255,138,0,.4);
  border-radius: 18px;
  background: linear-gradient(160deg, #fff, var(--cream));
  animation: rise .45s var(--ease) both;
}
.ceremony-panel[hidden] { display: none; }
.ceremony-panel[data-tone="haldi"] { background: linear-gradient(160deg, #fffbeb, #fff3dc); }
.ceremony-panel[data-tone="mehndi"] { background: linear-gradient(160deg, #fff8f0, #f5e6d3); border-color: rgba(139,69,19,.35); }
.ceremony-panel[data-tone="sangeet"] { background: linear-gradient(160deg, #fff0f5, #ffe4ec); border-color: rgba(233,30,99,.35); }
.ceremony-panel[data-tone="lagn"] { background: linear-gradient(160deg, #f0fff6, #e8f7ef); border-color: rgba(13,138,91,.4); }
.ceremony-panel[data-tone="reception"] { background: linear-gradient(160deg, #fff5f5, #ffe8e8); border-color: rgba(196,30,58,.35); }
.ceremony-panel__name { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.ceremony-panel[data-tone="sangeet"] .ceremony-panel__name { color: #c2185b; }
.ceremony-panel[data-tone="mehndi"] .ceremony-panel__name { color: #8b4513; }
.ceremony-panel[data-tone="reception"] .ceremony-panel__name { color: var(--crimson); }
.ceremony-panel__desc {
  margin: 0.45rem auto 0;
  max-width: 36ch;
  font-family: var(--font-mr);
  line-height: 1.7;
}
@media (min-width: 560px) {
  .ceremony-panel { grid-template-columns: 120px 1fr; text-align: left; }
  .ceremony-panel__desc { margin-left: 0; }
}

.timeline {
  background: linear-gradient(180deg, var(--cream), #ffd08a);
}
.timeline__list {
  list-style: none;
  margin: 1.2rem auto 0;
  padding: 0;
  max-width: 440px;
}
.timeline__item {
  margin-top: 0.8rem;
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.78);
  border-radius: 14px;
  border-left: 5px solid var(--marigold);
}
.timeline__item[data-day="24"] { border-left-color: var(--fuchsia); }
.timeline__events {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-mr);
  font-weight: 700;
  font-size: 1.15rem;
}

.closing {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(13,138,91,.18), transparent 55%),
    radial-gradient(circle at 20% 100%, rgba(255,138,0,.22), transparent 40%),
    var(--ivory);
}
.closing__flowers { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.closing__script { margin: 0; font-family: var(--font-mr); font-weight: 700; color: var(--green); font-size: 1.3rem; }
.closing__names { font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--crimson); }
.closing__arosekar {
  font-family: "Great Vibes", Tangerine, cursive;
  font-weight: 400;
  font-size: 1.45em;
  line-height: 1;
  letter-spacing: 0.01em;
}
.closing__names-en { margin: 0.15rem 0 0.8rem; font-family: var(--font-script); font-size: 2rem; color: var(--marigold); }
.closing__note { margin: 0; font-family: var(--font-mr); }
.closing__blessing {
  margin: 1rem 0 0;
  font-family: var(--font-mr);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green-deep);
}

.petals { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.petal {
  position: absolute;
  top: -10%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  animation: fall linear forwards;
}
.petal--marigold { background: radial-gradient(circle at 30% 30%, #ffe566, #ff8a00); }
.petal--jasmine { background: radial-gradient(circle at 30% 30%, #fff, #ffe0b2); width: 10px; height: 10px; }
.petal--pink { background: radial-gradient(circle at 30% 30%, #ffb6c9, #e91e63); border-radius: 50% 0 50% 50%; }
@keyframes fall { to { transform: translateY(115vh) rotate(480deg); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .scroll-cue { animation: none; }
}