/* ===== Tokens ===== */
:root{
  --cream:#fbf3e6;
  --paper:#f6ecd8;
  --paper-2:#efe1c6;
  --ink:#3a2c1d;
  --ink-soft:#6c5b46;
  --gold:#a8813f;
  --gold-deep:#8a6a2e;
  --gold-light:#e4c98a;
  --terracotta:#b5622f;
  --olive:#6f7a52;
  --wine:#7a3236;
  --line:#e0cfa9;
  --shadow: 0 10px 40px -18px rgba(58,44,29,.45);

  --font-display: 'Cormorant Garamond', serif;
  --font-script: 'Great Vibes', cursive;
  --font-body: 'Poppins', sans-serif;

  --frame-max: 600px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:#eee2c7;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; height:100vh; }

/* ===== Centered card frame (desktop keeps the mobile-width composition) ===== */
.site-frame{
  max-width:var(--frame-max);
  margin:0 auto;
  position:relative;
  background:var(--cream);
  box-shadow:0 0 0 1px rgba(58,44,29,.05), 0 30px 90px -30px rgba(58,44,29,.5);
}

/* ===== Ken Burns (slow living movement on photos) ===== */
.bg-kenburns{ animation:kb-bg 24s ease-in-out infinite alternate; background-size:112% !important; }
.kb-wrap{ overflow:hidden; }
.img-kenburns{ animation:kb-img 22s ease-in-out infinite alternate; transform-origin:center; }
@keyframes kb-bg{
  0%{ background-position:center 20%; background-size:112%; }
  100%{ background-position:center 42%; background-size:126%; }
}
@keyframes kb-img{
  0%{ transform:scale(1.02) translate(0,0); }
  100%{ transform:scale(1.13) translate(-1.5%,-1.5%); }
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:600; }

.eyebrow{
  font-family:var(--font-body);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 6px;
}
.script{ font-family:var(--font-script); font-weight:400; line-height:1; }

.divider{
  width:64px; height:1px; background:var(--gold);
  margin:14px auto 0;
  position:relative;
}
.divider::before{
  content:"✦";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--cream); color:var(--gold); font-size:12px; padding:0 8px;
}
.section-head{ text-align:center; max-width:640px; margin:0 auto 44px; padding:0 20px; }
.section-head h2{ font-size:clamp(28px,5vw,40px); text-wrap:balance; }
.section-head p{ color:var(--ink-soft); font-size:15px; margin-top:14px; }

.section{ position:relative; padding:88px 0; overflow:hidden; }
.section-inner{ max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }
.section-narrow{ max-width:640px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 34px; border-radius:100px; border:1px solid var(--gold);
  background:var(--gold-deep); color:#fdf6e8; text-decoration:none; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:var(--shadow);
}
.btn:hover{ transform:translateY(-2px); background:var(--terracotta); border-color:var(--terracotta); }
.btn.ghost{
  background:transparent; color:var(--gold-deep); box-shadow:none;
}
.btn.ghost:hover{ background:var(--gold-deep); color:#fdf6e8; }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.55s; }

/* ===== Page loader ===== */
#page-loader{
  position:fixed; inset:0; z-index:1001;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease;
}
#page-loader.is-hidden{ opacity:0; pointer-events:none; }
.loader-seal{
  width:84px; height:auto;
  animation:loader-pulse 1.7s ease-in-out infinite;
  filter:drop-shadow(0 10px 26px rgba(58,44,29,.35));
}
@keyframes loader-pulse{
  0%,100%{ transform:scale(1); opacity:.8; }
  50%{ transform:scale(1.08); opacity:1; }
}

/* ===== Envelope intro ===== */
#envelope{
  position:fixed; inset:0; z-index:1000;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s ease;
}
#envelope.is-hidden{ opacity:0; pointer-events:none; }
.envelope-card{
  position:relative; width:min(78vw,360px);
  cursor:pointer;
  text-align:center;
  animation:envelope-glow 2.4s ease-in-out infinite;
  border-radius:6px;
}
@keyframes envelope-glow{
  0%,100%{ box-shadow:0 20px 50px -20px rgba(58,44,29,.5); }
  50%{ box-shadow:0 20px 50px -20px rgba(58,44,29,.5), 0 0 0 6px rgba(168,129,63,.12); }
}
#envelope.opening .envelope-card{ animation:none; }
.envelope-video{
  width:100%; aspect-ratio:9/16; object-fit:cover;
  border-radius:6px; display:block; background:var(--paper-2);
}
.envelope-hint{
  margin-top:26px; font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep);
}
#envelope.opening .envelope-hint{ opacity:0; transition:opacity .3s ease; }

