/* =========================================================
   LUXURY WEDDING INVITATION
   Edit variables below to quickly change the whole theme.
   ========================================================= */

:root{
  --bg:#f4efe8;
  --paper:#fbf8f2;
  --dark:#17130f;
  --dark-2:#211b15;
  --gold:#c8a66a;
  --gold-light:#e6ce9d;
  --text:#2d2720;
  --muted:#8b8175;
  --line:rgba(200,166,106,.34);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Montserrat", Arial, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.8;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

.container{width:min(1120px,calc(100% - 40px));margin:auto}
.narrow{width:min(760px,calc(100% - 40px));margin:auto}
.section{
  position:relative;
  padding:110px 0;
  overflow:hidden;
  color:#f8eee7;
  background:
    #ff0055 ;
}
.section--dark{
  color:#eee6da;
  background:
    linear-gradient(rgba(15,10,10,.70),rgba(15,10,10,.76)),
    url("../assets/bg3.png") center/cover fixed no-repeat;
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 15%,rgba(255,210,215,.08),transparent 42%);
}
.section > .container,
.section > .section-heading,
.section > .narrow{
  position:relative;
  z-index:3;
}
.section:not(.hero) .section-heading h2,
.section:not(.hero) .section-heading p,
.section:not(.hero) .person-card h3,
.section:not(.hero) .person-card p,
.section:not(.hero) .timeline-content h3,
.section:not(.hero) .timeline-content p,
.section:not(.hero) .address-card h3,
.section:not(.hero) .address-card p{
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.section:not(.section--dark) .section-heading p,
.section:not(.section--dark) .person-card p,
.section:not(.section--dark) .timeline-content p,
.section:not(.section--dark) .address-card p{
  color:rgba(255,245,239,.82);
}
.section-flower{
  position:absolute;
  z-index:2;
  top:-8px;
  left:-12px;
  width:clamp(170px,24vw,330px);
  height:auto;
  object-fit:contain;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-115%, -42px, 0) rotate(-3deg);
  transform-origin:top left;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));
  transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .8s ease;
}
.section-flower.is-entered{
  opacity:.95;
  transform:translate3d(0,0,0) rotate(0deg);
}
.eyebrow{
  margin:0 0 15px;
  color:var(--gold);
  font-size:11px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.section-heading{text-align:center;max-width:780px;margin:0 auto 60px}
.section-heading h2,
.closing h2{
  margin:0 0 18px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(38px,5vw,68px);
  line-height:1.02;
}
.section-heading p{color:var(--muted);max-width:650px;margin:0 auto}
.section--dark .section-heading p{color:#aaa198}

.ornament{
  color:var(--gold);
  font-family:var(--serif);
  font-size:34px;
  line-height:1;
  margin:18px 0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 28px;
  border:1px solid var(--gold);
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:600;
  transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s;
}
.btn:hover{transform:translateY(-3px)}
.btn--gold{color:wheat;background:#f05}
.btn--gold:hover{background:var(--gold-light);box-shadow:0 12px 35px rgba(0,0,0,.2)}
.btn--outline{color:var(--gold);background:transparent}
.btn--outline:hover{color:var(--dark);background:var(--gold)}

.reveal{
  opacity:0;
  transform:translateY(35px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none}

/* Opening video */
.opening{
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
  text-align:center;
  background:#15110e;
  transition:transform 1.1s var(--ease),opacity 1.1s var(--ease);
}
.opening.is-open{transform:translateY(-100%);opacity:0;pointer-events:none}
.opening__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#15110e;
}
.opening__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.04),rgba(10,8,6,.20) 55%,rgba(10,8,6,.58));
}
.opening__content{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:8vh;
  width:min(700px,90%);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.opening__guest{
  margin:0 0 22px;
  color:rgba(255,255,255,.9);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.12em;
  text-shadow:0 2px 15px rgba(0,0,0,.35);
}
.opening__guest strong{display:inline-block;margin-top:4px;color:#fff;font-weight:500}
.opening__content.is-ready .opening__guest{opacity:1;transform:translateY(0)}
.opening__button[hidden]{display:none}
.opening__button{
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  box-shadow:0 10px 35px rgba(0,0,0,.22);
  transition:opacity .8s var(--ease),transform .8s var(--ease),background .3s,color .3s,box-shadow .3s;
}
.opening__button.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
/* Music */
.music-toggle{
  position:fixed;z-index:900;right:22px;bottom:22px;
  width:48px;height:48px;border-radius:50%;
  color:var(--gold);background:rgba(23,19,15,.85);
  border:1px solid var(--gold);
  backdrop-filter:blur(8px);
}
.music-toggle.is-playing .music-icon{display:inline-block;animation:spin 2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Hero */
.hero{min-height:100svh;padding:0;display:grid;place-items:center;color:#fff;text-align:center;overflow:hidden}
.hero__image,.hero__overlay{position:absolute;inset:0}
.hero__image{background:#26191a url("../assets/wedding-bg.png") center/cover no-repeat;transform:scale(1.04)}
.hero__overlay{background:linear-gradient(180deg,rgba(12,9,6,.22),rgba(12,9,6,.78))}
.hero__content{position:relative;z-index:1;padding:100px 0 60px}
.hero .date{margin:32px 0 0;color:#e5ddd2;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.countdown{display:flex;justify-content:center;gap:10px;margin-top:28px}
.countdown div{
  min-width:78px;padding:12px 8px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.countdown strong{display:block;font-family:var(--serif);font-size:30px;font-weight:500;line-height:1}
.countdown span{display:block;margin-top:4px;color:#b9afa3;font-size:8px;text-transform:uppercase;letter-spacing:.16em}

/* Quote */
.quote{text-align:center}
.quote blockquote{
  margin:30px 0 20px;
  font-family:var(--serif);
  font-size:clamp(25px,3vw,38px);
  line-height:1.3;
  font-style:italic;
  font-weight:400;
}
.quote__source{color:var(--gold);font-size:10px;letter-spacing:.16em}

/* Couple */
.couple-grid{
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  align-items:center;
  gap:35px;
}
.person-card{text-align:center}
.person-card .portrait{
  width:min(330px,100%);
  aspect-ratio:4/5;
  margin:0 auto 30px;
  overflow:hidden;
  border:1px solid var(--line);
  padding:9px;
}
.person-card .portrait img{transition:transform 1s var(--ease)}
.person-card:hover .portrait img{transform:scale(1.04)}
.person-card__role{color:var(--gold);font-size:10px;letter-spacing:.25em}
.person-card h3{margin:0 0 8px;font-family:var(--serif);font-size:39px;font-weight:500}
.person-card p{color:var(--muted);font-size:13px}
.social-link{display:inline-block;margin-top:6px;color:var(--gold);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.couple-divider{
  display:grid;place-items:center;
  width:70px;height:70px;margin:auto;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
  font-family:var(--serif);font-size:30px;
}

/* Event */
.event{text-align:center}
.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.event-card{
  position:relative;padding:45px 35px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.event-card__number{position:absolute;top:18px;right:22px;color:rgba(200,166,106,.45);font-family:var(--serif);font-size:25px}
.event-card__label{color:var(--gold);font-size:10px;letter-spacing:.25em}
.event-card h3{margin:10px 0;font-family:var(--serif);font-size:34px;font-weight:500}
.event-card__time{color:#eee;font-size:12px}
.event-card p:not(.event-card__label):not(.event-card__time){color:#a9a096;font-size:12px}
.live-stream{margin:70px auto 0;max-width:580px}
.live-stream p{color:#aaa198;font-size:13px}

/* Story */
.timeline{position:relative;max-width:980px;margin:auto}
.timeline:before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  width:1px;background:var(--line);transform:translateX(-50%);
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  min-height:390px;
}
.timeline-item--reverse .timeline-content{order:2}
.timeline-item--reverse img{order:1}
.timeline-content{padding:20px}
.timeline-content h3{margin:0 0 12px;font-family:var(--serif);font-size:48px;font-weight:500}
.timeline-content p:not(.timeline-year){color:var(--muted);font-size:13px}
.timeline-year{margin:0;color:var(--gold);font-size:11px;letter-spacing:.25em}
.timeline-item img{
  aspect-ratio:4/5;
  max-height:440px;
  border:1px solid var(--line);
  padding:8px;
}
.timeline-dot{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:2;width:42px;height:42px;
  display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--gold);
  color:var(--gold);border-radius:50%;
  font-size:9px;
}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:180px;
  gap:12px;
}
.gallery-item{
  min-width:0;padding:0;border:0;overflow:hidden;background:none;
  cursor:zoom-in;
}
.gallery-item img{transition:transform .8s var(--ease);filter:saturate(.85)}
.gallery-item:hover img{transform:scale(1.06);filter:saturate(1)}
.gallery-item--wide{grid-column:span 2}
.gallery-item--tall{grid-row:span 2}
.gallery-quote{text-align:center;margin:80px 0 0;color:#bdb4aa;font-family:var(--serif);font-size:28px;font-style:italic}

/* Gift */
.gift{text-align:center}
.gift-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}
.bank-card{
  min-height:220px;padding:30px;
  text-align:left;color:#fff;border-radius:18px;
  background:linear-gradient(135deg,#29221a,#0e0d0b);
  box-shadow:0 25px 60px rgba(0,0,0,.12);
  border:1px solid rgba(200,166,106,.45);
}
.bank-card__top,.bank-card__bottom{display:flex;justify-content:space-between;align-items:flex-start}
.bank-card__top span,.bank-card__bottom small{font-size:8px;letter-spacing:.2em;color:#9c9287}
.bank-card__top strong{font-family:var(--serif);font-size:28px;color:var(--gold)}
.bank-card__number{margin:55px 0 35px;font-size:23px;letter-spacing:.1em}
.bank-card__bottom b{display:block;margin-top:3px;font-size:11px;letter-spacing:.08em}
.copy-btn{
  border:1px solid var(--gold);background:transparent;color:var(--gold);
  border-radius:999px;padding:8px 14px;font-size:9px;text-transform:uppercase;
}
.address-card{padding:35px;border:1px solid var(--line)}
.address-card h3{font-family:var(--serif);font-size:34px;margin:0}
.address-card p{color:var(--muted);font-size:12px}
.address-card small{color:var(--gold);font-size:8px;letter-spacing:.2em}

/* Wishes */
.wish-form{display:grid;gap:12px}
.wish-form input,.wish-form select,.wish-form textarea{
  width:100%;padding:14px 16px;color:#eee;background:#211b15;
  border:1px solid rgba(200,166,106,.3);outline:none;border-radius:2px;
}
.wish-form input:focus,.wish-form select:focus,.wish-form textarea:focus{border-color:var(--gold)}
.wish-list{display:grid;gap:12px;margin-top:30px}
.wish{
  padding:18px;border-left:2px solid var(--gold);
  background:#211b15;
}
.wish strong{font-family:var(--serif);font-size:20px}
.wish small{display:block;color:var(--gold);font-size:8px;letter-spacing:.15em}
.wish p{margin:5px 0 0;color:#aaa198;font-size:12px}

/* Closing */
.closing{min-height:90svh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.closing__bg{
  position:absolute;inset:0;
  background:#191313 url("../assets/wedding-bg.png") center/cover no-repeat;
}
.closing:after{
  content:"";position:absolute;inset:0;background:rgba(15,10,7,.62);
}
.closing .container{position:relative;z-index:1}
.closing h2{font-size:clamp(55px,9vw,110px)}
.closing p{max-width:600px;margin:18px auto;color:#d2c9be;font-size:13px}

/* Lightbox / Toast */
.lightbox{
  position:fixed;z-index:1200;inset:0;display:grid;place-items:center;
  padding:30px;background:rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transition:.3s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{width:auto;max-width:min(90vw,1100px);max-height:85vh}
.lightbox__close{
  position:absolute;top:20px;right:25px;color:#fff;background:none;border:0;font-size:40px
}
.toast{
  position:fixed;z-index:1300;left:50%;bottom:25px;
  transform:translate(-50%,30px);opacity:0;
  padding:10px 18px;background:var(--gold);color:#21180e;
  border-radius:999px;font-size:10px;letter-spacing:.1em;
  transition:.35s var(--ease);
}
.toast.show{transform:translate(-50%,0);opacity:1}

/* Responsive */
@media(max-width:800px){
  .section{
    background-attachment:scroll;
    padding:80px 0;
  }
  .section-flower{
    width:clamp(150px,38vw,230px);
    top:-5px;
  }
  .container,.narrow{width:min(100% - 28px,1120px)}
  .opening h1,.hero h1{font-size:clamp(58px,17vw,95px)}
  .couple-grid{grid-template-columns:1fr;gap:35px}
  .couple-divider{order:2;width:55px;height:55px}
  .person-card:nth-child(3){order:3}
  .event-grid,.gift-cards{grid-template-columns:1fr}
  .timeline:before{left:17px;transform:none}
  .timeline-item,.timeline-item--reverse{display:grid;grid-template-columns:1fr;gap:22px;min-height:0;padding:45px 0 45px 45px}
  .timeline-item--reverse .timeline-content,.timeline-item--reverse img{order:initial}
  .timeline-dot{left:17px;top:35px;transform:translateX(-50%);width:34px;height:34px}
  .timeline-content{padding:0}
  .timeline-content h3{font-size:40px}
  .timeline-item img{max-height:none}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gallery-item--wide{grid-column:span 2}
}
@media(max-width:480px){
  .opening__content{bottom:4vh}
  .opening__guest{margin-bottom:18px;font-size:10px}
  .opening__button{min-height:50px;padding:13px 30px}
  .countdown{gap:5px}
  .countdown div{min-width:64px}
  .countdown strong{font-size:25px}
  .hero__content{padding-top:80px}
  .bank-card{padding:22px}
  .bank-card__number{font-size:19px;margin:45px 0 28px}
}