/* ============================================================
   FARHA — online invitations
   Palette keyed to the FARHA logo: warm ivory, soft cream,
   muted antique gold, warm dark typography.
   Motion is deliberately slow and small — luxury, not playful.
   ============================================================ */

:root {
  --ivory: #FAF7F0;
  --ivory-warm: #F6F1E6;
  --cream: #F2EADC;
  --cream-deep: #E9DDC8;

  /* The warm neutrals the hero setting is built from */
  --champagne: #EFE3D0;
  --nude: #E7D9C4;
  --taupe: #D6C6B0;
  --taupe-rgb: 214, 198, 176;

  --gold: #A98544;
  --gold-soft: #C7A868;
  --gold-light: #E0C892;
  --gold-deep: #7C6231;

  --ink: #3A2E23;
  --muted: rgba(58, 46, 35, .66);
  --hairline: rgba(169, 133, 68, .22);
  --hairline-strong: rgba(169, 133, 68, .42);

  --ivory-rgb: 250, 247, 240;
  --ink-rgb: 58, 46, 35;
  --gold-rgb: 169, 133, 68;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  --arabic: 'Amiri', 'Cormorant Garamond', serif;

  /* Layered, warm-tinted shadows read richer than a flat grey drop */
  --shadow-rest: 0 2px 6px rgba(var(--ink-rgb), .04),
                 0 10px 28px rgba(var(--ink-rgb), .06);
  --shadow-lift: 0 6px 14px rgba(var(--ink-rgb), .07),
                 0 30px 64px rgba(var(--ink-rgb), .16),
                 0 0 0 1px rgba(var(--gold-rgb), .18);
  --shadow-float: 0 30px 70px rgba(var(--ink-rgb), .18);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, .14, .3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body[dir="rtl"] { font-family: var(--arabic); }
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3 { font-family: var(--arabic); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(1240px, 100%); margin-inline: auto; }

/* ---------- Atmosphere: paper grain ---------- */

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  animation: grainShift 7s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4px, 3px); }
  40%  { transform: translate(3px, -5px); }
  60%  { transform: translate(-3px, -2px); }
  80%  { transform: translate(4px, 4px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Floating dust ----------
   Seeded by dust.js into any element carrying data-dust. Three depth
   bands per section: the band carries the scroll parallax, each speck
   carries its own slow drift, so nothing here reads as a repeating loop.
   ------------------------------------------------------------------ */

.dust {
  position: absolute;
  inset: 0;
  /* Negative, not 0: every host sets its own z-index and so opens a
     stacking context, and a positioned z-index:0 child would paint above
     the section's static text. -1 keeps the specks above the section
     background and below everything written on it. */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.dust-band {
  position: absolute;
  inset: -8% 0;
  will-change: transform;
}

.dust-speck {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  /* A soft-edged core rather than a flat disc — a hard little dot reads
     as a star, which is the one thing this must not look like. */
  background: radial-gradient(circle,
    rgba(var(--tone), .95) 0%,
    rgba(var(--tone), .5) 46%,
    rgba(var(--tone), 0) 100%);
  filter: blur(var(--blur));
  opacity: var(--o);
  animation-name: dustFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* The drift is small and eases both ways, so the eye reads suspension
   in still air rather than a rising stream. */
@keyframes dustFloat {
  0%   { transform: translate3d(0, 0, 0);                    opacity: calc(var(--o) * .45); }
  30%  {                                                     opacity: var(--o); }
  50%  { transform: translate3d(var(--drift), var(--rise), 0); opacity: calc(var(--o) * .78); }
  72%  {                                                     opacity: calc(var(--o) * .95); }
  100% { transform: translate3d(0, 0, 0);                    opacity: calc(var(--o) * .45); }
}

@media (prefers-reduced-motion: reduce) {
  .dust-speck { animation: none; }
  .dust-band { transform: none !important; }
}

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

body[dir="rtl"] .eyebrow { letter-spacing: .18em; }

.section-sub {
  max-width: 620px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 15px;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px auto 28px;
  color: var(--gold);
  max-width: 260px;
}

.ornament-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
}

.ornament-dot {
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--gold);
  opacity: .8;
}

.ornament-mark { width: 20px; height: 20px; opacity: .85; }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 40px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}

body[dir="rtl"] .btn { letter-spacing: .08em; font-size: 13px; }

.btn:active { transform: translateY(0) scale(.985); transition-duration: .12s; }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color: #FFFDF8;
  box-shadow: 0 8px 22px rgba(var(--gold-rgb), .26);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(var(--gold-rgb), .38);
}

