/* ===== Tokens (original palette) ===== */
:root{
  --ivory:#f8f2e8;
  --champagne:#f3d9a1;
  --maroon:#692d37;
  --soft:#c1893f;
  --ink:#7a5a4a;
  --paper-shadow:rgba(87,55,46,.17);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#e9ddca;
  color:var(--maroon);
  font-family:"Cormorant Garamond",serif;
  -webkit-font-smoothing:antialiased;
}

.invitation{
  position:relative;
  max-width:560px;
  min-height:100vh;
  margin:auto;
  overflow:hidden;
  background:var(--ivory);
  box-shadow:0 0 45px var(--paper-shadow);
}

/* ===== Envelope stage ===== */
.envelope-stage{
  height:100svh;
  min-height:560px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#fffdf8,#f3e7d5);
}
.envelope{
  width:min(88%,470px);
  aspect-ratio:1.45;
  position:relative;
  filter:drop-shadow(0 19px 21px rgba(86,49,47,.19));
  perspective:1000px;
}
.envelope-front{
  position:absolute;inset:0;z-index:4;
  background:linear-gradient(145deg,#f5e6d0,#dfc7a3);
  clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);
}
.envelope-letter{
  position:absolute;z-index:2;inset:7% 7% 0;
  background:#fffaf1;
  text-align:center;padding-top:8%;
  box-shadow:inset 0 0 0 1px rgba(183,149,111,.32);
}
.envelope-letter p{margin:0;font:700 clamp(46px,13vw,62px)/1 "Tangerine",cursive;color:var(--maroon)}
.envelope-letter i{font:italic 400 18px "Cormorant Garamond",serif;margin:0 6px;color:var(--soft)}
.envelope-flap{
  position:absolute;z-index:5;inset:0;
  background:linear-gradient(145deg,#f9ecd9,#e6cba9);
  clip-path:polygon(0 0,100% 0,50% 57%);
  transform-origin:top;
  transition:transform 1s cubic-bezier(.65,0,.2,1);
  backface-visibility:hidden;
}
.seal{
  position:absolute;z-index:6;left:50%;top:48%;translate:-50% -50%;
  width:27%;aspect-ratio:1;border:0;border-radius:50%;padding:4px;
  background:radial-gradient(circle,#fff5e9,#b78480);
  cursor:pointer;
  box-shadow:0 4px 9px rgba(78,38,43,.3);
  animation:sealGlow 2.6s ease-in-out infinite;
}
.seal img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.seal-crack{
  position:absolute;z-index:3;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  background:
    linear-gradient(127deg,transparent 47%,rgba(255,247,218,.98) 48%,rgba(101,44,52,.8) 49.5%,transparent 51%),
    linear-gradient(48deg,transparent 48%,rgba(255,247,218,.95) 49%,rgba(101,44,52,.75) 50.4%,transparent 52%);
  clip-path:polygon(45% 0,56% 0,54% 23%,69% 39%,57% 53%,72% 70%,59% 100%,44% 100%,45% 72%,31% 55%,43% 39%,35% 19%);
}
.seal.cracked{animation:sealBreak .62s ease-in forwards}
.seal.cracked .seal-crack{animation:crackFlash .62s ease-out forwards}
@keyframes sealGlow{
  0%,100%{box-shadow:0 4px 12px rgba(78,38,43,.38),0 0 13px rgba(255,229,177,.6),0 0 32px rgba(231,186,123,.28)}
  50%{box-shadow:0 4px 14px rgba(78,38,43,.42),0 0 30px rgba(255,238,194,1),0 0 61px rgba(231,179,104,.72),0 0 95px rgba(243,214,158,.3)}
}
@keyframes sealBreak{
  30%{transform:translateX(-4px) rotate(-2deg)}
  55%{transform:translateX(5px) rotate(2deg) scale(1.06)}
  100%{transform:scale(1.12);opacity:.2}
}
@keyframes crackFlash{20%{opacity:0}48%,100%{opacity:1}}

.tap{
  position:absolute;bottom:11%;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
}

.pages{opacity:0;pointer-events:none;transition:opacity .55s .65s}
.invitation.open .pages{opacity:1;pointer-events:auto}
.invitation.open .envelope-flap{transform:rotateX(178deg)}
.invitation.open .envelope-front{transform:translateY(115%);transition:transform .9s .4s cubic-bezier(.7,0,.3,1)}
.invitation.open .seal,.invitation.open .tap{opacity:0;transition:opacity .25s}
.invitation.open .envelope-stage{height:0;min-height:0;transition:height .05s 1.35s}

/* ===== Pages (mobile-first) ===== */
.page{
  min-height:100svh;
  padding:56px 20px 44px;
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:radial-gradient(circle at 50% 5%,#fffdfa 0,var(--ivory) 62%,#f3e4ce);
}
.page:before{
  content:"";
  position:absolute;inset:12px;
  border:1px solid rgba(205,172,130,.55);
  border-radius:20px;
  pointer-events:none;
}
.page > *{position:relative;z-index:1}

.welcome{justify-content:flex-start;padding-top:52px}
.arabic{font:600 clamp(20px,6vw,27px)/1.3 "Noto Naskh Arabic",serif;color:var(--maroon);opacity:.82;margin:0 0 22px}
.invite{text-transform:uppercase;letter-spacing:.17em;font-size:clamp(13px,3.6vw,15px);margin:0 0 16px;color:var(--ink)}
.hosts{font:600 clamp(20px,6vw,27px)/1.2 "Cormorant Garamond",serif;margin:0}
.hosts span,.family{font-size:clamp(15px,4vw,18px);font-weight:400;color:var(--ink)}
.copy{max-width:280px;font-size:clamp(16px,4.4vw,19px);line-height:1.32;margin:30px 0 14px;color:var(--maroon)}
.welcome h1{
  font:700 clamp(58px,20vw,84px)/1.05 "Tangerine",cursive;
  margin:2px 0 0;color:var(--maroon);
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.welcome h1 em{font:italic 400 clamp(16px,4.6vw,20px) "Cormorant Garamond",serif;margin:0;color:var(--soft);letter-spacing:.05em;font-style:italic}
.family{line-height:1.35;margin:26px 0 0}
.sharing{position:relative;margin:26px 0 0;font-size:clamp(15px,4vw,18px);font-style:italic;color:var(--ink)}
.scroll{position:relative;margin-top:auto;padding-top:26px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.scroll span{font-size:14px;margin-left:7px;color:var(--soft)}

.events{justify-content:center}
.events header p{
  font:600 clamp(20px,6vw,25px)/1.2 "Cormorant Garamond",serif;
  margin:0 0 22px;color:var(--maroon);
  text-transform:uppercase;letter-spacing:.16em;
}
.event-grid{display:grid;gap:14px;width:100%;max-width:430px}
.event-card{
  padding:20px 14px 18px;
  border:1px solid rgba(190,149,113,.55);
  border-radius:18px;
  background:rgba(255,252,245,.78);
  box-shadow:0 9px 17px rgba(151,108,86,.09);
}
.event-name{font:700 clamp(38px,11vw,48px)/1 "Tangerine",cursive;margin:0 0 8px;color:var(--maroon)}
.date{font-size:clamp(18px,5vw,21px);font-weight:600;margin:0;letter-spacing:.01em}
.time{font-size:clamp(19px,5.4vw,23px);font-style:italic;margin:5px 0;color:var(--soft)}
.rule{width:34px;border-top:1.5px solid var(--champagne);margin:15px auto}
.venue{font-size:clamp(20px,5.6vw,24px);font-weight:600;margin:0}
.place{font-size:clamp(14px,4vw,16px);margin:2px 0 14px;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.actions a{
  border-radius:30px;padding:8px 13px;
  border:1px solid rgba(105,45,55,.4);
  color:var(--maroon);background:#fffaf3;
  font:11px/1 Georgia,serif;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s;
}
.actions a:hover,.actions a:focus-visible{
  background:var(--maroon);color:var(--ivory);border-color:var(--maroon);
}
.actions a:focus-visible{outline:2px solid var(--soft);outline-offset:2px}

/* ===== Petals ===== */
.petals{position:fixed;z-index:10;inset:0;overflow:hidden;pointer-events:none}
.petal{
  position:absolute;top:-30px;width:7px;height:12px;
  border-radius:75% 18% 72% 22%;
  clip-path:polygon(50% 0,88% 21%,100% 64%,62% 100%,15% 84%,0 37%);
  animation:fall linear infinite;
}
.petal.champagne{background:linear-gradient(135deg,rgba(239,207,160,.78),rgba(197,150,103,.46))}
.petal.ivory{background:linear-gradient(135deg,rgba(255,252,244,.96),rgba(229,214,192,.65))}
.petal.blush{background:linear-gradient(135deg,rgba(181,112,122,.53),rgba(132,62,73,.28))}
@keyframes fall{to{transform:translate3d(var(--drift),110vh,0) rotate(440deg)}}

.music-toggle{
  position:fixed;z-index:20;top:max(12px,env(safe-area-inset-top));right:12px;
  width:36px;height:36px;
  border:1px solid rgba(105,45,55,.38);
  border-radius:50%;
  background:rgba(255,252,246,.9);
  color:var(--maroon);font-size:19px;cursor:pointer;
  box-shadow:0 2px 8px rgba(91,67,61,.14);
  transition:transform .2s;
}
.music-toggle:hover,.music-toggle:focus-visible{transform:scale(1.07)}
.music-toggle:focus-visible{outline:2px solid var(--soft);outline-offset:2px}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
.reveal.in-view{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .seal{animation:none}
  .petal{animation:none;display:none}
  .reveal{opacity:1;transform:none;transition:none}
  .envelope-flap,.envelope-front,.pages{transition-duration:.01ms}
}

/* ===== Larger screens scale up from the mobile base ===== */
@media(min-width:400px){
  .page{padding:64px 26px 50px}
  .welcome{padding-top:60px}
}
@media(min-width:561px){
  body{padding:16px}
  .invitation{border-radius:10px}
  .envelope-stage{height:calc(100svh - 32px)}
  .page{padding:78px 30px 56px}
  .welcome{padding-top:72px}
}