/* ═══════════ مكتوب من زمان ═══════════ */
:root {
  --bg: #171110;
  --bg-2: #201715;
  --ink: #f4e9da;
  --ink-dim: #cdbba6;
  --pink: #f6c3d0;
  --pink-deep: #ef9fb6;
  --blue: #bfe6e1;
  --yellow: #f3ecb4;
  --paper: #f7efdd;
  --paper-ink: #4a382c;
  --heading: 'Aref Ruqaa', serif;
  --body: 'El Messiri', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overscroll-behavior-y: none; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

body.locked { overflow: hidden; height: 100dvh; }

/* حبيبات فيلم قديم */
#grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 50;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainMove 1.2s steps(4) infinite;
}
@keyframes grainMove {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%,1%); }
  50% { transform: translate(1%,-2%); }
  75% { transform: translate(-1%,2%); }
  100% { transform: translate(2%,-1%); }
}

#ambient, #burst {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh;
  pointer-events: none;
}
#ambient { z-index: 1; }
#burst { z-index: 60; }

#soundToggle {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(244,233,218,.25);
  background: rgba(23,17,16,.55); backdrop-filter: blur(6px);
  color: var(--ink); font-size: 19px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: transform .2s;
}
#soundToggle:active { transform: scale(.9); }
body.opened #soundToggle { display: flex; }

.scene {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12vh 22px;
  text-align: center;
}

.scene-title {
  font-family: var(--heading);
  font-size: clamp(30px, 7vw, 46px);
  color: var(--pink);
  margin-bottom: 40px;
}

/* ══════════ البوابة ══════════ */
#gate {
  background: radial-gradient(ellipse at 50% 40%, #241a17 0%, var(--bg) 70%);
}
.gate-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.seal-heart { width: 74px; height: 74px; animation: heartbeat 1.1s ease-in-out infinite; }
.seal-heart path {
  fill: var(--pink);
  stroke: #2b1a1a; stroke-width: 3; stroke-linejoin: round;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.12); }
  24% { transform: scale(1); }
  36% { transform: scale(1.08); }
  48% { transform: scale(1); }
}

.gate-title {
  font-family: var(--heading);
  font-size: clamp(52px, 14vw, 96px);
  color: var(--ink);
  text-shadow: 0 0 34px rgba(246,195,208,.35);
}
.gate-sub { color: var(--ink-dim); font-size: clamp(16px, 4.2vw, 21px); }

#openBtn {
  margin-top: 22px;
  font-family: var(--body); font-weight: 600;
  font-size: 19px; color: #2b1a1a;
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  border: none; border-radius: 999px;
  padding: 15px 44px; cursor: pointer;
  box-shadow: 0 6px 26px rgba(239,159,182,.35);
  transition: transform .2s, box-shadow .2s;
}
#openBtn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(239,159,182,.5); }
.gate-tiny { color: var(--ink-dim); font-size: 13px; opacity: .7; margin-top: 6px; }