/* Slow light sweep across the primary CTA */
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: sweep 5.5s var(--ease-soft) infinite;
}

@keyframes sweep {
  0%, 55% { left: -60%; }
  100%    { left: 130%; }
}

.btn-wa { width: 16px; height: 16px; flex: none; }

.btn-ghost { border-color: var(--hairline-strong); color: var(--ink); }

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: rgba(var(--gold-rgb), .06);
  transform: translateY(-3px);
}

/* ---------- Navbar ---------- */

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: all .55s var(--ease);
  border-bottom: 1px solid transparent;
}

/* At rest the navbar is transparent over the hero, where the corner
   florals run behind the logo. This soft scrim keeps the mark legible
   without giving the bar a visible edge; it fades out once the solid
   scrolled background takes over. */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ivory-rgb), .82) 0%, rgba(var(--ivory-rgb), 0) 100%);
  transition: opacity .55s var(--ease);
}

.navbar.scrolled::before { opacity: 0; }

.navbar.scrolled {
  background: rgba(var(--ivory-rgb), .86);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: var(--hairline);
  box-shadow: 0 8px 30px rgba(var(--ink-rgb), .05);
}

.nav-inner {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-logo {
  height: 52px; width: auto;
  transition: transform .6s var(--ease), opacity .5s ease;
}

.navbar.scrolled .brand-logo { height: 44px; }
.brand:hover .brand-logo { transform: scale(1.03); opacity: .88; }

.nav-links { display: flex; gap: 34px; }

.nav-links a {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding-bottom: 5px;
  transition: color .45s ease;
}

body[dir="rtl"] .nav-links a { letter-spacing: .04em; font-size: 14px; }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .5s var(--ease);
}

.nav-links a:hover { color: var(--gold-deep); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 14px; }

.lang-toggle {
  background: none;
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  padding: 9px 17px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .45s var(--ease);
}

.lang-toggle:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: rgba(var(--gold-rgb), .07);
  transform: translateY(-1px);
}

.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-burger span {
  display: block; width: 22px; height: 1px;
  background: var(--ink); margin: 5px 0;
  transition: all .45s var(--ease);
}

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Bottom padding reserves the band the card fan occupies so flow
     content can never collide with it. It must stay larger than the
     tallest card's visible height (~230px), or the CTA row lands on
     the fan; the top padding is trimmed to keep the whole hero close to
     one viewport so the fan reads above the fold. */
  padding: clamp(120px, 14vh, 156px) 24px clamp(250px, 31vh, 280px);
  text-align: center;
  overflow: hidden;
  background:
    /* the pool of light the headline sits in */
    radial-gradient(660px 440px at 50% 42%,
      rgba(255, 253, 249, .92) 0%,
      rgba(255, 253, 249, .72) 26%,
      rgba(255, 253, 249, .40) 48%,
      rgba(255, 253, 249, .12) 66%,
      rgba(255, 253, 249, 0) 80%),
    /* champagne warmth blooming down from the top */
    radial-gradient(1250px 720px at 50% -14%, rgba(var(--gold-rgb), .11), transparent 60%),
    /* corners settle into champagne, so the ornament has something to sit on */
    radial-gradient(62% 58% at 0% 0%,     rgba(var(--taupe-rgb), .42), transparent 72%),
    radial-gradient(58% 54% at 100% 0%,   rgba(var(--taupe-rgb), .36), transparent 72%),
    radial-gradient(66% 62% at 0% 100%,   rgba(var(--taupe-rgb), .44), transparent 74%),
    radial-gradient(66% 62% at 100% 100%, rgba(var(--taupe-rgb), .38), transparent 74%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-warm) 46%, var(--champagne) 100%);
}

