:root {
  --cream: #f5f0e6;
  --cream-deep: #ebe2d4;
  --paper: #fffaf2;
  --ink: #3d2e24;
  --muted: #7a6b5e;
  --sage: #a8b89a;
  --sage-deep: #6b7d5e;
  --sage-cover: #c4d7b2;
  --sage-cover-deep: #3d5c3a;
  --sage-soft: #e4ebe0;
  --paper-warm: #fdfbf7;
  --name-rose: #a52a4e;
  --rose: #b85c6a;
  --rose-deep: #8e3d4d;
  --gold: #c4a46a;
  --gold-soft: #e0cfa8;
  --line: #d8cbb8;
  --shadow: 0 20px 60px rgba(61, 42, 30, 0.12);
  --shadow-soft: 0 8px 30px rgba(25, 30, 18, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper-warm);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }

.hidden { display: none !important; }

/* ── Cover / Envelope ── */
.cover {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: var(--sage-cover);
  position: relative;
  overflow: hidden;
}

.cover-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 40px);
  width: 100%;
  max-width: min(720px, 100%);
  z-index: 2;
}

.cover-text {
  text-align: center;
  width: 100%;
}

.envelope-btn {
  padding: 0;
  border: none;
  background: transparent;
  transition: transform 0.5s var(--ease);
  filter: drop-shadow(0 18px 36px rgba(45, 62, 38, 0.22));
  display: block;
  margin: 0 auto;
}

.envelope-frame {
  position: relative;
  display: block;
  width: min(420px, 88vw);
  aspect-ratio: 1080 / 1920;
  margin: 0 auto;
  line-height: 0;
}

.envelope-btn:hover { transform: scale(1.03); }
.envelope-btn:active { transform: scale(0.97); }

.envelope-btn img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  border-radius: 2px;
}

