/* ══════════════════════════════════════════════════════════════════════════
   رضا و نغمه — تم نوک‌مدادی + خاکستری + سفید
   Minimal • Shiny • Elegant Animations
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Palette ── */
:root {
  --paper: #f7f5f0;
  --paper-deep: #efe9de;
  --graphite: #2a2a2a;
  --graphite-light: #4a4a4a;
  --ash: #8c8c8c;
  --slate: #5a5a5a;
  --white: #ffffff;
  --mist: #d4d4d4;
  --pencil-wood: #8b6b4f;
  --pencil-lead: #3d3d3d;
  --ink: #1a1a1a;

  --serif: "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --sans: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --latin: "Cormorant Garamond", "Times New Roman", serif;
  --display: "Aref Ruqaa", "Amiri", serif;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --pad-x: clamp(1.5rem, 6vw, 5rem);
  --pad-y: clamp(6rem, 18vw, 14rem);
}

/* ── Base sections ── */
html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.8;
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--graphite); outline-offset: 6px; }

/* Section themes: paper / graphite */
.on-paper  { --fg: var(--graphite); --bg: var(--paper); background: var(--paper); color: var(--graphite); position: relative; }
.on-graphite { --fg: var(--white); --bg: var(--graphite); background: var(--graphite); color: var(--white); }

/* Pencil texture overlay on paper sections */
.on-paper::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 0;
}

.on-graphite::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 0;
}

/* Ampersand styling */
.amp {
  font-family: var(--latin);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

.narrow {
  position: relative;
  width: min(100%, 46rem);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  z-index: 1;
}

/* ── Loader ── */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--graphite);
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
.loader__half {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--graphite);
  transition: transform 1.2s var(--ease-expo);
}
.loader__half--top    { top: 0; }
.loader__half--bottom { bottom: 0; }
.loader__core {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 2rem;
  width: min(80vw, 26rem);
  transition: opacity 0.7s ease;
}
.loader__line {
  width: 100%; height: 1px; background: var(--pencil-lead);
  transform: scaleX(0); transform-origin: left;
  animation: pencilDraw 1.6s var(--ease-expo) 0.3s forwards;
}
.loader__names {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--serif); font-size: clamp(1.8rem, 6vw, 2.6rem);
  opacity: 0;
}
.loader__names span {
  opacity: 0; filter: blur(14px);
  animation: unveil 1.4s var(--ease-expo) forwards;
}
.loader__names span:nth-child(1) { animation-delay: 1s; }
.loader__names span:nth-child(2) { animation-delay: 1.2s; }
.loader__names span:nth-child(3) { animation-delay: 1.4s; }
.loader.is-leaving .loader__core { opacity: 0; }
.loader.is-leaving .loader__half--top    { transform: translateY(-101%); }
.loader.is-leaving .loader__half--bottom { transform: translateY(101%); }
.loader.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes pencilDraw { to { transform: scaleX(1); } }
@keyframes unveil { to { opacity: 1; filter: blur(0); } }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 6rem var(--pad-x) 8rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  display: grid; justify-items: center; gap: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  z-index: 1;
}

.names {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: clamp(0.6rem, 2.4vw, 2rem);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(5rem, 19vw, 13rem);
  line-height: 1.15;
}
.names .amp { font-size: 0.5em; color: var(--ash); }
.names__w {
  display: inline-block;
  background: linear-gradient(105deg, var(--graphite) 0%, var(--graphite) 42%, var(--paper) 50%, var(--graphite) 58%, var(--graphite) 100%);
  background-repeat: repeat-x; background-color: var(--graphite);
  background-size: 300% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0.12em 0.22em; margin: -0.12em -0.22em;
  animation: foil 7s linear infinite;
}
@keyframes foil { to { background-position: 300% 0; } }

/* ── Venue ── */
.venue {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--serif); font-size: clamp(1.1rem, 3vw, 1.3rem); line-height: 1.7;
  color: var(--slate);
}
.venue svg { color: var(--ash); flex-shrink: 0; }
.venue span { display: block; font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 400; color: var(--graphite); }
.venue small { font-size: 0.85em; font-weight: 300; color: var(--ash); margin-top: 0.1rem; }