/* ══════════ المقدمة ══════════ */
.line {
  opacity: 0; transform: translateY(24px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.line.big {
  font-family: var(--heading);
  font-size: clamp(26px, 6.4vw, 44px);
  line-height: 2;
}
.line.delay { transition-delay: .9s; color: var(--pink); }
.line.visible { opacity: 1; transform: translateY(0); }

.scroll-cue {
  position: absolute; bottom: 26px; right: 50%; transform: translateX(50%);
  font-size: 28px; color: var(--ink-dim);
  animation: cueFloat 1.8s ease-in-out infinite;
}
@keyframes cueFloat { 0%,100% { transform: translate(50%,0);} 50% { transform: translate(50%,10px);} }

/* ══════════ التحميض ══════════ */
.scene-text {
  font-size: clamp(17px, 4.6vw, 23px);
  line-height: 2; color: var(--ink-dim);
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.scene-text strong { color: var(--yellow); font-weight: 700; }
.scene-text.visible { opacity: 1; transform: translateY(0); }
.scene-text.pre { margin-bottom: 36px; }
.scene-text.post { margin-top: 36px; transition-delay: 2.4s; }

.polaroid {
  background: #fbf6ea;
  padding: 14px 14px 58px;
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform: rotate(-2.5deg);
  max-width: min(100%, 460px);
}
.polaroid img {
  display: block; width: 100%; border-radius: 2px;
  filter: grayscale(1) sepia(.35) blur(7px) brightness(.6) contrast(.85);
  transition: filter 3.2s ease;
}
.polaroid.developed img { filter: grayscale(0) sepia(0) blur(0) brightness(1) contrast(1); }
.polaroid-caption {
  font-family: var(--heading);
  color: #6b543f; font-size: clamp(15px, 4vw, 20px);
  margin-top: 14px;
  opacity: 0; transition: opacity 1.5s ease 2s;
}
.polaroid.developed .polaroid-caption { opacity: 1; }

/* ══════════ اللمسة ══════════ */
.hint {
  font-size: clamp(17px, 4.6vw, 23px); line-height: 1.9;
  color: var(--ink); margin-bottom: 28px;
  transition: opacity .8s;
}
.hint.done { opacity: .35; }

.photo-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 16px 46px rgba(0,0,0,.6);
  user-select: none; -webkit-user-select: none;
}
.photo-stage img { display: block; width: 100%; pointer-events: none; }

.hotspot {
  position: absolute;
  right: 38.5%; top: 50%;
  width: 19%; aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
}
.hotspot .pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(246,195,208,.9);
  box-shadow: 0 0 24px rgba(246,195,208,.5), inset 0 0 24px rgba(246,195,208,.28);
  animation: hotspotPulse 1.6s ease-out infinite;
}
@keyframes hotspotPulse {
  0% { transform: scale(.75); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.hotspot.holding .pulse { animation-duration: .7s; border-color: var(--yellow); }
.hotspot.done { display: none; }

.reveal-text {
  font-family: var(--heading);
  font-size: clamp(24px, 6vw, 38px);
  color: var(--pink); line-height: 2;
  margin-top: 30px;
  opacity: 0; transform: scale(.92);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.reveal-text.visible { opacity: 1; transform: scale(1); }

/* ══════════ الحكاية ══════════ */
.timeline {
  position: relative;
  max-width: 560px; width: 100%;
  padding-right: 34px;
  text-align: right;
}
.timeline::before {
  content: '';
  position: absolute; right: 10px; top: 8px; bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--pink-deep) 0 6px, transparent 6px 12px);
  opacity: .5;
}
.t-item { position: relative; margin-bottom: 46px; opacity: 0; transform: translateX(26px); transition: opacity 1s ease, transform 1s ease; }
.t-item.visible { opacity: 1; transform: translateX(0); }
.t-item::before {
  content: '';
  position: absolute; right: -31px; top: 8px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 14px rgba(246,195,208,.7);
}
.t-item:nth-child(3n+2)::before { background: var(--blue); box-shadow: 0 0 14px rgba(191,230,225,.7); }
.t-item:nth-child(3n)::before { background: var(--yellow); box-shadow: 0 0 14px rgba(243,236,180,.7); }
.t-year { font-family: var(--heading); font-size: 24px; color: var(--yellow); }
.t-text { font-size: clamp(16px, 4.2vw, 20px); line-height: 1.95; color: var(--ink); margin-top: 6px; }

/* ══════════ السينما ══════════ */
.theater {
  position: relative;
  width: min(100%, 400px);
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.65), 0 0 0 6px #2a1c17, 0 0 0 8px #52392c;
}
.screen-wrap { position: relative; aspect-ratio: 9/16; }
.screen-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; }

.play-btn {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid rgba(247,239,221,.85);
  background: rgba(23,17,16,.45); backdrop-filter: blur(4px);
  color: var(--paper); font-size: 30px; padding-right: 5px;
  cursor: pointer; z-index: 3;
  transition: transform .25s, opacity .4s;
}
.play-btn:hover { transform: scale(1.08); }
.play-btn.hidden { opacity: 0; pointer-events: none; }

.curtain {
  position: absolute; top: 0; bottom: 0; width: 56%;
  z-index: 4;
  background:
    repeating-linear-gradient(to left, #6d1626 0 14px, #8c2136 14px 30px, #5a1120 30px 44px);
  box-shadow: inset 0 -40px 60px rgba(0,0,0,.5);
  transition: transform 2.6s cubic-bezier(.6, 0, .3, 1);
}
.curtain.right { right: -3%; }
.curtain.left { left: -3%; }
.theater.open .curtain.right { transform: translateX(105%); }
.theater.open .curtain.left { transform: translateX(-105%); }

/* ══════════ الحضن ══════════ */
#hug { padding: 0; overflow: hidden; }
.hug-bg { position: absolute; inset: 0; }
.hug-bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.5) saturate(.9);
  transform: scale(1.15);
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.15) translate(0,0); }
  to { transform: scale(1.02) translate(0, 2%); }
}
.hug-quote {
  position: relative; z-index: 2;
  font-family: var(--heading);
  font-size: clamp(24px, 6.4vw, 42px);
  line-height: 2.1;
  text-shadow: 0 3px 22px rgba(0,0,0,.9);
}
.hug-quote p { opacity: 0; transform: translateY(20px); transition: opacity 1.4s ease, transform 1.4s ease; }
.hug-quote p:nth-child(2) { transition-delay: 1.1s; color: var(--pink); }
#hug.visible .hug-quote p { opacity: 1; transform: translateY(0); }

