:root{
  --cream:#fbf6ee;
  --pink:#e7b7bd;
  --pink-dark:#c98490;
  --gold:#a68a4f;
  --green:#4e6e4b;
  --ink:#4d4038;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#dfb5a9;
  color:var(--ink);
  font-family:"Montserrat",sans-serif;
}

h1,h2,h3,p{margin-top:0}
a{text-decoration:none;color:inherit}
img{width:100%;height:100%;object-fit:cover;display:block}

.floral-section{
  position:relative;
  overflow:hidden;
}
.floral-section::before,
.floral-section::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  background:
    radial-gradient(circle at 35% 35%,#f4c9cf 0 10px,transparent 11px),
    radial-gradient(circle at 55% 45%,#e9aeb9 0 11px,transparent 12px),
    radial-gradient(circle at 45% 65%,#f8d8db 0 9px,transparent 10px);
  opacity:.65;
  pointer-events:none;
}
.floral-section::before{left:-55px;top:-40px}
.floral-section::after{right:-55px;bottom:-40px;transform:rotate(180deg)}

.hero,
.section,
footer{
  width:min(430px,92vw);
  margin:22px auto;
  background:var(--cream);
  box-shadow:0 18px 50px rgba(71,47,40,.16);
}

.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px 24px;
}

.hero-inner{
  width:100%;
  text-align:center;
  position:relative;
  z-index:2;
}

.script{
  font:400 38px/1 "Great Vibes",cursive;
  color:var(--gold);
}
.small{font-size:30px}
.name{font-size:56px;margin-top:8px}

.hero h1{
  font:500 58px/1 "Cormorant Garamond",serif;
  letter-spacing:.08em;
  margin:4px 0 12px;
  color:var(--gold);
}

.portrait{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  margin:20px auto;
}
.portrait--arched{
  border-radius:50% 50% 0 0 / 18% 18% 0 0;
  border:2px solid var(--gold);
}

.intro{
  font:400 15px/1.7 "Cormorant Garamond",serif;
  max-width:320px;
  margin:26px auto;
}

.eyebrow{
  font-size:11px;
  letter-spacing:.16em;
}

.play-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--gold);
  cursor:pointer;
  font-size:20px;
}

.song-title{
  font:400 18px "Great Vibes",cursive;
  color:var(--gold);
  margin-top:10px;
}

.section{
  padding:46px 26px;
  text-align:center;
}

.parents p,
.gifts p,
.rsvp p,
.dress p{
  line-height:1.65;
  max-width:330px;
  margin-left:auto;
  margin-right:auto;
}

.parents h2,
.parents h3{
  margin:14px 0 24px;
}

.countdown h2{
  font:500 42px "Cormorant Garamond",serif;
  color:var(--gold);
}

.date-line{
  display:grid;
  grid-template-columns:1fr 70px 1fr;
  align-items:center;
  gap:10px;
  margin:20px 0 28px;
}
.date-line strong{
  font:500 46px "Cormorant Garamond",serif;
  border-bottom:1px solid var(--gold);
}
.date-line span{
  font-size:11px;
  letter-spacing:.1em;
}

.counter{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  color:var(--green);
}
.counter strong{
  display:block;
  font:500 30px "Cormorant Garamond",serif;
}
.counter span{
  display:block;
  font-size:9px;
  letter-spacing:.1em;
}

.venue h3{
  font:600 14px "Montserrat",sans-serif;
  margin-bottom:8px;
}
.venue .time{
  font:500 18px "Cormorant Garamond",serif;
}
.divider{
  height:1px;
  background:#d9c8b7;
  margin:34px 0;
}

.button{
  display:inline-block;
  margin-top:10px;
  padding:12px 20px;
  background:var(--gold);
  color:white;
  font-size:11px;
  letter-spacing:.08em;
  border-radius:4px;
}

.timeline{
  display:grid;
  gap:18px;
  max-width:280px;
  margin:24px auto 0;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:var(--green);
}
.timeline div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:center;
}
.timeline span{
  text-align:right;
  font-size:11px;
}
.timeline strong{
  text-align:left;
  font-size:11px;
  color:var(--green);
}

.dress h3{
  color:#000;
  letter-spacing:.1em;
}

