@font-face{
  font-family:'Decotype Thuluth';
  src:url('../fonts/decotype-thuluth-iii.ttf') format('truetype');
  font-display:swap;
}

:root{
  --peach-1:#f3e2d3;
  --peach-2:#e9cdb3;
  --peach-3:#dcb99a;
  --blush:#e7b3ad;
  --burgundy:#7a2334;
  --burgundy-deep:#5c1524;
  --gold:#b8863f;
  --gold-light:#e8c893;
  --gold-dark:#8a6423;
  --cream:#faf3e7;
  --ink:#5c3826;
  --ink-soft:#8a6a52;
  --shadow: 0 10px 30px rgba(90,50,30,.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Cairo',sans-serif;
  color:var(--ink);
  background:var(--peach-1);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

img{max-width:100%;display:block;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
a{text-decoration:none;color:inherit;}

.scroller{
  height:100dvh;
  width:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  position:relative;
}
.scroller::-webkit-scrollbar{display:none;}

.panel{
  height:100dvh;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);
}

/* ---------- decorative corners ---------- */
.corner{
  position:absolute;
  width:46vw;
  max-width:260px;
  height:auto;
  border-radius:18px;
  pointer-events:none;
  user-select:none;
  -webkit-mask-image:radial-gradient(circle at 30% 30%, #000 55%, transparent 78%);
  mask-image:radial-gradient(circle at 30% 30%, #000 55%, transparent 78%);
}
.corner-tl{ top:-6%; left:-10%; }
.corner-br{
  bottom:-6%; right:-10%;
  -webkit-mask-image:radial-gradient(circle at 70% 70%, #000 55%, transparent 78%);
  mask-image:radial-gradient(circle at 70% 70%, #000 55%, transparent 78%);
}
.corner.small{ width:38vw; max-width:210px; opacity:.9; }
.corner-bl{ bottom:-8%; left:-12%;
  -webkit-mask-image:radial-gradient(circle at 30% 70%, #000 55%, transparent 78%);
  mask-image:radial-gradient(circle at 30% 70%, #000 55%, transparent 78%);
}
.corner-br2{ bottom:-8%; right:-12%;
  -webkit-mask-image:radial-gradient(circle at 70% 70%, #000 55%, transparent 78%);
  mask-image:radial-gradient(circle at 70% 70%, #000 55%, transparent 78%);
}

/* ---------- ambient background glows ---------- */
.bg-glow{
  position:absolute;
  z-index:-1;
  width:62vw;
  max-width:320px;
  height:auto;
  pointer-events:none;
  user-select:none;
  mix-blend-mode:screen;
  opacity:.55;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 40%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 45%, #000 40%, transparent 72%);
}
.bg-glow-cover{ top:2%; right:-8%; width:55vw; max-width:280px; opacity:.5; }
.bg-glow-card{ top:4%; left:-10%; width:58vw; max-width:290px; }
.bg-glow-details-1{ top:1%; right:-12%; width:60vw; max-width:300px; }
.bg-glow-details-2{ bottom:12%; left:-12%; width:52vw; max-width:260px; opacity:.5; }
.bg-glow-countdown{ bottom:4%; left:-10%; width:58vw; max-width:290px; }

/* ---------- reveal animations ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d,0) * 130ms);
}
.reveal-scale{
  opacity:0;
  transform:scale(.9);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.panel.in-view .reveal,
.panel.in-view .reveal-scale{
  opacity:1;
  transform:none;
}

/* ================= COVER ================= */
.cover{
  background:radial-gradient(ellipse at 50% 20%, var(--peach-1), var(--peach-2) 60%, var(--peach-3) 100%);
}
.cover-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  z-index:2;
  text-align:center;
}
.eyebrow{
  font-family:'Amiri',serif;
  font-style:italic;
  color:var(--ink-soft);
  font-size:clamp(.95rem,3.6vw,1.15rem);
  letter-spacing:.02em;
}
.envelope-wrap{
  position:relative;
  padding:0;
  border-radius:14px;
  overflow:visible;
  animation:float 5s ease-in-out infinite;
}
.envelope-img{
  width:min(78vw,320px);
  border-radius:10px;
  box-shadow:var(--shadow);
  transition:transform .6s cubic-bezier(.3,.7,.3,1), box-shadow .6s, opacity .5s ease;
}
.envelope-closed{ position:relative; z-index:2; }
.envelope-open{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.9);
  width:min(84vw,340px);
  z-index:1;
  opacity:0;
  box-shadow:none;
  transition:opacity .7s ease .1s, transform .7s cubic-bezier(.2,.7,.2,1) .1s;
}
.envelope-wrap:active .envelope-closed{ transform:scale(.97); }
.envelope-wrap.opened .envelope-closed{
  opacity:0;
  transform:scale(.9) rotate(-3deg);
}
.envelope-wrap.opened .envelope-open{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.envelope-wrap.opened{
  animation:none;
}
.tap-hint{
  display:block;
  margin-top:10px;
  font-size:.85rem;
  color:var(--gold-dark);
  letter-spacing:.03em;
  animation:pulseText 2.2s ease-in-out infinite;
  transition:opacity .4s ease;
}
.envelope-wrap.opened .tap-hint{ opacity:0; }
.monogram{
  font-family:'Decotype Thuluth','Amiri',serif;
  font-weight:400;
  font-size:clamp(2.2rem,10vw,3.4rem);
  color:var(--burgundy);
  letter-spacing:0;
  line-height:1.3;
}
.monogram .amp{
  color:var(--gold);
  padding:0 .15em;
}

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@keyframes pulseText{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

.scroll-cue{
  position:absolute;
  bottom:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--gold-dark);
  z-index:2;
}
.scroll-cue span{
  width:20px;height:20px;
  border-left:2px solid var(--gold-dark);
  border-bottom:2px solid var(--gold-dark);
  transform:rotate(-45deg);
  animation:bounce 1.6s ease-in-out infinite;
}
.scroll-cue p{ margin:0; font-size:.72rem; letter-spacing:.05em; }
@keyframes bounce{
  0%,100%{ transform:rotate(-45deg) translate(0,0); opacity:.5; }
  50%{ transform:rotate(-45deg) translate(-6px,-6px); opacity:1; }
}

/* ================= CARD ================= */
.card-panel{ background:linear-gradient(180deg,var(--peach-1),var(--peach-2)); }
.card-frame{
  z-index:2;
  padding:10px;
  background:linear-gradient(160deg,#fff,var(--cream));
  border-radius:16px;
  box-shadow:var(--shadow);
}
.card-img{
  max-width:88vw;
  max-height:78dvh;
  width:auto;
  height:auto;
  border-radius:10px;
  object-fit:contain;
}

/* ================= DETAILS ================= */
.details-panel{ background:linear-gradient(180deg,var(--peach-2),var(--peach-1)); gap:16px; }
.section-title{
  font-family:'Aref Ruqaa',serif;
  font-weight:700;
  font-size:clamp(1.8rem,7vw,2.4rem);
  color:var(--gold-dark);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  margin:0 0 4px;
  z-index:2;
}
.badges{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
  width:100%;
  max-width:420px;
  z-index:2;
}
.badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  min-width:0;
}
.badge-icon{
  width:56px;height:56px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 4px 10px rgba(90,50,30,.25);
  border:1px solid var(--gold-light);
}
.badge-pill{
  background:var(--cream);
  border:1px solid var(--gold-light);
  border-radius:14px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:64px;
  justify-content:center;
  width:100%;
  min-width:0;
}
.badge-pill strong{
  font-size:.7rem;
  color:var(--burgundy);
  overflow-wrap:anywhere;
}
.badge-pill span{
  font-size:.64rem;
  color:var(--ink-soft);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.cta-row{
  display:flex;
  gap:8px;
  margin-top:6px;
  z-index:2;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  max-width:400px;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(160deg,var(--gold-light),var(--gold));
  color:#3d2a10;
  font-size:.76rem;
  font-weight:600;
  box-shadow:0 6px 16px rgba(138,100,35,.35);
  transition:transform .25s;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
}
.cta-btn:active{ transform:scale(.95); }
.cta-btn .ic{ font-size:.95rem; }

/* ================= COUNTDOWN ================= */
.countdown-panel{ background:radial-gradient(ellipse at 50% 30%, var(--peach-1), var(--peach-3)); gap:10px; }
.divider{
  display:flex;
  align-items:center;
  gap:8px;
  width:min(70vw,260px);
  color:var(--gold);
  z-index:2;
}
.divider span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.timer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  width:100%;
  max-width:400px;
  margin-top:8px;
  z-index:2;
}
.tcircle{
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--cream) 70%);
  border:2px solid var(--gold);
  outline:1px solid var(--gold-light);
  outline-offset:3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(120,70,30,.2);
}
.tnum{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:clamp(1.3rem,6vw,1.9rem);
  color:var(--burgundy);
  line-height:1;
}
.tcircle small{
  font-size:.6rem;
  color:var(--gold-dark);
  margin-top:3px;
}
.closing{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:320px;
  text-align:center;
  font-family:'Amiri',serif;
  font-style:italic;
  color:var(--ink-soft);
  font-size:.85rem;
  z-index:2;
}
.seal-mini{ width:34px; height:34px; border-radius:50%; flex-shrink:0; box-shadow:0 3px 8px rgba(120,70,30,.3); }

/* ================= NAV DOTS ================= */
.dots{
  position:fixed;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
}
.dot{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(138,100,35,.35);
  transition:all .3s;
  padding:0;
}
.dot.active{
  background:var(--gold-dark);
  height:22px;
  border-radius:6px;
}

/* ================= PETALS ================= */
.petals{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.petals span{
  position:absolute;
  top:-5%;
  width:10px;height:10px;
  background:var(--blush);
  border-radius:60% 0;
  opacity:.5;
  animation:fall linear infinite;
  filter:blur(.3px);
}
.petals span:nth-child(1){ left:8%;  animation-duration:14s; animation-delay:0s;  background:var(--blush); }
.petals span:nth-child(2){ left:22%; animation-duration:18s; animation-delay:2s;  background:var(--gold-light); width:7px;height:7px;}
.petals span:nth-child(3){ left:45%; animation-duration:16s; animation-delay:5s;  background:var(--burgundy); width:8px;height:8px; opacity:.35;}
.petals span:nth-child(4){ left:66%; animation-duration:20s; animation-delay:1s;  background:var(--blush); }
.petals span:nth-child(5){ left:82%; animation-duration:15s; animation-delay:4s;  background:var(--gold-light); width:9px;height:9px;}
.petals span:nth-child(6){ left:92%; animation-duration:19s; animation-delay:7s;  background:var(--burgundy); width:6px;height:6px; opacity:.3;}

@keyframes fall{
  0%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(108vh) rotate(260deg); }
}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale{ transition:none; opacity:1; transform:none; }
  .envelope-wrap,.scroll-cue span,.tap-hint,.petals span{ animation:none; }
}

@media (min-width:560px){
  .badges{ max-width:460px; }
}