/* Text only — envelope.png already includes the wax seal artwork */
.envelope-seal {
  position: absolute;
  left: 50%;
  top: 50.65%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b4a28;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(12px, 3.6vw, 17px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.envelope-btn.opening {
  animation: envelope-open 1s var(--ease) forwards;
}

@keyframes envelope-open {
  0% { transform: scale(1) translateY(0); opacity: 1; }
  60% { transform: scale(1.08) translateY(-12px); opacity: 1; }
  100% { transform: scale(1.15) translateY(-30px); opacity: 0; }
}

.cover-title {
  font-family: "Great Vibes", cursive;
  font-size: clamp(42px, 11vw, 58px);
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--sage-cover-deep);
  line-height: 1.1;
}

.cover-hint {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(16px, 4vw, 19px);
  color: var(--sage-cover-deep);
  letter-spacing: 0.02em;
  margin: 0;
  opacity: 0.85;
}

/* ── Main invite container ── */
.invite {
  width: 100%;
  min-height: 100svh;
  background: var(--paper-warm);
  position: relative;
}

.invite-frame {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.foliage {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(120px, 18vw);
  pointer-events: none;
  z-index: 5;
  background-repeat: no-repeat;
  background-size: contain;
}

.foliage-left {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 800'%3E%3Cpath fill='%232d5a3a' d='M0 0 Q30 80 10 160 Q40 240 5 320 Q35 400 0 480 Q25 560 8 640 Q30 720 0 800 L0 0Z'/%3E%3Cpath fill='%233d7048' d='M20 40 Q50 100 25 180 Q55 260 20 340 Q48 420 18 500 Q45 580 22 660 Q50 740 25 800' stroke='%232d5a3a' stroke-width='2' fill='none'/%3E%3Cellipse cx='35' cy='120' rx='18' ry='8' fill='%234a8f5c' transform='rotate(-30 35 120)'/%3E%3Cellipse cx='28' cy='200' rx='16' ry='7' fill='%235a9f6c' transform='rotate(20 28 200)'/%3E%3Cellipse cx='40' cy='300' rx='20' ry='9' fill='%234a8f5c' transform='rotate(-15 40 300)'/%3E%3Cellipse cx='25' cy='420' rx='17' ry='8' fill='%233d7048' transform='rotate(25 25 420)'/%3E%3Cellipse cx='38' cy='540' rx='19' ry='8' fill='%234a8f5c' transform='rotate(-20 38 540)'/%3E%3Cellipse cx='30' cy='660' rx='16' ry='7' fill='%235a9f6c' transform='rotate(15 30 660)'/%3E%3C/svg%3E");
  background-position: left top;
}

.foliage-right {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 800'%3E%3Cpath fill='%232d5a3a' d='M120 0 Q90 80 110 160 Q80 240 115 320 Q85 400 120 480 Q95 560 112 640 Q90 720 120 800 L120 0Z'/%3E%3Cpath fill='%233d7048' d='M100 60 Q70 130 95 210 Q65 290 100 370 Q72 450 102 530 Q75 610 98 690 Q70 760 95 800' stroke='%232d5a3a' stroke-width='2' fill='none'/%3E%3Ccircle cx='82' cy='140' r='6' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='90' cy='155' r='5' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='78' cy='160' r='4' fill='%23fff' opacity='0.8'/%3E%3Cellipse cx='88' cy='320' rx='18' ry='8' fill='%234a8f5c' transform='rotate(20 88 320)'/%3E%3Cellipse cx='75' cy='480' rx='16' ry='7' fill='%235a9f6c' transform='rotate(-25 75 480)'/%3E%3Ccircle cx='85' cy='600' r='5' fill='%23fff' opacity='0.9'/%3E%3Ccircle cx='92' cy='615' r='4' fill='%23fff' opacity='0.85'/%3E%3C/svg%3E");
  background-position: right top;
}

.section {
  padding: 56px 24px;
  position: relative;
  z-index: 2;
}

.section-inner {
  max-width: 900px;
  margin: 0 auto;
}

.eyebrow {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--rose);
  font-weight: 500;
  margin: 0 0 10px;
}

.script-title {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(52px, 14vw, 72px);
  line-height: 1;
  margin: 0;
  color: var(--ink);
}

.script-title span {
  font-family: "Cormorant Garamond", serif;
  font-size: 0.35em;
  color: var(--gold);
  vertical-align: middle;
}

.section-head {
  text-align: center;
  margin-bottom: 36px;
}

.section-head h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(36px, 9vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}

.section-head em {
  font-family: "Great Vibes", cursive;
  font-style: normal;
  color: var(--rose);
}

/* ── Intro / Couple details ── */
.intro-section {
  text-align: center;
  padding: 80px max(24px, 12vw) 56px;
  background: var(--paper-warm);
}

.ganesh-icon {
  width: clamp(80px, 14vw, 96px);
  height: clamp(80px, 14vw, 96px);
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}

.mantra {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(18px, 4vw, 24px);
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 32px;
}

.invite-lead {
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.55;
  color: #6b5b51;
  padding: 0 16px;
}

.couple-block {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 20px;
}

.couple-name {
  font-family: "Great Vibes", cursive;
  font-size: clamp(72px, 18vw, 108px);
  font-weight: 400;
  color: var(--name-rose);
  margin: 0;
  line-height: 1;
}

.couple-name::first-letter {
  font-family: "Cinzel", serif;
  font-size: 0.92em;
  font-weight: 500;
}

.couple-with {
  font-family: "Great Vibes", cursive;
  font-size: clamp(36px, 8vw, 48px);
  color: var(--name-rose);
  margin: 16px 0;
  opacity: 0.92;
}

.parents {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(17px, 3.8vw, 22px);
  color: #5a4d42;
  margin: 8px 0 24px;
  line-height: 1.45;
}

.date-banner {
  text-align: center;
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--sage-soft) 100%);
  padding: 40px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ── Scratch card + countdown reveal ── */
.reveal-section {
  text-align: center;
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--sage-soft) 55%, var(--sage-soft) 100%);
  padding: 48px 24px 56px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.confetti-canvas-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.confetti-canvas-wrap.active {
  opacity: 1;
}

.confetti-canvas-wrap.fade-out {
  opacity: 0;
}

#confettiCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.scratch-stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.scratch-card {
  position: relative;
  width: min(560px, 94vw);
  height: clamp(160px, 22vw, 190px);
  border-radius: 18px;
  border: 2px solid var(--gold);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(140, 110, 60, 0.2);
}

.scratch-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5e6c8 0%, #e8c98a 45%, #d4a85a 100%);
  padding: 16px;
}

.scratch-label {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: #5a4a32;
  margin: 0 0 8px;
}

.scratch-date {
  font-family: "Great Vibes", cursive;
  font-size: clamp(32px, 8vw, 44px);
  color: var(--name-rose);
  margin: 0;
  line-height: 1;
}

.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}

.scratch-canvas:active {
  cursor: grabbing;
}

.scratch-hint {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  color: rgba(90, 74, 50, 0.75);
  pointer-events: none;
  transition: opacity 0.3s;
}

.scratch-card.revealed .scratch-hint,
.scratch-card.revealed .scratch-canvas {
  opacity: 0;
  pointer-events: none;
}

