/* Tipografía solicitada y movimiento ambiental de la invitación. */
:root{
  --serif:'PT Serif Caption',Georgia,serif;
  --script:'Monsieur La Doulaise','Brush Script MT',cursive
}
body,button,input,select,textarea{font-family:var(--serif)}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{font-family:var(--serif)}
h1,.section-title,.farewell,.page-footer>p,.thank-you h3{font-family:var(--script)}

/* La ilustración de vestimenta conserva sus colores originales y su definición. */
.dress-code-image{
  filter:none!important
}

/* La imagen enviada aletea completa mientras cada contenedor marca su recorrido. */
.butterfly-flight .butterfly,
.header-butterfly-two img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 8px #80514232);
  animation:butterfly-image-flap .58s ease-in-out infinite alternate;
  transform-origin:50% 52%
}
.footer-butterfly{
  display:inline-block;
  width:68px;
  height:68px;
  object-fit:contain;
  animation:footer-hover 4.5s ease-in-out infinite;
  filter:drop-shadow(0 6px 7px #925a4630)
}

@keyframes butterfly-image-flap{
  from{transform:perspective(180px) rotateY(-12deg) scaleX(.82) rotate(-2deg)}
  to{transform:perspective(180px) rotateY(12deg) scaleX(1) rotate(2deg)}
}

@media(max-width:480px){
  h1{font-size:clamp(53px,13.4cqw,68px);line-height:1.16;margin-block:4% 6%}
  .section-title{line-height:1.12}
}

/* Entrada y salida suave al recorrer en ambas direcciones, sin sobrepasar el punto final. */
.reveal{
  transition:opacity .78s ease,transform .78s cubic-bezier(.22,.61,.36,1)
}
.reveal.is-waiting.from-below{opacity:0;transform:translateY(24px)}
.reveal.is-waiting.from-above{opacity:0;transform:translateY(-24px)}

/* Vestido y flores conservan la ilustración completa, sin máscara ni degradado. */
.invitation::after{display:none!important}
.cover-art .princess,
.cover-art .bottom-left,
.cover-art .bottom-right{
  -webkit-mask-image:none!important;
  mask-image:none!important
}
.page-body{margin-top:-10px!important;padding-top:62px;background:linear-gradient(180deg,#f3c4bb 0,#f3c4bb 42px,#f6d3cc 190px,#fff9f5 510px,#fff 58%,#fff7f1)}

/* Textura de acuarela enviada por la usuaria como fondo continuo. */
.page{
  background-color:#efa49a;
  background-image:url('assets/fondo-acuarela-salmon.png');
  background-position:center top;
  background-repeat:no-repeat;
  background-size:100% 100%
}
.invitation,
.page-body{background:transparent!important}
.page-body::before{display:none!important}

/* Guirnalda creada para ocupar únicamente la franja señalada. */
.floral-seam{
  position:relative;
  z-index:0;
  width:96%;
  height:auto;
  margin:0 auto;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate
}
.floral-seam::after{display:none}
.floral-seam-garland{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 15px rgba(105,56,45,.12))
}

/* La misma guirnalda separa cada sección sin invadir los paneles. */
.section-floral-divider{
  position:relative;
  z-index:0;
  width:96%;
  margin:6px auto 12px;
  pointer-events:none
}
.section-floral-divider img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 7px 13px rgba(105,56,45,.1))
}

/* Los arreglos originales del encabezado quedan completos dentro del lienzo. */
.cover-art .bottom-left{left:1.5%!important;bottom:0!important;width:37%!important}
.cover-art .bottom-right{right:1.5%!important;bottom:0!important;width:34%!important}

/* Los adornos permanecen estáticos y siempre debajo del vidrio durante el scroll. */
.page-body section,
.glass-floral-wrap{isolation:isolate}
.page-body section>.section-floral,
.glass-floral-wrap>.section-floral{
  z-index:-1!important;
  --parallax-y:0px!important;
  will-change:auto!important;
  transition:opacity 1.1s ease!important
}
.page-body section>:not(.section-floral),
.glass-floral-wrap>section{
  position:relative;
  z-index:2
}
.countdown-section,
.confirmation,
.locations,
.weather-card,
.detail-grid article{
  z-index:2!important
}