.when {
  display: flex; align-items: center; gap: 1.4rem;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem); font-weight: 200;
  color: var(--slate);
}
.when i { display: block; width: 3rem; height: 1px; background: var(--mist); }

.count {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(4, 1fr);
  width: min(100%, 30rem);
  border-block: 1px solid rgba(58, 58, 58, 0.12);
  padding-block: 1.4rem;
  z-index: 1;
}
.count__cell { display: grid; justify-items: center; gap: 0.1rem; position: relative; }
.count__val { font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 400; }
.count__lab { font-size: 0.75rem; font-weight: 300; color: var(--ash); text-transform: uppercase; letter-spacing: 0.15em; }

.js .reveal {
  opacity: 0; filter: blur(12px); transform: translateY(2rem) scale(0.97);
  transition: opacity 1.2s var(--ease-expo), filter 1.2s var(--ease-expo), transform 1.4s var(--ease-expo);
}

/* ── Gate / Envelope ── */
.gate {
  color: var(--graphite);
  background: radial-gradient(ellipse at 50% 38%, var(--white) 0%, var(--paper-deep) 45%, var(--paper) 100%);
  position: relative;
}
.gate__from {
  font-family: var(--serif); font-size: clamp(1.9rem, 7vw, 2.7rem); line-height: 1.6;
  text-align: center; display: flex; gap: 0.6rem; align-items: baseline; justify-content: center;
  color: var(--slate);
}
.gate__cta {
  font-family: var(--serif); font-size: clamp(1.6rem, 5.6vw, 2.2rem); text-align: center;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 0.5; } }

.env {
  --w: min(84vw, 27rem);
  position: relative; display: block; width: var(--w); aspect-ratio: 100 / 68;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  perspective: 1500px;
  animation: floatEnv 7s ease-in-out infinite;
}
@keyframes floatEnv { 50% { transform: translateY(-0.55rem) rotate(-0.4deg); } }
.gate.is-open .env { animation: none; }

.env__shadow {
  position: absolute; left: 8%; right: 8%; bottom: -2.4rem; height: 2rem; z-index: 0;
  background: radial-gradient(closest-side, rgba(42,42,42,0.25), transparent); filter: blur(10px);
}
.env > svg, .env__card, .env__flap, .env__seal { position: absolute; display: block; }
.env__back, .env__front { inset: 0; width: 100%; height: 100%; }
.env__back { z-index: 0; filter: drop-shadow(0 1.4rem 1.6rem rgba(0,0,0,0.2)); }
.env__front { z-index: 3; }

.env__card {
  z-index: 2; left: 5%; right: 5%; bottom: 5%; height: 84%;
  background: linear-gradient(180deg, var(--white), var(--paper-deep));
  box-shadow: 0 0.4rem 1.4rem rgba(0,0,0,0.15);
  display: grid; padding: 0.5rem;
  transition: transform 1.4s var(--ease-expo) 1.15s;
}
.card__in {
  display: grid; align-content: start; justify-items: center; gap: 0.1rem; padding-top: 9%;
  outline: 1px solid rgba(58,58,58,0.2); outline-offset: -0.3rem;
  text-align: center; font-family: var(--serif); line-height: 1.5;
  color: var(--graphite);
}
.card__in small { font-size: clamp(0.7rem, 2.6vw, 0.9rem); color: var(--ash); }
.card__in b { font-weight: 400; font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.3; }
.card__in b .amp { font-size: 0.7em; color: var(--slate); }
.card__in em { font-style: normal; font-size: clamp(0.8rem, 3vw, 1rem); color: var(--slate); margin-top: 0.2rem; }
.gate.is-open .env__card { transform: translateY(-58%); }