/* Soft breathing light behind the composition */
.hero-aura {
  position: absolute;
  left: 50%; top: 58%;
  width: min(1000px, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--gold-rgb), .12) 0%, rgba(var(--gold-rgb), .04) 38%, transparent 66%);
  filter: blur(10px);
  pointer-events: none;
  animation: breathe 11s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

/* --- The setting: satin drapes, gypsophila and a few settled petals ---
   One canonical drawing per motif; each instance is the same file mirrored
   and rotated into its corner. The flip lives in --fx / --fy so the shared
   drift keyframes can carry it rather than overwrite it. */

.hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.dec {
  position: absolute;
  height: auto;
  max-width: none;
  --fx: 1; --fy: 1;
  --rot: 0deg;
  --sway: 1.1deg;
  --dx: 6px; --dy: 5px;
  transform: scale(var(--fx), var(--fy)) rotate(var(--rot));
  will-change: transform;
}

@keyframes decDrift {
  0%, 100% { transform: scale(var(--fx), var(--fy)) rotate(var(--rot)) translate(0, 0); }
  50%      { transform: scale(var(--fx), var(--fy)) rotate(calc(var(--rot) + var(--sway)))
                        translate(var(--dx), var(--dy)); }
}

/* Satin — nearly white, so it reads as light falling into the corner
   rather than as an object sitting on top of the page */
.dec-satin {
  width: clamp(250px, 36vw, 560px);
  opacity: 1;
  filter: drop-shadow(0 22px 52px rgba(var(--ink-rgb), .11));
}

.dec-satin-tr {
  top: -6%; right: -8%;
  --fx: -1; --sway: .7deg; --dx: 7px; --dy: 5px;
  animation: decDrift 21s ease-in-out infinite;
}

.dec-satin-bl {
  bottom: -8%; left: -9%;
  --fy: -1; --sway: -.7deg; --dx: 6px; --dy: 6px;
  animation: decDrift 25s ease-in-out infinite;
}

/* Leaf branches, laid over the silk the way they fall in a flat-lay */
.dec-branch {
  width: clamp(160px, 21vw, 320px);
  opacity: .96;
  filter: drop-shadow(0 9px 20px rgba(var(--ink-rgb), .13));
}

.dec-branch-tr {
  top: 13%; right: 3%;
  --fx: -1; --rot: -9deg; --sway: 1.4deg; --dx: 5px; --dy: 6px;
  animation: decDrift 15s ease-in-out infinite;
}

.dec-branch-bl {
  bottom: 6%; left: 1%;
  --fy: -1; --rot: -5deg; --sway: -1.4deg; --dx: 6px; --dy: 5px;
  animation: decDrift 17s ease-in-out infinite;
}

/* Gypsophila, the airiest element — it fills the corner without weight */
.dec-spray {
  width: clamp(270px, 34vw, 500px);
  opacity: .94;
  filter: drop-shadow(0 10px 24px rgba(var(--ink-rgb), .10));
}

.dec-spray-tl {
  top: -1%; left: -8%;
  width: clamp(240px, 29vw, 420px);
  opacity: .95;
  --fy: -1; --rot: 7deg; --sway: -1.1deg; --dx: 7px; --dy: 6px;
  animation: decDrift 18s ease-in-out infinite;
}

.dec-spray-br {
  bottom: 0; right: -5%;
  --fx: -1; --rot: -3deg; --sway: 1.1deg; --dx: 8px; --dy: 6px;
  animation: decDrift 20s ease-in-out infinite;
}

