/* =========================================================
   محمد و ملك — ذكرى الخطوبة
   نظام التصميم: "ليل الورد" — سماء ليلية خمرية + قلوب + صفحات ورقية وردية
   ========================================================= */

:root{
  /* -- ألوان: ليل الورد -- */
  --night-900:#170910;
  --night-800:#24101a;
  --night-700:#3b1b2a;
  --night-600:#4a2036;

  /* -- ألوان: ذهبي دافئ -- */
  --gold-300:#f0cfa0;
  --gold-200:#f7e6cd;

  /* -- ألوان: الورد (بديل الكهرماني القديم) -- */
  --rose-300:#e9a9b4;
  --rose-500:#c25c78;
  --rose-700:#8d3450;

  /* -- ألوان: صفحات الحكاية (ورق وردي دافئ) -- */
  --paper-100:#fbf1ee;
  --paper-200:#f3e2dc;
  --paper-line:#e3c9c4;
  --ink-900:#3b2028;
  --ink-600:#7c5b62;

  /* -- طباعة -- */
  --font-display:"Traditional Arabic","Amiri","Scheherazade New","Sakkal Majalla",Georgia,"Times New Roman",serif;
  --font-body:"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;

  --shadow-soft:0 20px 40px -20px rgba(23,9,16,.5);
  --glow-rose:rgba(233,169,180,.3);

  /* نقشة قلوب صغيرة تتكرّر — تُستخدم على الورق والليل */
  --hearts-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M24 34c-6-4.4-10-8.3-10-13a6 6 0 0110-3.6A6 6 0 0134 21c0 4.7-4 8.6-10 13z' fill='%23c25c78'/%3E%3Cpath d='M70 78c-4.4-3.2-7.3-6-7.3-9.4A4.4 4.4 0 0170 65.9a4.4 4.4 0 017.3 2.7c0 3.4-2.9 6.2-7.3 9.4z' fill='%23c25c78'/%3E%3Cpath d='M74 30c-3-2.2-5-4.2-5-6.5A3 3 0 0174 21.7a3 3 0 015 1.8c0 2.3-2 4.3-5 6.5z' fill='%23c25c78'/%3E%3Cpath d='M26 74c-3-2.2-5-4.2-5-6.5A3 3 0 0126 65.7a3 3 0 015 1.8c0 2.3-2 4.3-5 6.5z' fill='%23c25c78'/%3E%3C/svg%3E");
}

/* هذا موقع أحادي الطابع بقصد: حكاية ليلية وردية لا تتغيّر بتغيّر ثيم الجهاز،
   لذا كل الألوان معرّفة صراحة هنا ولا تعتمد على وضع النظام. */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  direction:rtl;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-100);
  line-height:1.7;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.container{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------------------------------------------------------
   طبقة القلوب الطائرة فوق الموقع كامل (canvas ثابت)
--------------------------------------------------------- */
#hearts-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  /* فوق خلفيات الأقسام (وإلا اختفت خلفها) وتحت شريط التنقّل والمشغّل */
  z-index:20;
}
.night,
.paper,
.footer{ position:relative; z-index:1; }

/* ---------------------------------------------------------
   شريط التنقّل
--------------------------------------------------------- */
.nav{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  background:transparent;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.is-scrolled{
  background:rgba(251,241,238,.93);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 18px rgba(59,32,40,.1);
  padding:10px 24px;
}
.nav__brand{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--gold-200);
  letter-spacing:.02em;
  text-decoration:none;
  transition:color .35s ease;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.nav__brand svg{ color:var(--rose-300); }
.nav.is-scrolled .nav__brand{ color:var(--rose-700); }
.nav.is-scrolled .nav__brand svg{ color:var(--rose-500); }
.nav__links{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav__links a{
  font-size:.85rem;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--gold-200);
  opacity:.9;
  transition:color .35s ease, opacity .2s ease;
}
.nav.is-scrolled .nav__links a{ color:var(--ink-900); }
.nav__links a:hover{ opacity:1; }
.nav__links a:focus-visible,
.nav__brand:focus-visible{
  outline:2px solid var(--rose-500);
  outline-offset:4px;
  border-radius:2px;
}
@media (max-width:640px){
  .nav__links{ gap:16px; }
  .nav__links a{ font-size:.75rem; }
}

/* ---------------------------------------------------------
   قسم البداية — سماء الليل الوردية
--------------------------------------------------------- */
.night{
  position:relative;
  background:
    radial-gradient(ellipse 60% 40% at 78% 12%, rgba(233,169,180,.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 20% 80%, rgba(194,92,120,.12), transparent 65%),
    linear-gradient(180deg, var(--night-900) 0%, var(--night-800) 52%, var(--night-700) 100%);
  color:var(--gold-200);
  overflow:hidden;
}
/* نقشة قلوب ناعمة داخل الليل */
.night::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hearts-tile);
  background-size:150px 150px;
  opacity:.05;
  pointer-events:none;
}
.night > *{ position:relative; z-index:1; }

