* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Tajawal', sans-serif;
  background: #fff7f3;
  color: #4b2c2e;
  overflow-x: hidden
}

a {
  text-decoration: none
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 20% 15%, rgba(255, 224, 185, .9), transparent 27%), radial-gradient(circle at 80% 25%, rgba(255, 185, 204, .78), transparent 28%), linear-gradient(135deg, #fff7ef, #ffe5eb, #fffaf4);
  transition: opacity .9s ease, visibility .9s ease
}

.loader.hide {
  opacity: 0;
  visibility: hidden
}

.intro-line {
  position: absolute;
  top: 38px;
  color: #8a4151;
  font-family: 'Aref Ruqaa', serif;
  font-size: 24px
}

.stage {
  width: min(760px, 94vw);
  height: 620px;
  position: relative;
  text-align: center
}

.loader-title {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  color: #7b1730;
  font-size: clamp(36px, 7vw, 70px);
  font-weight: 900;
  text-shadow: 0 15px 38px rgba(123, 23, 48, .14);
  transition: 1s cubic-bezier(.2, .9, .2, 1)
}

.stage.open .loader-title {
  transform: translateY(-48px) scale(.9)
}

.envelope-wrap {
  position: absolute;
  left: 50%;
  top: 205px;
  width: min(570px, 88vw);
  height: 355px;
  transform: translateX(-50%);
  perspective: 1300px
}

.envelope {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  width: 100%;
  height: 310px;
  perspective: 1200px;
  z-index: 6;
  filter: drop-shadow(0 35px 55px rgba(122, 23, 48, .25))
}

.env-back {
  position: absolute;
  inset: 0;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(145deg, #fff8f1, #efc3b3);
  border: 1px solid rgba(192, 150, 83, .5);
  box-shadow: inset 0 0 35px rgba(255, 255, 255, .7)
}

.env-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 185px;
  z-index: 9;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(145deg, #f4d1c1, #fff8f1 72%);
  border-radius: 0px 0px 26px 26px;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: 1.25s cubic-bezier(.2, .9, .2, 1);
  backface-visibility: visible;
  transform-style: preserve-3d;
  box-shadow: inset 0 -13px 24px rgba(107, 39, 48, .08)
}

.env-flap:before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(145deg, #e6b9a7, #fff1e8);
  transform: rotateX(180deg);
  backface-visibility: hidden
}

.env-flap:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 49%, rgba(186, 143, 70, .8) 50%, transparent 51%);
  opacity: .8
}

.stage.open .env-flap {
  transform: rotateX(180deg);
  z-index: 3
}

.env-pocket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 238px;
  z-index: 10;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(to top, #e7b6a2, #fff2eb);
  clip-path: polygon(0 0, 50% 49%, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -20px 35px rgba(107, 39, 48, .1)
}

.env-pocket:before,
.env-pocket:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 64%;
  height: 118%;
  background: linear-gradient(135deg, #efc9b8, #f9e0d4)
}

.env-pocket:before {
  left: -12%;
  transform: skewY(32deg);
  transform-origin: bottom left
}

.env-pocket:after {
  right: -12%;
  transform: skewY(-32deg);
  transform-origin: bottom right
}

.wax-seal {
  position: absolute;
  left: 50%;
  top: 140px;
  z-index: 12;
  transform: translateX(-50%);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 25%, #d8b56d, #8d1f3c 72%);
  color: #fff;
  font-size: 40px;
  box-shadow: 0 14px 30px rgba(107, 39, 48, .3);
  transition: .65s ease
}

.stage.open .wax-seal {
  opacity: 0;
  transform: translateX(-50%) scale(.35) rotate(160deg);
  transition-delay: .15s
}

.paper {
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 85px;
  height: 238px;
  z-index: 6;
  padding: 35px 22px;
  border-radius: 20px;
  background: linear-gradient(#fffefa, #fff5ee);
  border: 1px solid rgba(192, 150, 83, .65);
  box-shadow: 0 24px 45px rgba(107, 39, 48, .18);
  transform: translateY(130px) scale(.94);
  opacity: 1;
  transition: 1.25s cubic-bezier(.2, .9, .2, 1);
  overflow: hidden
}

.paper:before,
.paper:after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c79a48, transparent)
}

.paper:before {
  top: 18px
}

.paper:after {
  bottom: 18px
}

.paper-corners:before,
.paper-corners:after {
  content: "❦";
  position: absolute;
  top: 22px;
  color: #c79a48;
  font-size: 22px
}

.paper-corners:before {
  right: 24px
}

.paper-corners:after {
  left: 24px
}

.mini-heart {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, #d8b56d, #8d1f3c);
  color: #fff;
  font-size: 28px
}