/* Loose petals, kept well outside the headline column */
.dec-petal {
  opacity: .85;
  filter: drop-shadow(0 5px 11px rgba(var(--ink-rgb), .13));
  --sway: 3deg; --dx: 5px; --dy: 7px;
}

.pt-1 { top: 30%;    left: 13%;  width: 34px; --rot: -18deg; animation: decDrift 13s ease-in-out infinite; }
.pt-2 { top: 45%;    left: 6%;   width: 26px; --rot: 24deg;  animation: decDrift 16s ease-in-out infinite reverse; }
.pt-3 { top: 21%;    right: 14%; width: 30px; --rot: 34deg;  animation: decDrift 14s ease-in-out infinite; }
.pt-4 { bottom: 31%; right: 8%;  width: 36px; --rot: -27deg; animation: decDrift 19s ease-in-out infinite reverse; }
.pt-5 { bottom: 24%; left: 17%;  width: 24px; --rot: 11deg;  animation: decDrift 15s ease-in-out infinite; }

/* Four engraved corner ticks — the invitation frame, without boxing the page in */
.hero-frame {
  position: absolute;
  inset: clamp(20px, 3vw, 46px);
  z-index: 3;
  pointer-events: none;
  --tick: rgba(var(--gold-rgb), .34);
  --len: clamp(24px, 3.4vw, 54px);
  background:
    linear-gradient(var(--tick), var(--tick)) left  top    / 1px var(--len) no-repeat,
    linear-gradient(var(--tick), var(--tick)) left  top    / var(--len) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top    / 1px var(--len) no-repeat,
    linear-gradient(var(--tick), var(--tick)) right top    / var(--len) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) left  bottom / 1px var(--len) no-repeat,
    linear-gradient(var(--tick), var(--tick)) left  bottom / var(--len) 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / 1px var(--len) no-repeat,
    linear-gradient(var(--tick), var(--tick)) right bottom / var(--len) 1px no-repeat;
}

.hero-inner { max-width: 800px; position: relative; z-index: 4; }

