/* ==========================================================================
   PAPER — el fondo de la invitación tratado como una hoja de papel iluminada.
   Tres capas fijas (no se mueven al scrollear, así que no repintan):
     1. La luz    → degradés grandes y suaves + viñeta cálida  (body::before)
     2. El grano  → ruido de papel, sutilísimo                 (body::after)
     3. La botánica → ramita dorada gigante y tenue por sección (.sec::before)
   La viñeta no es decoración: oscurece los bordes para que los pétalos
   blancos tengan contra qué recortarse.
   ========================================================================== */

html { background: var(--nude-100); }
body { background: transparent; }

/* ---- 1. La luz ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* Viñeta: SÓLO en los bordes (arranca al 64%). Si empieza antes apaga la
       crema y todo se ve sucio en vez de cálido. */
    radial-gradient(125% 96% at 50% 42%, rgba(255, 255, 255, 0) 64%, rgba(146, 104, 46, 0.10) 100%),
    /* luz principal, como entrando por arriba a la izquierda */
    radial-gradient(74% 50% at 16% 2%, rgba(255, 254, 250, 0.98), rgba(255, 254, 250, 0) 64%),
    /* rebote dorado a la derecha */
    radial-gradient(62% 44% at 92% 22%, rgba(243, 226, 195, 0.5), rgba(243, 226, 195, 0) 66%),
    /* calor que sube desde abajo */
    radial-gradient(96% 50% at 58% 104%, rgba(238, 222, 196, 0.5), rgba(238, 222, 196, 0) 68%),
    linear-gradient(176deg, var(--nude-50) 0%, var(--nude-100) 46%, var(--nude-200) 100%);
}

/* ---- 2. El grano ----
   feTurbulence desaturado. Es lo que saca el aspecto de "degradé plano de CSS"
   y lo convierte en papel. Va bajísimo de opacidad: se siente, no se ve. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  /* El grano es MARRÓN, no gris: un ruido gris sobre crema la desatura y el
     papel se ve sucio. La matriz mapea el turbulence a un sepia con alfa baja. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.28 0.28 0.28 0 0.08  0.22 0.22 0.22 0 0.05  0.12 0.12 0.12 0 0.02  0 0 0 0 0.11'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ---- 3. La botánica ----
   Una ramita enorme y casi invisible por sección, alternando de lado. Da la
   sensación de que el papel está impreso, no de que el fondo está vacío. */
.sec::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(82vw, 34rem);
  aspect-ratio: 1;
  opacity: 0.11;
  pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23A67C34' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M28 182 C60 140 84 96 96 44'/%3E%3Cpath d='M96 44 C98 30 104 20 114 12'/%3E%3Cg%3E%3Cpath d='M84 92 C64 88 50 96 44 110 C62 116 78 108 84 92 Z'/%3E%3Cpath d='M88 74 C104 60 122 62 132 74 C116 86 98 86 88 74 Z'/%3E%3Cpath d='M74 122 C56 122 44 132 40 146 C58 150 72 138 74 122 Z'/%3E%3Cpath d='M80 106 C98 94 116 98 124 110 C108 120 90 118 80 106 Z'/%3E%3Cpath d='M62 152 C46 156 38 168 38 180 C54 178 62 166 62 152 Z'/%3E%3C/g%3E%3Ccircle cx='114' cy='12' r='7'/%3E%3Ccircle cx='132' cy='30' r='5'/%3E%3Ccircle cx='98' cy='26' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
/* Adentro de la sección, no en el borde: si se va de cuadro no se ve nada. */
.sec:nth-of-type(odd)::before  { left: -20%; bottom: 5%; transform: rotate(-8deg); }
.sec:nth-of-type(even)::before { right: -20%; top: 7%; transform: scaleX(-1) rotate(-8deg); }
/* La portada ya tiene monograma, anillos y sobre: ahí sobra. */
.sec--hero::before { content: none; }

/* El contenido siempre por encima de la botánica */
.sec > .container { position: relative; z-index: 1; }