.stars{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.stars span{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:var(--gold-200);
  opacity:.7;
  animation:twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.25; }
  50%{ opacity:.9; }
}
@media (prefers-reduced-motion: reduce){
  .stars span{ animation:none; opacity:.55; }
}

.fireflies{ position:absolute; inset:0; pointer-events:none; }
.fireflies span{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background:radial-gradient(circle, var(--rose-300), transparent 70%);
  animation:drift 14s ease-in-out infinite;
}
@keyframes drift{
  0%   { transform:translate(0,0); opacity:.2; }
  50%  { transform:translate(18px,-26px); opacity:.8; }
  100% { transform:translate(0,0); opacity:.2; }
}
@media (prefers-reduced-motion: reduce){
  .fireflies span{ animation:none; opacity:.4; }
}

/* قلوب وبتلات كثيفة تصعد في سماء البداية */
.hearts{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hearts svg{
  position:absolute;
  bottom:-40px;
  opacity:0;
  animation:heart-rise linear infinite;
  will-change:transform,opacity;
}
@keyframes heart-rise{
  0%{ transform:translateY(0) translateX(0) scale(.6) rotate(-8deg); opacity:0; }
  12%{ opacity:.75; }
  50%{ transform:translateY(-45vh) translateX(22px) scale(1) rotate(10deg); }
  78%{ opacity:.5; }
  100%{ transform:translateY(-105vh) translateX(-14px) scale(1.1) rotate(-12deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hearts svg{ animation:none; display:none; }
}

#fx-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:500;
}

/* -- البطل (Hero) -- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 24px 80px;
  position:relative;
}

.hero__photo{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 32%;
  /* أبيض وأسود أولاً، والتلوين الخمري يجي من طبقة مزج فوقها — أضمن من hue-rotate */
  filter:grayscale(100%) brightness(42%) contrast(118%);
}
.hero__photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#5e1f36;
  mix-blend-mode:color;
}
.hero__photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, rgba(23,9,16,.68) 0%, rgba(23,9,16,.42) 35%, rgba(23,9,16,.8) 75%, var(--night-700) 100%);
}
.hero > *:not(.hero__photo){ position:relative; z-index:2; }

.moon{
  width:70px; height:70px;
  border-radius:50%;
  background:var(--gold-200);
  box-shadow:
    -18px -2px 0 -4px var(--night-800) inset,
    0 0 40px var(--glow-rose),
    0 0 90px rgba(194,92,120,.35);
  margin-bottom:28px;
}

.hero__eyebrow{
  font-size:.8rem;
  letter-spacing:.3em;
  color:var(--rose-300);
  margin:0 0 20px;
}

.hero__names{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7vw, 4.6rem);
  margin:0;
  color:var(--gold-300);
  text-wrap:balance;
  line-height:1.25;
}
.hero__names .amp{
  color:var(--rose-300);
  padding-inline:.25em;
  font-size:.7em;
}

/* فاصل: خطّان وقلب في المنتصف */
.vine{
  width:150px;
  height:16px;
  margin:26px auto;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:150px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='16' viewBox='0 0 150 16'%3E%3Cpath d='M2 8h52M96 8h52' stroke='%23c25c78' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M75 14.5c-6-4.3-10-7.5-10-11A5 5 0 0175 2a5 5 0 0110 1.5c0 3.5-4 6.7-10 11z' fill='%23c25c78'/%3E%3C/svg%3E");
}
/* على الخلفيات الليلية يصير الفاصل وردياً فاتحاً */
.night .vine,
.book-cover .vine{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='16' viewBox='0 0 150 16'%3E%3Cpath d='M2 8h52M96 8h52' stroke='%23e9a9b4' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M75 14.5c-6-4.3-10-7.5-10-11A5 5 0 0175 2a5 5 0 0110 1.5c0 3.5-4 6.7-10 11z' fill='%23e9a9b4'/%3E%3C/svg%3E");
}