.hero-title {
  font-size: clamp(46px, 8vw, 96px);
  font-style: italic;
  letter-spacing: -.015em;
  background: linear-gradient(178deg, var(--ink) 30%, #6A5842 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body[dir="rtl"] .hero-title { font-style: normal; letter-spacing: 0; }

.hero-sub {
  max-width: 570px;
  margin: 0 auto 42px;
  color: var(--muted);
  font-size: 16px;
}

.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- Layered floating invitation composition --- */

/* The fan is a background layer pinned to the foot of the hero, not a
   block in the flow — that is what creates the depth behind the type. */
.hero-stage {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: clamp(200px, 28vh, 300px);
  pointer-events: none;
  perspective: 1400px;
  will-change: transform, opacity;
}

/* Card heights are kept under the stage height so the fan can never
   rise into the CTA row sitting above it. */
.float-card {
  position: absolute;
  bottom: -14%;
  left: 50%;
  /* min() against vh keeps the fan from outgrowing the stage band on
     short, wide viewports, where a vw-only size runs taller than the band. */
  width: min(clamp(104px, 11.5vw, 158px), 15vh);
  aspect-ratio: 0.68;
  border-radius: 14px 14px 4px 4px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-float);
  transform-origin: 50% 100%;
  will-change: transform;
  /* --px/--py are written by the parallax script */
  --px: 0px; --py: 0px;
}

.float-card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Each card sits at its own distance, tilt and drift tempo.
   --py is driven by the float keyframes, --px by the pointer parallax. */
.fc-far-left  { transform: translate(calc(-50% - 16rem  + var(--px)), var(--py)) rotate(-13deg) scale(.8); opacity: .58; z-index: 1; animation: floatA 13s ease-in-out infinite; }
.fc-left      { transform: translate(calc(-50% - 9.2rem + var(--px)), var(--py)) rotate(-8deg)  scale(.9); opacity: .82; z-index: 2; animation: floatB 11s ease-in-out infinite; }
.fc-right     { transform: translate(calc(-50% + 9.2rem + var(--px)), var(--py)) rotate(8deg)   scale(.9); opacity: .82; z-index: 2; animation: floatB 12s ease-in-out infinite reverse; }
.fc-far-right { transform: translate(calc(-50% + 16rem  + var(--px)), var(--py)) rotate(13deg)  scale(.8); opacity: .58; z-index: 1; animation: floatA 14s ease-in-out infinite reverse; }

.fc-main {
  width: min(clamp(122px, 13.5vw, 186px), 17vh);
  transform: translate(calc(-50% + var(--px)), var(--py));
  z-index: 3;
  box-shadow: 0 40px 90px rgba(var(--ink-rgb), .24);
  border-radius: 16px 16px 5px 5px;
  animation: floatMain 10s ease-in-out infinite;
}

@keyframes floatA    { 0%,100% { --py: 0px; } 50% { --py: -13px; } }
@keyframes floatB    { 0%,100% { --py: 0px; } 50% { --py: -19px; } }
@keyframes floatMain { 0%,100% { --py: 0px; } 50% { --py: -25px; } }

/* Registering these lets the keyframes interpolate them as lengths
   rather than swapping them at 50%. */
@property --py {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --px {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* Fallback for engines without @property: animate the whole card instead */
@supports not (background: paint(x)) {
  .float-card { animation-name: floatFallback; }
  @keyframes floatFallback {
    0%, 100% { margin-bottom: 0; }
    50%      { margin-bottom: 18px; }
  }
}

.wax-seal {
  position: absolute;
  left: 50%; bottom: 16%;
  width: 46px; height: 46px;
  transform: translateX(-50%);
  color: #F4E4BE;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}

.wax-seal svg { width: 100%; height: 100%; overflow: visible; }
.seal-body { fill: #A9853F; }
.seal-ring { fill: none; stroke: rgba(255, 245, 220, .55); stroke-width: 1; }

/* Gentle shine travelling over the wax */
.wax-seal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .55) 47%, transparent 60%);
  animation: sealShine 6s var(--ease-soft) infinite;
}

@keyframes sealShine {
  0%, 62% { opacity: 0; transform: translateX(-42%) rotate(0deg); }
  72%     { opacity: .95; }
  100%    { opacity: 0; transform: translateX(42%) rotate(0deg); }
}

/* ---------- Sections ---------- */

.section {
  position: relative;
  z-index: 3;
  padding: 130px 24px;
  background: var(--ivory);
}

/* Layered separators instead of a single hard rule */
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
}

.section-collection {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(var(--gold-rgb), .09), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--ivory) 30%);
}

.section-process { background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-warm) 100%); }
.section-why { background: linear-gradient(180deg, var(--ivory-warm) 0%, var(--ivory) 100%); }

.section-head { text-align: center; margin-bottom: 70px; }
.section-head h2 { font-size: clamp(32px, 4.6vw, 54px); }

/* ---------- Collection ---------- */

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 46px 36px;
  max-width: 1160px;
  margin-inline: auto;
}

.tpl-card {
  --accent: var(--gold);
  position: relative;
  background: linear-gradient(180deg, #FFFDF8, var(--ivory));
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-rest);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease);
  transform-style: preserve-3d;
}

/* Soft accent glow blooming behind the card on hover */
.tpl-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  background: radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  opacity: 0;
  z-index: -1;
  filter: blur(14px);
  transition: opacity .7s var(--ease);
}

.tpl-card:hover {
  transform: translateY(-14px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--hairline));
}

.tpl-card:hover::after { opacity: 1; }

.tpl-index {
  position: absolute;
  top: 20px;
  inset-inline-end: 22px;
  z-index: 3;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  transition: opacity .6s var(--ease);
}

.tpl-img {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  /* Portrait like the invitations themselves, anchored to the top so
     each design's face is never cropped. */
  aspect-ratio: 0.62;
  background: var(--cream);
}