.countdown-reveal {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.countdown-reveal.show {
  opacity: 1;
  transform: translateY(0);
}

.reveal-venue {
  position: relative;
  z-index: 2;
  margin-top: 24px;
}

.timer-boxed {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.timer-boxed > div {
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 18px 16px 14px;
  min-width: 72px;
  box-shadow: 0 4px 16px rgba(140, 110, 60, 0.12);
}

.timer-boxed strong {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(32px, 8vw, 42px);
  font-weight: 600;
  color: var(--name-rose);
  display: block;
  line-height: 1;
}

.timer-boxed span {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 8px;
  display: block;
}

.banner-date {
  font-family: "Cinzel", serif;
  font-size: clamp(20px, 4.5vw, 28px);
  letter-spacing: 0.15em;
  color: var(--name-rose);
  margin: 10px 0;
}

.banner-venue {
  font-size: clamp(17px, 3.8vw, 22px);
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ── Music button ── */
.music-btn {
  position: fixed;
  z-index: 50;
  right: 16px;
  top: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: rgba(255, 250, 242, 0.92);
  color: var(--rose-deep);
  font-size: 20px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
}

.music-btn.playing { animation: pulse 1.4s infinite; }

@keyframes pulse {
  50% { transform: scale(1.08); }
}

/* ── Events ── */
.events-section {
  background: var(--sage-soft);
}

.events-section .section-head {
  max-width: 1200px;
  margin: 0 auto 32px;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4px;
}

.event-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 5 / 6;
  box-shadow: 0 12px 40px rgba(40, 50, 35, 0.14);
}

.event-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.haldi-bg { background-image: url("assets/bg-haldi.jpg"); }
.sangeet-bg { background-image: url("assets/bg-sangeet.jpg"); }
.mehandi-bg { background-image: url("assets/bg-mehandi.png"); }
.wedding-bg { background-image: url("assets/bg-wedding.jpg"); }

.event-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  min-height: 320px;
}

.events-grid .event-card .event-layout {
  grid-template-areas: "visual info";
}

.event-layout.has-couple-art {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(10px, 2vw, 14px);
}

.event-visual-side {
  grid-area: visual;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 16px 12px;
}

.has-couple-art .event-visual-side {
  justify-content: flex-end;
  align-items: center;
  padding: 14px 4px 14px 16px;
}

.event-couple-art {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  background: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.has-couple-art .event-couple-art {
  max-width: 100%;
  max-height: 92%;
  width: auto;
}

.has-couple-art .event-info {
  padding: 28px 30px 28px 14px;
}

.event-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: right;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 28px 24px;
  color: #fff;
  background: linear-gradient(90deg, transparent 0%, rgba(20, 15, 12, 0.45) 35%);
}

.events-grid .event-card .event-meta div {
  align-items: stretch;
  text-align: right;
}

.event-info h3 {
  font-family: "Great Vibes", cursive;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 400;
  margin: 0 0 4px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  width: 100%;
  box-sizing: border-box;
  padding-right: 0.2em;
}

.event-tagline {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(14px, 2vw, 16px);
  font-style: italic;
  margin: 0 0 18px;
  opacity: 0.92;
  line-height: 1.35;
  width: 100%;
  box-sizing: border-box;
}

.event-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
  width: 100%;
}

.event-meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-meta dt {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  font-weight: 500;
}

