@font-face {
  font-family: "Tahrir";
  src: url("../fonts/tahrir.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #e6e6e5;
  --ink: #171310;
  --ink-2: #5a524d;
  --ink-3: #8c837d;
  --red: #971d1f;
  --line: rgba(23, 19, 16, .18);
  --stage-h: 42svh;        /* دو پنجم بالای صفحه: عینک */
  --pad: 9vw;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Tahrir", Tahoma, sans-serif;
  line-height: 1.95;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p, dl, dd, ol, ul { margin: 0; padding: 0; }
.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- صحنه‌ی عینک ---------- */
.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--stage-h);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: height .7s cubic-bezier(.4, 0, .2, 1);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  opacity: 0;
  transition: opacity .35s ease;
}
.vid.on { opacity: 1; }
.stage.final { height: 60svh; }
.stage.final .vid { object-position: center 74%; }

/* ---------- ضرب‌های متن ---------- */
main {
  position: relative;
  z-index: 1;
  padding-top: var(--stage-h);
}
.beat {
  min-height: 46svh;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
}
.beat.hold { min-height: 40svh; }
.beat.tight { min-height: 42svh; }
.b-in {
  width: 100%;
  max-width: 34rem;
  margin-inline-start: auto;   /* راست‌چین، مثل پوستر */
  text-align: start;
}
.js .b-in { opacity: 0; will-change: opacity, transform; }

/* عنوان */
.title { display: block; }
.title img { margin-inline-start: auto; }
.title img + img { margin-top: -1.2%; }
.eqt { margin: 5% 0 0 auto; width: 72%; }
.t-beat .title img:nth-child(1) { width: 80%; }
.t-beat .title img:nth-child(2) { width: 50%; }
.t-beat .title img:nth-child(3) { width: 65%; }
.t-beat .title img:nth-child(4) { width: 72%; }

/* عوامل */
h2 {
  color: var(--red);
  font-size: 1rem;
  margin-bottom: 1.2em;
}
.crs { display: block; }
.cr { margin-bottom: 1.1em; }
.cr:last-child { margin-bottom: 0; }
.cr dt {
  color: var(--ink-3);
  font-size: .82rem;
  line-height: 1.5;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
.cr dd {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1.55;
}
.tight .cr { margin-bottom: .7em; }
.tight .cr dd { font-size: clamp(1rem, 4.2vw, 1.25rem); }

/* تشکر */
.names {
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  line-height: 1.95;
  color: var(--ink-2);
}
.names.close { color: var(--ink); line-height: 2.1; }

/* سیر نمایش */
.path {
  list-style: none;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 18px;
  margin-inline-start: 4px;
}
.path.cont { position: relative; }
.path.cont::before {           /* ادامه‌ی خط از ضرب قبلی */
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: -6vh;
  height: 6vh;
  border-inline-start: 1px solid var(--line);
}
.path li { position: relative; margin-bottom: 1.6em; }
.path li:last-child { margin-bottom: 0; }
.path li::before {
  content: "";
  position: absolute;
  inset-inline-start: -22px;
  top: .7em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
}
.path li.now::before { background: var(--red); }
.path span { display: block; }
.yr { color: var(--red); font-size: .95rem; }
.pl { font-size: clamp(1.05rem, 4.4vw, 1.3rem); line-height: 1.5; }
.cst, .nt, .fine {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: .8rem;
  line-height: 1.9;
  color: var(--ink-3);
}
.nt { color: var(--ink-3); }
.aw {
  margin-top: .6em;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--red);
  color: var(--red);
  font-size: .92rem;
  line-height: 1.8;
}
.fine { margin-top: 1.4em; }

/* نقش‌مایه‌ها */
.m-beat .b-in { display: flex; justify-content: flex-start; }
.motif { width: 58%; max-width: 260px; }

/* یادگاری‌ها */
.prompt {
  font-size: clamp(1.15rem, 4.8vw, 1.4rem);
  line-height: 1.95;
}
.note {
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: clamp(.98rem, 4vw, 1.1rem);
  line-height: 2.1;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note::before {
  content: "";
  display: block;
  width: 22px; height: 1px;
  background: var(--red);
  margin-bottom: 12px;
}
.link-btn, .send, .close {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}
.link-btn { color: var(--red); border-bottom: 1px solid var(--red); padding: 4px 0; font-size: 1rem; }
.link-btn:focus-visible, .send:focus-visible, .close:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}
.writer { position: relative; }
.lbl {
  display: block;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: .8rem; color: var(--ink-3); margin-bottom: 10px;
}
.paper { background: rgba(255,255,255,.5); border: 1px solid var(--line); padding: 14px 16px; }
.paper:focus-within { border-color: var(--red); }
.paper textarea {
  width: 100%; border: 0; background: transparent; resize: vertical;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 1rem; line-height: 2; color: var(--ink); outline: none; padding: 0;
}
.hp { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.wf { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 14px; }
.counter { font-family: "Vazirmatn", Tahoma, sans-serif; font-size: .75rem; color: var(--ink-3); }
.send { background: var(--red); color: #efeeec; padding: 9px 20px; font-size: 1rem; }
.send[disabled] { opacity: .5; cursor: default; }
.send-state { margin-top: 10px; font-family: "Vazirmatn", Tahoma, sans-serif; font-size: .82rem; color: var(--ink-2); min-height: 1.4em; }

/* پایان */
.beat.end { min-height: 100svh; align-items: flex-end; padding-top: 62svh; padding-bottom: calc(5vh + env(safe-area-inset-bottom, 0px)); }
.end-in { display: flex; flex-direction: column; align-items: center; gap: 3vh; margin-inline: auto; }
.showinfo { width: 78%; max-width: 340px; }
.ticket { display: block; width: 36%; max-width: 150px; }

/* بخش «همه‌ی یادگاری‌ها» */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-back { position: absolute; inset: 0; background: rgba(23,19,16,.5); }
.sheet-body {
  position: absolute; inset: auto 0 0 0;
  max-height: 86svh; background: var(--bg);
  border-top: 2px solid var(--ink);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h3 { font-size: 1.05rem; }
.close { color: var(--ink-2); font-size: .9rem; border-bottom: 1px solid var(--line); }
.sheet-scroll { overflow-y: auto; padding: 22px 20px 36px; -webkit-overflow-scrolling: touch; }
.sheet-scroll .note { margin-bottom: 28px; }
body.locked { overflow: hidden; }

/* دسکتاپ: همان چیدمان، فقط پهن‌تر */
@media (min-width: 820px) {
  :root { --stage-h: 44svh; --pad: 6vw; }
  .b-in { max-width: 30rem; margin-inline-end: 8vw; }
  .beat { min-height: 50svh; }
  .motif { max-width: 220px; }
  .vid { object-position: center 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .vid { transition: none; }
  .js .b-in { opacity: 1 !important; transform: none !important; }
}