.env__flap {
  z-index: 4; left: 0; right: 0; top: 0; height: 52.94%;
  transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform 1.2s var(--ease-expo) 0.4s, z-index 0s linear 0.95s;
}
.flap__f, .flap__b { position: absolute; inset: 0; display: block; backface-visibility: hidden; }
.flap__b { transform: rotateX(180deg); }
.flap__f svg, .flap__b svg { display: block; width: 100%; height: 100%; }
.gate.is-open .env__flap { transform: rotateX(180deg); z-index: 1; }

.env__tag {
  position: absolute; left: 0; right: 0; top: 17%; text-align: center;
  font-family: var(--serif); font-size: clamp(1.15rem, 4.8vw, 1.7rem); line-height: 1.5;
  color: var(--graphite); opacity: 0.85;
}

.env__seal {
  z-index: 6; left: 50%; top: 52.94%; width: 18%; aspect-ratio: 1; translate: -50% -50%;
  filter: drop-shadow(0 0.35rem 0.5rem rgba(0,0,0,0.25));
  transition: transform 0.8s var(--ease-expo), opacity 0.7s ease 0.1s;
  animation: sealGlow 5s ease-in-out infinite;
}
@keyframes sealGlow { 50% { filter: drop-shadow(0 0.35rem 0.6rem rgba(0,0,0,0.4)) brightness(1.15); } }
.env:hover .env__seal { transform: scale(1.08) rotate(-4deg); }
.gate.is-open .env__seal { transform: scale(1.4) rotate(-10deg); opacity: 0; animation: none; }

.sprig { z-index: 7; pointer-events: none; filter: drop-shadow(0 0.5rem 0.6rem rgba(0,0,0,0.12)); transform-origin: 50% 96%; animation: sway 10s ease-in-out infinite; }
.sprig--a { left: -12%; top: -40%; width: 34%; rotate: -12deg; }
.sprig--b { right: -10%; bottom: -32%; width: 36%; rotate: 168deg; animation-delay: -5s; }
@keyframes sway { 50% { transform: rotate(2deg); } }

/* ── Button ── */
.btn {
  border: 1px solid var(--graphite) !important;
  border-radius: 50px;
  padding: 1.1rem 3.4rem;
  background: var(--graphite) !important;
  color: var(--white) !important;
  font-family: var(--sans); font-weight: 300; font-size: 1rem;
  box-shadow: 0 0.8rem 1.8rem -0.6rem rgba(0,0,0,0.3);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, translate 0.4s ease;
  cursor: pointer;
  position: relative; overflow: hidden;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--pencil-wood) 0%, var(--graphite-light) 100%);
  opacity: 0; transition: opacity 0.4s ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.4rem 2.4rem -0.6rem rgba(0,0,0,0.35);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(0.97); }

.js .reveal.in {
  opacity: 1; filter: none; transform: none;
}


/* ── Venue / Place ── */
.place {
  position: relative;
  display: grid; justify-items: center; gap: 0.9rem;
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  text-align: center;
  border: 1px solid rgba(58,58,58,0.14);
  border-radius: 1.4rem;
  overflow: hidden; isolation: isolate;
  transition: transform 0.6s var(--ease-spring), border-color 0.6s ease;
  background: var(--white);
}
.place:hover { transform: translateY(-4px); border-color: var(--graphite); }
.place__pin { transition: transform 0.8s var(--ease-soft); }
.place:hover .place__pin { transform: translateY(-4px); }
.place__name { font-family: var(--serif); font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.4; color: var(--graphite); }
.place__addr { font-weight: 200; font-size: clamp(0.95rem, 2.6vw, 1.1rem); line-height: 2.1; max-width: 32rem; color: var(--slate); }
.place__go {
  margin-top: 0.6rem; font-size: 0.9rem; font-weight: 300;
  padding-bottom: 0.15rem; border-bottom: 1px solid currentColor; color: var(--ash);
}

/* ── Countdown cells ── */
.count__cell {
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  background: var(--white);
  border: 1px solid rgba(58,58,58,0.1);
  backdrop-filter: blur(8px);
}