.event-meta dd {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* ── Map ── */
.map-section {
  background: var(--sage-soft);
  text-align: center;
}

.map-section .section-head,
.map-section .map-wrap,
.map-section .map-link {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.map-section .map-link {
  display: inline-block;
}

.map-wrap {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-link {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 28px;
  border: 1px solid var(--rose);
  border-radius: 30px;
  color: var(--rose);
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}

.map-link:hover {
  background: var(--rose);
  color: white;
}

/* ── Countdown ── */
.countdown-section {
  background: var(--paper);
  text-align: center;
}

.countdown-section .section-head,
.countdown-section .timer {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.countdown-section .section-head {
  margin-bottom: 36px;
}

.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timer > div {
  text-align: center;
  min-width: 68px;
}

.timer strong {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(36px, 10vw, 48px);
  font-weight: 500;
  display: block;
  line-height: 1;
}

.timer span {
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--muted);
}

.timer i {
  font-style: normal;
  color: var(--gold);
  font-size: 24px;
  align-self: flex-start;
  margin-top: 8px;
}

/* ── Gallery ── */
.gallery-section {
  background: var(--cream-deep);
}

.gallery-section .section-head,
.gallery-section .gallery-grid {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.gallery-section .section-head {
  margin-bottom: 36px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.photo {
  margin: 0;
  min-height: 160px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 160px;
  transition: transform 0.5s var(--ease);
}

.photo:hover img {
  transform: scale(1.04);
}

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(40, 28, 22, 0.65) 100%);
  pointer-events: none;
}

.photo figcaption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 1;
  color: white;
  font-size: 16px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* ── RSVP ── */
.rsvp-section {
  background: var(--paper);
}

.rsvp-section .section-head,
.rsvp-section .rsvp-form {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.rsvp-section .section-head {
  margin-bottom: 36px;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 14px 4px;
  color: var(--ink);
  outline: none;
  margin-bottom: 8px;
}

.choices {
  margin: 20px 0;
}

.choices label {
  display: block;
  border: 1px solid var(--line);
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.choices label:has(input:checked) {
  border-color: var(--rose);
  background: rgba(184, 92, 106, 0.05);
}

.choices input {
  width: auto;
  margin: 0 10px 0 0;
}

.submit-btn {
  width: 100%;
  border: 0;
  background: var(--rose-deep);
  color: white;
  padding: 15px;
  border-radius: 30px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 12px;
  transition: background 0.3s;
}

.submit-btn:hover { background: var(--rose); }

.form-msg {
  text-align: center;
  font-size: 14px;
  color: var(--rose);
  min-height: 20px;
  margin-top: 12px;
}

/* ── Footer ── */
.footer {
  text-align: center;
  background: var(--sage-deep);
  color: #f5f0e6;
  padding: 56px 24px 72px;
}

.footer-tag {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  opacity: 0.8;
  margin: 0 0 12px;
}

.footer-names {
  color: #f5f0e6;
  font-size: clamp(56px, 14vw, 80px);
  text-transform: capitalize;
}

.footer-copy {
  font-size: 18px;
  opacity: 0.9;
  margin: 12px 0;
}

.footer-date {
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  opacity: 0.7;
  margin: 20px 0 0;
}

/* ── Petals ── */
#petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

#petals.on-invite {
  z-index: 40;
}

.petal {
  position: absolute;
  top: -40px;
  line-height: 1;
  opacity: 0;
  animation: fall linear forwards;
  will-change: transform, opacity;
}

.petal-pink { color: #e8879a; }
.petal-yellow { color: #e8b84a; }
.petal-leaf { color: #6b9e5a; }
.petal-blossom { color: #f0a0b0; }

@keyframes fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot));
    opacity: 0;
  }
  8% { opacity: var(--peak); }
  90% { opacity: var(--peak); }
  100% {
    transform: translate3d(var(--x), 110vh, 0) rotate(calc(var(--rot) + 520deg));
    opacity: 0;
  }
}

/* ── Desktop ── */
@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 520px;
  }

  .event-card {
    aspect-ratio: auto;
    min-height: 260px;
  }

  .event-layout {
    min-height: 260px;
  }

  .events-grid .event-card .event-layout {
    grid-template-areas: "visual info";
  }

  .event-info {
    padding: 24px 20px;
  }

  .has-couple-art .event-info {
    padding: 24px 26px 24px 12px;
  }

  .event-visual-side {
    padding: 12px 10px;
  }

  .has-couple-art .event-visual-side {
    padding: 10px 2px 10px 12px;
  }

  .event-couple-art {
    max-height: 76%;
  }

  .has-couple-art .event-couple-art {
    max-height: 88%;
  }
}

@media (min-width: 600px) {
  .section {
    padding: 72px 48px;
  }

  .intro-section {
    padding-top: 96px;
    padding-bottom: 72px;
  }

  .couple-name {
    font-size: clamp(88px, 12vw, 120px);
  }

  .foliage {
    width: min(140px, 12vw);
  }

  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .p1 { grid-row: span 2; min-height: 340px; }
  .p1, .p2 { min-height: 280px; }
  .photo { min-height: 200px; }
}

@media (min-width: 769px) {
  .events-grid .event-card .event-info {
    padding: 28px 24px;
  }
}

@media (min-width: 900px) {
  .section {
    padding-left: max(48px, calc((100% - 900px) / 2));
    padding-right: max(48px, calc((100% - 900px) / 2));
  }

  .intro-section {
    padding-left: max(80px, 12vw);
    padding-right: max(80px, 12vw);
  }

  .events-section {
    padding-left: max(32px, 4vw);
    padding-right: max(32px, 4vw);
  }
}

@media (min-width: 1100px) {
  .events-grid {
    gap: 24px;
  }

  .event-card {
    min-height: 360px;
  }
}