.tpl-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.3s var(--ease);
}

.tpl-card:hover .tpl-img img { transform: scale(1.07); }

.tpl-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--accent) 80%, transparent) 100%);
  opacity: 0;
  transition: opacity .7s var(--ease);
}

.tpl-card:hover .tpl-img::after { opacity: 1; }

/* Light sweeping across the artwork on hover */
.tpl-sheen {
  position: absolute;
  top: -60%; bottom: -60%;
  width: 40%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-16deg);
  transition: left .95s var(--ease);
  pointer-events: none;
}

.tpl-card:hover .tpl-sheen { left: 130%; }

.tpl-body { padding: 26px 16px 16px; text-align: center; }

.tpl-name {
  font-size: 28px;
  letter-spacing: .012em;
  margin-bottom: 10px;
}

.tpl-desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
  min-height: 46px;
  margin-bottom: 26px;
  max-width: 30ch;
  margin-inline: auto;
}

.tpl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 13px 28px;
  transition: all .5s var(--ease);
}

body[dir="rtl"] .tpl-btn { letter-spacing: .04em; font-size: 13px; }

.tpl-btn svg { width: 13px; height: 13px; transition: transform .5s var(--ease); }
body[dir="rtl"] .tpl-btn svg { transform: scaleX(-1); }

.tpl-card:hover .tpl-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 34%, transparent);
}

.tpl-card:hover .tpl-btn svg { transform: translateX(4px); }
body[dir="rtl"] .tpl-card:hover .tpl-btn svg { transform: scaleX(-1) translateX(4px); }

/* ---------- Process ---------- */

.process-wrap { position: relative; max-width: 1080px; margin-inline: auto; }

/* Thread drawn between the steps as the section scrolls into view */
.process-thread {
  position: absolute;
  top: 62px;
  left: 11%;
  width: 78%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong) 12%, var(--hairline-strong) 88%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.7s var(--ease);
}

body[dir="rtl"] .process-thread { transform-origin: right center; }
.process-thread.drawn { transform: scaleX(1); }

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}

.process-step {
  position: relative;
  text-align: center;
  padding: 42px 24px 36px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: rgba(255, 253, 248, .72);
  backdrop-filter: blur(3px);
  transition: transform .65s var(--ease), box-shadow .65s var(--ease), border-color .65s var(--ease);
}

.process-step:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-rest);
  border-color: var(--hairline-strong);
}

.process-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--ivory);
  font-family: var(--serif);
  font-size: 26px;
  font-style: italic;
  color: var(--gold);
  transition: all .6s var(--ease);
}

body[dir="rtl"] .process-num { font-style: normal; }

.process-step:hover .process-num {
  background: linear-gradient(140deg, var(--gold-soft), var(--gold));
  border-color: transparent;
  color: #FFFDF8;
  box-shadow: 0 10px 24px rgba(var(--gold-rgb), .3);
}

.process-step h3 { font-size: 22px; margin-bottom: 10px; }
.process-step p { color: var(--muted); font-size: 13.5px; }

/* ---------- Why ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1080px;
  margin-inline: auto;
}

.why-item {
  padding: 38px 30px;
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFDF8, var(--cream));
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-rest);
  transition: transform .65s var(--ease), box-shadow .65s var(--ease), border-color .65s var(--ease);
}

.why-item:hover {
  transform: translateY(-8px);
  border-color: var(--hairline-strong);
  box-shadow: 0 4px 12px rgba(var(--ink-rgb), .05), 0 22px 46px rgba(var(--ink-rgb), .1);
}

.why-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  border: 1px solid var(--hairline-strong);
  color: var(--gold);
  background: rgba(var(--gold-rgb), .06);
  transition: all .6s var(--ease);
}

.why-mark svg { width: 21px; height: 21px; }

.why-item:hover .why-mark {
  color: var(--gold-deep);
  background: rgba(var(--gold-rgb), .14);
  transform: translateY(-2px) rotate(-3deg);
}

.why-item h3 { font-size: 21px; margin-bottom: 10px; }
.why-item p { color: var(--muted); font-size: 13.5px; }

/* ---------- CTA ---------- */

