@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root {
  --emerald-deep: #082b24;
  --emerald: #0f4a3d;
  --emerald-soft: #1b6452;
  --gold: #c9a24b;
  --gold-light: #efd896;
  --gold-deep: #8a6420;
  --ivory: #fbf4e2;
  --ink: #2b2114;
  --ink-soft: #5b4a2e;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Segoe UI', Helvetica, Arial, sans-serif;
  --arabic: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--gold-light);
  font-family: var(--sans);
  font-weight: 400;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-opacity='.13' stroke-width='1'%3E%3Crect x='18' y='18' width='36' height='36'/%3E%3Crect x='18' y='18' width='36' height='36' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 0%, rgba(201, 162, 75, .22), transparent 50%),
    linear-gradient(160deg, var(--emerald-deep), var(--emerald) 55%, var(--emerald-deep));
  background-attachment: fixed;
}

button { font: inherit; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.card-border :focus-visible { outline-color: var(--gold-deep); }

.page { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px 36px; }
.welcome, .invitation { width: min(100%, 640px); }
.is-hidden { display: none !important; }

/* ---------- Arabic + shared text ---------- */
.arabic { font-family: var(--arabic); line-height: 2; margin: 0; }
.translation { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; margin: 6px auto 0; max-width: 440px; }
.star { color: var(--gold); display: block; margin: 0 auto 10px; }

/* ---------- Arch motif (shared by welcome + invitation) ---------- */
.arch { position: relative; text-align: center; }
.arch-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  animation: archRise 1.7s cubic-bezier(.5, .05, .25, 1) both;
}
.arch-svg path { fill: none; stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.arch-svg path.inner { stroke-width: 1; stroke-opacity: .65; }
.arch-content { position: relative; }

/* single orchestrated reveal: arch rises, then the writing fades in */
.late { animation: fadeIn 1.2s ease .9s both; }

/* ---------- Welcome ---------- */
.welcome-card {
  padding: clamp(110px, 24vw, 160px) clamp(22px, 7vw, 56px) clamp(44px, 9vw, 64px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}
.welcome-card .bismillah { color: var(--gold-light); font-size: clamp(24px, 6vw, 32px); margin-bottom: 6px; }
h1, h2 { font-family: var(--serif); font-weight: 500; margin: 0; }
h1 { font-size: clamp(40px, 10vw, 60px); line-height: 1.05; color: var(--ink); color: #fff6dc; margin: 8px 0 14px; }
.welcome-names { font-family: var(--serif); font-size: clamp(26px, 6.6vw, 36px); font-weight: 600; color: var(--gold-light); margin: 0; line-height: 1.15; }
.welcome-sub { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 4.2vw, 21px); color: #d9c690; margin: 6px 0 20px; }
.welcome-copy { color: #cfdcc9; font-size: 14px; line-height: 1.8; max-width: 330px; margin: 0 auto 28px; }
.primary-button {
  cursor: pointer; border: 0; border-radius: 999px; padding: 14px 28px;
  background: linear-gradient(110deg, #b98b3d, #f1d78f 50%, #c19a4e); color: #2a1c08;
  font-size: 14px; font-weight: 500; letter-spacing: .03em;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28); transition: transform .2s, filter .2s;
}
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.tiny-note { color: #a8bba8; font-size: 12px; margin: 20px 0 0; letter-spacing: .03em; }

/* ---------- Invitation card ---------- */
.invitation { animation: fadeIn .6s ease both; }
.card-shell {
  padding: 9px;
  background: linear-gradient(135deg, #8b642b, #f1d68b 25%, #9d7639 50%, #f5dfa0 75%, #886027);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}
.card-border {
  position: relative; overflow: hidden; text-align: center; color: var(--ink);
  padding: clamp(28px, 7vw, 48px) clamp(16px, 5.5vw, 40px) clamp(30px, 7vw, 46px);
  border: 1px solid #c9a55e; outline: 1px solid rgba(174, 132, 57, .5); outline-offset: -8px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(223, 190, 119, .28), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%238a6420' stroke-opacity='.06' stroke-width='1'%3E%3Crect x='18' y='18' width='36' height='36'/%3E%3Crect x='18' y='18' width='36' height='36' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E"),
    var(--ivory);
}
.card-border .arch-svg path { stroke: var(--gold-deep); }
.card-border .star { color: var(--gold-deep); }

.opening { margin-bottom: 22px; }
.opening .bismillah { color: var(--emerald); font-size: clamp(26px, 7vw, 34px); }
.opening .translation { color: var(--ink-soft); font-size: 16px; }

.groom-arch { padding: clamp(96px, 24vw, 150px) clamp(20px, 7vw, 52px) clamp(34px, 7vw, 46px); margin-bottom: 30px; }
.invite-line { font-family: var(--serif); font-size: clamp(17px, 4.4vw, 20px); line-height: 1.55; color: var(--ink-soft); margin: 0 auto 14px; max-width: 400px; }
h2 { color: var(--emerald); font-size: clamp(42px, 11vw, 64px); font-weight: 600; line-height: 1; }
h2 span { display: block; }
h2 span + span { margin-top: 2px; }
.parent-line { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 5vw, 23px); color: var(--gold-deep); margin: 14px 0 0; line-height: 1.4; }

.verse { margin: 0 auto 22px; max-width: 470px; }
.verse blockquote { margin: 0; }
.verse .arabic { color: var(--emerald); font-size: clamp(21px, 5.4vw, 26px); line-height: 2.1; }
.verse .translation { color: var(--ink-soft); }
.verse figcaption { font-size: 12px; letter-spacing: .06em; color: var(--gold-deep); margin-top: 8px; }

.wish { font-family: var(--serif); font-size: clamp(18px, 4.6vw, 21px); line-height: 1.6; color: var(--ink); max-width: 440px; margin: 0 auto 20px; }

.divider { display: flex; align-items: center; gap: 12px; width: min(220px, 70%); margin: 0 auto 24px; color: var(--gold-deep); }
.divider::before, .divider::after { content: ""; height: 1px; background: linear-gradient(90deg, transparent, #c6a361); flex: 1; }
.divider::after { background: linear-gradient(270deg, transparent, #c6a361); }

.small-label { font-size: 13px; letter-spacing: .08em; color: var(--gold-deep); margin: 0 0 4px; font-weight: 500; }

/* date + time */
.when { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: clamp(12px, 5vw, 32px); max-width: 440px; margin: 0 auto; }
.when-rule { align-self: stretch; background: linear-gradient(180deg, transparent, #c6a361, transparent); }
.big-number { font-family: var(--serif); font-size: clamp(72px, 19vw, 96px); font-weight: 500; line-height: .9; color: var(--emerald); margin: 2px 0 6px; }
.month { font-family: var(--serif); font-size: clamp(19px, 5vw, 23px); color: var(--ink); margin: 0; font-weight: 600; }
.time-line { font-family: var(--serif); font-size: clamp(32px, 8.4vw, 42px); font-weight: 600; color: var(--emerald); line-height: 1.1; margin: 0; }
.to { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-deep); margin: 2px 0; }
.countdown { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-deep); margin: 18px 0 26px; min-height: 1.4em; }

/* venue + contact */
.venue { margin: 0 0 26px; }
.venue-name { font-family: var(--serif); font-size: clamp(30px, 8vw, 38px); font-weight: 600; color: var(--emerald); margin: 2px 0 0; line-height: 1.15; }
.venue-city { font-size: 15px; color: var(--ink-soft); margin: 6px 0 14px; }
.contact { margin: 0 0 28px; }
.phones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.pill-link {
  display: inline-block; text-decoration: none; color: var(--emerald);
  border: 1px solid var(--gold-deep); border-radius: 999px; padding: 10px 18px;
  font-size: 15px; font-weight: 500; letter-spacing: .02em; background: rgba(255, 255, 255, .5);
  transition: background .2s, color .2s;
}
.pill-link:hover { background: var(--emerald); color: var(--gold-light); border-color: var(--emerald); }

/* closing */
.dua { margin: 0 auto 20px; max-width: 460px; padding-top: 22px; border-top: 1px solid #dbc794; }
.dua .arabic { color: var(--emerald); font-size: clamp(21px, 5.4vw, 26px); }
.dua .translation { color: var(--ink-soft); }
.closing { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-soft); margin: 0; }
.signature { font-family: var(--serif); font-size: clamp(22px, 5.8vw, 27px); font-weight: 600; color: var(--emerald); margin: 4px 0 14px; line-height: 1.3; }
.bottom-flourish { color: var(--gold-deep); font-size: 18px; }

/* actions */
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 24px 0 0; }
.secondary-button {
  cursor: pointer; display: inline-block; text-decoration: none;
  color: var(--gold-light); border: 1px solid rgba(239, 216, 150, .55); border-radius: 999px;
  background: rgba(0, 0, 0, .16); padding: 11px 20px; font-size: 14px; font-weight: 400;
  transition: background .2s;
}
.secondary-button:hover { background: rgba(239, 216, 150, .16); }
.footer-note { text-align: center; color: #a8bba8; font-size: 12px; margin: 20px 0 0; letter-spacing: .04em; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 20px); background: var(--ivory); color: var(--ink); padding: 11px 16px; font-size: 14px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100vw - 28px); text-align: center; z-index: 10; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes archRise { from { clip-path: inset(100% -4px -4px -4px); } to { clip-path: inset(-4px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

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

@media (max-width: 420px) {
  .page { padding: 20px 12px 30px; }
  .card-shell { padding: 6px; }
  .when { gap: 12px; }
  .pill-link { padding: 10px 16px; }
}