/* قالب «حنّاء» — رمل دافئ ونقش حنّاء بنّي وذهبي وأخضر زيتوني */
body.tpl-henna {
  --q-bg: #F7EBD8;
  --q-soft: #FBF3E6;
  --q-ink: #4A1E14;
  --q-muted: #6E4F3A;
  --q-accent: #8A3B1C;
  --q-line: #E0C79F;
  --q-btn: #8A3B1C;
  --q-btn-ink: #F7EBD8;
  --q-display: 'Aref Ruqaa', 'Amiri', serif;
}
.hn-cover { position: absolute; inset: 0; background: radial-gradient(460px 520px at 50% 45%, #F7EBD8, #E9D3B3); display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 24px; padding: 30px 20px; overflow-y: auto; }
.hn-cover .q-guest { color: #4A1E14; font-size: 15px; transition: opacity .6s ease; }
.hn-cover .q-guest strong { font: 700 30px 'Aref Ruqaa', serif; }
.hn-hand { width: min(300px, 76vw); height: auto; flex: none; }
.hn-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hn-tips { opacity: 0; }
.hn-open { min-height: 54px; padding: 0 30px; border-radius: 999px; border: 0; background: #8A3B1C; color: #F7EBD8; font: 600 17px 'Plex Arabic', sans-serif; cursor: pointer; transition: opacity .6s ease; }
.is-opening .hn-l { animation: hn-draw 1.4s ease forwards; }
.is-opening .d2 { animation-delay: .35s; } .is-opening .d3 { animation-delay: .7s; } .is-opening .d4 { animation-delay: 1.05s; }
.is-opening .hn-tips { animation: hn-in .5s ease 2.1s forwards; }
.is-opening .hn-open, .is-opening .hn-cover .q-guest { opacity: 0; }
.is-opening .hn-cover { animation: hn-out .7s ease 2.7s forwards; }
@keyframes hn-draw { to { stroke-dashoffset: 0; } }
@keyframes hn-in { to { opacity: 1; } }
@keyframes hn-out { to { opacity: 0; } }

.hn-dots { height: 18px; opacity: .55; background: radial-gradient(circle, #8A3B1C 1.6px, transparent 2px) 0 0/14px 14px; }
.hn-hero { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: 38px 24px 10px; }
.hn-host { font-size: 15px; color: #6E4F3A; max-width: 30ch; }
.hn-names { display: flex; flex-direction: column; font: 700 56px/1.25 'Aref Ruqaa', serif; color: #8A3B1C; outline: none; }
.hn-and { font-size: 24px; color: #A07A2C; }
.hn-tag { font: 400 19px 'Aref Ruqaa', serif; color: #6E4F3A; }
.hn-when { display: flex; flex-direction: column; gap: 4px; }
.hn-when strong { font-size: 18px; }
.hn-when span { font-size: 14px; color: #6E4F3A; }
.tpl-henna .inv-page .q-place { border-style: dashed; border-color: #C9A04F; }
.tpl-henna .q-made { color: #6E4F3A; }

@media (prefers-reduced-motion: reduce) {
  .hn-l { stroke-dashoffset: 0; }
  .hn-tips { opacity: 1; }
  .hn-open, .hn-cover .q-guest { transition: none; }
}