/* Shared pieces. Each design sets the colour variables in designs/<name>.css. */
:root {
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", cursive;
  --hand: "Homemade Apple", cursive;
  --type: "Special Elite", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--serif); overflow-x: clip; }
.bg { position: fixed; inset: 0; z-index: -1; background: var(--noise), var(--bg-art, none), var(--bg); }
.stage { max-width: 440px; margin: 0 auto; padding: 24px 16px 120px; display: grid; gap: 64px; }
section { position: relative; }
p { margin: 8px 0; }
.center { text-align: center; }

/* Text */
.eyebrow { margin: 0 0 4px; font: 400 12px var(--type); letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
.script { font: 400 44px/1.05 var(--script); margin: 6px 0; }
.small { font-size: 14px; color: var(--soft); }
.body { font-size: 16px; }
.hosts { font-weight: 600; font-size: 17px; }
.person { font: 400 28px/1.15 var(--script); color: var(--accent); margin: 6px 0; }
.bismillah { font: 400 24px/1.6 "Amiri", serif; margin: 0 0 4px; direction: rtl; }
.venue { font-weight: 600; font-size: 19px; margin-top: 12px; }

/* Collage cut-outs: white sticker edge + soft shadow, pop in when their section shows */
.cut {
  position: absolute; z-index: 3; display: block; pointer-events: none;
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 8px 8px rgba(0, 0, 0, .28));
}
.cut svg, .cut img { display: block; width: 100%; height: auto; }
.pop { transform: rotate(var(--r)) scale(0); transition: transform .7s cubic-bezier(.3, 1.5, .5, 1) calc(.25s + var(--i, 0) * .14s); }
.in .pop { transform: rotate(var(--r)) scale(1); }

/* Generic reveal */
.rise { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.in .rise, .rise.in { opacity: 1; transform: none; }

/* Handwriting: wipes on left to right */
.write { display: block; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.5, 0, .3, 1) calc(.3s + var(--d, 0s)); }
.in .write { clip-path: inset(-10% -10% -10% -10%); }

/* Typewriter */
.ty-off { visibility: hidden; }

/* Scalloped edge (mask) and lace */
.scallop {
  --r: 9px;
  -webkit-mask: linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
                radial-gradient(circle var(--r) at 50% 50%, #000 97%, #0000 100%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
          mask: linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
                radial-gradient(circle var(--r) at 50% 50%, #000 97%, #0000 100%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
}
.lace {
  padding: 26px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--lace) 72%, #000) 1.4px, transparent 1.9px) 0 0 / 8px 8px,
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lace) 70%, #fff) 3px, transparent 3.6px) 4px 4px / 16px 16px,
    var(--lace);
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28));
}
.lace-in {
  position: relative; background: var(--paper); padding: 30px 22px; text-align: center;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lace) 70%, #000), 0 0 0 5px color-mix(in srgb, var(--lace) 85%, #fff);
}

/* Photo slot */
.photo { width: 100%; height: 100%; background: center / cover no-repeat; }
.photo.ph {
  display: grid; place-items: center;
  background: linear-gradient(160deg, #cdb9a5, #8b6f61 60%, #4a3a35);
  color: #fff8; font: 400 11px var(--type); letter-spacing: .14em; text-transform: uppercase; text-align: center;
}

/* Map + buttons */
.map { border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(0, 0, 0, .2); background: #e8e4dc; }
.map iframe { display: block; width: 100%; height: 190px; border: 0; }
.btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent, #fff); font: 600 15px var(--serif); text-decoration: none;
}
.btn.wide { width: 100%; }
.btn:focus-visible, .choice button:focus-visible, input:focus-visible, textarea:focus-visible, .wa:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Contacts */
.contacts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.contacts li { display: flex; align-items: center; gap: 8px; text-align: left; }
.contacts li > span { flex: 1; font-size: 16px; }
.contacts small { display: block; font-size: 12px; color: var(--soft); }
.wa { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); }
.wa svg { width: 20px; height: 20px; fill: var(--on-accent, #fff); }

/* Countdown in red script */
.cd { display: flex; justify-content: center; align-items: flex-start; gap: 4px; color: var(--accent); }
.cd span { display: grid; justify-items: center; min-width: 52px; }
.cd b { font: 400 46px/1 var(--hand); }
.cd i { font: italic 400 12px var(--serif); color: var(--soft); margin-top: 6px; }
.cd em { font: 400 40px/1 var(--hand); font-style: normal; }

/* Calendar */
.cal { text-align: center; }
.cal-m { font: 400 13px var(--type); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 6px; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; font-size: 14px; }
.cal-g b { font: 600 11px var(--serif); color: var(--accent); }
.cal-g .hit { position: relative; font-weight: 700; }
.cal-g .hit svg { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); overflow: visible; }
.cal-g .hit path { fill: none; stroke: #c0272d; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1s ease 1.4s; }
.in .cal-g .hit path { stroke-dashoffset: 0; }

/* Timeline */
.timeline { list-style: none; margin: 16px 0 0; padding: 0 0 0 4px; display: grid; gap: 12px; text-align: left; position: relative; }
.timeline::before { content: ""; position: absolute; left: 82px; top: 6px; bottom: 6px; border-left: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.timeline li { display: grid; grid-template-columns: 70px 1fr; gap: 26px; align-items: center; position: relative; font-size: 15px; }
.timeline li::before { content: ""; position: absolute; left: 74px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.timeline .t { font: 400 12px var(--type); color: var(--soft); text-align: right; }
.timeline .l { font-family: var(--type); font-size: 14px; }

/* RSVP */
.rsvp-panel { margin-top: 14px; padding: 18px 16px; border-radius: 4px; background: var(--panel, var(--accent)); color: #fff; text-align: left; }
.panel-t { font: 400 26px var(--script); margin: 0; text-align: center; }
.panel-s { font-size: 14px; opacity: .85; margin: 4px 0 14px; text-align: center; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice button {
  display: grid; justify-items: center; gap: 2px; min-height: 58px; padding: 8px; cursor: pointer;
  border: 1px solid #fff5; border-radius: 4px; background: #ffffff1a; color: #fff; font: 600 14px var(--serif);
}
.choice button span { font-size: 18px; }
.choice button.on { background: #fff; color: var(--panel, var(--accent)); }
.rsvp-form { display: grid; gap: 12px; margin-top: 14px; text-align: left; }
.rsvp-form[hidden], .rsvp-form [hidden] { display: none; }
.rsvp-form label { display: grid; gap: 4px; font-size: 14px; color: var(--soft); }
.rsvp-form input, .rsvp-form textarea {
  width: 100%; font: 400 16px var(--serif); color: var(--ink); padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 4px; background: #fffc;
}

/* Guest wall */
.wall { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.wall li { background: #fff9; padding: 10px 14px; border-radius: 3px; text-align: left; transform: rotate(calc((var(--i) - 1) * .6deg)); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.wall p { margin: 0; font-size: 15px; font-style: italic; }
.wall span { font: 400 11px var(--type); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }

/* Music */
.music {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle, #fff 0 22%, #0000 23%), radial-gradient(circle, #ddd 0 40%, #999 41% 46%, #ccc 47% 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 3px #fff8;
}
.music.on { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.foot { text-align: center; padding-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}