/* ── RSVP Form ── */
.rsvp, .memories { padding: var(--pad-y) 0; position: relative; z-index: 1; }
.form { display: grid; gap: 2.2rem; }
.field { position: relative; padding-top: 1.5rem; }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  padding: 0.5rem 0 0.7rem;
  font-size: 1.1rem; font-weight: 300;
  transition: border-color 0.5s ease;
  resize: none; overflow: hidden;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--graphite);
}
.field > label {
  position: absolute; inset-inline-start: 0; top: 2.1rem;
  font-size: 1.05rem; font-weight: 200; color: var(--slate);
  pointer-events: none;
  transition: top 0.5s var(--ease-soft), font-size 0.5s var(--ease-soft);
}
.field:has(input:focus, textarea:focus, input:not(:placeholder-shown), textarea:not(:placeholder-shown)) > label {
  top: 0; font-size: 0.8rem; color: var(--graphite);
}
.field--static > label { position: static; display: block; font-size: 0.8rem; margin-bottom: 0.2rem; color: var(--slate); }
.field--static select { appearance: none; cursor: pointer; background: none; }

.choices { border: 0; display: grid; gap: 0.4rem; margin-block: 0.6rem; }
.choice {
  display: block; cursor: pointer;
  font-family: var(--serif); font-size: clamp(1.4rem, 4.4vw, 1.8rem); line-height: 1.8;
  color: var(--slate);
  transition: color 0.6s ease, padding 0.6s var(--ease-soft);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: inline-block; padding-bottom: 0.1rem;
  background: linear-gradient(currentColor, currentColor) no-repeat bottom right / 0 1px;
  transition: background-size 0.8s var(--ease);
}
.choice:has(input:checked) { color: var(--graphite); padding-inline-start: 1.4rem; }
.choice:has(input:checked) span { background-size: 100% 1px; }
.choice:has(input:focus-visible) span { outline: 1px solid var(--graphite); outline-offset: 6px; }

.form:has(#rNo:checked) .companions { display: none; }

.form__error { font-size: 0.95rem; text-align: center; border-bottom: 1px solid currentColor; justify-self: center; padding-bottom: 0.2rem; color: var(--graphite); }
.form__foot { display: grid; justify-items: center; margin-top: 1rem; }

.done { text-align: center; display: grid; gap: 0.5rem; padding-block: 3rem; animation: unveil 1.6s var(--ease-soft) both; filter: blur(14px); opacity: 0; }
.done__title { font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.8rem); }
.done__text { font-weight: 200; color: var(--slate); }

/* Backward-compatible aliases for existing HTML classes */
.on-dark  { --fg: var(--white); --bg: var(--graphite); background: var(--graphite); color: var(--white); position: relative; }
.on-light { --fg: var(--graphite); --bg: var(--paper); background: var(--paper); color: var(--graphite); position: relative; }

/* ── Memories / Upload ── */
.drop {
  display: grid; justify-items: center; gap: 0.3rem;
  padding: clamp(2rem, 8vw, 4rem) 1.5rem;
  text-align: center; cursor: pointer;
  border: 1px solid rgba(58,58,58,0.16);
  background: var(--white);
  border-radius: 1.6rem;
  transition: all 0.6s var(--ease-soft);
}
.drop svg { margin-bottom: 1rem; color: var(--ash); transition: transform 0.8s var(--ease-soft), color 0.6s; }
.drop:hover, .drop:focus-visible, .drop.is-over {
  border-color: var(--graphite);
  background: var(--paper-deep);
  transform: translateY(-4px);
}
.drop:hover svg, .drop.is-over svg { transform: translateY(-6px); color: var(--graphite); }
.drop__main { font-family: var(--serif); font-size: clamp(1.3rem, 4vw, 1.7rem); }
.drop__sub { font-size: 0.95rem; font-weight: 200; color: var(--slate); }
.hint { margin-top: 1rem; text-align: center; font-size: 0.82rem; font-weight: 200; color: var(--ash); }

