/* =========================================================
   SWY Invitation Enhancement 2026
   Better micro-interactions for wedding template
   ========================================================= */

/* ── Cover entrance ── */
.cover-card{
  animation:coverEntrance 1.2s cubic-bezier(.22,1,.36,1) both;
}
@keyframes coverEntrance{
  from{opacity:0;transform:translateY(36px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.cover-art{
  animation:artFade 2s ease both .4s;
}
@keyframes artFade{from{opacity:0}to{opacity:.72}}

.cover-art span{
  animation:artSpinSlow 30s linear infinite;
}
@keyframes artSpinSlow{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}

/* ── Open button pulse ── */
.open-btn{
  position:relative;overflow:hidden;
  animation:btnPulse 3s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 18px 44px color-mix(in srgb,var(--ink),transparent 82%)}
  50%{box-shadow:0 18px 44px color-mix(in srgb,var(--accent),transparent 50%),0 0 0 8px color-mix(in srgb,var(--accent),transparent 88%)}
}
.open-btn:after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  opacity:0;transition:opacity .3s ease;
}
.open-btn:hover:after{opacity:1}
.open-btn:active{transform:scale(.95)}

/* ── Couple names stagger ── */
.couple-names span:first-child{animation:nameSlide .9s cubic-bezier(.22,1,.36,1) both .3s}
.couple-names em{animation:nameSlide .9s cubic-bezier(.22,1,.36,1) both .5s}
.couple-names span:last-child{animation:nameSlide .9s cubic-bezier(.22,1,.36,1) both .7s}
@keyframes nameSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── Guest name glow ── */
.guest-name{
  transition:box-shadow .4s ease,border-color .4s ease;
}
.guest-name:hover{
  box-shadow:0 16px 42px rgba(20,15,10,.1);
  border-color:color-mix(in srgb,var(--accent),transparent 50%);
}

/* ── Invite nav ── */
.invite-nav{
  animation:navSlideUp .6s cubic-bezier(.22,1,.36,1) both 1.5s;
}
@keyframes navSlideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.invite-nav a{
  transition:all .25s ease;
  position:relative;
}
.invite-nav a:hover{
  background:color-mix(in srgb,var(--accent),transparent 82%);
  color:var(--ink);
}

/* ── Section entrance ── */
.section{
  opacity:0;animation:sectionReveal .8s cubic-bezier(.22,1,.36,1) both;
}
.section:nth-of-type(1){animation-delay:0s}
.section:nth-of-type(2){animation-delay:.15s}
.section:nth-of-type(3){animation-delay:.3s}

@keyframes sectionReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ── Person card hover ── */
.person-card{
  transition:transform .35s ease,box-shadow .35s ease;
}
.person-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 70px rgba(20,15,10,.13);
}
.avatar{
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.person-card:hover .avatar{
  transform:scale(1.08) rotate(-4deg);
}

/* ── Event card ── */
.event-card{
  transition:transform .35s ease,box-shadow .35s ease;
}
.event-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px rgba(20,15,10,.12);
}
.event-number{
  transition:transform .3s ease;
}
.event-card:hover .event-number{
  transform:scale(1.1) rotate(-6deg);
}

/* ── Countdown pulse ── */
.timebox{
  transition:transform .3s ease,box-shadow .3s ease;
}
.timebox:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(20,15,10,.1);
}
.timebox strong{
  transition:transform .3s ease;
}
.timebox:hover strong{transform:scale(1.08)}

/* ── Gallery hover ── */
.gallery a{
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
}
.gallery a:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 24px 60px rgba(20,15,10,.14);
  z-index:2;
}
.demo-gallery-item{
  transition:transform .4s ease;
}
.demo-gallery-item:hover{
  transform:scale(1.03);
}

/* ── Gift card ── */
.account-box{
  transition:border-color .3s ease,box-shadow .3s ease;
}
.account-box:hover{
  border-color:color-mix(in srgb,var(--accent),transparent 50%);
  box-shadow:0 12px 30px rgba(20,15,10,.08);
}
.copy-btn{
  transition:transform .25s ease,box-shadow .25s ease;
}
.copy-btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px color-mix(in srgb,var(--ink),transparent 76%)}
.copy-btn:active{transform:scale(.95)}

/* ── RSVP form ── */
.rsvp-card input,.rsvp-card textarea,.rsvp-card select{
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.rsvp-card input:focus,.rsvp-card textarea:focus,.rsvp-card select:focus{
  border-color:color-mix(in srgb,var(--accent),transparent 30%);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),transparent 88%),0 8px 24px rgba(20,15,10,.06);
  background:rgba(255,255,255,.9);
}
.submit-btn{
  transition:transform .28s ease,box-shadow .28s ease;
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 20px 50px color-mix(in srgb,var(--ink),transparent 72%)}
.submit-btn:active{transform:scale(.97)}

/* ── Wish items ── */
.wish-item,.wish{
  transition:transform .3s ease,box-shadow .3s ease;
}
.wish-item:hover,.wish:hover{
  transform:translateX(4px);
  box-shadow:0 12px 30px rgba(20,15,10,.06);
}

/* ── Closing section ── */
.closing-section h2,.closing h2{
  animation:closingPulse 4s ease-in-out infinite;
}
@keyframes closingPulse{
  0%,100%{opacity:1}50%{opacity:.75}
}

/* ── Share pill ── */
.share-pill{
  animation:pillBounce .6s cubic-bezier(.22,1,.36,1) both 2s;
  transition:transform .25s ease,box-shadow .25s ease;
}
@keyframes pillBounce{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.share-pill:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 18px 46px rgba(20,15,10,.18)}

/* ── Music toggle ── */
.music-toggle{
  animation:pillBounce .6s cubic-bezier(.22,1,.36,1) both 2.2s;
  transition:transform .3s ease;
}
.music-toggle:hover{transform:scale(1.1) rotate(-8deg)}

/* ── Quote card ── */
.quote-card{
  transition:transform .35s ease;
}
.quote-card:hover{transform:scale(1.01)}
.quote-card p{
  transition:letter-spacing .4s ease;
}
.quote-card:hover p{letter-spacing:-.02em}

/* ── Story card ── */
.story-card{
  transition:transform .3s ease,box-shadow .3s ease;
}
.story-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px rgba(20,15,10,.11);
}

/* ── Map button ── */
.map-btn{
  transition:transform .25s ease,box-shadow .25s ease;
}
.map-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px color-mix(in srgb,var(--ink),transparent 78%)}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .section{opacity:1;transform:none}
}