/* ===== Reset & base ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: "Google Sans", "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: #fff;
}

html.site-locked body {
  overflow: hidden;
}

.loading-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: url('../assets/images/common/peach.png') center center / cover no-repeat;
  transition: opacity 380ms ease, visibility 380ms ease;
}

.intro-lantern-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.intro-lantern {
  position: absolute;
  left: 50%;
  bottom: -8vh;
  width: var(--lantern-size, clamp(2.1rem, 5vw, 4rem));
  height: calc(var(--lantern-size, clamp(2.1rem, 5vw, 4rem)) * 1.65);
  background: url('../assets/images/common/lantern.avif') center center / contain no-repeat;
  opacity: var(--lantern-opacity, 0.95);
  will-change: transform, opacity;
  transform: translate3d(var(--lantern-x, 0vw), 36vh, 0) rotate(var(--lantern-angle, 0deg));
  animation:
    lantern-rise var(--lantern-rise-duration, 4.4s) cubic-bezier(0.2, 0.8, 0.24, 1) var(--lantern-delay, 0s) forwards,
    lantern-hover var(--lantern-hover-duration, 4.2s) ease-in-out var(--lantern-hover-delay, 5.1s) infinite alternate;
  filter: drop-shadow(0 0.35rem 0.7rem rgba(0, 0, 0, 0.35));
}

@keyframes lantern-rise {
  0% {
    transform: translate3d(var(--lantern-x, 0vw), 36vh, 0) rotate(var(--lantern-angle, 0deg));
    opacity: 0;
  }
  16% {
    opacity: var(--lantern-opacity, 0.95);
  }
  100% {
    transform: translate3d(var(--lantern-x, 0vw), var(--lantern-rest-y, 26vh), 0) rotate(var(--lantern-angle, 0deg));
    opacity: var(--lantern-opacity, 0.95);
  }
}

@keyframes lantern-hover {
  0% {
    transform: translate3d(var(--lantern-x, 0vw), var(--lantern-rest-y, 26vh), 0) rotate(var(--lantern-angle, 0deg));
  }
  100% {
    transform: translate3d(var(--lantern-x, 0vw), calc(var(--lantern-rest-y, 26vh) + var(--lantern-hover-range, 1.4vh)), 0) rotate(calc(var(--lantern-angle, 0deg) + 1deg));
  }
}

.loading-gate-card {
  position: relative;
  z-index: 2;
  width: 100vw;
  min-height: 100vh;
  border-radius: 0;
  padding: 0;
  text-align: center;
  background: url('../assets/images/common/letter.png') center center / clamp(106vmin, 126vmin, 170vmin) no-repeat;
  border: 0;
  box-shadow: none;
}

@media (max-width: 48rem) {
  .loading-gate-card {
    background-position: center center;
    background-size: clamp(116vmin, 138vmin, 182vmin);
  }
}

.loading-gate-title {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.loading-gate-subtitle {
  margin-top: 0.7rem;
  font-size: clamp(0.84rem, 2.8vw, 1rem);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

html:not(.site-locked) .loading-gate {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===== Gender toggle ===== */
:root {
  --ui-toggle-height: 1.8rem;
}

.gender-toggle {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 130;
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(0.25rem);
}

.gender-toggle-label {
  align-self: center;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0 0.25rem 0 0.2rem;
  max-width: 4.8rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0.92;
  transform: translateX(0);
  transition: opacity 340ms ease, transform 340ms ease, max-width 340ms ease, padding 340ms ease;
}