.hero__date{
  font-size:1.05rem;
  letter-spacing:.08em;
  color:var(--paper-200);
  font-variant-numeric:tabular-nums;
}

.hero__tagline{
  margin:26px auto 0;
  max-width:420px;
  font-size:1rem;
  color:#d6b8b8;
  line-height:1.95;
}

.hero__scroll{
  margin-top:56px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--rose-300);
  font-size:.75rem;
  letter-spacing:.15em;
  text-decoration:none;
}
.hero__scroll svg{ animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll svg{ animation:none; }
}

/* -- العد التنازلي -- */
.countdown{
  padding:20px 24px 110px;
  text-align:center;
}
.countdown__label{
  font-size:.8rem;
  letter-spacing:.25em;
  color:var(--rose-300);
  margin-bottom:18px;
}
.countdown__badge{
  display:inline-block;
  border:1px solid var(--rose-700);
  color:var(--gold-300);
  font-size:.8rem;
  letter-spacing:.05em;
  padding:6px 18px;
  border-radius:100px;
  margin-bottom:34px;
}
.countdown__grid{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.countdown__cell{
  min-width:88px;
  padding:20px 14px;
  background:rgba(233,169,180,.07);
  border:1px solid rgba(233,169,180,.28);
  border-radius:14px;
  box-shadow:inset 0 0 24px rgba(194,92,120,.1);
}
.countdown__num{
  font-family:var(--font-display);
  font-size:2.1rem;
  color:var(--gold-300);
  font-variant-numeric:tabular-nums;
  display:block;
}
.countdown__unit{
  font-size:.72rem;
  letter-spacing:.1em;
  color:#d6b8b8;
  margin-top:6px;
  display:block;
}

.celebrate-btn{
  margin-top:40px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--rose-500);
  color:#fff;
  border:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  padding:14px 32px;
  border-radius:100px;
  cursor:pointer;
  box-shadow:0 10px 30px -12px rgba(194,92,120,.8);
  transition:transform .2s ease, background .2s ease;
}
.celebrate-btn:hover{ background:var(--rose-700); transform:translateY(-2px); }
.celebrate-btn:focus-visible{ outline:2px solid var(--gold-200); outline-offset:3px; }

/* -- فاصل صفحة (موجة) -- */
.page-turn{
  display:block;
  width:100%;
  height:90px;
  fill:var(--paper-100);
}

/* ---------------------------------------------------------
   الصفحات الورقية (المحتوى العام)
--------------------------------------------------------- */
.paper{
  background-color:var(--paper-100);
  background-image:var(--hearts-tile);
  background-size:150px 150px;
  position:relative;
}
.paper::before{
  /* يخفّف النقشة حتى تبقى النصوص مريحة */
  content:"";
  position:absolute;
  inset:0;
  background:var(--paper-100);
  opacity:.965;
  pointer-events:none;
}
.paper > *{ position:relative; z-index:1; }

.section{
  padding:90px 0 100px;
}
.section__head{
  text-align:center;
  max-width:560px;
  margin:0 auto 64px;
}
.section__kicker{
  font-size:.78rem;
  letter-spacing:.28em;
  color:var(--rose-500);
  margin:0 0 14px;
}
.section__title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  margin:0;
  color:var(--ink-900);
  text-wrap:balance;
}
.section__desc{
  margin:18px 0 0;
  color:var(--ink-600);
  font-size:.98rem;
  line-height:1.9;
}
.section__head .vine{ margin:20px auto 0; }

/* ---------------------------------------------------------
   ألبومنا — كتاب حقيقي
--------------------------------------------------------- */
.book-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.book-frame{
  padding:14px;
  background:linear-gradient(160deg, var(--night-600), var(--night-900));
  border-radius:14px;
  box-shadow:0 30px 50px -20px rgba(23,9,16,.6);
}
.book{
  position:relative;
  width:min(84vw, 620px);
  aspect-ratio:16/10;
  perspective:2400px;
  touch-action:pan-y;
}

.book__spine{
  position:absolute;
  top:2%;
  bottom:2%;
  left:50%;
  width:22px;
  transform:translateX(-50%);
  z-index:6;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(23,9,16,.24) 0%, rgba(23,9,16,.06) 35%,
    transparent 50%,
    rgba(23,9,16,.06) 65%, rgba(23,9,16,.24) 100%);
}