/* ══════════ نفس الاتنين ══════════ */
.tn-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2.5vw, 26px);
  width: 100%; max-width: 640px;
}
.polaroid.tn {
  padding: 8px 8px 34px;
  max-width: none;
  flex: 1 1 0;
  min-width: 0;
  opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease;
}
.polaroid.tn img { filter: none; }
.tn-now img { aspect-ratio: 3/3.8; object-fit: cover; object-position: center 30%; }
.polaroid.tn .polaroid-caption { margin-top: 8px; font-size: clamp(13px, 3.4vw, 18px); opacity: 1; transition: none; }
#thennow { overflow-x: clip; }
.tn-then { transform: translateX(26px) rotate(-7deg); }
.tn-now { transform: translateX(-26px) rotate(6deg); }
#thennow.visible .tn-then { opacity: 1; transform: translateX(0) rotate(-3.5deg); }
#thennow.visible .tn-now { opacity: 1; transform: translateX(0) rotate(3deg); }
.tn-heart { width: clamp(26px, 7vw, 54px); height: clamp(26px, 7vw, 54px); flex: 0 0 auto; }
.tn-heart path { fill: var(--pink); stroke: #2b1a1a; stroke-width: 3; stroke-linejoin: round; }
#thennow.visible .tn-heart { animation: heartbeat 1.1s ease-in-out infinite; }
.tn-text { margin-top: 38px; transition-delay: .9s; }
#thennow.visible .tn-text { opacity: 1; transform: translateY(0); }

/* ══════════ ولسه بنجمع صور ══════════ */
#memories { padding-left: 0; padding-right: 0; overflow: hidden; }
.strip-sub { color: var(--ink-dim); font-size: clamp(15px, 4vw, 19px); margin: -22px 22px 30px; }
.strip {
  display: flex; align-items: center;
  gap: 20px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 14px 10vw 26px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip-card {
  flex: 0 0 auto;
  width: min(62vw, 290px);
  background: #fbf6ea;
  padding: 9px 9px 30px;
  border-radius: 4px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  scroll-snap-align: center;
  cursor: pointer;
  transition: transform .3s ease;
}
.strip-card:nth-child(odd) { transform: rotate(-2deg); }
.strip-card:nth-child(even) { transform: rotate(2deg); }
.strip-card:active { transform: scale(.97); }
.strip-card img {
  display: block; width: 100%;
  aspect-ratio: 3/4; object-fit: cover;
  border-radius: 2px;
  pointer-events: none;
}
.strip-cap {
  font-family: var(--heading);
  color: #6b543f;
  font-size: 15px;
  text-align: center;
  margin-top: 9px;
  min-height: 20px;
}
.strip-cap svg { width: 16px; height: 16px; vertical-align: middle; }
.strip-cap svg path { fill: var(--pink-deep); stroke: none; }
.strip-hint { color: var(--ink-dim); font-size: 14px; margin-top: 4px; animation: hintSlide 2.2s ease-in-out infinite; }
@keyframes hintSlide { 0%,100% { transform: translateX(0); opacity:.7; } 50% { transform: translateX(8px); opacity:1; } }

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12,8,7,.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 5vw;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 88dvh;
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0,0,0,.8);
}
.lb-close {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px;
  color: var(--ink); font-size: 26px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(244,233,218,.12);
  display: flex; align-items: center; justify-content: center;
}

/* صورة جوه التايم لاين */
.t-photo {
  display: block;
  width: min(56vw, 230px);
  margin-top: 14px;
  padding: 7px 7px 22px;
  background: #fbf6ea;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transform: rotate(-2deg);
}
.t-photo img { display: block; width: 100%; border-radius: 2px; }

