/* ============================================================
   Paper surfaces, ornaments, scroll reveals
   ============================================================ */

/* ---- Ambient ----
   A warm breath across the page so the off-white never reads as flat screen
   white, and so the parchment cards sit in something rather than on nothing. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90rem 60rem at 50% -18%, rgba(137, 99, 69, 0.1), transparent 62%),
    radial-gradient(56rem 44rem at 6% 84%, rgba(129, 58, 39, 0.06), transparent 62%),
    radial-gradient(48rem 38rem at 96% 28%, rgba(25, 44, 61, 0.035), transparent 62%);
}

/* Paper tooth.
   The dark theme used `overlay`, which darkens over black. Over off-white the
   same blend lightens and the texture disappears, so this is `multiply`. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Paper surface ----
   Replaces the old glass. A blurred translucent panel on a light ground reads
   as a smudge; a sheet lifted a hair off the page reads as stationery. */

.paper {
  position: relative;
  background: var(--paper-bg);
  border: 1px solid var(--paper-border);
  border-radius: 3px;
  box-shadow: var(--paper-shadow);
  overflow: hidden;
}

/* A single hairline set in from the edge — the way a printed card is ruled. */
.paper::before {
  content: "";
  position: absolute;
  inset: clamp(0.5rem, 1.3vw, 0.85rem);
  pointer-events: none;
  border: 1px solid rgba(var(--ch-ink), 0.07);
  border-radius: 2px;
}

/* ---- Ornaments ---- */

.ornament {
  display: block;
  margin-inline: auto;
  opacity: 0.75;
}

.ornament--divider {
  width: min(20rem, 74%);
  height: auto;
  margin-block: clamp(1.1rem, 2.4vw, 1.9rem);
}

.ornament--corner {
  position: absolute;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  opacity: 0.4;
}

.ornament--corner-br {
  top: auto;
  inset-inline-start: auto;
  bottom: 0.5rem;
  inset-inline-end: 0.5rem;
  transform: rotate(180deg);
}

[dir="rtl"] .ornament--corner {
  transform: scaleX(-1);
}

[dir="rtl"] .ornament--corner-br {
  transform: rotate(180deg) scaleX(-1);
}

/* ---- Motif ----
   The watercolour illustrations. Sized in rem so they stay near their native
   resolution — they are 190-400px wide and blur if pushed much past that. */

.motif {
  display: block;
  margin-inline: auto;
  height: auto;
}

.motif--mark {
  width: clamp(4.5rem, 14vw, 6.5rem);
}

.motif--feature {
  width: clamp(7rem, 24vw, 11rem);
}

/* Background wash: large, faint, and behind everything in its section. */
.motif--wash {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  /* Was 0.07 with heavy desaturation, which on the old bright ground left the
     symbols invisible. They are meant to be read as ornament, not guessed at. */
  opacity: 0.2;
  filter: grayscale(0.15);
}

/* ---- Accent button ---- */

.btn-accent {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: clamp(1.2rem, 2.6vw, 1.9rem);
  padding: 0.85em 2.1em;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--off-white);
  background: var(--pom);
  border-radius: 2px;
  transition:
    background-color var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
  box-shadow: 0 10px 22px -14px rgba(var(--ch-accent), 0.75);
}

html[lang="ar"] .btn-accent,
html[lang="hy"] .btn-accent {
  letter-spacing: 0.06em;
  text-transform: none;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background: var(--pom-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(var(--ch-accent), 0.9);
}

.btn-accent:active {
  transform: translateY(0);
}

/* ---- Scroll reveal ---- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 2.4rem, 0);
  transition:
    opacity 1s var(--ease-out-expo),
    transform 1.2s var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Children stagger inside a revealed section */
.reveal .section__icon,
.reveal .section__eyebrow,
.reveal .section__title,
.reveal .paper,
.reveal .couple__panel,
.reveal .couple__seal {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 1s var(--ease-out-expo);
}

.reveal.is-visible .section__icon    { transition-delay: 40ms; }
.reveal.is-visible .section__eyebrow { transition-delay: 140ms; }
.reveal.is-visible .section__title   { transition-delay: 240ms; }
.reveal.is-visible .paper,
.reveal.is-visible .couple__panel    { transition-delay: 300ms; }
.reveal.is-visible .couple__seal     { transition-delay: 380ms; }

.reveal.is-visible .paper:nth-of-type(2)       { transition-delay: 420ms; }
.reveal.is-visible .couple__panel:last-of-type { transition-delay: 460ms; }

.reveal.is-visible .section__icon,
.reveal.is-visible .section__eyebrow,
.reveal.is-visible .section__title,
.reveal.is-visible .paper,
.reveal.is-visible .couple__panel,
.reveal.is-visible .couple__seal {
  opacity: 1;
  transform: none;
}

/* ---- Slow ambient rotation for wheels ---- */

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.05); }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal .section__icon,
  .reveal .section__eyebrow,
  .reveal .section__title,
  .reveal .paper,
  .reveal .couple__panel,
  .reveal .couple__seal {
    opacity: 1;
    transform: none;
  }
}