:root{
  --night:#17131F;
  --dusk:#2A1F32;
  --gold:#D4B06A;
  --gold-dim:#8A7343;
  --pomegranate:#B5486B;
  --pearl:#F2EAE0;
  --pearl-dim:#B4A79D;

  --f-display:'Italiana', serif;
  --f-body:'Cormorant Garamond', serif;
  --f-util:'Jost', system-ui, sans-serif;
  --f-rtl:'Amiri', serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--pearl);font-family:var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}

body::before{
  content:'';position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #3A2B42 0%, transparent 55%),
    radial-gradient(90% 60% at 50% 110%, #241A2B 0%, transparent 60%),
    var(--night);
}

.card{
  position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100vh;
  background:linear-gradient(180deg,#1B1524 0%,#17131F 40%,#1E1728 100%);
  box-shadow:0 0 120px rgba(0,0,0,.6);overflow:hidden;
}

.preview-flag{
  position:fixed;top:0;left:0;z-index:60;
  background:var(--pomegranate);color:var(--pearl);
  font-family:var(--f-util);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  padding:5px 12px;border-bottom-right-radius:6px;
}

/* motes */
.motes{position:fixed;inset:0;z-index:2;pointer-events:none;max-width:480px;margin:0 auto}
.mote{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:0;animation:drift linear infinite}
@keyframes drift{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.5}
  90%{opacity:.3}
  100%{transform:translateY(-105vh) translateX(24px);opacity:0}
}

/* seal */
.seal-screen{
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;
  background:linear-gradient(180deg,#1B1524,#17131F);
  transition:opacity .9s ease, visibility .9s;
}
.seal-screen.opened{opacity:0;visibility:hidden;pointer-events:none}
.seal{position:relative;width:132px;height:132px;border:none;background:none;cursor:pointer;padding:0;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.seal:focus-visible{outline:2px solid var(--gold);outline-offset:14px;border-radius:50%}
.seal-half{position:absolute;top:0;width:66px;height:132px;overflow:hidden;transition:transform 1s cubic-bezier(.7,0,.2,1), opacity 1s ease}
.seal-half.l{left:0}
.seal-half.r{right:0}
.seal-half svg{position:absolute;top:0;width:132px;height:132px}
.seal-half.l svg{left:0}
.seal-half.r svg{right:0}
.seal.cracked .seal-half.l{transform:translateX(-70px) rotate(-16deg);opacity:0}
.seal.cracked .seal-half.r{transform:translateX(70px) rotate(16deg);opacity:0}
.seal-hint{font-family:var(--f-util);font-size:.62rem;font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:var(--pearl-dim)}

/* controls */
.lang{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;display:flex;gap:2px;
  background:rgba(23,19,31,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(212,176,106,.24);border-radius:999px;padding:3px;
  opacity:0;transition:opacity .6s ease .8s;
}
.lang.show{opacity:1}
.lang button{
  font-family:var(--f-util);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pearl-dim);background:none;border:none;padding:6px 13px;border-radius:999px;cursor:pointer;transition:.25s;
}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--night)}

.sound{
  position:fixed;bottom:18px;right:calc(50% - 240px + 18px);z-index:40;
  width:38px;height:38px;border-radius:50%;
  background:rgba(23,19,31,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(212,176,106,.24);display:grid;place-items:center;cursor:pointer;
  opacity:0;transition:opacity .6s ease .8s;
}
.sound.show{opacity:1}
.sound svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.5}
@media(max-width:520px){.sound{right:18px}}

/* rhythm */
.sec{padding:0 30px;text-align:center}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.eyebrow{font-family:var(--f-util);font-size:.6rem;font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dim)}
.kilim{display:block;width:150px;height:15px;margin:34px auto;opacity:.62;stroke:var(--gold);fill:none;stroke-width:1}

/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:80px 30px 60px}
.hero-type{margin-bottom:38px}
.names{font-family:var(--f-display);font-size:clamp(2.5rem,13vw,3.7rem);line-height:1.06;letter-spacing:.02em;color:var(--pearl)}
.amp{display:block;font-size:1.15rem;color:var(--gold);margin:8px 0;font-family:var(--f-body);font-style:italic}
.invite-line{font-size:.98rem;font-weight:300;line-height:1.85;color:var(--pearl-dim);max-width:270px;margin:26px auto 0}
.datebar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.datebar span{font-family:var(--f-util);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pearl-dim)}
.daynum{font-family:var(--f-display);font-size:3.1rem;color:var(--gold);line-height:.9}
.datebar-rule{width:1px;height:42px;background:rgba(212,176,106,.35)}