.gender-toggle-btn {
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.05em;
  min-height: var(--ui-toggle-height);
  padding: 0 0.62rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.gender-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.gender-toggle-btn.active {
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-weight: 600;
}

/* ===== Invite toggle ===== */
.invite-toggle {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 120;
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(0.25rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.invite-toggle.hidden {
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
}

.invite-toggle-link {
  text-decoration: none;
  color: #fff;
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0.05em;
  min-height: var(--ui-toggle-height);
  padding: 0 0.62rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.invite-toggle-link:hover {
  background: rgba(255, 255, 255, 0.18);
}

.invite-toggle-link.active {
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-weight: 600;
}

/* ===== Sections: 100vh each, scroll snap ===== */
.sections {
  position: relative;
  z-index: 1;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100vh;
  scrollbar-width: none;
}

.sections::-webkit-scrollbar {
  display: none;
}

/* Layer 0: section backgrounds only */
.section-bg {
  height: 100vh;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  z-index: 0;
}

.section-content {
  text-align: center;
  padding: 2rem;
}

.section-content-wrap[data-section]:not([data-section="intro"]) .event-title,
.section-content-wrap[data-section]:not([data-section="intro"]) .event-subtitle,
.section-content-wrap[data-section]:not([data-section="intro"]) .event-datetime,
.section-content-wrap[data-section]:not([data-section="intro"]) .dress-code {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 520ms ease, transform 520ms ease;
}

.section-content-wrap.is-active[data-section]:not([data-section="intro"]) .event-title,
.section-content-wrap.is-active[data-section]:not([data-section="intro"]) .event-subtitle,
.section-content-wrap.is-active[data-section]:not([data-section="intro"]) .event-datetime,
.section-content-wrap.is-active[data-section]:not([data-section="intro"]) .dress-code {
  opacity: 1;
  transform: translateY(0);
}

.section-content-wrap.is-active[data-section]:not([data-section="intro"]) .event-subtitle {
  transition-delay: 80ms;
}

.section-content-wrap.is-active[data-section]:not([data-section="intro"]) .event-datetime {
  transition-delay: 140ms;
}

.section-content-wrap.is-active[data-section]:not([data-section="intro"]) .dress-code {
  transition-delay: 200ms;
}

/* Layer 2: section content overlays (above flowers) */
.section-contents {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 600vh;
  z-index: 2;
  pointer-events: none;
}

.section-contents .section-content-wrap {
  pointer-events: auto;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-contents .section-content-wrap[data-section="intro"] { position: absolute; top: 0; left: 0; right: 0; }
.section-contents .section-content-wrap[data-section="haldi"] { position: absolute; top: 100vh; left: 0; right: 0; }
.section-contents .section-content-wrap[data-section="baraat"] { position: absolute; top: 200vh; left: 0; right: 0; }
.section-contents .section-content-wrap[data-section="sangeet"] { position: absolute; top: 300vh; left: 0; right: 0; }
.section-contents .section-content-wrap[data-section="marriage"] { position: absolute; top: 400vh; left: 0; right: 0; }
.section-contents .section-content-wrap[data-section="reception"] { position: absolute; top: 500vh; left: 0; right: 0; }

.section-contents .section-content-wrap[data-section="intro"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.section-contents .section-content-wrap[data-section="intro"]::before {
  content: '';
  position: absolute;
  left: var(--intro-feature-left, 50%);
  top: var(--intro-feature-top, auto);
  bottom: var(--intro-feature-bottom, auto);
  width: var(--intro-feature-width, 0);
  height: var(--intro-feature-height, 0);
  transform: translate(var(--intro-feature-translate-x, -50%), var(--intro-feature-translate-y, -50%)) scale(var(--intro-feature-scale, 1));
  background-image: var(--intro-feature-image, none);
  background-repeat: no-repeat;
  background-position: var(--intro-feature-bg-position, center center);
  background-size: contain;
  opacity: var(--intro-feature-opacity, 0);
  filter: var(--intro-feature-filter, none);
  pointer-events: none;
  z-index: 1;
}

/* ===== Intro (main screen) – traditional palette ===== */
.section-bg.section-intro {
  background-color: var(--intro-bg-color, #4a1515);
  background-image: var(--intro-bg-gradient, linear-gradient(160deg, #4a1515 0%, #6b2222 25%, #7d2a2a 50%, #6b2222 75%, #4a1515 100%));
  box-shadow: none;
}

.section-bg.section-intro::before {
  content: '';
  position: absolute;
  left: var(--intro-bg-overlay-left, 50%);
  top: var(--intro-bg-overlay-top, 50%);
  width: var(--intro-bg-overlay-width, 150vmax);
  height: var(--intro-bg-overlay-height, 150vmax);
  margin-left: var(--intro-bg-overlay-margin-left, -75vmax);
  margin-top: var(--intro-bg-overlay-margin-top, -75vmax);
  background-image: var(--intro-bg-image, url('../assets/background/white.png'));
  background-repeat: var(--intro-bg-repeat, repeat);
  background-size: var(--intro-bg-size, 10rem 10rem);
  background-position: var(--intro-bg-position, 0 0);
  transform: rotate(var(--intro-bg-rotate, 45deg));
  mix-blend-mode: var(--intro-bg-blend, overlay);
  opacity: var(--intro-bg-opacity, 0.35);
  pointer-events: none;
  z-index: 0;
}

.section-bg.section-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 0;
}

.section-contents [data-section="intro"] .section-content {
  max-width: min(92vw, 48rem);
  padding: clamp(1.5rem, 4vw, 2.8rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 1.25rem;
  border: 0.0625rem solid currentColor;
  background: linear-gradient(160deg, rgba(8, 14, 28, 0.38) 0%, rgba(8, 14, 28, 0.26) 100%);
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(0.2rem);
  position: relative;
  overflow: hidden;
  animation: intro-card-breathe 6.5s ease-in-out infinite;
  z-index: 2;
}

.section-contents [data-section="intro"] .intro-title,
.section-contents [data-section="intro"] .intro-hint,
.section-contents [data-section="intro"] .intro-datetime,
.section-contents [data-section="intro"] .intro-dress-code,
.section-contents [data-section="intro"] .intro-countdown {
  font-family: "Cormorant Upright", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.section-contents [data-section="intro"] .section-content::before {
  content: '';
  position: absolute;
  inset: 0.4rem;
  border-radius: 1rem;
  border: 0.0625rem solid rgba(255, 231, 171, 0.25);
  pointer-events: none;
}

.section-contents [data-section="intro"] .section-content::after {
  content: '';
  position: absolute;
  left: -18%;
  top: -32%;
  width: 65%;
  height: 170%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 25%, rgba(255, 241, 204, 0.2) 50%, rgba(255, 255, 255, 0) 75%);
  transform: rotate(12deg);
  pointer-events: none;
}

@keyframes intro-card-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.2rem); }
}

.intro-title {
  font-size: clamp(2.2rem, 6.8vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.12;
  margin-bottom: 1rem;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    #b8860b 0%,
    #d4af37 15%,
    #f4e4bc 30%,
    #ffd700 45%,
    #f4e4bc 60%,
    #d4af37 75%,
    #b8860b 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: title-shimmer 5s linear infinite;
  filter: drop-shadow(0 0 0.625rem rgba(212, 175, 55, 0.42)) drop-shadow(0 0.15rem 0.45rem rgba(0, 0, 0, 0.45));
}

.intro-title .intro-line {
  display: block;
}

.intro-ganesh {
  display: block;
  width: clamp(3.2rem, 8vw, 4.6rem);
  height: auto;
  margin: 0 auto 0.85rem;
  filter: drop-shadow(0 0.15rem 0.35rem rgba(0, 0, 0, 0.45));
}

@keyframes title-shimmer {
  to { background-position: 200% center; }
}

.intro-hint {
  font-size: clamp(0.84rem, 2.2vw, 1.04rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 248, 230, 0.96);
  text-shadow: 0 0.12rem 0.28rem rgba(0, 0, 0, 0.48);
  margin-top: 0.25rem;
}

.section-contents [data-section="intro"] .intro-hint::before,
.section-contents [data-section="intro"] .intro-hint::after {
  content: '  \2726  ';
  color: rgba(255, 222, 147, 0.9);
  letter-spacing: 0;
}

.intro-countdown {
  margin-top: 0.9rem;
  font-size: clamp(0.82rem, 2.1vw, 0.98rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 236, 199, 0.95);
  text-shadow: 0 0.12rem 0.28rem rgba(0, 0, 0, 0.48);
}

.intro-cta-row {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0.0625rem solid rgba(255, 228, 170, 0.55);
  padding: 0.46rem 0.92rem;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff7e5;
  background: rgba(39, 16, 16, 0.5);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.cta-btn:hover {
  transform: translateY(-0.05rem);
  background: rgba(255, 244, 218, 0.2);
}

.cta-btn-primary {
  background: linear-gradient(120deg, rgba(173, 115, 22, 0.95) 0%, rgba(224, 173, 74, 0.95) 100%);
  color: #2a1206;
  border-color: rgba(255, 231, 189, 0.8);
  font-weight: 600;
}

.cta-btn-primary:hover {
  background: linear-gradient(120deg, rgba(192, 134, 37, 0.98) 0%, rgba(239, 186, 83, 0.98) 100%);
}

/* ===== Marigold rain (max 9 on screen, global fixed layers) ===== */
.marigold-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.marigold-rain-global {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Back layer: spans full scroll height so flowers continue across all sections */
.marigold-rain-global.marigold-rain-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 600vh;
  z-index: 1;
  pointer-events: none; /* layer doesn't block; hit-test in JS */
}

.marigold-rain-global.marigold-rain-front {
  z-index: 2;
}

/* Depth used for scale only; blur & opacity set in JS by size */

/* ===== Haldi ===== */
.section-bg-haldi {
  background-color: var(--haldi-bg-color, #ffecb3);
  background-image: var(--haldi-bg-gradient, linear-gradient(180deg, #fff8e1 0%, #ffecb3 50%, #ffcc02 100%));
  position: relative;
  overflow: hidden;
}

.section-bg-haldi::before {
  content: '';
  position: absolute;
  left: var(--haldi-bg-overlay-left, 0);
  top: var(--haldi-bg-overlay-top, 0);
  width: var(--haldi-bg-overlay-width, 100%);
  height: var(--haldi-bg-overlay-height, 100%);
  margin-left: var(--haldi-bg-overlay-margin-left, 0);
  margin-top: var(--haldi-bg-overlay-margin-top, 0);
  background-image: var(--haldi-bg-image, url('../assets/background/yellow.jpg'));
  background-repeat: var(--haldi-bg-repeat, repeat);
  background-size: var(--haldi-bg-size, 10rem 10rem);
  background-position: var(--haldi-bg-position, 0 0);
  transform: rotate(var(--haldi-bg-rotate, 0deg));
  mix-blend-mode: var(--haldi-bg-blend, overlay);
  pointer-events: none;
  z-index: 0;
  opacity: var(--haldi-bg-opacity, 0.4);
}

.section-contents [data-section="haldi"] {
  color: var(--haldi-text-color, #5d4e37);
}

.marigold-rain .marigold {
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
  animation: marigold-fall linear infinite;
}

@keyframes marigold-fall {
  /* Fall through full scroll height (600vh); gentle right drift so flowers stay on screen */
  0% { transform: translate(-4vh, 0) rotate(0deg); }
  100% { transform: translate(18vh, 600vh) rotate(360deg); }
}

.section-content {
  position: relative;
}

.section-contents [data-section="haldi"] .event-title {
  color: var(--haldi-title-color, #e65100);
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
}

.section-contents [data-section="haldi"] .event-subtitle {
  color: var(--haldi-subtitle-color, #795548);
}

/* ===== Sangeet ===== */
.section-bg-sangeet {
  background-color: var(--sangeet-bg-color, #2d6b2b);
  background-image: var(--sangeet-bg-gradient, linear-gradient(160deg, #1a4518 0%, #2d6b2b 35%, #3c8a3a 70%, #48a046 100%));
  position: relative;
  overflow: hidden;
}

.section-bg-sangeet::before {
  content: '';
  position: absolute;
  left: var(--sangeet-bg-overlay-left, 50%);
  top: var(--sangeet-bg-overlay-top, 50%);
  width: var(--sangeet-bg-overlay-width, 150vmax);
  height: var(--sangeet-bg-overlay-height, 150vmax);
  margin-left: var(--sangeet-bg-overlay-margin-left, -75vmax);
  margin-top: var(--sangeet-bg-overlay-margin-top, -75vmax);
  background-image: var(--sangeet-bg-image, url('../assets/background/purple.png'));
  background-repeat: var(--sangeet-bg-repeat, repeat);
  background-size: var(--sangeet-bg-size, 15rem 15rem);
  background-position: var(--sangeet-bg-position, 0 0);
  transform: rotate(var(--sangeet-bg-rotate, 30deg));
  mix-blend-mode: var(--sangeet-bg-blend, overlay);
  pointer-events: none;
  z-index: 0;
  opacity: var(--sangeet-bg-opacity, 0.4);
}

.section-contents [data-section="sangeet"] {
  color: var(--sangeet-text-color, #e8f5e9);
}

.section-contents [data-section="haldi"] .section-content,
.section-contents [data-section="sangeet"] .section-content,
.section-contents [data-section="baraat"] .section-content,
.section-contents [data-section="marriage"] .section-content,
.section-contents [data-section="reception"] .section-content {
  isolation: isolate;
  position: relative;
  max-width: min(92vw, 44rem);
  padding: clamp(1.1rem, 3vw, 1.7rem) clamp(1rem, 3.2vw, 2rem);
  border-radius: 1rem;
}

.section-contents [data-section="haldi"] .section-content::after,
.section-contents [data-section="sangeet"] .section-content::after,
.section-contents [data-section="baraat"] .section-content::after,
.section-contents [data-section="marriage"] .section-content::after,
.section-contents [data-section="reception"] .section-content::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  border: 0.0625rem solid currentColor;
  background: linear-gradient(160deg, rgba(9, 15, 28, 0.4) 0%, rgba(9, 15, 28, 0.26) 100%);
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(0.18rem);
  pointer-events: none;
  z-index: 1;
}

.section-contents [data-section="haldi"] .section-content > *,
.section-contents [data-section="sangeet"] .section-content > *,
.section-contents [data-section="baraat"] .section-content > *,
.section-contents [data-section="marriage"] .section-content > *,
.section-contents [data-section="reception"] .section-content > * {
  position: relative;
  z-index: 2;
}

.section-contents [data-section="haldi"] .section-content::before,
.section-contents [data-section="sangeet"] .section-content::before,
.section-contents [data-section="baraat"] .section-content::before,
.section-contents [data-section="marriage"] .section-content::before,
.section-contents [data-section="reception"] .section-content::before {
  content: '';
  position: absolute;
  left: var(--section-feature-left, 50%);
  top: var(--section-feature-top, 50%);
  width: var(--section-feature-width, min(72vw, 31rem));
  height: var(--section-feature-height, min(72vh, 31rem));
  transform: translate(var(--section-feature-translate-x-active, var(--section-feature-translate-x-desktop, -50%)), var(--section-feature-translate-y-active, var(--section-feature-translate-y-desktop, -50%))) rotate(var(--section-feature-rotate, 0deg)) scale(var(--section-feature-scale-active, var(--section-feature-scale-desktop, 1)));
  background-image: var(--section-feature-image, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: var(--section-feature-opacity, 1);
  pointer-events: none;
  z-index: 0;
  filter: var(--section-feature-filter, drop-shadow(0 0.5rem 1.2rem rgba(0, 0, 0, 0.3)));
  mix-blend-mode: normal;
  transition: none;
}

.section-contents [data-section="haldi"] .section-content::before { --section-feature-image: var(--haldi-feature-image, none); --section-feature-left: var(--haldi-feature-left, 50%); --section-feature-top: var(--haldi-feature-top, 50%); --section-feature-width: var(--haldi-feature-width, min(72vw, 31rem)); --section-feature-height: var(--haldi-feature-height, min(72vh, 31rem)); --section-feature-translate-x-desktop: var(--haldi-feature-translate-x-desktop, var(--haldi-feature-translate-x, -50%)); --section-feature-translate-y-desktop: var(--haldi-feature-translate-y-desktop, var(--haldi-feature-translate-y, -50%)); --section-feature-scale-desktop: var(--haldi-feature-scale-desktop, var(--haldi-feature-scale, 1)); --section-feature-translate-x-tablet: var(--haldi-feature-translate-x-tablet, var(--section-feature-translate-x-desktop)); --section-feature-translate-y-tablet: var(--haldi-feature-translate-y-tablet, var(--section-feature-translate-y-desktop)); --section-feature-scale-tablet: var(--haldi-feature-scale-tablet, var(--section-feature-scale-desktop)); --section-feature-translate-x-phone: var(--haldi-feature-translate-x-phone, var(--section-feature-translate-x-tablet)); --section-feature-translate-y-phone: var(--haldi-feature-translate-y-phone, var(--section-feature-translate-y-tablet)); --section-feature-scale-phone: var(--haldi-feature-scale-phone, var(--section-feature-scale-tablet)); --section-feature-enter-from-x: var(--haldi-feature-enter-from-x, 0px); --section-feature-enter-from-y: var(--haldi-feature-enter-from-y, 0px); --section-feature-enter-from-rotate: var(--haldi-feature-enter-from-rotate, 0deg); --section-feature-enter-from-scale: var(--haldi-feature-enter-from-scale, 0.94); --section-feature-enter-duration: var(--haldi-feature-enter-duration, 700ms); --section-feature-enter-delay: var(--haldi-feature-enter-delay, 0ms); --section-feature-enter-timing: var(--haldi-feature-enter-timing, cubic-bezier(0.22, 1, 0.36, 1)); opacity: var(--haldi-feature-opacity, 1); filter: var(--haldi-feature-filter, var(--section-feature-filter, drop-shadow(0 0.5rem 1.2rem rgba(0, 0, 0, 0.3)))); }
.section-contents [data-section="sangeet"] .section-content::before { --section-feature-image: var(--sangeet-feature-image, none); --section-feature-left: var(--sangeet-feature-left, 50%); --section-feature-top: var(--sangeet-feature-top, 50%); --section-feature-width: var(--sangeet-feature-width, min(72vw, 31rem)); --section-feature-height: var(--sangeet-feature-height, min(72vh, 31rem)); --section-feature-translate-x-desktop: var(--sangeet-feature-translate-x-desktop, var(--sangeet-feature-translate-x, -50%)); --section-feature-translate-y-desktop: var(--sangeet-feature-translate-y-desktop, var(--sangeet-feature-translate-y, -50%)); --section-feature-scale-desktop: var(--sangeet-feature-scale-desktop, var(--sangeet-feature-scale, 1)); --section-feature-translate-x-tablet: var(--sangeet-feature-translate-x-tablet, var(--section-feature-translate-x-desktop)); --section-feature-translate-y-tablet: var(--sangeet-feature-translate-y-tablet, var(--section-feature-translate-y-desktop)); --section-feature-scale-tablet: var(--sangeet-feature-scale-tablet, var(--section-feature-scale-desktop)); --section-feature-translate-x-phone: var(--sangeet-feature-translate-x-phone, var(--section-feature-translate-x-tablet)); --section-feature-translate-y-phone: var(--sangeet-feature-translate-y-phone, var(--section-feature-translate-y-tablet)); --section-feature-scale-phone: var(--sangeet-feature-scale-phone, var(--section-feature-scale-tablet)); --section-feature-enter-from-x: var(--sangeet-feature-enter-from-x, 0px); --section-feature-enter-from-y: var(--sangeet-feature-enter-from-y, 0px); --section-feature-enter-from-rotate: var(--sangeet-feature-enter-from-rotate, 0deg); --section-feature-enter-from-scale: var(--sangeet-feature-enter-from-scale, 0.94); --section-feature-enter-duration: var(--sangeet-feature-enter-duration, 700ms); --section-feature-enter-delay: var(--sangeet-feature-enter-delay, 0ms); --section-feature-enter-timing: var(--sangeet-feature-enter-timing, cubic-bezier(0.22, 1, 0.36, 1)); opacity: var(--sangeet-feature-opacity, 1); filter: var(--sangeet-feature-filter, var(--section-feature-filter, drop-shadow(0 0.5rem 1.2rem rgba(0, 0, 0, 0.3)))); }
.section-contents [data-section="sangeet"] .section-content::before { --section-feature-image: var(--sangeet-feature-image, none); --section-feature-left: var(--sangeet-feature-left, 50%); --section-feature-top: var(--sangeet-feature-top, 50%); --section-feature-width: var(--sangeet-feature-width, min(72vw, 31rem)); --section-feature-height: var(--sangeet-feature-height, min(72vh, 31rem)); --section-feature-translate-x-desktop: var(--sangeet-feature-translate-x-desktop, var(--sangeet-feature-translate-x, -50%)); --section-feature-translate-y-desktop: var(--sangeet-feature-translate-y-desktop, var(--sangeet-feature-translate-y, -50%)); --section-feature-scale-desktop: var(--sangeet-feature-scale-desktop, var(--sangeet-feature-scale, 1)); --section-feature-translate-x-tablet: var(--sangeet-feature-translate-x-tablet, var(--section-feature-translate-x-desktop)); --section-feature-translate-y-tablet: var(--sangeet-feature-translate-y-tablet, var(--section-feature-translate-y-desktop)); --section-feature-scale-tablet: var(--sangeet-feature-scale-tablet, var(--section-feature-scale-desktop)); --section-feature-translate-x-phone: var(--sangeet-feature-translate-x-phone, var(--section-feature-translate-x-tablet)); --section-feature-translate-y-phone: var(--sangeet-feature-translate-y-phone, var(--section-feature-translate-y-tablet)); --section-feature-scale-phone: var(--sangeet-feature-scale-phone, var(--section-feature-scale-tablet)); --section-feature-enter-from-x: var(--sangeet-feature-enter-from-x, 0px); --section-feature-enter-from-y: var(--sangeet-feature-enter-from-y, 0px); --section-feature-enter-from-rotate: var(--sangeet-feature-enter-from-rotate, 0deg); --section-feature-enter-from-scale: var(--sangeet-feature-enter-from-scale, 0.94); --section-feature-enter-initial-x: var(--sangeet-feature-enter-initial-x); --section-feature-enter-initial-y: var(--sangeet-feature-enter-initial-y); --section-feature-enter-initial-rotate: var(--sangeet-feature-enter-initial-rotate); --section-feature-enter-initial-scale: var(--sangeet-feature-enter-initial-scale); --section-feature-enter-final-x: var(--sangeet-feature-enter-final-x); --section-feature-enter-final-y: var(--sangeet-feature-enter-final-y); --section-feature-enter-final-rotate: var(--sangeet-feature-enter-final-rotate); --section-feature-enter-final-scale: var(--sangeet-feature-enter-final-scale); --section-feature-enter-duration: var(--sangeet-feature-enter-duration, 700ms); --section-feature-enter-delay: var(--sangeet-feature-enter-delay, 0ms); --section-feature-enter-timing: var(--sangeet-feature-enter-timing, cubic-bezier(0.22, 1, 0.36, 1)); opacity: var(--sangeet-feature-opacity, 1); filter: var(--sangeet-feature-filter, var(--section-feature-filter, drop-shadow(0 0.5rem 1.2rem rgba(0, 0, 0, 0.3)))); }
.section-contents [data-section="baraat"] .section-content::before { --section-feature-image: var(--baraat-feature-image, none); --section-feature-left: var(--baraat-feature-left, 50%); --section-feature-top: var(--baraat-feature-top, 50%); --section-feature-width: var(--baraat-feature-width, min(72vw, 31rem)); --section-feature-height: var(--baraat-feature-height, min(72vh, 31rem)); --section-feature-translate-x-desktop: var(--baraat-feature-translate-x-desktop, var(--baraat-feature-translate-x, -50%)); --section-feature-translate-y-desktop: var(--baraat-feature-translate-y-desktop, var(--baraat-feature-translate-y, -50%)); --section-feature-scale-desktop: var(--baraat-feature-scale-desktop, var(--baraat-feature-scale, 1)); --section-feature-translate-x-tablet: var(--baraat-feature-translate-x-tablet, var(--section-feature-translate-x-desktop)); --section-feature-translate-y-tablet: var(--baraat-feature-translate-y-tablet, var(--section-feature-translate-y-desktop)); --section-feature-scale-tablet: var(--baraat-feature-scale-tablet, var(--section-feature-scale-desktop)); --section-feature-translate-x-phone: var(--baraat-feature-translate-x-phone, var(--section-feature-translate-x-tablet)); --section-feature-translate-y-phone: var(--baraat-feature-translate-y-phone, var(--section-feature-translate-y-tablet)); --section-feature-scale-phone: var(--baraat-feature-scale-phone, var(--section-feature-scale-tablet)); --section-feature-enter-from-x: var(--baraat-feature-enter-from-x, 0px); --section-feature-enter-from-y: var(--baraat-feature-enter-from-y, 0px); --section-feature-enter-from-rotate: var(--baraat-feature-enter-from-rotate, 0deg); --section-feature-enter-from-scale: var(--baraat-feature-enter-from-scale, 0.94); --section-feature-enter-duration: var(--baraat-feature-enter-duration, 700ms); --section-feature-enter-delay: var(--baraat-feature-enter-delay, 0ms); --section-feature-enter-timing: var(--baraat-feature-enter-timing, cubic-bezier(0.22, 1, 0.36, 1)); opacity: var(--baraat-feature-opacity, 1); filter: var(--baraat-feature-filter, var(--section-feature-filter, drop-shadow(0 0.5rem 1.2rem rgba(0, 0, 0, 0.3)))); }
.section-contents [data-section="marriage"] .section-content::before { --section-feature-image: var(--marriage-feature-image, none); --section-feature-left: var(--marriage-feature-left, 50%); --section-feature-top: var(--marriage-feature-top, 50%); --section-feature-width: var(--marriage-feature-width, min(72vw, 31rem)); --section-feature-height: var(--marriage-feature-height, min(72vh, 31rem)); --section-feature-translate-x-desktop: var(--marriage-feature-translate-x-desktop, var(--marriage-feature-translate-x, -50%)); --section-feature-translate-y-desktop: var(--marriage-feature-translate-y-desktop, var(--marriage-feature-translate-y, -50%)); --section-feature-scale-desktop: var(--marriage-feature-scale-desktop, var(--marriage-feature-scale, 1)); --section-feature-translate-x-tablet: var(--marriage-feature-translate-x-tablet, var(--section-feature-translate-x-desktop)); --section-feature-translate-y-tablet: var(--marriage-feature-translate-y-tablet, var(--section-feature-translate-y-desktop)); --section-feature-scale-tablet: var(--marriage-feature-scale-tablet, var(--section-feature-scale-desktop)); --section-feature-translate-x-phone: var(--marriage-feature-translate-x-phone, var(--section-feature-translate-x-tablet)); --section-feature-translate-y-phone: var(--marriage-feature-translate-y-phone, var(--section-feature-translate-y-tablet)); --section-feature-scale-phone: var(--marriage-feature-scale-phone, var(--section-feature-scale-tablet)); --section-feature-enter-from-x: var(--marriage-feature-enter-from-x, 0px); --section-feature-enter-from-y: var(--marriage-feature-enter-from-y, 0px); --section-feature-enter-from-rotate: var(--marriage-feature-enter-from-rotate, 0deg); --section-feature-enter-from-scale: var(--marriage-feature-enter-from-scale, 0.94); --section-feature-enter-duration: var(--marriage-feature-enter-duration, 700ms); --section-feature-enter-delay: var(--marriage-feature-enter-delay, 0ms); --section-feature-enter-timing: var(--marriage-feature-enter-timing, cubic-bezier(0.22, 1, 0.36, 1)); opacity: var(--marriage-feature-opacity, 1); filter: var(--marriage-feature-filter, var(--section-feature-filter, drop-shadow(0 0.5rem 1.2rem rgba(0, 0, 0, 0.3)))); }
.section-contents [data-section="reception"] .section-content::before { --section-feature-image: var(--reception-feature-image, none); --section-feature-left: var(--reception-feature-left, 50%); --section-feature-top: var(--reception-feature-top, 50%); --section-feature-width: var(--reception-feature-width, min(72vw, 31rem)); --section-feature-height: var(--reception-feature-height, min(72vh, 31rem)); --section-feature-translate-x-desktop: var(--reception-feature-translate-x-desktop, var(--reception-feature-translate-x, -50%)); --section-feature-translate-y-desktop: var(--reception-feature-translate-y-desktop, var(--reception-feature-translate-y, -50%)); --section-feature-scale-desktop: var(--reception-feature-scale-desktop, var(--reception-feature-scale, 1)); --section-feature-translate-x-tablet: var(--reception-feature-translate-x-tablet, var(--section-feature-translate-x-desktop)); --section-feature-translate-y-tablet: var(--reception-feature-translate-y-tablet, var(--section-feature-translate-y-desktop)); --section-feature-scale-tablet: var(--reception-feature-scale-tablet, var(--section-feature-scale-desktop)); --section-feature-translate-x-phone: var(--reception-feature-translate-x-phone, var(--section-feature-translate-x-tablet)); --section-feature-translate-y-phone: var(--reception-feature-translate-y-phone, var(--section-feature-translate-y-tablet)); --section-feature-scale-phone: var(--reception-feature-scale-phone, var(--section-feature-scale-tablet)); --section-feature-enter-from-x: var(--reception-feature-enter-from-x, 0px); --section-feature-enter-from-y: var(--reception-feature-enter-from-y, 0px); --section-feature-enter-from-rotate: var(--reception-feature-enter-from-rotate, 0deg); --section-feature-enter-from-scale: var(--reception-feature-enter-from-scale, 0.94); --section-feature-enter-duration: var(--reception-feature-enter-duration, 700ms); --section-feature-enter-delay: var(--reception-feature-enter-delay, 0ms); --section-feature-enter-timing: var(--reception-feature-enter-timing, cubic-bezier(0.22, 1, 0.36, 1)); opacity: var(--reception-feature-opacity, 1); filter: var(--reception-feature-filter, var(--section-feature-filter, drop-shadow(0 0.5rem 1.2rem rgba(0, 0, 0, 0.3)))); }

.section-content-wrap.feature-enter[data-section="haldi"] .section-content::before,
.section-content-wrap.feature-enter[data-section="sangeet"] .section-content::before,
.section-content-wrap.feature-enter[data-section="baraat"] .section-content::before,
.section-content-wrap.feature-enter[data-section="marriage"] .section-content::before,
.section-content-wrap.feature-enter[data-section="reception"] .section-content::before {
  opacity: var(--section-feature-opacity, 1);
  transform: translate(var(--section-feature-enter-final-x, var(--section-feature-translate-x-active, var(--section-feature-translate-x-desktop, -50%))), var(--section-feature-enter-final-y, var(--section-feature-translate-y-active, var(--section-feature-translate-y-desktop, -50%)))) rotate(var(--section-feature-enter-final-rotate, var(--section-feature-rotate, 0deg))) scale(var(--section-feature-enter-final-scale, var(--section-feature-scale-active, var(--section-feature-scale-desktop, 1))));
}

.section-content-wrap.feature-visible[data-section="haldi"] .section-content::before,
.section-content-wrap.feature-visible[data-section="sangeet"] .section-content::before,
.section-content-wrap.feature-visible[data-section="baraat"] .section-content::before,
.section-content-wrap.feature-visible[data-section="marriage"] .section-content::before,
.section-content-wrap.feature-visible[data-section="reception"] .section-content::before {
  opacity: var(--section-feature-opacity, 1);
  transform: translate(var(--section-feature-enter-final-x, var(--section-feature-translate-x-active, var(--section-feature-translate-x-desktop, -50%))), var(--section-feature-enter-final-y, var(--section-feature-translate-y-active, var(--section-feature-translate-y-desktop, -50%)))) rotate(var(--section-feature-enter-final-rotate, var(--section-feature-rotate, 0deg))) scale(var(--section-feature-enter-final-scale, var(--section-feature-scale-active, var(--section-feature-scale-desktop, 1))));
}

.section-contents [data-section="sangeet"] .event-title {
  color: var(--sangeet-title-color, #f1f8e9);
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

.section-contents [data-section="sangeet"] .event-subtitle {
  color: var(--sangeet-subtitle-color, #c8e6c9);
}

/* ===== Baraat ===== */
.section-bg-baraat {
  background-color: var(--baraat-bg-color, #1565c0);
  background-image: var(--baraat-bg-gradient, linear-gradient(160deg, #0d47a1 0%, #1565c0 40%, #1976d2 70%, #1e88e5 100%));
  position: relative;
  overflow: hidden;
}

.section-bg-baraat::before {
  content: '';
  position: absolute;
  left: var(--baraat-bg-overlay-left, 50%);
  top: var(--baraat-bg-overlay-top, 50%);
  width: var(--baraat-bg-overlay-width, 150vmax);
  height: var(--baraat-bg-overlay-height, 150vmax);
  margin-left: var(--baraat-bg-overlay-margin-left, -75vmax);
  margin-top: var(--baraat-bg-overlay-margin-top, -75vmax);
  background-image: var(--baraat-bg-image, url('../assets/background/orange.jpg'));
  background-repeat: var(--baraat-bg-repeat, repeat);
  background-size: var(--baraat-bg-size, 32rem 32rem);
  background-position: var(--baraat-bg-position, 0 0);
  transform: rotate(var(--baraat-bg-rotate, 45deg));
  mix-blend-mode: var(--baraat-bg-blend, overlay);
  pointer-events: none;
  z-index: 0;
  opacity: var(--baraat-bg-opacity, 1);
}

.section-contents [data-section="baraat"] {
  color: var(--baraat-text-color, #e3f2fd);
}

.section-contents [data-section="baraat"] .event-title {
  color: var(--baraat-title-color, #ffffff);
  text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
}

.section-contents [data-section="baraat"] .event-subtitle {
  color: var(--baraat-subtitle-color, #bbdefb);
}

/* ===== Marriage ===== */
.section-bg-marriage {
  background-color: var(--marriage-bg-color, #5c1a1a);
  background-image: var(--marriage-bg-gradient, linear-gradient(160deg, #4a1515 0%, #5c1a1a 35%, #6b2222 70%, #7d2a2a 100%));
  position: relative;
  overflow: hidden;
}

.section-bg-marriage::before {
  content: '';
  position: absolute;
  left: var(--marriage-bg-overlay-left, 0);
  top: var(--marriage-bg-overlay-top, 0);
  width: var(--marriage-bg-overlay-width, 100%);
  height: var(--marriage-bg-overlay-height, 100%);
  margin-left: var(--marriage-bg-overlay-margin-left, 0);
  margin-top: var(--marriage-bg-overlay-margin-top, 0);
  background-image: var(--marriage-bg-image, url('../assets/background/red.png'));
  background-repeat: var(--marriage-bg-repeat, repeat);
  background-position: var(--marriage-bg-position, 0 0);
  background-size: var(--marriage-bg-size, 16rem 16rem);
  transform: rotate(var(--marriage-bg-rotate, 0deg));
  mix-blend-mode: var(--marriage-bg-blend, overlay);
  pointer-events: none;
  z-index: 0;
  opacity: var(--marriage-bg-opacity, 0.4);
}

.section-contents [data-section="marriage"] {
  color: var(--marriage-text-color, #ffebee);
}

.section-contents [data-section="marriage"] .event-title {
  color: var(--marriage-title-color, #ffffff);
  text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
}

.section-contents [data-section="marriage"] .event-subtitle {
  color: var(--marriage-subtitle-color, #ffcdd2);
}

/* ===== Reception ===== */
.section-bg-reception {
  background-color: var(--reception-bg-color, #5b3a1c);
  background-image: var(--reception-bg-gradient, linear-gradient(160deg, #3a2512 0%, #5b3a1c 40%, #7d542b 70%, #966a36 100%));
  position: relative;
  overflow: hidden;
}

.section-bg-reception::before {
  content: '';
  position: absolute;
  left: var(--reception-bg-overlay-left, 0);
  top: var(--reception-bg-overlay-top, 0);
  width: var(--reception-bg-overlay-width, 100%);
  height: var(--reception-bg-overlay-height, 100%);
  margin-left: var(--reception-bg-overlay-margin-left, 0);
  margin-top: var(--reception-bg-overlay-margin-top, 0);
  background-image: var(--reception-bg-image, url('../assets/background/orange.jpg'));
  background-repeat: var(--reception-bg-repeat, repeat);
  background-size: var(--reception-bg-size, 20rem 20rem);
  background-position: var(--reception-bg-position, 0 0);
  transform: rotate(var(--reception-bg-rotate, 0deg));
  mix-blend-mode: var(--reception-bg-blend, overlay);
  pointer-events: none;
  z-index: 0;
  opacity: var(--reception-bg-opacity, 0.55);
}

.section-contents [data-section="reception"] {
  color: var(--reception-text-color, #fff3e0);
}

.section-contents [data-section="reception"] .event-title {
  color: var(--reception-title-color, #fff);
  text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.28);
}

.section-contents [data-section="reception"] .event-subtitle {
  color: var(--reception-subtitle-color, #ffe0b2);
}

/* Improve readability for all non-intro event sections */
.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .event-title,
.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .event-subtitle,
.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .event-datetime,
.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .dress-code {
  text-shadow: 0 0.12rem 0.32rem rgba(0, 0, 0, 0.62);
}

.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .event-title {
  font-weight: 700;
}

.section-contents [data-section="haldi"] .event-title {
  font-weight: calc(500 + (var(--haldi-title-bold-toggle, 1) * 200));
}

.section-contents [data-section="sangeet"] .event-title {
  font-weight: calc(500 + (var(--sangeet-title-bold-toggle, 1) * 200));
}

.section-contents [data-section="baraat"] .event-title {
  font-weight: calc(500 + (var(--baraat-title-bold-toggle, 1) * 200));
}

.section-contents [data-section="marriage"] .event-title {
  font-weight: calc(500 + (var(--marriage-title-bold-toggle, 1) * 200));
}

.section-contents [data-section="reception"] .event-title {
  font-weight: calc(500 + (var(--reception-title-bold-toggle, 1) * 200));
}

.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .event-subtitle,
.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .event-datetime,
.section-contents .section-content-wrap[data-section]:not([data-section="intro"]) .dress-code {
  font-weight: 600;
}

/* ===== Event typography ===== */
.event-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-style: italic;
  letter-spacing: 0.2em;
  margin-top: 0.5rem;
  opacity: 0.95;
}

.event-datetime {
  margin-top: 0.85rem;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  letter-spacing: 0.08em;
  opacity: 0.92;
}

.dress-code {
  margin-top: 0.55rem;
  font-size: clamp(0.78rem, 1.95vw, 0.96rem);
  letter-spacing: 0.06em;
  font-style: italic;
  opacity: 0.94;
}

.intro-dress-code {
  color: rgba(255, 233, 189, 0.94);
}

.intro-datetime {
  color: rgba(255, 245, 220, 0.96);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 500;
  text-shadow: 0 0.12rem 0.28rem rgba(0, 0, 0, 0.5);
}

.top-right-controls {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 140;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 0.0625rem solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(0.25rem);
}

.location-label {
  color: #fff4dd;
  font-family: "Google Sans", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.05em;
  min-height: var(--ui-toggle-height);
  padding: 0 0.4rem 0 0.5rem;
  display: inline-flex;
  align-items: center;
  max-width: 5.8rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0.95;
  text-shadow: 0 0.1rem 0.24rem rgba(0, 0, 0, 0.45);
  transform: translateX(0);
  transition: opacity 340ms ease, transform 340ms ease, max-width 340ms ease, padding 340ms ease;
}

body.intro-active .gender-toggle-label,
body.intro-active .location-label {
  opacity: 0;
  transform: translateX(-0.55rem);
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  pointer-events: none;
}

.top-control-btn {
  position: relative;
  z-index: 1;
  width: var(--ui-toggle-height);
  height: var(--ui-toggle-height);
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff4dd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 1.08rem;
  transition: transform 0.2s ease, background 0.2s ease;
}

.top-control-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}

.mute-btn {
  font-size: 1.18rem;
}

.mute-btn.muted .mute-btn-icon {
  opacity: 0.6;
}

.music-eq {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.1rem;
  align-self: center;
  height: 0.95rem;
  margin-right: 0.25rem;
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-0.3rem);
  transition: width 260ms ease, opacity 260ms ease, transform 260ms ease;
}

.music-eq-bar {
  width: 0.14rem;
  height: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 244, 221, 0.95);
  transform-origin: bottom;
  transform: scaleY(0.35);
}

body.music-playing .music-eq {
  width: 1rem;
  opacity: 0.95;
  transform: translateX(0);
}

body.music-playing .music-eq-bar {
  animation: music-eq-bounce 900ms ease-in-out infinite;
}

body.music-playing .music-eq-bar:nth-child(1) { animation-delay: 0ms; }
body.music-playing .music-eq-bar:nth-child(2) { animation-delay: 120ms; }
body.music-playing .music-eq-bar:nth-child(3) { animation-delay: 240ms; }
body.music-playing .music-eq-bar:nth-child(4) { animation-delay: 360ms; }

@keyframes music-eq-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(2.5); }
}

.venue-map-fab {
  font-size: 1.1rem;
}

.venue-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 1rem;
}

.venue-modal.open {
  display: flex;
}

.venue-modal-card {
  position: relative;
  width: min(92vw, 22rem);
  border-radius: 1rem;
  padding: 1rem 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.14);
  border: 0.0625rem solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.35);
  text-align: center;
  backdrop-filter: blur(0.4rem);
}

.venue-modal-card h3 {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe7bf;
  margin: 0.2rem 0 0.8rem;
}

.venue-modal-close {
  position: absolute;
  right: 0.6rem;
  top: 0.45rem;
  border: 0;
  background: transparent;
  color: #f5d7ad;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.venue-qr-image {
  width: min(70vw, 16rem);
  height: auto;
  border-radius: 0.5rem;
  border: 0.0625rem solid rgba(255, 231, 189, 0.45);
  background: #fff;
}

.venue-qr-note {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(255, 234, 202, 0.9);
}

.venue-map-embed {
  margin-top: 0.85rem;
}

.venue-map-embed iframe {
  display: block;
  width: 100%;
  height: min(42vh, 15rem);
  border: 0;
  border-radius: 0.5rem;
}

.venue-address {
  margin: 0.2rem 0 0.55rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 244, 223, 0.98);
  letter-spacing: 0.02em;
}

.venue-modal-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: #ffe7bf;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== Scroll dots ===== */
.scroll-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scroll-dots button {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 0.125rem solid rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
}

.scroll-dots button:hover,
.scroll-dots button.active {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.95);
  transform: scale(1.2);
}

/* ===== Timeline strip ===== */
.timeline-strip {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 110;
  display: flex;
  gap: 0.45rem;
  max-width: min(92vw, 56rem);
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  background: rgba(18, 10, 10, 0.45);
  border: 0.0625rem solid rgba(255, 236, 198, 0.38);
  backdrop-filter: blur(0.35rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.timeline-strip::-webkit-scrollbar {
  display: none;
}

.timeline-step {
  border: 0;
  background: transparent;
  color: rgba(255, 247, 230, 0.9);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.36rem 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.timeline-step:hover {
  background: rgba(255, 244, 218, 0.2);
  transform: translateY(-0.05rem);
}

.timeline-step.active {
  background: rgba(255, 242, 210, 0.94);
  color: #3f2018;
  font-weight: 600;
}

@media (max-width: 64rem) {
  .section-contents [data-section="haldi"] .section-content::before,
  .section-contents [data-section="sangeet"] .section-content::before,
  .section-contents [data-section="baraat"] .section-content::before,
  .section-contents [data-section="marriage"] .section-content::before,
  .section-contents [data-section="reception"] .section-content::before {
    --section-feature-translate-x-active: var(--section-feature-translate-x-tablet, var(--section-feature-translate-x-desktop));
    --section-feature-translate-y-active: var(--section-feature-translate-y-tablet, var(--section-feature-translate-y-desktop));
    --section-feature-scale-active: var(--section-feature-scale-tablet, var(--section-feature-scale-desktop));
  }
}

@media (max-width: 48rem) {
  .gender-toggle { top: 0.65rem; left: 0.65rem; }
  .invite-toggle { top: 0.65rem; left: 50%; transform: translate(-50%, 0); }
  .scroll-dots { right: 0.75rem; }
  .scroll-dots button { width: 0.5rem; height: 0.5rem; }
  .timeline-strip {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.7rem;
    transform: none;
    justify-content: flex-start;
    padding: 0.3rem;
  }
  .timeline-step {
    font-size: 0.72rem;
    padding: 0.32rem 0.58rem;
  }
  .intro-countdown {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
  }
  .cta-btn {
    font-size: 0.72rem;
    padding: 0.38rem 0.7rem;
  }
  .top-right-controls {
    top: 0.68rem;
    right: 0.65rem;
    gap: 0.2rem;
  }
  .top-control-btn {
    width: var(--ui-toggle-height);
    height: var(--ui-toggle-height);
    font-size: 1rem;
  }
  .section-contents [data-section="haldi"] .section-content::before,
  .section-contents [data-section="sangeet"] .section-content::before,
  .section-contents [data-section="baraat"] .section-content::before,
  .section-contents [data-section="marriage"] .section-content::before,
  .section-contents [data-section="reception"] .section-content::before {
    --section-feature-translate-x-active: var(--section-feature-translate-x-phone, var(--section-feature-translate-x-tablet, var(--section-feature-translate-x-desktop)));
    --section-feature-translate-y-active: var(--section-feature-translate-y-phone, var(--section-feature-translate-y-tablet, var(--section-feature-translate-y-desktop)));
    --section-feature-scale-active: var(--section-feature-scale-phone, var(--section-feature-scale-tablet, var(--section-feature-scale-desktop)));
  }
}