/* ===== Music toggle ===== */
#music-toggle{
  position:fixed; right:max(20px, calc((100vw - var(--frame-max)) / 2 + 20px)); bottom:20px; z-index:500;
  width:52px; height:52px; border-radius:50%;
  background:var(--gold-deep); color:#fdf6e8; border:1px solid var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow);
}
#music-toggle svg{ width:20px; height:20px; }
#music-toggle .bar{ animation: music-bounce 1s ease-in-out infinite; transform-origin:bottom; }
#music-toggle.paused .bar{ animation-play-state:paused; }
@keyframes music-bounce{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }

/* ===== Page-wide falling fragments (persistent, subtle) ===== */
.page-fragments{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  overflow:hidden;
  left:max(0px, calc((100vw - var(--frame-max)) / 2));
  width:min(100vw, var(--frame-max));
}
.fragment{
  position:absolute; top:-4%;
  width:6px; height:6px;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  opacity:0; will-change:transform, opacity;
  animation:fragment-fall linear infinite;
}
@keyframes fragment-fall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  8%{ opacity:.55; }
  92%{ opacity:.4; }
  100%{ transform:translateY(108vh) translateX(var(--fragment-drift,20px)) rotate(200deg); opacity:0; }
}

/* ===== Floating decorative layer ===== */
.floaters{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.floater{ position:absolute; opacity:.85; will-change:transform; }
.floater.petal{ width:34px; height:auto; animation:petal-fall linear infinite; }
.floater.butterfly{ width:38px; height:auto; animation:butterfly-drift ease-in-out infinite; }
.floater.leaf{ width:46px; height:auto; opacity:.5; animation:leaf-sway ease-in-out infinite; }
.floater.sparkle-field{ position:absolute; inset:-10% -10%; width:120%; height:120%; opacity:.55; mix-blend-mode:screen; animation:sparkle-pulse 4.5s ease-in-out infinite; }

@keyframes petal-fall{
  0%{ transform:translate(0,-8%) rotate(0deg); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.8; }
  100%{ transform:translate(24px,118%) rotate(220deg); opacity:0; }
}
@keyframes butterfly-drift{
  0%{ transform:translate(0,0) rotate(-6deg); }
  25%{ transform:translate(18px,-22px) rotate(4deg); }
  50%{ transform:translate(-6px,-40px) rotate(-4deg); }
  75%{ transform:translate(-22px,-16px) rotate(6deg); }
  100%{ transform:translate(0,0) rotate(-6deg); }
}
@keyframes leaf-sway{
  0%,100%{ transform:rotate(-6deg) translateY(0); }
  50%{ transform:rotate(6deg) translateY(-10px); }
}
@keyframes sparkle-pulse{ 0%,100%{ opacity:.3;} 50%{ opacity:.7;} }

/* ===== Hero ===== */
#hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center 30%;
  color:#fdf6e8; padding:0; overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%; z-index:0;
}
#hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(40,28,15,0) 35%, rgba(30,20,10,.78) 100%);
  z-index:1;
}
.hero-inner{
  position:relative; z-index:2; width:100%;
  padding:0 24px 64px; text-align:center;
}
.hero-inner .eyebrow{ color:var(--gold-light); }
.hero-names{ font-family:var(--font-script); font-size:clamp(48px,11vw,88px); line-height:1; margin:6px 0 10px; }
.hero-sub{ font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#f3e7cf; }
.hero-scroll{
  margin-top:38px; display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#f3e7cf;
}
.hero-scroll .chev{ width:14px; height:14px; border-right:1.5px solid #f3e7cf; border-bottom:1.5px solid #f3e7cf; transform:rotate(45deg); animation:chev-bounce 1.8s ease-in-out infinite; }
@keyframes chev-bounce{ 0%,100%{ transform:rotate(45deg) translate(0,0);} 50%{ transform:rotate(45deg) translate(5px,5px);} }

/* ===== Convite formal ===== */
#convite{ background:var(--paper); padding-top:0; padding-bottom:0; }
.frame-wrap{
  position:relative; width:100%; margin:0 auto;
}
.frame-wrap img, .frame-wrap video{ width:100%; display:block; clip-path:inset(0 0 0.6% 0); }
.frame-content{
  position:absolute; left:12%; right:12%; top:23%; bottom:20%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px;
}
.frame-content .to-whom{ font-family:var(--font-script); font-size:30px; color:var(--terracotta); margin-top:6px; }
.frame-content .names{ font-family:var(--font-display); font-size:22px; font-weight:600; }
.frame-content .amp{ font-family:var(--font-script); font-size:26px; color:var(--gold-deep); display:block; margin:2px 0; }
.frame-content p{ font-size:13px; color:var(--ink-soft); margin:6px 0 0; max-width:26ch; }

/* ===== Scratch cards ===== */
#data{ background:var(--cream); text-align:center; padding-top:72px; }
.scratch-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.scratch-card{
  position:relative; width:112px; height:150px; border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); background:var(--paper);
}
.scratch-reveal{
  position:absolute; inset:0; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.scratch-number{ font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--gold-deep); }
.scratch-canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
.scratch-label{ margin-top:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.scratch-caption{ margin-top:26px; color:var(--ink-soft); font-size:13px; }

/* ===== Timeline ===== */
#timeline{ background:var(--paper); }
.timeline{ position:relative; max-width:640px; margin:0 auto; overflow:visible; }
.timeline::before{
  content:""; position:absolute; left:50%; top:6px; bottom:6px; width:1px;
  background:var(--line); transform:translateX(-50%);
}
.tl-item{
  position:relative; display:grid; grid-template-columns:1fr 40px 1fr;
  align-items:center; padding:0 0 54px; column-gap:14px;
}
.tl-item:last-child{ padding-bottom:0; }
.tl-body{ grid-column:1; min-width:0; text-align:right; }
.tl-item:nth-child(even) .tl-body{ grid-column:3; text-align:left; }
.tl-dot{
  grid-column:2; grid-row:1; justify-self:center;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
}
.tl-dot::before{
  content:""; width:13px; height:13px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 6px var(--paper), 0 0 0 7px var(--line);
}
.tl-time{
  margin:0; font-family:var(--font-display); font-size:clamp(26px,6vw,32px);
  color:var(--terracotta); font-weight:600; line-height:1.1;
  overflow-wrap:break-word;
}
.tl-time-rule{
  display:block; width:30px; height:1px; background:var(--gold);
  margin:10px 0 0; opacity:.75;
}
.tl-item:nth-child(odd) .tl-time-rule{ margin-left:auto; }
.tl-title{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:15.5px; color:var(--ink-soft); letter-spacing:.01em;
  margin:9px 0 0; line-height:1.5;
  overflow-wrap:break-word; word-break:break-word;
}

.tl-butterfly{
  position:absolute; left:0; top:0; width:84px; height:168px;
  margin-left:-42px; margin-top:-84px; z-index:3; pointer-events:none;
  background-image:url('../img/14-borboletas.png');
  background-repeat:no-repeat; background-size:300% 100%; background-position:50% 0%;
  filter:drop-shadow(0 14px 20px rgba(58,44,29,.4));
  animation:tl-butterfly-flutter 1.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes tl-butterfly-flutter{
  0%,100%{ rotate:-8deg; }
  50%{ rotate:8deg; }
}

/* ===== Countdown ===== */
#contador{
  background-size:cover; background-position:center; color:var(--ink); text-align:center;
}
#contador .section-head, #contador .countdown{ position:relative; z-index:2; }
#contador .section-head p{ color:var(--ink-soft); }
#contador .section-head h2{ color:var(--ink); }
#contador .divider{ background:var(--gold); }
.countdown{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.cd-unit{ min-width:78px; }
.cd-num{ font-family:var(--font-display); font-size:clamp(34px,7vw,52px); font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); }
.cd-label{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-top:4px; }

/* ===== Local ===== */
#local{ background:var(--cream); }
.local-arch{ max-width:520px; margin:0 auto 56px; border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.local-grid{ display:grid; gap:28px; grid-template-columns:1fr; max-width:880px; margin:0 auto; }
.local-card{ background:var(--paper); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.local-photo{ width:100%; aspect-ratio:4/3; background-repeat:no-repeat; animation:local-breathe 16s ease-in-out infinite alternate; }
@keyframes local-breathe{ 0%{ transform:scale(1.03);} 100%{ transform:scale(1.12);} }
.local-info{ padding:24px 26px 28px; }
.local-info h3{ font-size:22px; }
.local-info p{ color:var(--ink-soft); font-size:14px; margin:8px 0 16px; }

/* ===== Traje ===== */
#traje{ background:var(--paper); text-align:center; }
.palette-img{ max-width:min(340px, 100%); margin:0 auto; border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.palette-img-large{ max-width:min(460px, 100%); }
.traje-note{ margin-top:22px; font-size:13px; color:var(--wine); }

/* ===== Padrinhos ===== */
#padrinhos{ background:var(--cream); text-align:center; }
.padrinhos-illustration{ max-width:min(460px, 100%); margin:0 auto; }

/* ===== Presentes ===== */
#presentes{ background:var(--paper); text-align:center; }
.presente-icon{ width:280px; max-width:70%; margin:0 auto 6px; filter:drop-shadow(0 14px 22px rgba(58,44,29,.25)); }
.pix-box{
  margin:26px auto 0; max-width:360px; background:var(--cream); border:1px dashed var(--gold);
  border-radius:14px; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pix-box code{ font-size:13px; color:var(--ink-soft); word-break:break-all; text-align:left; }
.pix-copy{ flex:none; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); background:none; border:1px solid var(--gold); border-radius:100px; padding:8px 14px; cursor:pointer; }
.pix-copy.copied{ background:var(--olive); border-color:var(--olive); color:#fff; }

/* ===== Galeria ===== */
#galeria{ background:var(--cream); }
.gallery-grid{
  columns:2 220px; column-gap:14px; max-width:900px; margin:0 auto;
}
.gallery-grid img{
  width:100%; border-radius:12px; margin-bottom:14px; box-shadow:var(--shadow);
  cursor:zoom-in; transition:transform .4s ease;
}
.gallery-grid img:hover{ transform:scale(1.02); }
#lightbox{
  position:fixed; inset:0; background:rgba(20,14,8,.92); z-index:900;
  display:flex; align-items:center; justify-content:center; padding:30px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
#lightbox.is-open{ opacity:1; pointer-events:auto; }
#lightbox img{ max-width:100%; max-height:88vh; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
#lightbox .lb-close{
  position:absolute; top:22px; right:26px; color:#fdf6e8; font-size:28px; cursor:pointer; line-height:1;
}

/* ===== RSVP ===== */
#rsvp{ background:var(--paper-2); text-align:center; }
#rsvp .section-head p{ margin-bottom:8px; }
.rsvp-box{ max-width:380px; margin:0 auto; }
.rsvp-deadline{ font-size:13px; color:var(--wine); margin-bottom:26px; }
.rsvp-form{ display:flex; flex-direction:column; gap:14px; }
.rsvp-form input{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:100px;
  padding:15px 22px; text-align:center; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rsvp-form input::placeholder{ color:var(--ink-soft); opacity:.65; }
.rsvp-form input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--accent-soft, rgba(168,129,63,.18)); }
.rsvp-form .btn{ align-self:center; border:none; cursor:pointer; }
.rsvp-box.is-confirmed .rsvp-form{ display:none; }
.rsvp-success{
  display:none; flex-direction:column; align-items:center; gap:6px;
  padding:30px 20px; background:var(--cream); border:1px solid var(--gold-light); border-radius:16px;
}
.rsvp-box.is-confirmed .rsvp-success{ display:flex; }
.rsvp-success-icon{
  width:40px; height:40px; border-radius:50%; background:var(--olive); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:6px;
}
.rsvp-success p{ margin:0; }
#rsvp-success-text{ font-family:var(--font-display); font-size:20px; color:var(--terracotta); font-weight:600; }
.rsvp-success-sub{ font-size:13.5px; color:var(--ink-soft); }

/* ===== Encerramento ===== */
#encerramento{ background:var(--cream); text-align:center; padding-bottom:64px; }
.bouquet-img{ max-width:min(280px, 100%); margin:0 auto; }
.signoff{ font-family:var(--font-script); font-size:40px; color:var(--terracotta); margin-top:6px; }
.hashtag{ margin-top:14px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.footer-credit{ margin-top:50px; font-size:11px; color:var(--ink-soft); opacity:.7; }

/* ===== Responsive ===== */
@media (min-width:760px){
  .local-grid{ grid-template-columns:1fr 1fr; }
  .scratch-card{ width:130px; height:174px; }
  .section{ padding:120px 0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}