.queue { display: grid; margin-top: 2.5rem; }
.queue:empty { display: none; }
.item {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.2rem; align-items: center;
  padding-block: 1.1rem;
  border-top: 1px solid rgba(58,58,58,0.1);
  animation: itemIn 0.8s var(--ease-soft) both;
  filter: blur(8px); opacity: 0;
}
.item__thumb { width: 4.5rem; aspect-ratio: 1; object-fit: cover; display: block; background: var(--graphite); filter: grayscale(1); border-radius: 0.6rem; }
.item__body { min-width: 0; display: grid; gap: 0.5rem; }
.item__name { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; }
.item__meta { font-size: 0.78rem; font-weight: 200; color: var(--slate); }
.bar { height: 1px; background: rgba(58,58,58,0.12); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--graphite); transform: scaleX(0); transform-origin: right; transition: transform 0.25s linear; }
.item__act { background: none; border: 0; cursor: pointer; font-size: 0.85rem; font-weight: 200; color: var(--slate); padding: 0.4rem 0.2rem; transition: color 0.4s; }
.item__act:hover { color: var(--graphite); }
.item.is-done .item__meta { color: var(--graphite); }

/* ── CD Player ── */
.cdwrap { display: grid; justify-items: center; gap: 1.1rem; }
.cd {
  --s: min(66vw, 19rem);
  position: relative; display: block; width: var(--s); aspect-ratio: 1;
  border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--graphite);
  filter: drop-shadow(0 1rem 1.5rem rgba(0,0,0,0.1));
  transition: transform 0.6s var(--ease-soft);
}
.cd:hover { transform: scale(1.03); }
.cd svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cd__disc { animation: cdSpin 8s linear infinite; animation-play-state: paused; }
.cd.is-playing .cd__disc { animation-play-state: running; }
@keyframes cdSpin { to { transform: rotate(360deg); } }

.cd__sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 25deg, transparent 0 6%, rgba(255,255,255,0.34) 13%, transparent 21% 50%, rgba(255,255,255,0.26) 63%, transparent 71%);
  -webkit-mask: radial-gradient(circle, transparent 17%, #000 18%); mask: radial-gradient(circle, transparent 17%, #000 18%);
}
.cd__ripple { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.cd__ripple::before, .cd__ripple::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(58,58,58,0.3); opacity: 0; animation: ripple 4.2s ease-out infinite;
}
.cd__ripple::after { animation-delay: 2.1s; }
.cd.is-playing .cd__ripple::before, .cd.is-playing .cd__ripple::after { animation-duration: 2.8s; }
.cd.is-playing .cd__ripple::after { animation-delay: 1.4s; }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.4); opacity: 0; } }

.cd .i-pause { display: none; }
.cd.is-playing .i-pause { display: block; }
.cd.is-playing .i-play { display: none; }

.cd__cap { font-family: var(--serif); font-size: clamp(1.1rem, 3.6vw, 1.35rem); text-align: center; min-height: 2em; color: var(--slate); }
.eq { display: flex; align-items: flex-end; gap: 4px; height: 1.1rem; opacity: 0; transition: opacity 0.6s ease; margin-top: -0.4rem; }
.eq b { display: block; width: 2px; height: 100%; background: var(--graphite); transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq b:nth-child(2) { animation-delay: -0.3s; } .eq b:nth-child(3) { animation-delay: -0.6s; }
.eq b:nth-child(4) { animation-delay: -0.15s; } .eq b:nth-child(5) { animation-delay: -0.45s; }
.cdwrap:has(.is-playing) .eq { opacity: 0.9; }
@keyframes eq { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(1); } }

/* ── Deck / Gallery ── */
.deck { width: min(80vw, 22rem); padding-block: 0.7rem; }
.deck__frame { aspect-ratio: 3/4; height: auto; box-shadow: 0 0 0 0.6rem var(--white), 0 2rem 4rem rgba(0,0,0,0.15); border-radius: 0.8rem; }