.paper h2 {
  font-size: 37px;
  color: #7b1730;
  font-weight: 900;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(12px);
  transition: .8s ease 1.05s
}

.paper p {
  font-size: 18px;
  color: #70514b;
  font-weight: 700;
  opacity: 0;
  transform: translateY(12px);
  transition: .8s ease 1.15s
}

.stage.open .paper {
  transform: translateY(-76px) scale(1);
  transition-delay: .65s;
  z-index: 10;
}

.stage.open .paper h2,
.stage.open .paper p {
  opacity: 1;
  transform: translateY(0)
}

.loading-text {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  color: #8d1f3c;
  font-weight: 900;
  font-size: 20px;
  animation: blink 1.3s infinite
}

@keyframes blink {
  50% {
    opacity: .45
  }
}

.rose {
  position: absolute;
  z-index: 1;
  font-size: 78px;
  opacity: .82;
  filter: drop-shadow(0 14px 18px rgba(107, 39, 48, .14));
  animation: float 6s ease-in-out infinite
}

.rose-a {
  top: 11%;
  right: 8%
}

.rose-b {
  top: 13%;
  left: 9%;
  animation-delay: 1s
}

.rose-c {
  bottom: 12%;
  right: 12%;
  animation-delay: 2s
}

.rose-d {
  bottom: 10%;
  left: 10%;
  animation-delay: 1.4s
}

@keyframes float {
  50% {
    transform: translateY(-22px) rotate(7deg) scale(1.05)
  }
}

.spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffe38b;
  box-shadow: 0 0 24px #ffe38b;
  animation: twinkle 2.5s infinite
}

.sp-a {
  top: 25%;
  left: 20%
}

.sp-b {
  top: 33%;
  right: 22%;
  animation-delay: .8s
}

.sp-c {
  bottom: 27%;
  left: 47%;
  animation-delay: 1.6s
}

@keyframes twinkle {
  50% {
    transform: scale(2.1);
    opacity: .45
  }
}

.page {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: .8s ease
}

.page.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 18px;
  overflow: hidden;
  background: radial-gradient(circle at top, #ffe3d4, transparent 35%), linear-gradient(135deg, #fff7f2, #ffe9ee, #fffaf5)
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .65;
  animation: float 7s infinite
}

.hero-glow.one {
  width: 220px;
  height: 220px;
  background: #ffc5d1;
  right: 8%;
  top: 10%
}

.hero-glow.two {
  width: 250px;
  height: 250px;
  background: #ffdcae;
  left: 5%;
  bottom: 12%;
  animation-delay: 2s
}

.corner-flower {
  position: absolute;
  font-size: 74px;
  opacity: .78
}

.top-right {
  top: 30px;
  right: 35px
}

.bottom-left {
  bottom: 35px;
  left: 35px
}

.invite-card {
  position: relative;
  width: min(1040px, 96vw);
  padding: 56px 46px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 30px 80px rgba(107, 39, 48, .16);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .9);
  text-align: center
}

.card-ornament {
  color: #c79a48;
  font-size: 34px
}

.small {
  font-weight: 800;
  color: #6f514b;
  margin-top: 8px
}

.verse {
  max-width: 670px;
  margin: 18px auto 0;
  line-height: 1.9;
  font-size: 19px;
  color: #624640
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 22px 0;
  color: #9a263f
}

.divider span {
  height: 1px;
  width: 120px;
  background: linear-gradient(90deg, transparent, #c79a48)
}

.invite-text {
  font-size: 21px;
  color: #624640
}

.couple-names {
  font-family: 'Aref Ruqaa', serif;
  color: #8d1f3c;
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 700;
  margin: 18px 0 0
}

.couple-names b {
  font-family: 'Tajawal';
  font-size: .45em;
  color: #b98b45;
  margin: 0 22px
}

.floral-line {
  font-size: 28px;
  margin-bottom: 22px
}

.details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 840px;
  margin: 30px auto;
  border-top: 1px solid rgba(199, 154, 72, .35);
  border-bottom: 1px solid rgba(199, 154, 72, .35);
  padding: 24px 0
}

.detail {
  padding: 0 20px;
  border-left: 1px solid rgba(199, 154, 72, .35);
  display: flex;
  flex-direction: column;
  gap: 8px
}

.detail:first-child {
  border-left: 0
}

.icon {
  font-size: 30px
}

.detail strong {
  font-size: 21px;
  color: #7b1730
}

.date-detail strong {
  font-size: 50px;
  line-height: 1
}

.detail small {
  font-size: 16px;
  color: #70514b
}

.attendance {
  font-size: 27px;
  color: #8d1f3c;
  font-weight: 900;
  margin-bottom: 26px
}

.actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 15px 30px rgba(107, 39, 48, .16);
  transition: .25s
}

