/* ============================================================
   BODA — réplica responsive de la web de Canva
   Canvas original: 1366 × 768 (desktop) / 390 px (móvil)
   ============================================================ */

@font-face {
  font-family: 'Youngest Serif';
  src: url('assets/fonts/bd39ead65e61fbef57749b39315a1e9e.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hertical Smooth';
  src: url('assets/fonts/0acfbf3b56083bf20a257e3b889c7969.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fineday Two';
  src: url('assets/fonts/35898c795e855df4b7711ca364518e1c.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --stage-scale: 1;
  --rendered-width: 1366px;
  color-scheme: light;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: #f7f2ea;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: #aba694;
  color: #000;
  font-family: 'Youngest Serif', serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  width: 100%;
  max-width: none;
}

.page,
.footer {
  opacity: 1;
  filter: none;
  transition:
    opacity 1s cubic-bezier(.22, 1, .36, 1),
    filter 1.1s cubic-bezier(.22, 1, .36, 1);
}
body.invitation-locked {
  height: 100vh;
  height: 100svh;
  overflow-y: hidden;
  overscroll-behavior: none;
}
body.invitation-locked .page,
body.invitation-locked .footer {
  opacity: 0;
  filter: blur(3px);
}
#main-content:focus { outline: none; }

/* ---------- Initial envelope ---------- */
.invitation-gate {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  padding:
    max(16px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgb(255 252 247 / 72%) 0, rgb(247 242 234 / 0%) 58%),
    #f7f2ea;
  opacity: 1;
  visibility: visible;
  overscroll-behavior: contain;
  touch-action: manipulation;
  transition:
    opacity .82s cubic-bezier(.4, 0, .2, 1) .18s,
    visibility 0s linear 1.02s;
}
.invitation-gate[hidden] { display: none; }
.invitation-gate.is-opening {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.invitation-opener {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #622c22;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.invitation-card {
  display: block;
  grid-column: 1;
  justify-self: center;
  width: min(1050px, 96vw, calc(177.78svh - 195.56px));
  transform-origin: 50% 58%;
  animation: envelope-float 4.8s ease-in-out infinite;
  transition:
    opacity .72s cubic-bezier(.4, 0, .2, 1),
    filter .72s cubic-bezier(.4, 0, .2, 1),
    transform .85s cubic-bezier(.22, 1, .36, 1);
}
.invitation-envelope {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.invitation-prompt {
  display: inline-flex;
  grid-column: 1;
  justify-self: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(-8px, -1vh, -2px);
  color: #622c22;
  font-family: 'Youngest Serif', serif;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .84;
  transition: opacity .45s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
  animation: invitation-prompt-pulse 2.4s ease-in-out infinite;
}
.invitation-prompt-note {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(98 44 34 / 38%);
  border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  letter-spacing: 0;
}
.invitation-opener:hover .invitation-prompt { opacity: 1; }
.invitation-opener:focus-visible { outline: none; }
.invitation-opener:focus-visible .invitation-prompt {
  opacity: 1;
  outline: 2px solid rgb(98 44 34 / 62%);
  outline-offset: 7px;
  border-radius: 2px;
}
.invitation-gate.is-opening .invitation-card {
  animation: none;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-18px) scale(1.055);
}
.invitation-gate.is-opening .invitation-prompt {
  animation: none;
  opacity: 0;
  transform: translateY(12px);
}
@keyframes envelope-float {
  0%, 100% { transform: translateY(2px) scale(1); }
  50%      { transform: translateY(-6px) scale(1.006); }
}
@keyframes invitation-prompt-pulse {
  0%, 100% { opacity: .68; }
  50%      { opacity: 1; }
}

@media (max-width: 767px) {
  .invitation-card {
    width: min(620px, 145vw, calc(177.78svh - 195.56px));
  }
  .invitation-prompt {
    margin-top: -4px;
    font-size: clamp(15px, 4.3vw, 18px);
  }
}

/* ---------- Canvas full-bleed ---------- */
.section {
  --design-width: 1366px;
  --design-height: 768px;
  --content-height: 768px;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: max(var(--content-height), 100vh);
  height: max(var(--content-height), 100svh);
  overflow: hidden;
  background-color: var(--bg);
}

/*
   The shell has the rendered dimensions; the stage keeps Canva's original
   coordinate system and is uniformly scaled by script.js. This prevents
   clipping and text/image collisions at arbitrary viewport widths.
*/
.section-stage-shell {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: var(--rendered-width);
  height: var(--content-height);
  transform: translate(-50%, -50%);
}

.section-stage {
  position: relative;
  width: var(--design-width);
  height: var(--design-height);
  transform: scale(var(--stage-scale));
  transform-origin: 0 0;
}

/* Canva's very subtle dark veil, now triggered as each slide enters view. */
.section::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background: rgb(15 16 21);
  opacity: 0;
}
.motion-ready .section:not(.is-visible)::after { opacity: 0.055; }
.motion-ready .section.is-visible::after {
  animation: section-veil 1.4s ease-out both;
}
@keyframes section-veil {
  from { opacity: 0.055; }
  to   { opacity: 0; }
}

/* ---------- Elementos del diseño ---------- */
.el {
  position: absolute;
  backface-visibility: hidden;
}

.media-el {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0);
  transform: none;
  transition:
    opacity 0.85s cubic-bezier(.22, 1, .36, 1),
    filter 1s cubic-bezier(.22, 1, .36, 1),
    clip-path 1.25s cubic-bezier(.22, 1, .36, 1),
    transform 1.15s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

/* The two raster hero panels use WebP via <picture>. Keep a cream placeholder
   visible until each file has downloaded and decoded completely, avoiding the
   top-to-bottom paint effect of the original large PNG files. */
.photo-el {
  overflow: hidden;
  background: #f7f2ea;
}
.photo-el > .photo-source {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .36s ease-out;
}
.image-decode-ready .photo-el > .photo-source:not(.is-decoded) {
  opacity: 0;
}

.text-el {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(.22, 1, .36, 1),
    filter 0.9s cubic-bezier(.22, 1, .36, 1),
    transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

/* Initial states exist only when JS is active, so content remains accessible. */
.motion-ready .section:not(.is-visible) .media-el {
  opacity: 0;
  filter: blur(2px);
  transform:
    translate3d(var(--enter-x, 0), var(--enter-y, 18px), 0)
    scale(var(--enter-scale, .94))
    rotate(var(--enter-rotate, 0deg));
}
.motion-ready .section:not(.is-visible) .text-el {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, 28px, 0);
}
.motion-ready .section:not(.is-visible) .heading-el {
  transform: translate3d(0, 34px, 0) scale(.97);
}

/* Keep the hero entrance poised behind the envelope, even if the observer has
   already marked the first section visible. Removing invitation-locked starts
   the staggered reveal at the same moment the envelope opens. */
.motion-ready body.invitation-locked .section-0 .media-el {
  opacity: 0;
  filter: blur(2px);
  transform:
    translate3d(var(--enter-x, 0), var(--enter-y, 18px), 0)
    scale(var(--enter-scale, .94))
    rotate(var(--enter-rotate, 0deg));
  animation-play-state: paused;
}

/* Hero: two gentle opposing photo entrances and an arch wipe. */
.s0-i0 { --enter-x: -54px; --enter-y: 0; --enter-scale: 1.025; }
.s0-i3 { --enter-x:  54px; --enter-y: 0; --enter-scale: 1.025; }
.motion-ready .section-0:not(.is-visible) .s0-i0 { clip-path: inset(0 0 0 16%); }
.motion-ready .section-0:not(.is-visible) .s0-i3 { clip-path: inset(0 16% 0 0); }
.s0-i4 { --enter-y: 30px; --enter-scale: .975; }
.s0-i1, .s0-i2, .s0-i5 { --enter-y: 14px; --enter-scale: .82; }

/* Arches and larger botanical drawings settle more slowly. */
.s1-i0, .s1-i1, .s2-i0, .s2-i2 {
  --enter-y: 38px;
  --enter-scale: .975;
  transition-duration: 1.1s, 1.1s, 1.35s, 1.3s;
}
.s1-i2, .s1-i5, .s2-i1, .s2-i4, .s3-i0 {
  --enter-y: 22px;
  --enter-scale: .88;
}
.s3-i5, .s2-i3 { --enter-y: 8px; --enter-scale: .88; }

/* ---------- Posiciones desktop (canvas de 1366 × 768) ---------- */
.s0-i0 { left: 62.3px; top: 0; width: 516.1px; height: 774.1px; }
.s0-i1 { left: 522px; top: 350.8px; width: 56.3px; height: 46.4px; }
.s0-i2 { left: 114.4px; top: 341.1px; width: 67.4px; height: 87.8px; }
.s0-i3 { left: 751.2px; top: 13.7px; width: 510.6px; height: 767.1px; }
.s0-i4 { left: 737.5px; top: 7.1px; width: 524.3px; height: 749px; }
.s0-i5 { left: 1213.4px; top: 45.9px; width: 96.7px; height: 154.7px; }

.s1-i0 { left: 775.7px; top: 42.5px; width: 418px; height: 616.5px; }
.s1-i1 { left: 190px; top: 42.5px; width: 423.7px; height: 624.8px; }
.s1-i2 { left: 313.5px; top: 89.3px; width: 148px; height: 228.1px; }
.s1-i3 { left: 443.1px; top: 543px; width: 80.2px; height: 89px; }
.s1-i4 { left: 253.4px; top: 519.9px; width: 57.9px; height: 68.9px; }
.s1-i5 { left: 901.9px; top: 118.1px; width: 165.4px; height: 170.6px; }
.s1-i6 { left: 1035.8px; top: 538.7px; width: 63.2px; height: 82.1px; }

.s1-t0 {
  left: 257.4px; top: 362.9px; width: 289px;
  font-family: 'Youngest Serif'; font-size: 21.3333px; line-height: 27px;
  letter-spacing: 0; text-align: center; color: #000;
}
.s1-t1 {
  left: 257.4px; top: 470.9px; width: 289px;
  font-family: 'Youngest Serif'; font-size: 21.3333px; line-height: 27px;
  letter-spacing: 0; text-align: center; color: #000;
}
.s1-t2 {
  left: 285.1px; top: 321.6px; width: 233px;
  font-family: 'Hertical Smooth'; font-size: 28.0001px; line-height: 25px;
  letter-spacing: -.02em; text-align: center; color: #e3d7c5;
}
.s1-t3 {
  left: 839.9px; top: 321.6px; width: 289px;
  font-family: 'Hertical Smooth'; font-size: 28.0001px; line-height: 25px;
  letter-spacing: -.02em; text-align: center; color: #e3d7c5;
}
.s1-t4 {
  left: 840.2px; top: 361.9px; width: 289px;
  font-family: 'Youngest Serif'; font-size: 21.3333px; line-height: 29px;
  letter-spacing: 0; text-align: center; color: #000;
}

.s2-i0 { left: 192.8px; top: 47.8px; width: 423.7px; height: 624.8px; }
.s2-i1 { left: 886.9px; top: 106.5px; width: 165.4px; height: 211.8px; }
.s2-i2 { left: 778.3px; top: 55.5px; width: 423.7px; height: 624.8px; }
.s2-i3 { left: 304.9px; top: 569.6px; width: 192.3px; height: 30.1px; }
.s2-i4 { left: 284.8px; top: 135px; width: 239.6px; height: 183.3px; }
.s2-i5 { left: 942.9px; top: 524.3px; width: 116.4px; height: 121.7px; }

.s2-t0 {
  left: 845.4px; top: 347.1px; width: 289px;
  font-family: 'Hertical Smooth'; font-size: 28.0001px; line-height: 25px;
  letter-spacing: -.02em; text-align: center; color: #6e6f51;
}
.s2-t1 {
  left: 845.7px; top: 403.2px; width: 289px;
  font-family: 'Youngest Serif'; font-size: 21.3333px; line-height: 29px;
  letter-spacing: 0; text-align: center; color: #000;
}
.s2-t2 {
  left: 256.2px; top: 338.7px; width: 289px;
  font-family: 'Hertical Smooth'; font-size: 28.0001px; line-height: 25px;
  letter-spacing: -.02em; text-align: center; color: #6e6f51;
}
.s2-t3 {
  left: 256.5px; top: 388.7px; width: 289px;
  font-family: 'Youngest Serif'; font-size: 21.3333px; line-height: 29px;
  letter-spacing: 0; text-align: center; color: #000;
}

.s3-i0 { left: 904px; top: 237px; width: 288.2px; height: 294px; }
.s3-i1 { left: 366.3px; top: 471.2px; width: 110.2px; height: 136.4px; }
.s3-i2 { left: 270px; top: 100.1px; width: 144.8px; height: 107.2px; }
.s3-i3 { left: 254.6px; top: 471.2px; width: 111.7px; height: 166.7px; }
.s3-i4 { left: 414.8px; top: 300px; width: 61.6px; height: 54.8px; }
.s3-i5 { left: 161.9px; top: 30.5px; width: 361px; height: 55.9px; }

.s3-t0 {
  left: 212.2px; top: 231.4px; width: 281.9px;
  font-family: 'Youngest Serif'; font-size: 25.4654px; line-height: 35.1524px;
  letter-spacing: 0; text-align: center; color: #f4eee6;
}
.s3-t1 {
  left: 776.7px; top: 568.2px; width: 512px;
  font-family: 'Hertical Smooth'; font-size: 47.9122px; line-height: 43px;
  letter-spacing: -.02em; text-align: center; color: #622c22;
}
.s3-t2 {
  left: 197.8px; top: 383.9px; width: 310.9px;
  font-family: 'Fineday Two'; font-size: 27.576px; line-height: 38.066px;
  letter-spacing: 0; text-align: center; color: #f4eee6;
}
.s3-t3 {
  left: 892.5px; top: 146.6px; width: 299.7px;
  font-family: 'Youngest Serif'; font-size: 22.702px; line-height: 31.3522px;
  letter-spacing: 0; text-align: center; color: #f4eee6;
}

/* ---------- Ambient motion, inspired by the Canva reference ---------- */
@keyframes drift-a {
  0%, 100% { translate: -5px 1px; rotate: -.6deg; }
  50%      { translate:  5px -3px; rotate: .6deg; }
}
@keyframes drift-b {
  0%, 100% { translate: -3px -2px; rotate: .5deg; }
  50%      { translate:  4px 3px; rotate: -.5deg; }
}
@keyframes sway {
  0%, 100% { translate: 0 0; rotate: -1.2deg; }
  50%      { translate: 2px -4px; rotate: 1.2deg; }
}
@keyframes photo-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.008; }
}
.s0-i0, .s0-i3 { animation: photo-breathe 15s ease-in-out infinite; }
.s0-i1, .s1-i3, .s3-i4 { animation: drift-a 5.6s ease-in-out infinite; }
.s0-i2, .s1-i4, .s2-i5 { animation: drift-b 6.4s ease-in-out -1.6s infinite; }
.s0-i5, .s1-i6, .s3-i1, .s3-i3 { animation: sway 7.2s ease-in-out -2.4s infinite; }
.motion-ready .section:not(.is-visible) .media-el { animation-play-state: paused; }

/* ============================================================
   MÓVIL — original Canva composition, uniformly scaled below 390px
   ============================================================ */
@media (max-width: 767px) {
  :root { --rendered-width: 390px; }

  .section {
    --design-width: 390px;
    height: var(--content-height);
    min-height: 0;
  }
  .section-stage-shell {
    top: 0;
    transform: translateX(-50%);
  }

  .section-0 { --design-height: 1106.64px; --content-height: 1106.64px; }
  .section-1 { --design-height: 1122.97px; --content-height: 1122.97px; }
  .section-2 { --design-height: 1123.48px; --content-height: 1123.48px; }
  .section-3 { --design-height: 973.64px; --content-height: 973.64px; }

  .s0-i0 { left: -11.4px; top: 0; width: 412.8px; height: 619.1px; }
  .s0-i1 { left: 329.3px; top: 280.6px; width: 45.1px; height: 37.1px; }
  .s0-i2 { left: 52.3px; top: 272.8px; width: 53.9px; height: 70.3px; }
  .s0-i3 { left: 24.2px; top: 634px; width: 319.9px; height: 480.6px; }
  .s0-i4 { left: 15.6px; top: 629.9px; width: 328.5px; height: 469.3px; }
  .s0-i5 { left: 313.8px; top: 654.2px; width: 60.6px; height: 96.9px; }

  .s1-i0 { left: 27.8px; top: 549.4px; width: 334.4px; height: 493.1px; }
  .s1-i1 { left: 25.6px; top: 34px; width: 338.9px; height: 499.8px; }
  .s1-i2 { left: 124.3px; top: 71.4px; width: 118.4px; height: 182.4px; }
  .s1-i3 { left: 220.8px; top: 429.4px; width: 78.6px; height: 81px; }
  .s1-i4 { left: 78.2px; top: 418.1px; width: 42.4px; height: 50.5px; }
  .s1-i5 { left: 128.8px; top: 609.8px; width: 132.3px; height: 136.4px; }
  .s1-i6 { left: 235.9px; top: 946.2px; width: 50.5px; height: 65.6px; }
  /* Canva scales the inner mobile text frames to 79.9836%. These effective
     metrics reproduce that hidden transform and keep paragraphs inside the
     decorative arches instead of colliding with nearby artwork. */
  .s1-t0, .s1-t1 {
    font-size: 17.0631px;
    line-height: 21.5956px;
  }
  .s1-t2, .s1-t3 {
    font-size: 22.3955px;
    line-height: 19.9959px;
  }
  .s1-t4 {
    font-size: 17.0631px;
    line-height: 23.1952px;
  }
  .s1-t0 { left: 79.4px; top: 290.3px; width: 231.2px; }
  .s1-t1 { left: 79.4px; top: 376.7px; width: 231.2px; }
  .s1-t2 { left: 101.6px; top: 257.2px; width: 186.4px; }
  .s1-t3 { left: 79.2px; top: 772.6px; width: 231.2px; }
  .s1-t4 { left: 79.4px; top: 804.8px; width: 231.2px; }

  .s2-i0 { left: 25.6px; top: 38.2px; width: 338.9px; height: 499.7px; }
  .s2-i1 { left: 112.4px; top: 594.4px; width: 132.3px; height: 169.4px; }
  .s2-i2 { left: 25.6px; top: 553.6px; width: 338.9px; height: 499.8px; }
  .s2-i3 { left: 115.2px; top: 455.6px; width: 153.8px; height: 24.1px; }
  .s2-i4 { left: 99.2px; top: 108px; width: 191.7px; height: 146.6px; }
  .s2-i5 { left: 168px; top: 939.8px; width: 71.5px; height: 74.8px; }
  .s2-t0, .s2-t2 {
    font-size: 22.3955px;
    line-height: 19.9959px;
  }
  .s2-t1, .s2-t3 {
    font-size: 17.0631px;
    line-height: 23.1952px;
  }
  .s2-t0 { left: 79.2px; top: 786.8px; width: 231.2px; }
  .s2-t1 { left: 79.4px; top: 831.7px; width: 231.2px; }
  .s2-t2 { left: 76.3px; top: 270.9px; width: 231.2px; }
  .s2-t3 { left: 76.6px; top: 310.9px; width: 231.2px; }

  .s3-i0 { left: 91.7px; top: 573px; width: 230.5px; height: 235.1px; }
  .s3-i1 { left: 214.1px; top: 361.7px; width: 88.1px; height: 109.1px; }
  .s3-i2 { left: 137.1px; top: 80.1px; width: 115.9px; height: 85.7px; }
  .s3-i3 { left: 124.8px; top: 361.7px; width: 89.3px; height: 133.3px; }
  .s3-i4 { left: 252.9px; top: 234.8px; width: 49.3px; height: 43.9px; }
  .s3-i5 { left: 50.6px; top: 24.4px; width: 288.7px; height: 44.7px; }
  /* The closing slide uses three different Canva text-frame scales. */
  .s3-t0 {
    left: 90.9px; top: 179.9px; width: 225.5px;
    font-size: 20.3681px; line-height: 28.1162px;
  }
  .s3-t1 {
    left: -10.2px; top: 829.5px; width: 409.5px;
    font-size: 38.3219px; line-height: 34.3929px;
  }
  .s3-t2 {
    left: 79.3px; top: 291.8px; width: 248.7px;
    font-size: 22.0563px; line-height: 30.4466px;
  }
  .s3-t3 {
    left: 83.3px; top: 508.8px; width: 238.1px;
    font-size: 18.1579px; line-height: 25.0766px;
  }
}

/* ---------- Footer full-width ---------- */
.footer {
  width: 100%;
  padding: 10px max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
}
.footer-muted { opacity: .6; }

/* ---------- Discreet pause/resume control after opening ---------- */
.music-toggle {
  position: fixed;
  z-index: 50;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 7px));
  display: grid;
  grid-template-columns: 1fr auto;
  place-items: center;
  gap: 2px;
  width: 38px;
  height: 38px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid rgb(98 44 34 / 25%);
  border-radius: 999px;
  background: rgb(247 242 234 / 76%);
  color: #622c22;
  box-shadow: 0 3px 14px rgb(40 24 18 / 11%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity .3s ease 0s,
    transform .3s ease 0s,
    background .25s ease;
  touch-action: manipulation;
}
body.invitation-opened .music-toggle {
  opacity: .42;
  pointer-events: auto;
  transform: none;
  transition-delay: 1.15s, 1.15s, 0s;
}
body.invitation-opened .music-toggle[data-state='paused'] { opacity: .62; }
body.invitation-opened .music-toggle[data-state='waiting'] {
  opacity: .78;
  animation: music-ready-pulse 2.2s ease-out infinite;
}
.music-toggle:hover,
.music-toggle:focus-visible {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  outline: none;
  transition-delay: 0s;
}
.music-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgb(247 242 234 / 70%), 0 0 0 5px rgb(98 44 34 / 48%);
}
.music-note {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
}
.music-equalizer {
  display: flex;
  align-items: end;
  gap: 1px;
  width: 7px;
  height: 12px;
}
.music-equalizer i {
  display: block;
  width: 1.5px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center bottom;
  animation: music-bar .72s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.music-equalizer i:nth-child(2) { height: 7px; animation-delay: -.38s; }
.music-equalizer i:nth-child(3) { height: 5px; animation-delay: -.16s; }
.music-toggle[data-state='playing'] .music-equalizer i { animation-play-state: running; }
.music-toggle[data-state='paused'] .music-equalizer { opacity: .34; }
@keyframes music-bar {
  from { transform: scaleY(.5); }
  to   { transform: scaleY(1.45); }
}
@keyframes music-ready-pulse {
  0%, 55%, 100% { box-shadow: 0 3px 14px rgb(40 24 18 / 11%), 0 0 0 0 rgb(98 44 34 / 18%); }
  78% { box-shadow: 0 3px 14px rgb(40 24 18 / 11%), 0 0 0 8px rgb(98 44 34 / 0%); }
}

/* Motion accessibility: preserve layout scaling, remove decorative motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section::after { display: none; }
  .media-el,
  .text-el,
  .photo-el > .photo-source {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
  .page,
  .footer,
  .invitation-gate,
  .invitation-card,
  .invitation-prompt,
  .music-toggle,
  .music-equalizer i {
    animation: none !important;
    transition: none !important;
  }
}