/* greeting */
.greeting{padding-top:20px;padding-bottom:20px}
.guest-name{font-family:var(--f-display);font-size:1.75rem;color:var(--gold);margin-top:10px}
.seats-line{font-family:var(--f-util);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pearl-dim);margin-top:8px}
.greeting p{font-size:.95rem;font-weight:300;color:var(--pearl-dim);line-height:1.8;max-width:280px;margin:14px auto 0}

/* countdown */
.count{display:flex;justify-content:center;gap:6px;margin-top:22px}
.unit{flex:1;max-width:78px;padding:14px 4px;border:1px solid rgba(212,176,106,.2);border-radius:2px}
.unit b{display:block;font-family:var(--f-util);font-weight:300;font-size:1.5rem;color:var(--pearl);font-variant-numeric:tabular-nums}
.unit small{font-family:var(--f-util);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin-top:5px;display:block}

/* programme */
.prog{margin-top:26px;text-align:start}
.slot{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid rgba(212,176,106,.13)}
.slot:last-child{border-bottom:none}
.slot time{font-family:var(--f-util);font-size:.68rem;letter-spacing:.12em;color:var(--gold);padding-top:3px;min-width:62px;font-variant-numeric:tabular-nums}
.slot h3{font-family:var(--f-body);font-size:1.12rem;font-weight:400;color:var(--pearl)}
.slot p{font-size:.85rem;font-weight:300;color:var(--pearl-dim);margin-top:2px;line-height:1.6}

/* venue */
.venue-name{font-family:var(--f-display);font-size:1.9rem;color:var(--pearl);margin-top:12px;line-height:1.2}
.venue-addr{font-size:.9rem;font-weight:300;color:var(--pearl-dim);margin-top:8px;line-height:1.7}

/* buttons */
.btn{
  display:inline-block;margin-top:22px;padding:13px 30px;
  font-family:var(--f-util);font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;
  border:1px solid rgba(212,176,106,.42);border-radius:999px;background:none;cursor:pointer;transition:.3s;
}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--night);border-color:var(--gold)}
.btn:disabled{opacity:.4;cursor:default}
.btn-solid{background:var(--gold);color:var(--night);border-color:var(--gold)}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--pomegranate);border-color:var(--pomegranate);color:var(--pearl)}
.btn-link{border:none;padding:8px;letter-spacing:.18em;color:var(--pearl-dim)}
.btn-link:hover,.btn-link:focus-visible{background:none;color:var(--gold)}

/* rsvp */
.rsvp{padding-bottom:16px}
.rsvp-actions{display:flex;flex-direction:column;gap:11px;align-items:center;margin-top:8px}
.rsvp-note{font-size:.8rem;font-weight:300;color:var(--pearl-dim);margin-top:20px;font-style:italic}
.rsvp-done{font-family:var(--f-display);font-size:1.4rem;color:var(--gold);margin-top:20px;line-height:1.4}

.seat-picker{margin-top:22px;font-family:var(--f-util);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pearl-dim)}
.stepper{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:12px}
.stepper button{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(212,176,106,.42);background:none;color:var(--gold);
  font-size:1.1rem;line-height:1;cursor:pointer;transition:.25s;
}
.stepper button:hover:not(:disabled){background:var(--gold);color:var(--night)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper b{font-family:var(--f-util);font-weight:300;font-size:1.6rem;color:var(--pearl);min-width:34px;font-variant-numeric:tabular-nums}

/* footer */
.foot{padding:56px 30px 44px;text-align:center}
.foot-verse{font-size:.95rem;font-style:italic;font-weight:300;color:var(--pearl-dim);line-height:1.9;max-width:270px;margin:0 auto}
.mark{display:inline-block;margin-top:34px;font-family:var(--f-util);font-size:.53rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dim);text-decoration:none}

/* rtl */
[dir="rtl"] .invite-line,
[dir="rtl"] .greeting p,
[dir="rtl"] .venue-addr,
[dir="rtl"] .foot-verse,
[dir="rtl"] .slot h3,
[dir="rtl"] .slot p,
[dir="rtl"] .rsvp-note{font-family:var(--f-rtl);font-size:.95rem;line-height:1.95}
[dir="rtl"] .guest-name,
[dir="rtl"] .venue-name,
[dir="rtl"] .rsvp-done{font-family:var(--f-rtl);font-weight:700}
[dir="rtl"] .names{font-family:var(--f-rtl);font-weight:700;font-size:clamp(2rem,10vw,2.7rem)}
[dir="rtl"] .slot time{direction:ltr}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}