.book-slot{
  position:absolute;
  top:0; bottom:0;
  width:50%;
}
.book-slot--left{ left:0; }
.book-slot--right{ right:0; }

.book-page{
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--paper-100);
  overflow:hidden;
}
.book-slot--left .book-page{ border-radius:8px 3px 3px 8px; }
.book-slot--right .book-page{ border-radius:3px 8px 8px 3px; }

.book-flip{
  position:absolute;
  inset:0;
  z-index:2;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.45,.05,.35,1);
}
.book-flip.is-active{ z-index:10; }
.book-flip.no-transition{ transition:none; }
.book-flip--left{ transform-origin:100% center; } /* المفصل عند خط التجليد */
.book-flip--right{ transform-origin:0% center; }
.book-flip--left.is-open{ transform:rotateY(180deg); }
.book-flip--right.is-open{ transform:rotateY(-180deg); }

.book-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  background:var(--paper-100);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.book-slot--left .book-face{ border-radius:8px 3px 3px 8px; }
.book-slot--right .book-face{ border-radius:3px 8px 8px 3px; }
.book-face--back{ transform:rotateY(180deg); }

/* محتوى الصفحة: صورة فقط — بلا عناوين ولا تعليقات */
.book-page__photo{
  position:absolute;
  inset:0;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  background:none;
  display:block;
  width:100%;
  height:100%;
}
.book-page__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.book-page__photo:focus-visible{ outline:3px solid var(--rose-500); outline-offset:-3px; }

/* قلوب تتطاير من خط التجليد مع كل قلبة */
.book-burst{
  position:absolute;
  inset:0;
  z-index:15;
  pointer-events:none;
  overflow:visible;
}
.book-burst span{
  position:absolute;
  animation:burst-up 1s cubic-bezier(.25,.7,.4,1) forwards;
}
@keyframes burst-up{
  0%{ transform:translate(-50%,0) scale(.3) rotate(0deg); opacity:0; }
  18%{ opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(1.15) rotate(var(--rot)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .book-burst span{ display:none; }
}

/* الغلاف */
.book-cover{
  position:absolute;
  inset:0;
  z-index:20;
  border-radius:8px;
  background:
    radial-gradient(ellipse 60% 50% at 75% 15%, rgba(233,169,180,.16), transparent 60%),
    linear-gradient(160deg, var(--night-700), var(--night-900));
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform-origin:100% center;
  transition:transform .9s cubic-bezier(.4,.1,.2,1), opacity .35s ease .55s;
  overflow:hidden;
}
.book-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hearts-tile);
  background-size:120px 120px;
  opacity:.10;
}
.book-cover.is-open{
  transform:rotateY(178deg);
  opacity:0;
  pointer-events:none;
}
.book-cover__inner{ padding:20px; position:relative; z-index:1; }
.book-cover__eyebrow{
  font-size:.72rem;
  letter-spacing:.3em;
  color:var(--rose-300);
  margin:0 0 12px;
}
.book-cover__names{
  font-family:var(--font-display);
  font-size:clamp(1.6rem, 5vw, 2.4rem);
  color:var(--gold-300);
  margin:0;
}
.book-cover__names .amp{ color:var(--rose-300); padding-inline:.2em; font-size:.7em; }
.book-cover__date{
  font-size:.9rem;
  letter-spacing:.06em;
  color:var(--paper-200);
  margin:0 0 22px;
}
.book-cover__open{
  background:var(--rose-500);
  color:#fff;
  border:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.85rem;
  padding:11px 26px;
  border-radius:100px;
  cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(194,92,120,.9);
  transition:background .2s ease, transform .2s ease;
}
.book-cover__open:hover{ background:var(--rose-700); transform:translateY(-2px); }
.book-cover__open:focus-visible{ outline:2px solid var(--gold-200); outline-offset:3px; }

.book-arrow{
  flex:none;
  background:none;
  border:1px solid var(--rose-500);
  color:var(--rose-500);
  width:46px; height:46px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.book-arrow:hover{ background:var(--paper-200); transform:scale(1.06); }
.book-arrow:disabled{ opacity:.28; cursor:default; transform:none; }
.book-arrow:focus-visible{ outline:2px solid var(--rose-500); outline-offset:3px; }

/* شريط تقدّم الكتاب */
.book__progress{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:24px auto 0;
  max-width:320px;
  color:var(--ink-600);
  font-size:.8rem;
  font-variant-numeric:tabular-nums;
}
.book__progress[hidden]{ display:none; }
.book__bar{
  flex:1;
  height:4px;
  border-radius:4px;
  background:var(--paper-line);
  overflow:hidden;
}
.book__bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:4px;
  background:linear-gradient(90deg, var(--rose-300), var(--rose-500));
  transition:width .5s ease;
}