.btn:hover {
  transform: translateY(-4px)
}

.primary {
  background: #8d1f3c;
  color: white
}

.ghost {
  background: white;
  color: #8d1f3c
}

.countdown-section,
.location-section {
  padding: 70px 18px
}

.section-card {
  max-width: 1040px;
  margin: auto;
  text-align: center;
  padding: 42px;
  border-radius: 32px;
  background: white;
  box-shadow: 0 18px 45px rgba(107, 39, 48, .1)
}

.label {
  display: inline-block;
  background: #ffe2e8;
  color: #8d1f3c;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 900;
  margin-bottom: 14px
}

.section-card h2 {
  font-size: 40px;
  color: #7b1730;
  margin-bottom: 28px
}

.timer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.timer div {
  padding: 22px 10px;
  border-radius: 24px;
  background: linear-gradient(#fff6f7, #fff)
}

.timer strong {
  display: block;
  font-size: 46px;
  color: #7b1730
}

.timer span {
  font-weight: 800;
  color: #70514b
}

.location-card {
  max-width: 1040px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 34px;
  background: #6d132a;
  color: white;
  box-shadow: 0 25px 60px rgba(107, 39, 48, .22)
}

.location-info {
  padding: 44px
}

.location-info h2 {
  font-size: 42px;
  margin: 10px 0
}

.location-info p {
  font-size: 20px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .82)
}

.location-art {
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #fff3f4, transparent 60%), linear-gradient(135deg, #ffd5df, #fff4df)
}

.art-box {
  text-align: center;
  color: #8d1f3c;
  font-size: 74px
}

.art-box span {
  font-size: 28px;
  font-weight: 900
}

footer {
  text-align: center;
  padding: 0 18px 48px
}

footer h2 {
  font-size: 30px;
  color: #7b1730;
  line-height: 1.8
}

footer p {
  color: #70514b;
  margin-top: 8px
}

.petal {
  position: fixed;
  top: -45px;
  z-index: 888;
  pointer-events: none;
  animation: fall linear forwards
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0
  }
}


/* Map image section */
.location-art.map-preview{
  min-height:330px;
  padding:18px;
  background:linear-gradient(135deg,#fff4ef,#ffe2e9);
}
.map-image{
  width:100%;
  height:100%;
  min-height:290px;
  object-fit:cover;
  border-radius:24px;
  border:6px solid rgba(255,255,255,.75);
  box-shadow:0 18px 45px rgba(107,39,48,.22);
  display:block;
}
@media(max-width:850px){
  .location-art.map-preview{min-height:260px;padding:12px}
  .map-image{min-height:235px;border-radius:20px}
}


@media(max-width:850px) {
  .stage {
    height: 560px
  }

  .envelope-wrap {
    top: 200px;
    width: 90vw;
    height: 300px
  }

  .paper {
    left: 40px;
    right: 40px;
    height: 205px;
    bottom: 78px;
    padding: 26px 14px;
    transform: translateY(118px) scale(.94)
  }

  .paper h2 {
    font-size: 29px
  }

  .env-flap {
    height: 150px
  }

  .env-pocket {
    height: 205px
  }

  .wax-seal {
    top: 118px;
    width: 68px;
    height: 68px
  }

  .stage.open .paper {
    transform: translateY(-42px) scale(1);
    /* z-index: 10px; */
  }

  .details {
    grid-template-columns: 1fr;
    gap: 18px;
    border: 0
  }

  .detail {
    border: 0;
    background: #fff7f5;
    border-radius: 22px;
    padding: 20px
  }

  .location-card {
    grid-template-columns: 1fr
  }

  .timer {
    grid-template-columns: repeat(2, 1fr)
  }

  .invite-card {
    padding: 38px 20px
  }

  .rose {
    font-size: 48px
  }

  .loader-title {
    top: 72px
  }

  .couple-names b {
    display: block;
    margin: 0
  }
}

.meeting-note {
  margin: 24px auto;
  padding: 22px 26px;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff8ef, #ffe7ee);
  border: 1px solid rgba(199, 154, 72, 0.35);
  box-shadow: 0 18px 40px rgba(122, 23, 48, 0.12);
  text-align: right;
}

.meeting-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #8d1f3c;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 10px 24px rgba(122, 23, 48, 0.25);
}

.meeting-content h3 {
  margin-bottom: 8px;
  color: #7b1730;
  font-size: 24px;
  font-weight: 900;
}

.meeting-content p {
  margin-bottom: 8px;
  color: #5f4a42;
  font-size: 17px;
  line-height: 1.8;
}

.meeting-content span {
  color: #a36b12;
  font-size: 16px;
  font-weight: 800;
}

@media (max-width: 600px) {
  .meeting-note {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
  }
}