.cta-section {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 130px 24px;
  overflow: hidden;
  background:
    radial-gradient(820px 460px at 50% 118%, rgba(var(--gold-rgb), .2), transparent 66%),
    linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 88%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
}

/* Slow moving paper-light wash */
.cta-light {
  position: absolute;
  inset: -30% -10%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(closest-side, rgba(var(--gold-rgb), .16), transparent 72%);
  background-size: 60% 70%, 45% 55%;
  background-position: 18% 30%, 78% 66%;
  background-repeat: no-repeat;
  animation: wash 17s ease-in-out infinite alternate;
}

@keyframes wash {
  0%   { background-position: 18% 30%, 78% 66%; }
  100% { background-position: 62% 52%, 30% 34%; }
}

.cta-inner { position: relative; z-index: 2; }
.cta-inner h2 { font-size: clamp(32px, 4.6vw, 54px); }
.cta-inner .section-sub { margin-bottom: 38px; }

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 3;
  background: var(--cream);
  border-top: 1px solid var(--hairline-strong);
  padding: 62px 24px 48px;
}

.footer-inner { text-align: center; }

.footer-logo {
  height: 78px; width: auto;
  margin: 0 auto 20px;
  transition: transform .6s var(--ease);
}

.footer-logo:hover { transform: translateY(-3px); }

.footer-note { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.footer-contact { margin-bottom: 14px; }
.footer-contact a { font-size: 13px; letter-spacing: .2em; color: var(--gold-deep); }
.footer-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-copy { color: var(--muted); font-size: 11px; letter-spacing: .18em; }

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(7px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}

.reveal.shown { opacity: 1; transform: none; filter: none; }

/* ---------- Missing-logo helper (disappears once the file exists) ---------- */

.logo-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 46px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  opacity: .7;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .grain, .wax-seal::after, .btn-shine::before { display: none; }
  .hero-aura, .dec, .float-card { animation: none !important; }
  html { scroll-behavior: auto; }
  .process-thread { transform: scaleX(1); }
  * { transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .fc-far-left  { transform: translate(calc(-50% - 15rem  + var(--px)), var(--py)) rotate(-13deg) scale(.74); }
  .fc-far-right { transform: translate(calc(-50% + 15rem  + var(--px)), var(--py)) rotate(13deg)  scale(.74); }
  .fc-left      { transform: translate(calc(-50% - 8.6rem + var(--px)), var(--py)) rotate(-8deg)  scale(.86); }
  .fc-right     { transform: translate(calc(-50% + 8.6rem + var(--px)), var(--py)) rotate(8deg)   scale(.86); }
}

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    top: 80px;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 30px 24px 36px;
    background: rgba(var(--ivory-rgb), .97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hairline);
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: all .5s var(--ease);
  }

  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-burger { display: block; }
  .brand-logo, .navbar.scrolled .brand-logo { height: 40px; }
  .section { padding: 92px 20px; }
  .section-head { margin-bottom: 52px; }
  .dec-petal, .dec-branch-tr { display: none; }
  .dec-spray { opacity: .7; }
  .dec-satin { opacity: .8; }
  .process-thread { display: none; }
  .footer-logo { height: 62px; }
}

@media (max-width: 700px) {
  /* Keep only the trio on small screens so the composition stays calm */
  .fc-far-left, .fc-far-right { display: none; }
  .fc-left  { transform: translate(calc(-50% - 6.2rem + var(--px)), var(--py)) rotate(-9deg) scale(.82); }
  .fc-right { transform: translate(calc(-50% + 6.2rem + var(--px)), var(--py)) rotate(9deg)  scale(.82); }
  .hero-stage { height: clamp(150px, 34vw, 230px); }
  .wax-seal { width: 34px; height: 34px; }

  /* Only the satin and the two sprays survive here — at this width the
     desktop clamp minimums would each cover most of the screen. */
  .dec-branch-bl { display: none; }
  .dec-satin { width: clamp(148px, 46vw, 260px); opacity: .72; }
  .dec-spray { width: clamp(150px, 48vw, 280px); opacity: .6; }
  .dec-spray-tl { width: clamp(140px, 44vw, 250px); opacity: .6; }
  .hero-frame { inset: 14px; --len: 22px; }
}