.book__hint{
  text-align:center;
  margin:14px 0 0;
  color:var(--ink-600);
  font-size:.78rem;
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.book__hint svg{ animation:nudge 1.9s ease-in-out infinite; }
@keyframes nudge{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-6px); }
}

/* ------- الكتاب على الجوال: صفحة واحدة + أسهم داخل الإطار ------- */
@media (max-width:760px){
  .book-wrap{ gap:0; }
  .book{
    width:min(80vw, 380px);
    aspect-ratio:3/4;
  }
  .book__spine{ display:none; }
  .book-slot--left{ display:none; }
  .book-slot--right{ width:100%; }
  .book-slot--right .book-page,
  .book-slot--right .book-face{ border-radius:4px 8px 8px 4px; }

  /* الأسهم تنتقل من خارج الكتاب إلى حافتيه — دائماً ظاهرة */
  .book-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:30;
    width:40px; height:40px;
    border-color:rgba(247,230,205,.5);
    color:var(--gold-200);
    background:rgba(23,9,16,.55);
    backdrop-filter:blur(4px);
  }
  .book-arrow:hover{ background:rgba(23,9,16,.7); transform:translateY(-50%) scale(1.06); }
  .book-arrow--next{ inset-inline-start:16px; }
  .book-arrow--prev{ inset-inline-end:16px; }
  .book-arrow:disabled{ opacity:.22; }

  .book-slot--right .book-flip--right{ transform-origin:100% center; }
  .book-slot--right .book-flip--right.is-open{ transform:rotateY(180deg); }

  .book__hint{ display:flex; }
}

/* ---------------------------------------------------------
   لحظاتنا — كولاج فسيفسائي بلا أي نص
--------------------------------------------------------- */
.collage{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-flow:dense; /* يسدّ الفراغات اللي تخلّفها الصور الطويلة */
  gap:8px;
}
.collage__item{
  position:relative;
  grid-column:span 2;
  aspect-ratio:1;
  border:none;
  padding:0;
  margin:0;
  background:var(--paper-200);
  border-radius:4px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 12px 26px -20px rgba(23,9,16,.9);
  transition:transform .3s ease, box-shadow .3s ease, z-index 0s;
}
.collage__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease, filter .35s ease;
}
/* إيقاع الكولاج: كل بضع صور واحدة أكبر أو أطول */
.collage__item:nth-child(9n+1){ grid-column:span 4; aspect-ratio:16/11; }
.collage__item:nth-child(9n+5){ grid-row:span 2; aspect-ratio:auto; }
.collage__item:nth-child(9n+8){ grid-column:span 3; aspect-ratio:3/2; }

/* آخر الصور بلا امتدادات، حتى ما يبقى فراغ كبير في السطر الأخير
   (الخصوصية الأعلى تخليها تغلب قواعد nth-child فوق وداخل استعلامات الوسائط) */
.collage .collage__item:nth-last-child(-n+6){
  grid-column:span 2;
  grid-row:auto;
  aspect-ratio:1;
}

.collage__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(194,92,120,.35), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.collage__item .collage__heart{
  position:absolute;
  inset-block-end:10px;
  inset-inline-end:10px;
  color:#fff;
  opacity:0;
  transform:scale(.6);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(23,9,16,.6));
}
.collage__item:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 44px -22px rgba(23,9,16,.85);
  z-index:2;
}
.collage__item:hover img{ transform:scale(1.06); }
.collage__item:hover::after{ opacity:1; }
.collage__item:hover .collage__heart{ opacity:1; transform:scale(1); }
.collage__item:focus-visible{ outline:3px solid var(--rose-500); outline-offset:3px; z-index:2; }

@media (max-width:900px){
  .collage{ grid-template-columns:repeat(4,1fr); gap:6px; }
  .collage__item:nth-child(9n+1){ grid-column:span 4; aspect-ratio:16/10; }
  .collage__item:nth-child(9n+8){ grid-column:span 2; aspect-ratio:1; }
}
@media (max-width:520px){
  .collage{ gap:5px; }
  .collage__item:nth-child(9n+8){ grid-column:span 4; aspect-ratio:3/2; }
}