footer{
  padding:32px;
  text-align:center;
}
.monogram{
  font:400 48px "Great Vibes",cursive;
  color:var(--gold);
}
footer p{
  font:400 24px "Cormorant Garamond",serif;
  margin-bottom:0;
}

.media{
  position:relative;
  background:linear-gradient(135deg,#f3ddd5,#fff9f3);
}
.media::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  color:var(--gold);
  font-weight:600;
  letter-spacing:.1em;
}
.media.placeholder::after{display:grid}

@media(max-width:520px){
  body{background:var(--cream)}
  .hero,.section,footer{
    width:100%;
    margin:0;
    box-shadow:none;
  }
}


/* Mariposas animadas sobre toda la invitación */
.butterfly-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.flying-butterfly{position:absolute;left:-90px;top:var(--y);width:var(--size);height:auto;filter:drop-shadow(0 3px 4px rgba(90,45,55,.2));opacity:.92;animation:butterflyFly var(--duration) linear infinite;animation-delay:var(--delay);transform-origin:center}
.flying-butterfly img{display:block;width:100%;height:auto;animation:butterflyFlutter .55s ease-in-out infinite alternate}
@keyframes butterflyFly{0%{transform:translate(-10vw,5vh) rotate(-10deg)}25%{transform:translate(30vw,-3vh) rotate(8deg)}50%{transform:translate(60vw,5vh) rotate(-7deg)}75%{transform:translate(90vw,-4vh) rotate(10deg)}100%{transform:translate(120vw,3vh) rotate(-5deg)}}
@keyframes butterflyFlutter{from{transform:scaleX(.78) rotate(-4deg)}to{transform:scaleX(1.04) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.flying-butterfly{animation:none;display:none}}

/* Movimiento suave al entrar cada sección */
.reveal-section{opacity:0;transform:translateY(46px) scale(.985);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-section.is-visible{opacity:1;transform:translateY(0) scale(1)}
.reveal-section h2,.reveal-section .script,.reveal-section .media,.reveal-section .button{transition:transform 1s ease,opacity 1s ease}
.reveal-section:not(.is-visible) h2,.reveal-section:not(.is-visible) .script{transform:translateY(18px);opacity:.25}
.reveal-section:not(.is-visible) .media{transform:scale(.96);opacity:.45}
.reveal-section.is-visible .media{animation:softFloat 5s ease-in-out infinite}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.reveal-section,.reveal-section *{transition:none!important;animation:none!important}.reveal-section{opacity:1;transform:none}}


/* Portada de sobre antes de abrir la invitación — sobre creado con CSS */
body.intro-locked{overflow:hidden}
.envelope-intro{
  position:fixed;inset:0;z-index:20000;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.96) 0 12%,rgba(255,248,246,.88) 42%,rgba(246,225,226,.98) 100%);
  transition:opacity .7s ease,visibility .7s ease;cursor:pointer;overflow:hidden;
}
.envelope-intro::before,.envelope-intro::after{
  content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.28;pointer-events:none;
}
.envelope-intro::before{width:330px;height:330px;left:-140px;top:-100px;background:#f7c8cf}
.envelope-intro::after{width:280px;height:280px;right:-100px;bottom:-80px;background:#efd1a6}
.envelope-intro.is-finished{opacity:0;visibility:hidden;pointer-events:none}
.envelope-scene{position:relative;width:100vw;height:100svh;display:grid;place-items:center}
.envelope-hint{
  position:absolute;top:max(28px,6svh);left:0;right:0;text-align:center;
  font:500 11px Montserrat,sans-serif;letter-spacing:.18em;color:#9c6570;
  animation:hintPulse 1.7s ease-in-out infinite;z-index:30;
}
.envelope-stage{
  position:relative;width:min(88vw,720px);aspect-ratio:1.48/1;
  transform:translateY(4svh);perspective:1400px;
}
.css-envelope{
  position:absolute;inset:0;filter:drop-shadow(0 30px 35px rgba(102,53,68,.22));
  transform-style:preserve-3d;
}
.envelope-back{
  position:absolute;inset:9% 4% 4%;z-index:1;border-radius:7px;
  background:linear-gradient(145deg,#ef9fae 0%,#e38d9f 50%,#d97d91 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 -18px 34px rgba(143,64,82,.10);
}
.envelope-lining{
  position:absolute;left:8%;right:8%;top:10%;height:58%;z-index:2;
  clip-path:polygon(50% 0,100% 68%,84% 100%,16% 100%,0 68%);
  background:linear-gradient(180deg,#f9d7db 0%,#f2bbc4 100%);
  box-shadow:inset 0 0 0 2px rgba(184,137,67,.5);
}
.envelope-photo{
  /* La foto comienza COMPLETAMENTE dentro del bolsillo del sobre.
     Así no hace ningún recorrido desde abajo o desde fuera. */
  position:absolute;left:50%;top:34%;width:min(34vw,240px);aspect-ratio:4/5;
  transform:translate(-50%,0) scale(.90) rotate(-1deg);opacity:0;z-index:4;
  background:#fff;padding:8px 8px 28px;border-radius:4px;
  box-shadow:0 18px 45px rgba(72,42,49,.30);
  transition:transform 1.55s 1.05s cubic-bezier(.16,.9,.2,1),opacity .30s 1.02s ease;
}
.envelope-photo img{width:100%;height:100%;object-fit:cover;display:block}
.envelope-front{position:absolute;inset:9% 4% 4%;z-index:8;overflow:hidden;border-radius:7px;pointer-events:none}
.front-left,.front-right,.front-bottom{position:absolute;display:block}
.front-left{left:0;top:0;width:58%;height:100%;clip-path:polygon(0 0,100% 50%,0 100%);background:linear-gradient(135deg,#e993a4,#dc7f94)}
.front-right{right:0;top:0;width:58%;height:100%;clip-path:polygon(100% 0,0 50%,100% 100%);background:linear-gradient(225deg,#ef9eae,#dc7f94)}
.front-bottom{left:0;right:0;bottom:0;height:64%;clip-path:polygon(0 100%,50% 22%,100% 100%);background:linear-gradient(180deg,#ec98a8,#dc8094)}
.envelope-flap{
  position:absolute;left:4%;right:4%;top:9%;height:53%;z-index:12;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,#f2a7b5 0%,#e58fa2 72%,#dc8397 100%);
  transform-origin:50% 0;transform:rotateX(0deg);
  backface-visibility:visible;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform 1.05s cubic-bezier(.35,.02,.18,1);
}
.envelope-flap::after{
  content:"";position:absolute;inset:2px;clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));
}
.envelope-seal{
  position:absolute;left:50%;top:47%;width:92px;height:92px;z-index:16;transform:translate(-50%,-50%) scale(1);
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#efabb5 0 16%,#ce667d 57%,#b94f69 100%);
  border:4px solid #e8aab5;box-shadow:0 6px 16px rgba(108,46,63,.25),inset 0 0 0 3px rgba(255,255,255,.22);
  transition:opacity .22s .12s ease,transform .35s .08s ease;
}
.envelope-seal::before{content:"";position:absolute;inset:11px;border:2px solid #c59642;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,239,198,.35)}
.envelope-seal span{position:relative;z-index:2;font:600 31px/1 "Cormorant Garamond",serif;color:#f7d58a;text-shadow:0 1px 0 #966628}
.envelope-intro.opening .envelope-seal{opacity:0;transform:translate(-50%,-50%) scale(.72)}
.envelope-intro.opening .envelope-flap{transform:rotateX(-178deg);z-index:3}
.envelope-intro.opening .envelope-photo{opacity:1;transform:translate(-50%,-67%) scale(1) rotate(-2deg)}
.envelope-intro.opening .envelope-hint{opacity:0;transition:opacity .18s ease}
@keyframes hintPulse{50%{opacity:.42;transform:translateY(3px)}}
@media(max-width:520px){
  .envelope-stage{width:min(96vw,560px);transform:translateY(5svh)}
  .envelope-photo{width:min(47vw,210px);top:35%}
  .envelope-seal{width:76px;height:76px;top:48%}
  .envelope-seal span{font-size:26px}
  .envelope-intro.opening .envelope-photo{transform:translate(-50%,-69%) scale(1) rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){.envelope-hint{animation:none}}