@media (min-width: 64rem) {
  .names { font-size: clamp(6rem, 10.5vw, 9.5rem); flex-wrap: nowrap; }
  .cd { --s: min(30vw, 22rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cd__disc, .cd__ripple::before, .cd__ripple::after, .eq b, .sprig, .env, .env__seal, .gate__cta { animation: none !important; }
  .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   تکمیل بخش‌های جاافتاده
   فقط چیدمان و رفتار؛ رنگ‌ها، فونت‌ها و حس کلی همان تم بالاست.
   ══════════════════════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }
html.loading, html.gated { overflow: hidden; }

/* ── Loader: متن روی دو نیمهٔ گرافیتی باید روشن باشد ── */
.loader__core { color: var(--white); }
.loader__line { background: rgba(255,255,255,0.55); }
.loader__names .amp { color: var(--ash); }

/* ── Effects canvas / progress / spotlight ── */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }

.progress { display: none; }
.sd .progress {
  display: block; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 80;
  background: #fff; mix-blend-mode: difference;
  transform-origin: right; transform: scaleX(0);
  animation: grow linear both; animation-timeline: scroll(root);
}
@keyframes grow { to { transform: scaleX(1); } }

.spot {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.09), transparent 65%);
  transition: opacity 0.8s ease;
}
.spot.on { opacity: 1; }

/* ── Grain ── */
.grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.on-light .grain { opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.on-dark  .grain { opacity: 0.06; mix-blend-mode: screen;   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ── Gate (پاکت) ── */
.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
}
.gate.is-in { opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease), visibility 0s; }
.gate.is-leaving {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1.5s var(--ease), visibility 0s linear 1.5s;
}
.gate.is-gone { display: none; }
.gate__stage {
  display: grid; justify-items: center; gap: clamp(2.6rem, 9vw, 3.8rem);
  padding: 1.5rem; max-width: 100%;
  opacity: 0; transform: translateY(1.6rem) scale(0.97);
  transition: opacity 1.2s var(--ease-expo) 0.15s, transform 1.4s var(--ease-expo) 0.15s;
}
.gate.is-in .gate__stage { opacity: 1; transform: none; }
.gate.is-leaving .gate__stage {
  transform: scale(1.1); filter: blur(5px);
  transition: transform 1.7s var(--ease-expo), filter 1.2s ease;
}

/* ── Hero ── */
.hero.on-light {
  background: radial-gradient(ellipse at 50% 32%, var(--white) 0%, var(--paper) 58%, var(--paper-deep) 100%);
}
.hero__inner { width: 100%; }
.hero__text { display: grid; justify-items: center; gap: clamp(1.1rem, 3vw, 1.7rem); }
.venue { flex-wrap: wrap; justify-content: center; row-gap: 0; }
.venue small { flex-basis: 100%; text-align: center; }

.orn {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(150vw, 62rem); height: auto;
  color: var(--graphite); opacity: 0.08; pointer-events: none;
  translate: calc(-50% + var(--px, 0) * -14px) calc(-50% + var(--py, 0) * -14px);
  animation: spinSlow 180s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

.aurora {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 34% at 28% 28%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(34% 30% at 76% 68%, rgba(140,140,140,0.16), transparent 70%);
  filter: blur(28px);
  animation: aurora 20s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(4%, 3%, 0) scale(1.08); } }

.hero__cue {
  position: absolute; left: 50%; bottom: 2.2rem; z-index: 1;
  width: 1px; height: 3.4rem; translate: -50% 0;
  background: linear-gradient(var(--graphite), transparent);
  opacity: 0.4; transform-origin: top;
  animation: cue 2.6s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: scaleY(0.25); opacity: 0.15; } 50% { transform: scaleY(1); opacity: 0.45; } }

/* ورود آرام محتوای صفحهٔ اول بعد از باز شدن پاکت */
.js .hero__text > *, .js .cdwrap, .js .count { opacity: 0; filter: blur(12px); translate: 0 1.4rem; }
.is-ready .hero__text > *, .is-ready .cdwrap, .is-ready .count { animation: heroIn 1.6s var(--ease-expo) forwards; }
.is-ready .hero__text .names { animation-delay: 0.15s; }
.is-ready .hero__text .when  { animation-delay: 0.55s; }
.is-ready .hero__text .venue { animation-delay: 0.75s; }
.is-ready .cdwrap            { animation-delay: 0.95s; }
.is-ready .count             { animation-delay: 1.15s; }
@keyframes heroIn { to { opacity: 1; filter: blur(0); translate: 0 0; } }