/* الصندوق المكبّر — بلا تعليقات */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(23,9,16,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  z-index:100;
}
.lightbox[hidden]{ display:none; }
.lightbox__frame{
  position:relative;
  max-width:min(92vw, 900px);
  max-height:88vh;
  text-align:center;
}
.lightbox img{
  max-width:min(92vw, 900px);
  max-height:76vh;
  border-radius:10px;
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  margin:0 auto;
}
.lightbox__count{
  color:#c49aa2;
  font-size:.75rem;
  font-variant-numeric:tabular-nums;
}
.lightbox__close,
.lightbox__nav{
  background:none;
  border:1px solid var(--rose-300);
  color:var(--rose-300);
  width:44px; height:44px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.lightbox__close{ position:absolute; top:-56px; inset-inline-end:0; }
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(233,169,180,.16); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible{ outline:2px solid var(--gold-200); outline-offset:3px; }
.lightbox__nav[disabled]{ opacity:.3; cursor:default; }
.lightbox__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:18px;
}

/* ---------------------------------------------------------
   مشغّل الموسيقى
--------------------------------------------------------- */
.music{
  position:fixed;
  inset-block-end:18px;
  inset-inline-start:18px;
  z-index:80;
  display:flex;
  align-items:center;
  gap:10px;
}
.music__btn{
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(247,230,205,.4);
  background:rgba(59,27,42,.82);
  backdrop-filter:blur(8px);
  color:var(--gold-200);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 30px -14px rgba(23,9,16,.95);
  transition:transform .2s ease, background .2s ease;
}
.music__btn:hover{ transform:scale(1.06); background:var(--rose-700); }
.music__btn:focus-visible{ outline:2px solid var(--rose-300); outline-offset:3px; }
.music__btn.is-idle{ animation:heartbeat 2.4s ease-in-out infinite; }
@keyframes heartbeat{
  0%,100%{ transform:scale(1); box-shadow:0 12px 30px -14px rgba(23,9,16,.95); }
  14%{ transform:scale(1.11); box-shadow:0 0 0 0 rgba(194,92,120,.55); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.08); box-shadow:0 0 0 16px rgba(194,92,120,0); }
}
@media (prefers-reduced-motion: reduce){
  .music__btn.is-idle{ animation:none; }
}
.music__label{
  background:rgba(59,27,42,.9);
  color:var(--gold-200);
  border-radius:100px;
  padding:8px 16px;
  font-size:.78rem;
  white-space:nowrap;
  box-shadow:0 12px 30px -16px rgba(23,9,16,.95);
  transition:opacity .4s ease, transform .4s ease;
}
.music__label[hidden]{ display:none; }
.music__label.is-hiding{ opacity:0; transform:translateX(10px); }

@media (max-width:520px){
  .music{ inset-block-end:14px; inset-inline-start:14px; }
  .music__btn{ width:46px; height:46px; }
  .music__label{ font-size:.72rem; padding:7px 13px; }
}

/* ---------------------------------------------------------
   تذييل
--------------------------------------------------------- */
.footer{
  background:linear-gradient(180deg, var(--night-700) 0%, var(--night-900) 100%);
  color:#d6b8b8;
  text-align:center;
  padding:70px 24px 40px;
  position:relative;
  overflow:hidden;
}
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--hearts-tile);
  background-size:150px 150px;
  opacity:.06;
  pointer-events:none;
}
.footer > *{ position:relative; z-index:1; }
.footer__names{
  font-family:var(--font-display);
  color:var(--gold-300);
  font-size:1.4rem;
  margin:0 0 10px;
}
.footer__text{
  font-size:.85rem;
  margin:0 0 24px;
}
.footer__heart{
  display:inline-block;
  color:var(--rose-500);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); }
  20%{ transform:scale(1.22); }
  40%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .footer__heart{ animation:none; }
}

/* قلوب اللمس في أي مكان */
.tap-heart{
  position:fixed;
  z-index:400;
  pointer-events:none;
  animation:tap-pop .9s ease-out forwards;
}
@keyframes tap-pop{
  0%{ transform:translate(-50%,-50%) scale(.3); opacity:0; }
  22%{ transform:translate(-50%,-60%) scale(1.15); opacity:1; }
  100%{ transform:translate(-50%,-190%) scale(.85); opacity:0; }
}