:root{
  --maroon:#4a2f2a;
  --black:#1a1611;
  --gray:#a89f96;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:#cfc7c0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Aref Ruqaa', serif;
}

.stage{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.invite{
  position:relative;
  width:min(100vw, 576px);
  aspect-ratio:576/1024;
  max-height:100vh;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,0.35);
}

.invite .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.photo{
  position:absolute;
  left:32%;
  top:59%;
  width:34%;
  height:28%;
  object-fit:contain;
  opacity:0;
  transform:translateY(0) scale(0.94);
}

.badge-ar{
  top:13%;
  font-family:'Aref Ruqaa', serif;
  font-weight:700;
  color:var(--black);
  font-size:clamp(16px,4.6vw,26px);
}

.badge-en{
  top:16.8%;
    left:34%;

  font-family:'Alex Brush', cursive;
  color:var(--black);
  font-size:clamp(14px,4.2vw,22px);
  letter-spacing:0.5px;
  direction:ltr;
}

.txt{
  position:absolute;
  left:47%;
  width:82%;
  transform:translate(-50%,10px);
  text-align:center;
  margin:0;
  opacity:0;
  direction:rtl;
}

.poem{
  font-family:'Aref Ruqaa', serif;
  color:var(--maroon);
  font-size:clamp(14px,4.2vw,24px);
  line-height:1.5;
}
.poem1{top:25.5%;}
.poem2{top:30%;}

.mrs{
  font-family:'Alex Brush', cursive;
  color:var(--black);
  font-size:clamp(20px,7vw,40px);
  direction:ltr;
  top:34%;
}

.names{
  font-family:'Kalam', cursive;
  font-weight:700;
  color:var(--maroon);
  font-size:clamp(22px,7.5vw,42px);
  direction:ltr;
  top:40.5%;
  opacity:1;
  transform:translate(-50%,0);
}

.names .letter{
  display:inline-block;
  opacity:0;
  transform:translateY(16px) scale(0.6);
}

.invite-line{
  font-family:'Aref Ruqaa', serif;
  color:var(--maroon);
  font-size:clamp(13px,3.8vw,21px);
  top:47%;
}

.date{
  font-family:'Kalam', cursive;
  color:var(--gray);
  font-size:clamp(18px,5.5vw,30px);
  direction:ltr;
  top:51%;
}

.location{
  font-family:'Aref Ruqaa', serif;
  color:var(--gray);
  font-size:clamp(14px,4.2vw,24px);
  top:55%;
}

.location-link{
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  text-decoration:none;
  cursor:pointer;
}
.location-link:hover, .location-link:active{
  color:var(--maroon);
}

/* entrance animations, only run once .invite has "playing" */
@keyframes fadeUp{
  from{opacity:0; transform:translate(-50%,10px);}
  to{opacity:1; transform:translate(-50%,0);}
}
@keyframes fadeBadge{
  from{opacity:0; transform:translate(-50%,8px);}
  to{opacity:1; transform:translate(-50%,0);}
}
@keyframes fadePhoto{
  from{opacity:0; transform:translateY(0) scale(0.94);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes letterPop{
  from{opacity:0; transform:translateY(16px) scale(0.6);}
  60%{opacity:1; transform:translateY(-4px) scale(1.08);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.invite.playing .photo{ animation:fadePhoto 1s ease-out 0.1s forwards; }
.invite.playing .badge-ar{ animation:fadeBadge 0.9s ease-out 0.3s forwards; }
.invite.playing .badge-en{ animation:fadeBadge 0.9s ease-out 0.45s forwards; }
.invite.playing .poem1{ animation:fadeUp 0.9s ease-out 0.6s forwards; }
.invite.playing .poem2{ animation:fadeUp 0.9s ease-out 0.9s forwards; }
.invite.playing .mrs{ animation:fadeUp 0.9s ease-out 1.7s forwards; }
.invite.playing .names .letter{ animation:letterPop 0.7s cubic-bezier(.34,1.56,.64,1) forwards; }
.invite.playing .invite-line{ animation:fadeUp 0.9s ease-out 3.3s forwards; }
.invite.playing .date{ animation:fadeUp 0.9s ease-out 3.7s forwards; }
.invite.playing .location{ animation:fadeUp 0.9s ease-out 4.1s forwards; }

.start-btn{
  position:absolute;
  z-index:5;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  padding:14px 28px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#8a5a4f,#4a2f2a);
  color:#fdf8f3;
  font-family:'Aref Ruqaa', serif;
  font-size:16px;
  letter-spacing:0.5px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  transition:transform 0.2s ease, opacity 0.4s ease;
}
.start-btn:hover{transform:translateX(-50%) scale(1.04);}
.start-btn.hide{opacity:0; pointer-events:none;}

.replay-btn, .mute-btn{
  position:absolute;
  z-index:5;
  top:16px;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.85);
  color:var(--maroon);
  font-size:18px;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,0.25);
}
.replay-btn{left:16px;}
.mute-btn{right:16px;}