/* شمارش معکوس */
.count { gap: clamp(0.4rem, 1.6vw, 0.8rem); }
.count__cell > b {
  font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 400;
  line-height: 1.3; font-variant-numeric: tabular-nums;
}
.count__cell > span { font-size: 0.75rem; font-weight: 300; color: var(--ash); letter-spacing: 0.15em; }
.roll { display: inline-block; animation: roll 0.7s var(--ease) both; }
@keyframes roll { from { opacity: 0; transform: translateY(0.5em); filter: blur(4px); } }

/* ── Titles / rules ── */
.title {
  font-family: var(--serif); font-weight: 400; text-align: center;
  font-size: clamp(2.1rem, 7vw, 3.5rem); line-height: 1.5; text-wrap: balance;
}
.lede { text-align: center; font-weight: 200; color: var(--mist); margin-top: 0.4rem; }
.rule { width: 3.5rem; height: 1px; margin: 1.6rem auto 3rem; background: currentColor; opacity: 0.35; }

/* ── Poem ── */
.poem { padding: var(--pad-y) var(--pad-x); text-align: center; }
.poem__body { display: grid; gap: 0.5rem; justify-items: center; max-width: 36rem; margin-inline: auto; }
.poem .line { font-family: var(--serif); font-size: clamp(1.5rem, 5.2vw, 2.3rem); line-height: 2.1; color: var(--graphite); }
.poem .line--gap { margin-top: 2.4rem; }
.poem .w { display: inline-block; }
.js .poem .w { opacity: 0; filter: blur(8px); transform: translateY(0.5em); transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .poem .line.in .w { opacity: 1; filter: none; transform: none; }
.sd .poem .w {
  transition: none;
  animation: wordIn linear both; animation-timeline: view();
  animation-range: entry calc(4% + var(--i, 0) * 4%) entry calc(52% + var(--i, 0) * 4%);
}
@keyframes wordIn { from { opacity: 0.1; filter: blur(6px); transform: translateY(0.4em); } to { opacity: 1; filter: none; transform: none; } }

/* ── Details ── */
.details { padding: var(--pad-y) var(--pad-x); overflow: hidden; }
.details__wrap { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(2.6rem, 7vw, 4rem); width: min(100%, 46rem); margin-inline: auto; }
.details__when { display: flex; align-items: center; justify-content: center; gap: clamp(1.6rem, 7vw, 4rem); text-align: center; }
.details__label { font-size: 0.85rem; font-weight: 200; letter-spacing: 0.2em; color: var(--mist); opacity: 0.75; }
.details__big { font-family: var(--serif); font-size: clamp(2.8rem, 11vw, 5.6rem); line-height: 1.25; }
.details__sep { width: 1px; height: 5rem; margin: 0; }
.place { color: var(--graphite); width: 100%; }
.cal { display: grid; justify-items: center; }

/* ── Gallery ── */
.gallery { padding: var(--pad-y) 0; overflow: hidden; }
.gallery .deck { margin-inline: auto; position: relative; z-index: 1; }
.deck__frame { position: relative; overflow: hidden; background: var(--graphite-light);
  transform: perspective(1000px) rotateY(calc(var(--tx, 0) * 7deg)) rotateX(calc(var(--ty, 0) * -7deg));
  transition: transform 0.5s var(--ease); }
#deckStage { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.3s var(--ease), visibility 0s linear 1.3s; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 7s linear; }
.slide.is-prev { opacity: 1; visibility: visible; z-index: 1; transition: none; }
.slide.is-on { opacity: 1; visibility: visible; z-index: 2; transition: opacity 1.3s var(--ease); }
.slide.is-on img { transform: scale(1); }
.slide--empty { display: grid; place-items: center; opacity: 1; visibility: visible; font-family: var(--serif); font-size: 1.6rem; color: var(--mist); }
.deck__bars { display: flex; gap: 0.4rem; margin-top: 2rem; }
.dbar { position: relative; flex: 1; height: 1.2rem; padding: 0; border: 0; background: none; cursor: pointer; }
.dbar::before, .dbar i { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; }
.dbar::before { background: rgba(255,255,255,0.25); }
.dbar i { background: #fff; transform: scaleX(0); transform-origin: right; }
.dbar.is-done i { transform: scaleX(1); }
.dbar.is-on i { animation: fill 5s linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.deck__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; }
.deck__count { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.12em; color: var(--mist); }
.deck__count b { font-weight: 400; color: var(--white); }
.deck__nav { display: flex; gap: 0.6rem; }
.deck__nav button {
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35); background: none; color: var(--white); cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s var(--ease-spring);
}
.deck__nav button:hover { background: var(--white); color: var(--graphite); transform: scale(1.06); }

/* ── RSVP / Memories ── */
.field--dark > label { color: var(--mist); }
.on-dark .field:has(input:focus, input:not(:placeholder-shown)) > label { color: var(--white); }
.on-dark .field input:focus { border-bottom-color: var(--white); }
.done__note { margin-top: 0.6rem; font-size: 0.8rem; font-weight: 200; color: var(--ash); }

.on-dark .btn { background: var(--white) !important; border-color: var(--white) !important; color: var(--graphite) !important; box-shadow: 0 0.8rem 1.8rem -0.6rem rgba(0,0,0,0.5); }
.on-dark .drop { color: var(--graphite); }
.on-dark .item { border-top-color: rgba(255,255,255,0.14); }
.on-dark .item__meta, .on-dark .item__act { color: var(--mist); }
.on-dark .item__act:hover { color: var(--white); }
.on-dark .item.is-done .item__meta { color: var(--white); }
.on-dark .bar { background: rgba(255,255,255,0.18); }
.on-dark .bar i { background: var(--white); }
.item.is-error .item__meta { color: #d3a888; text-decoration: underline dashed; text-underline-offset: 0.3em; }
@keyframes itemIn { to { opacity: 1; filter: blur(0); } }

.overall { height: 2px; margin-top: 1.6rem; background: rgba(255,255,255,0.18); overflow: hidden; }
.overall i { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: right; transition: transform 0.25s linear; }

.thanks {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.5rem;
  background: rgba(20,20,20,0.72); backdrop-filter: blur(10px);
  animation: unveil 0.6s ease both; opacity: 0; filter: blur(6px);
}
.thanks__card {
  width: min(100%, 26rem); display: grid; gap: 1rem; justify-items: center; text-align: center;
  padding: clamp(2rem, 7vw, 3rem); border-radius: 1.6rem; background: var(--white); color: var(--graphite);
  box-shadow: 0 2rem 5rem rgba(0,0,0,0.35);
}
.thanks__title { font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.7; }
.thanks__text { font-weight: 200; color: var(--slate); }
.thanks .btn { background: var(--graphite) !important; border-color: var(--graphite) !important; color: var(--white) !important; margin-top: 0.6rem; }

/* ── Footer ── */
.foot { position: relative; padding: clamp(4rem, 12vw, 7rem) var(--pad-x); text-align: center; overflow: hidden; }
.foot__names { position: relative; z-index: 1; font-family: var(--serif); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.6; }
.foot__year { position: relative; z-index: 1; font-size: 0.85rem; letter-spacing: 0.3em; color: var(--ash); }

/* ── Desktop: متن در یک ستون، سی‌دی در ستون دیگر، شمارنده زیرشان ── */
@media (min-width: 64rem) {
  .hero__inner { grid-template-columns: 1fr auto; column-gap: clamp(3rem, 8vw, 8rem); max-width: 80rem; }
  .count { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .orn, .aurora, .hero__cue { animation: none !important; }
  .js .hero__text > *, .js .cdwrap, .js .count { opacity: 1; filter: none; translate: none; animation: none !important; }
  .js .poem .w, .sd .poem .w { opacity: 1; filter: none; transform: none; animation: none; transition: none; }
  .slide, .slide img { transition: none; }
  .dbar.is-on i { animation: none; transform: scaleX(1); }
  .roll { animation: none; }
}