@media (max-width: 560px) {
  .collection-grid { grid-template-columns: 1fr; max-width: 380px; gap: 34px; }
  .hero { padding-top: 128px; }
  .btn { padding: 15px 32px; }
  .hero-title { font-size: clamp(40px, 11vw, 58px); }
  .dec-satin { width: clamp(130px, 42vw, 190px); opacity: .6; }
  .dec-spray, .dec-spray-tl { width: clamp(126px, 40vw, 185px); opacity: .5; }
}

/* ============================================================
   AMBIENT PARTICLES — warm dust drifting through sunlight.
   Layers are per-section, not one fixed layer: every section here
   paints an opaque background, so a single position:fixed layer at a
   low z-index would be covered by the very next section. Each layer
   sits ABOVE its section's background and BELOW its content, which is
   the same visual result and survives the opaque backgrounds.
   ============================================================ */

.fx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Three depth bands per layer; each is scroll-shifted by a different
   amount so the field separates instead of sliding as one sheet. */
.fx-band {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.fx-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: fxDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Warm beige motes — the bulk of the field */
.fx-dot.fx-beige { background: #B29A6E; }

/* Muted gold specks — fewer, a touch brighter */
.fx-dot.fx-gold  { background: #A07A2E; }

/* Soft blurred dust */
.fx-dot.fx-soft  { background: #C4AE86; filter: blur(1.5px); }

/* Occasional larger faded circle */
.fx-dot.fx-halo  { background: radial-gradient(circle, rgba(178,154,110,.7), rgba(178,154,110,0) 70%); }

/* Petal fragments, hero edges only */
.fx-petal {
  position: absolute;
  border-radius: 60% 40% 55% 45% / 70% 60% 40% 30%;
  background: linear-gradient(140deg, rgba(214,193,157,.92), rgba(184,155,110,.62));
  opacity: 0;
  will-change: transform, opacity;
  animation-name: fxPetal;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes fxDrift {
  0%   { transform: translate3d(0, 40px, 0) scale(.8);  opacity: 0; }
  14%  { opacity: var(--op, .24); }
  50%  { transform: translate3d(var(--dx, 16px), -34px, 0) scale(1); }
  86%  { opacity: calc(var(--op, .24) * .5); }
  100% { transform: translate3d(calc(var(--dx, 16px) * .35), -132px, 0) scale(.72); opacity: 0; }
}

@keyframes fxPetal {
  0%   { transform: translate3d(0, 34px, 0) rotate(0deg)   scale(.85); opacity: 0; }
  16%  { opacity: var(--op, .2); }
  50%  { transform: translate3d(var(--dx, 20px), -30px, 0) rotate(26deg) scale(1); }
  84%  { opacity: calc(var(--op, .2) * .45); }
  100% { transform: translate3d(calc(var(--dx, 20px) * .4), -120px, 0) rotate(52deg) scale(.8); opacity: 0; }
}

/* Content must sit above its section's particle layer. These containers
   are static by default, so a z-index:0 layer would paint over their text. */
.section > .container,
.cta-section > .container { position: relative; z-index: 1; }

/* In the hero the dust drifts in front of the card fan (z-index 2) but
   stays behind the headline column (z-index 4). */
.hero > .fx-layer { z-index: 3; }
.cta-section > .fx-layer { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .fx-dot, .fx-petal { animation: none; opacity: var(--op, .2); }
  .fx-band { transform: none !important; }
}