/* Cada guirnalda anima con el scroll sin entrar en la capa de los cristales. */
.section-floral-divider{
  isolation:isolate;
  transform:translateY(0);
  transition:opacity .9s ease,filter .9s ease,transform .9s ease
}
.section-floral-divider.is-waiting.from-below,
.section-floral-divider.is-waiting.from-above{opacity:0;filter:blur(3px);transform:scale(.98)}
.glass-floral-wrap{z-index:1}
.glass-floral-wrap>section{z-index:3!important}
.page-body>section,
.page-body>.glass-floral-wrap{z-index:2}

/* Pase con cristal rosa tenue, sin degradado. */
.confirmation .guest-pass{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.6);
  border-radius:22px;
  background:rgba(240,216,208,.34);
  -webkit-backdrop-filter:blur(13px) saturate(108%);
  backdrop-filter:blur(13px) saturate(108%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 12px 26px #3f242426;
  color:#704743
}
.confirmation .guest-pass::before,.confirmation .guest-pass::after{display:none}
.confirmation .guest-pass>span{color:#fffaf4;letter-spacing:.13em;text-shadow:0 1px 8px #4c29296b}
.confirmation .guest-pass p{color:#fff;text-shadow:0 2px 12px #4c292975}
.confirmation .guest-pass small{color:#fffaf4;text-shadow:0 1px 8px #4c29296b}

.invitation .detail:first-child .button{animation:hero-from-left .75s 1.98s var(--ease) both!important}
.invitation .detail:last-child .button{animation:hero-from-right .75s 2.05s var(--ease) both!important}

/* Todas las acciones comparten el mismo salmón sólido. */
.details .button,
.location-card .location-link,
.accept-invitation,
.confirmation-button,
.accept-invitation.is-accepted{
  border:0;
  background:#a7635b;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 10px 22px rgba(92,48,48,.22);
  color:#fffaf5;
  text-shadow:none
}
.details .button::before,
.details .button::after,
.location-card .location-link::before,
.location-card .location-link::after,
.accept-invitation::before,
.accept-invitation::after,
.confirmation-button::before,
.confirmation-button::after{display:none}
.details .button:hover,
.location-card .location-link:hover,
.accept-invitation:hover,
.confirmation-button:hover{
  background:#9b5952;
  transform:translateY(-2px);
  box-shadow:0 13px 26px rgba(92,48,48,.25)
}
.details .button:active,
.location-card .location-link:active,
.accept-invitation:active,
.confirmation-button:active{
  background:#914f49;
  transform:translateY(1px) scale(.99);
  box-shadow:0 5px 12px rgba(92,48,48,.18)
}

/* Cambio perceptible y limpio de cada cifra del contador. */
.countdown strong.digit-change{animation:countdown-tick .72s cubic-bezier(.22,.61,.36,1)}
@keyframes countdown-tick{
  0%{opacity:.2;transform:translateY(-14px) scale(.9);filter:blur(3px)}
  55%{opacity:1;transform:translateY(2px) scale(1.03);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

/* Las tarjetas se apilan antes de que el texto pueda quedar recortado. */
@media(max-width:640px){
  .locations{grid-template-columns:1fr;justify-items:center;gap:30px}
  .location-card{width:min(100%,380px);margin-inline:auto}
}
@media(max-width:480px){.floral-seam{width:96%}}

.farewell{
  max-width:38%;
  line-height:.92;
  text-wrap:balance;
  text-shadow:0 3px 16px #fff8f0,0 1px 0 #fff
}
.page-footer{margin-top:34px;padding:24px 8% 20px;border-top:1px solid rgba(125,79,70,.25)}
.page-footer>p{
  max-width:none;
  margin:0 0 9px;
  color:#704c46;
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  text-shadow:none
}
.page-footer>span{font-size:12px;letter-spacing:.035em;color:#84655f}

/* Halo cálido solo en la caligrafía exterior a los cristales y al encabezado. */
.family-section>.section-title,
.family h3,
.event-locations>.section-title,
.weather-section>.section-title,
.celebration-details>.section-title{
  animation:script-light 6.8s ease-in-out infinite;
  animation-delay:0s;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.92))
    drop-shadow(0 0 8px rgba(255,241,189,.72));
  text-shadow:
    0 0 2px rgba(255,255,255,.98),
    0 0 10px rgba(255,247,215,.72)
}
@keyframes script-light{
  0%,100%{
    filter:drop-shadow(0 0 3px rgba(255,255,255,.88)) drop-shadow(0 0 8px rgba(255,241,189,.62));
    text-shadow:0 0 2px rgba(255,255,255,.94),0 0 9px rgba(255,247,215,.62)
  }
  50%{
    filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px rgba(255,235,157,.96));
    text-shadow:0 0 4px #fff,0 0 16px rgba(255,246,205,.96)
  }
}

/* Las luciérnagas pertenecen al documento y se quedan en zonas concretas al hacer scroll. */
.firefly-layer{
  position:absolute;
  z-index:6;
  top:0;
  bottom:120px;
  left:0;
  width:100%;
  height:auto;
  transform:none;
  overflow:hidden;
  pointer-events:none
}
.invitation,.page-body{position:relative;z-index:1}
.firefly-layer i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff6a9;
  opacity:.28;
  box-shadow:0 0 5px #fffbd0,0 0 11px #f6d66c,0 0 19px rgba(246,214,108,.82);
  animation:firefly-drift 9s ease-in-out infinite,firefly-blink 3.8s ease-in-out infinite
}
.firefly-layer i:nth-child(1){left:11%;top:7%;animation-delay:-1s,-.3s}
.firefly-layer i:nth-child(2){left:83%;top:11%;animation-delay:-6s,-2.1s}
.firefly-layer i:nth-child(3){left:17%;top:25%;animation-delay:-3s,-1.4s}
.firefly-layer i:nth-child(4){left:78%;top:29%;animation-delay:-8s,-.8s}
.firefly-layer i:nth-child(5){left:12%;top:45%;animation-delay:-4.5s,-2.8s}
.firefly-layer i:nth-child(6){left:87%;top:49%;animation-delay:-7s,-1.7s}
.firefly-layer i:nth-child(7){left:20%;top:66%;animation-delay:-2s,-3.2s}
.firefly-layer i:nth-child(8){left:81%;top:71%;animation-delay:-9s,-2.5s}
.firefly-layer i:nth-child(9){left:48%;top:84%;animation-delay:-5.5s,-.1s}
.firefly-layer i:nth-child(3n){animation-name:firefly-drift-alt,firefly-blink}
@keyframes firefly-drift{
  0%,100%{transform:translate3d(-8px,12px,0)}
  35%{transform:translate3d(23px,-31px,0)}
  68%{transform:translate3d(-18px,-55px,0)}
}
@keyframes firefly-drift-alt{
  0%,100%{transform:translate3d(10px,-8px,0)}
  42%{transform:translate3d(-27px,-40px,0)}
  76%{transform:translate3d(18px,-67px,0)}
}
@keyframes firefly-blink{
  0%,100%{opacity:.2;filter:brightness(.9)}
  45%{opacity:1;filter:brightness(1.5)}
  62%{opacity:.38;filter:brightness(1.05)}
}
@media(prefers-reduced-motion:reduce){
  .butterfly-flight .butterfly,.header-butterfly-two img,
  .footer-butterfly,.countdown strong.digit-change,
  .family-section>.section-title,.family h3,.event-locations>.section-title,
  .weather-section>.section-title,.celebration-details>.section-title,
  .firefly-layer i{animation:none!important}
  .firefly-layer i{opacity:.28}
}