/* ══════════ الجواب ══════════ */
.paper {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  max-width: 560px;
  width: 100%;
  border-radius: 6px;
  padding: 56px 30px 40px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform: rotate(1.2deg);
  background-image: repeating-linear-gradient(transparent 0 34px, rgba(74,56,44,.08) 34px 35px);
}
.paper-heart {
  position: absolute; top: -24px; right: 50%; transform: translateX(50%) rotate(-6deg);
  width: 52px; height: 52px;
}
.paper-heart path { fill: var(--pink-deep); stroke: #2b1a1a; stroke-width: 3; stroke-linejoin: round; }
#letterText {
  font-family: var(--heading);
  font-size: clamp(17px, 4.6vw, 22px);
  line-height: 34.5px;
  text-align: right;
  white-space: pre-wrap;
  min-height: 240px;
}
#letterText::after { content: '|'; opacity: 0; }
#letterText.typing::after { opacity: 1; animation: blink .8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ══════════ العدّاد ══════════ */
.count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.6vw, 14px);
  width: 100%;
  max-width: 480px;
}
.count-cell {
  background: var(--bg-2);
  border: 1px solid rgba(246,195,208,.18);
  border-radius: 16px;
  padding: 18px 6px 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,.35);
}
.count-num {
  font-family: var(--heading);
  font-size: clamp(22px, 7.5vw, 40px);
  color: var(--pink);
  font-variant-numeric: tabular-nums;
}
.count-cell:nth-child(2) .count-num { color: var(--blue); }
.count-cell:nth-child(3) .count-num { color: var(--yellow); }
.count-cell:nth-child(5) .count-num { color: var(--blue); }
.count-cell:nth-child(6) .count-num { color: var(--yellow); }
.count-label { font-size: 14px; color: var(--ink-dim); margin-top: 4px; }
.fineprint { margin-top: 26px; color: var(--ink-dim); font-size: 14.5px; opacity: .85; }

/* ══════════ الختام ══════════ */
#finale { background: radial-gradient(ellipse at 50% 60%, #241a17 0%, var(--bg) 72%); }
.names {
  font-family: var(--heading);
  font-size: clamp(44px, 12vw, 84px);
  display: flex; align-items: center; gap: 18px;
}
.mid-heart { width: .8em; height: .8em; display: inline-block; }
.mid-heart svg { width: 100%; height: 100%; animation: heartbeat 1.1s ease-in-out infinite; }
.mid-heart path { fill: var(--pink); stroke: #2b1a1a; stroke-width: 3; stroke-linejoin: round; }
.finale-line {
  font-family: var(--heading);
  font-size: clamp(22px, 6vw, 34px);
  color: var(--yellow);
  margin-top: 18px;
}
.tap-hint { color: var(--ink-dim); margin-top: 46px; font-size: 15px; animation: tapFloat 2s ease-in-out infinite; }
@keyframes tapFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

@media (max-width: 420px) {
  .scene { padding: 10vh 16px; }
  .names { gap: 10px; }
}

@media (max-height: 700px) {
  .scene { padding: 7vh 16px; }
  .scene-title { margin-bottom: 26px; }
}

/* ══════════ رسالة النهاردة ══════════ */
.daily-btn {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(246,195,208,.45);
  background: rgba(23,17,16,.55); backdrop-filter: blur(6px);
  font-size: 20px; cursor: pointer; display: none;
  align-items: center; justify-content: center;
  animation: heartbeat 1.6s ease-in-out infinite;
}
.daily-btn.show { display: flex; }
.daily {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(12,8,7,.82); backdrop-filter: blur(5px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.daily.open { display: flex; }
.daily-card {
  position: relative;
  background: var(--paper); color: var(--paper-ink);
  width: 100%; max-width: 420px;
  border-radius: 6px;
  padding: 46px 26px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
  transform: rotate(-1deg);
  background-image: repeating-linear-gradient(transparent 0 34px, rgba(74,56,44,.08) 34px 35px);
  text-align: center;
  animation: dailyIn .6s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes dailyIn { from { opacity: 0; transform: rotate(-1deg) translateY(30px) scale(.94); } to { opacity: 1; transform: rotate(-1deg) translateY(0) scale(1); } }
.daily-head { font-family: var(--heading); font-size: 24px; color: #a44a66; }
.daily-date { font-size: 13.5px; color: #8b7360; margin-top: 4px; }
.daily-text {
  font-family: var(--heading);
  font-size: clamp(18px, 4.8vw, 23px);
  line-height: 34.5px;
  margin: 22px 0 26px;
  white-space: pre-wrap;
}
.daily-ok {
  font-family: var(--body); font-weight: 600; font-size: 16px;
  color: #2b1a1a; background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  border: none; border-radius: 999px; padding: 11px 32px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(239,159,182,.35);
}