@font-face { font-family:'Avermont House'; src:url('assets/fonts/AvermontHouse.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
  html, body { margin:0; width:100%; max-width:100%; background:#F3EDE3; overscroll-behavior-y:none; }
  body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
  a { color:#A88955; text-decoration:none; }
  a:hover { color:#18344A; }
  input, textarea, button { font-family:"Inter", sans-serif; }
  [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1); }
  [data-reveal].is-in { opacity:1; transform:none; }
  @property --ip { syntax:'<number>'; initial-value:0; inherits:false; }
  [data-ink] { --ip:0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-image:linear-gradient(270deg,#000 0,#000 calc(var(--ip)*100%),rgba(0,0,0,0) calc(var(--ip)*100% + 8%)); mask-image:linear-gradient(270deg,#000 0,#000 calc(var(--ip)*100%),rgba(0,0,0,0) calc(var(--ip)*100% + 8%)); }
  [data-ink="on"] { animation:inkDraw 6s cubic-bezier(.34,.03,.2,1) forwards; }
  @keyframes inkDraw { to { --ip:1; } }
  [data-build] { --p:0; --q:.5; }
  [data-build="rise"] { opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 10px)); }
  [data-build="riseY"] { opacity:var(--p); transform:translateY(calc(-50% + (1 - var(--p)) * 7px)); }
  [data-build="text"] { opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 8px)); }
  [data-build="ink"] { -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--p)*50%),rgba(0,0,0,0) calc(var(--p)*50% + 7%)),linear-gradient(270deg,#000 0,#000 calc(var(--p)*50%),rgba(0,0,0,0) calc(var(--p)*50% + 7%)); mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--p)*50%),rgba(0,0,0,0) calc(var(--p)*50% + 7%)),linear-gradient(270deg,#000 0,#000 calc(var(--p)*50%),rgba(0,0,0,0) calc(var(--p)*50% + 7%)); }
  [data-build="draw"] { opacity:var(--p); }
  [data-build="wipe"] { opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 6px)); }
  [data-build="tile"] { opacity:var(--p); transform:scale(calc(.99 + .01 * var(--p))); }
  [data-build="unfold"] { opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 6px)); }
  [data-build="settle"] { --sh:max(0, calc((var(--p) - .3) / .7)); filter:drop-shadow(0 calc(7px + (1 - var(--sh)) * 13px) calc(16px + (1 - var(--sh)) * 18px) rgba(51,47,42, calc(.035 + .105 * var(--sh)))); opacity:var(--p); transform:scale(calc(.988 + .012 * var(--p))) translateY(calc((1 - var(--p)) * 5px)); }
  [data-build="spine"] { opacity:var(--p); transform:scaleY(calc(.94 + .06 * var(--p))); transform-origin:50% 0; }
  /* CAP 8 · el sello cuaja. La cera llega blanda, mate y sin foco, y se
     endurece: gana grano, brillo y una sombra que se cierra bajo el borde.
     El tamaño solo cede un 3% — nada de rebote, esa es la pulsación. */
  [data-build="sealIn"] {
    opacity: var(--p);
    transform: scale(calc(1.032 - .032 * var(--p)));
    transform-origin: 50% 50%;
    filter:
      blur(calc((1 - var(--p)) * 3.4px))
      saturate(calc(.66 + .34 * var(--p)))
      brightness(calc(.87 + .13 * var(--p)))
      contrast(calc(.9 + .1 * var(--p)))
      drop-shadow(calc(var(--p) * -0.8px) calc(0.35px + var(--p) * 1.15px) calc(1.3px + var(--p) * 1.4px) rgba(46,34,22,.42))
      drop-shadow(calc(var(--p) * -1.3px) calc(0.8px + var(--p) * 2.4px) calc(2.4px + var(--p) * 4.2px) rgba(46,34,22,.15));
  }
  /* CAP 8 · el olivo se posa. Las ramas no aparecen: entran girando sobre el
     punto por el que asoman al papel, como si alguien las dejase caer sobre la
     hoja. Las hojas sueltas caen y se orientan al aterrizar. Ninguno usa mask ni
     clip — todo es transform/opacity/filter, así el usuario puede recolocarlos. */
  [data-build="branchR"] { opacity:var(--p); transform-origin:100% 4%; transform:rotate(calc((1 - var(--p)) * -9deg)) translate(calc((1 - var(--p)) * 4%), calc((1 - var(--p)) * -3%)); }
  [data-build="branchL"] { opacity:var(--p); transform-origin:0% 28%; transform:rotate(calc((1 - var(--p)) * 10deg)) translate(calc((1 - var(--p)) * -4.5%), calc((1 - var(--p)) * 3%)); }
  [data-build="leafFall"] { --lf:calc(1 - var(--p)); opacity:var(--p); transform:translate(calc(var(--lf) * 9px), calc(var(--lf) * -32px)) rotate(calc(var(--lf) * -24deg)); }
  /* La escena se posa sobre el papel: llega ancha y sin peso y acaba pegada,
     con la sombra cerrada bajo su propio contorno recortado. */
  [data-build="scene"] { opacity:var(--p); transform:scale(calc(.982 + .018 * var(--p))); filter:drop-shadow(0 calc(8px + (1 - var(--p)) * 20px) calc(18px + (1 - var(--p)) * 26px) rgba(51,47,42, calc(.04 + .075 * var(--p)))); }
  /* La brisa del CAP 5, más lenta: el último capítulo respira, no se agita. */
  @keyframes olivoR { 0%, 100% { transform:rotate(0deg); } 50% { transform:rotate(-1.05deg); } }
  @keyframes olivoL { 0%, 100% { transform:rotate(0deg); } 50% { transform:rotate(1.25deg); } }
  @keyframes hojaAire { 0%, 100% { transform:rotate(var(--r)) translateY(0); } 50% { transform:rotate(calc(var(--r) + 2.4deg)) translateY(-3px); } }
  @keyframes haloBreath { 0%, 100% { opacity:.72; transform:scale(1); } 50% { opacity:1; transform:scale(1.04); } }
  [data-build="pop"] { transform:translate(-50%,-50%) rotate(45deg) scale(calc(.86 + .14*var(--p))); opacity:var(--p); }
  [data-build="drift"] { transform:translateY(calc((.5 - var(--q)) * 26px)); }
  /* CAP 5 · la línea se dibuja de arriba abajo; icono y texto convergen sobre el rombo */
  [data-build="spineDraw"] { opacity:min(1, calc(var(--p) * 3)); transform:scaleY(var(--p)); transform-origin:50% 0; }
  [data-build="iconIn"] { opacity:var(--p); transform:translate(calc((1 - var(--p)) * -6.5cqw), -50%) rotate(calc((1 - var(--p)) * -5deg)); }
  [data-build="mark"] { --mq:max(0, min(1, calc((var(--p) - .56) / .44))); --mb:calc(4 * var(--mq) * (1 - var(--mq))); opacity:var(--p); transform:translate(-50%,-50%) rotate(calc(45deg + (1 - var(--p)) * 34deg)) scale(calc(.5 + .5 * var(--p) + .2 * var(--mb))); }
  [data-build="textIn"] { opacity:var(--p); transform:translate(calc((1 - var(--p)) * 3.4cqw), -50%); }
  @keyframes lampGlow {
    0%   { filter:url(#inkPress) saturate(.62) contrast(.94) brightness(1.035); }
    17%  { filter:url(#inkPress) saturate(.66) contrast(.95) brightness(1.075); }
    31%  { filter:url(#inkPress) saturate(.60) contrast(.935) brightness(1.015); }
    44%  { filter:url(#inkPress) saturate(.65) contrast(.945) brightness(1.062); }
    58%  { filter:url(#inkPress) saturate(.61) contrast(.94) brightness(1.028); }
    73%  { filter:url(#inkPress) saturate(.67) contrast(.952) brightness(1.082); }
    88%  { filter:url(#inkPress) saturate(.605) contrast(.938) brightness(1.022); }
    100% { filter:url(#inkPress) saturate(.62) contrast(.94) brightness(1.035); }
  }
  @keyframes iconBreath { 0%, 100% { transform:translateY(0) scale(1); opacity:.9; } 50% { transform:translateY(-1.6px) scale(1.012); opacity:1; } }
  @keyframes medalTurn {
    0%   { transform:perspective(900px) rotateY(0deg) translateZ(0) scale(1); }
    14%  { transform:perspective(900px) rotateY(18deg) translateZ(9px) scale(.979); }
    58%  { transform:perspective(900px) rotateY(214deg) translateZ(5px) scale(.988); }
    86%  { transform:perspective(900px) rotateY(342deg) translateZ(1px) scale(.997); }
    100% { transform:perspective(900px) rotateY(360deg) translateZ(0) scale(1); }
  }
  /* CAP 8 · el formulario no aparece: sube. El papel se funde encima del sello
     y la columna entra un instante después, como una hoja que se posa. */
  /* EL HILO · el control de sonido no es un icono: es un hilo de latón tensado.
     Mientras suena la música vibra; al silenciarla se queda quieto. La onda
     recorre un periodo exacto, así que el bucle no tiene costura. */
  @keyframes hiloVibra { from { transform:translateX(0); } to { transform:translateX(15px); } }
  @keyframes hiloEntra { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) {
    [data-sound-ctrl], [data-sound-ctrl] g { animation:none !important; }
  }
  @keyframes rsvpVeil { from { opacity:0; } to { opacity:1; } }
  @keyframes rsvpRise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) {
    [data-rsvp-veil], [data-rsvp-a], [data-rsvp-b], [data-rsvp-c] { animation:none !important; }
  }
  @keyframes mosaicDrift { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(8px); } }
  /* CAP 2 · el pan de oro de los nombres. La luz cruza la letra una vez y
     descansa; el resto del ciclo el oro está quieto, como metal de verdad. */
  @keyframes oroPasa {
    0%   { background-position:132% 0; }
    24%  { background-position:-32% 0; }
    100% { background-position:-32% 0; }
  }
  @keyframes oroLatido { 0%, 100% { opacity:.5; } 50% { opacity:.9; } }