/* ==========================================================================
   ORNAMENT — engraved frames, rules, crest, seal, buttons
   ========================================================================== */

/* ---- Engraved frame ------------------------------------------------------
   A heavier outer rule with a hairline set inside it: the signature of
   engraved stationery. Corners carry arabesque cartouches (inline SVG).   */

.frame {
  position: relative;
  padding: clamp(1.75rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
  isolation: isolate;
}

.frame::before,
.frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.frame::before {
  inset: 0;
  border: 1.5px solid var(--rule);
}

.frame::after {
  inset: 6px;
  border: 1px solid var(--rule-soft);
}

.frame__corner {
  position: absolute;
  inline-size: clamp(30px, 8vw, 52px);
  block-size:  clamp(30px, 8vw, 52px);
  color: var(--gold-deep);
  opacity: .75;
  z-index: 2;
}
.frame__corner svg { inline-size: 100%; block-size: 100%; }

/* Corners are placed physically: a frame is symmetric, so it needs no mirror */
.frame__corner--tl { top: -1px;    left: -1px; }
.frame__corner--tr { top: -1px;    right: -1px; transform: scaleX(-1); }
.frame__corner--bl { bottom: -1px; left: -1px;  transform: scaleY(-1); }
.frame__corner--br { bottom: -1px; right: -1px; transform: scale(-1); }

/* ---- Rules ---------------------------------------------------------------*/

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-inline: auto;
  margin-block: var(--sp-5);
  inline-size: min(100%, 22rem);
  color: var(--gold-deep);
}

.rule::before,
.rule::after {
  content: '';
  block-size: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--rule) 35%, var(--rule) 65%, transparent);
}

.rule__mark {
  flex: none;
  inline-size: clamp(16px, 4vw, 22px);
  block-size: clamp(16px, 4vw, 22px);
  opacity: .85;
}

.rule--tight { margin-block: var(--sp-4); inline-size: min(100%, 14rem); }

/* ---- Drawn linework ------------------------------------------------------
   SVG strokes start fully dashed-out and draw themselves in when the
   section scrolls into view.                                             */

.draw path,
.draw line,
.draw circle,
.draw ellipse,
.draw polyline {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out);
  transition-delay: var(--draw-delay, 0ms);
}
.draw.is-visible path,
.draw.is-visible line,
.draw.is-visible circle,
.draw.is-visible ellipse,
.draw.is-visible polyline { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .draw path, .draw line, .draw circle, .draw ellipse, .draw polyline {
    stroke-dashoffset: 0;
  }
}

/* ---- Crest ---------------------------------------------------------------*/

.crest {
  inline-size: clamp(92px, 24vw, 148px);
  margin-inline: auto;
  color: var(--gold-deep);
}

.crest__letter {
  font-family: var(--ff-display);
  font-size: 46px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--gold-deep);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease) var(--dur-draw);
}
.crest.is-visible .crest__letter { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .crest__letter { opacity: 1; transition: none; }
}

/* ---- Guilloche -----------------------------------------------------------
   The interwoven line pattern used on certificates and banknotes,
   generated from a hypotrochoid in ornament.js.                          */

.guilloche {
  /* Physically centred on purpose. A logical inset would be resolved against
     the writing direction and then fought by the physical translate, which
     throws the rosette clean off-screen in RTL. */
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  inline-size: min(150%, 62rem);
  aspect-ratio: 1;
  opacity: .07;
  color: var(--gold-dark);
  pointer-events: none;
  z-index: 0;
}
.guilloche svg { inline-size: 100%; block-size: 100%; }

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

.btn {
  --btn-fg: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 3rem;
  padding-inline: clamp(1.25rem, 5vw, 2.25rem);
  padding-block: .75rem;
  border: 1px solid var(--rule);
  background:
    linear-gradient(var(--paper), var(--paper-2));
  color: var(--btn-fg);
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .1em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    transform  var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  box-shadow: var(--lift);
}
:lang(ar) .btn { letter-spacing: 0; }

.btn::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--lift-lg);
}
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primary {
  --btn-fg: var(--paper);
  background: linear-gradient(120deg, var(--gold-dark), var(--gold) 45%, var(--gold-deep));
  border-color: var(--gold-dark);
  text-shadow: 0 1px 1px rgba(58,42,16,.35);
}
.btn--primary::after { border-color: rgba(255,244,214,.35); }

.btn--wide { inline-size: 100%; }

/* ---- Door gate -----------------------------------------------------------
   Two burgundy leaves meeting on a vertical seam, filling the screen, hinged
   at the outer edges. Pressing the seal swings them open in 3D and the
   invitation is behind them.

   Burgundy, beige and silver live here and nowhere else — the invitation
   itself keeps the page's ivory and antique gold.
   ------------------------------------------------------------------------- */

.seal-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* Depth for the hinge. Set on the container so both leaves share one
     vanishing point and swing as a matched pair. */
  perspective: 1600px;
  perspective-origin: 50% 50%;
  transition: opacity .9s var(--ease), visibility .9s;
}

.seal-gate[hidden] { display: none; }

.seal-gate.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- The leaves ----------------------------------------------------------*/

.door {
  position: absolute;
  inset-block: 0;
  inline-size: 50.2%;              /* the fraction of overlap hides the seam */
  background:
    linear-gradient(180deg, var(--wine) 0%, var(--wine-deep) 55%, var(--wine-dark) 100%);
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform 1.5s cubic-bezier(.66, .01, .28, 1) .35s;
  will-change: transform;
}

/* Hinged at the outer edge, like a real leaf on a jamb. Physical left/right
   on purpose: a door is symmetric, so it must not flip with the writing
   direction. */
.door--start {
  left: 0;
  transform-origin: left center;
  box-shadow: inset -24px 0 40px -24px rgba(42, 8, 16, .9);
}
.door--end {
  right: 0;
  transform-origin: right center;
  box-shadow: inset 24px 0 40px -24px rgba(42, 8, 16, .9);
}

.seal-gate.is-opening .door--start { transform: rotateY(-104deg); }
.seal-gate.is-opening .door--end   { transform: rotateY(104deg); }

/* ---- What is carved into them --------------------------------------------*/

.door__pattern {
  position: absolute;
  inset: 0;
  opacity: .22;
  color: var(--silver-light);
  pointer-events: none;
}
.door__pattern svg { inline-size: 100%; block-size: 100%; }

/* A double engraved rule set in from the edges, as on a panelled door */
.door__frame {
  position: absolute;
  inset: clamp(1rem, 4vmin, 2.5rem);
  border: 1px solid rgba(220, 224, 230, .38);
  pointer-events: none;
}
.door__frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(220, 224, 230, .18);
}

.door__corner {
  position: absolute;
  inline-size: clamp(28px, 7vmin, 54px);
  block-size: auto;
  aspect-ratio: 1;
  color: var(--silver-light);
  opacity: .5;
  pointer-events: none;
}
.door__corner--tl { top: clamp(1rem, 4vmin, 2.5rem);    left: clamp(1rem, 4vmin, 2.5rem); }
.door__corner--bl { bottom: clamp(1rem, 4vmin, 2.5rem); left: clamp(1rem, 4vmin, 2.5rem);  transform: scaleY(-1); }
.door__corner--tr { top: clamp(1rem, 4vmin, 2.5rem);    right: clamp(1rem, 4vmin, 2.5rem); transform: scaleX(-1); }
.door__corner--br { bottom: clamp(1rem, 4vmin, 2.5rem); right: clamp(1rem, 4vmin, 2.5rem); transform: scale(-1); }

/* A khatam on each leaf, sitting above and below the seal */
.door__star {
  position: absolute;
  top: 26%;
  inline-size: clamp(30px, 8vmin, 62px);
  block-size: auto;
  aspect-ratio: 1;
  color: var(--silver-light);
  opacity: .55;
  pointer-events: none;
}
.door--start .door__star { right: 12%; }
.door--end   .door__star { left: 12%; }

/* ---- The seam ------------------------------------------------------------*/

.door__seam {
  position: absolute;
  inset-block: 0;
  left: 50%;
  translate: -50%;
  inline-size: 2px;
  background: linear-gradient(180deg,
    transparent, rgba(220, 224, 230, .5) 12%, rgba(220, 224, 230, .5) 88%, transparent);
  opacity: .8;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.seal-gate.is-opening .door__seam { opacity: 0; }

/* ---- The seal ------------------------------------------------------------*/

.seal-gate__inner {
  /* Physically centred on purpose. A logical inset resolves against the
     writing direction and is then fought by the physical translate, which
     throws the seal off the seam entirely in RTL. */
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 4svh, 2rem);
  text-align: center;
  z-index: 2;
}

.seal {
  inline-size: clamp(96px, 26vmin, 168px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 12px 28px rgba(42, 8, 16, .6));
  animation: seal-breathe 4.5s var(--ease) infinite;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.seal svg { inline-size: 100%; block-size: 100%; }

.seal:hover { transform: scale(1.04); }
.seal:focus-visible { outline: 2px solid var(--silver-light); outline-offset: 8px; border-radius: 50%; }

@keyframes seal-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.045; }
}

.seal-gate.is-opening .seal {
  animation: none;
  transform: scale(1.7) rotate(8deg);
  opacity: 0;
}

.seal-gate__cta {
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  letter-spacing: .18em;
  /* On burgundy, not on paper. */
  color: rgba(236, 231, 224, .78);
  animation: cta-pulse 3s var(--ease) infinite;
  transition: opacity .4s var(--ease);
}
:lang(ar) .seal-gate__cta { letter-spacing: 0; }

.seal-gate.is-opening .seal-gate__cta { opacity: 0; animation: none; }

@keyframes cta-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ---- Reduced motion ------------------------------------------------------
   No swing, no breathing seal — the gate simply steps aside.              */

@media (prefers-reduced-motion: reduce) {
  .seal { animation: none; transition: none; }
  .door { transition: none; }
  .seal-gate.is-opening .door--start,
  .seal-gate.is-opening .door--end { transform: none; }
  .seal-gate.is-opening .seal { transform: none; opacity: 1; }
  .seal-gate__cta { animation: none; opacity: .8; }
}

/* ---- Gold dust -----------------------------------------------------------*/

.dust {
  position: fixed;
  inset: 0;
  /* A canvas is a replaced element: with inset:0 and width:auto it falls back
     to its intrinsic (attribute) size instead of filling the viewport. */
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}

/* ---- Language switch -----------------------------------------------------*/

.lang-switch {
  position: fixed;
  inset-block-start: clamp(.75rem, 3vw, 1.5rem);
  inset-inline-end: clamp(.75rem, 3vw, 1.5rem);
  z-index: 40;
  min-block-size: 2.5rem;
  padding-inline: var(--sp-4);
  padding-block: var(--sp-2);
  border: 1px solid var(--rule);
  background: rgba(251, 247, 242, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold-dark);
  font-family: var(--ff-en-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  cursor: pointer;
  box-shadow: var(--lift);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lang-switch:hover { border-color: var(--gold); transform: translateY(-1px); }

/* ==========================================================================
   ISLAMIC GEOMETRY & EXTENDED ORNAMENT
   ========================================================================== */

/* ---- Full-page geometric ground -----------------------------------------
   A seamless star-and-cross tessellation behind everything. Fixed, so it
   stays put while the invitation scrolls over it.                        */

.pattern {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;
  pointer-events: none;
  color: var(--gold-dark);
  opacity: .055;
}
.pattern svg { inline-size: 100%; block-size: 100%; }

/* ---- Shamsa — manuscript sun rosette ------------------------------------*/

.shamsa {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  inline-size: min(120%, 34rem);
  aspect-ratio: 1;
  color: var(--gold-dark);
  opacity: .085;
  pointer-events: none;
  z-index: 0;
  animation: shamsa-turn 140s linear infinite;
}
.shamsa svg { inline-size: 100%; block-size: 100%; }

@keyframes shamsa-turn { to { rotate: 360deg; } }

/* The shamsa is deliberately wider than its section so the rosette bleeds
   past the text column. That has to be clipped here, or the extra width
   becomes page-level horizontal scroll — which in RTL also drags the whole
   layout sideways. */
.section { position: relative; overflow: hidden; }
.section > .shell { position: relative; z-index: 1; }

/* ---- Page-edge running vine ---------------------------------------------
   Framing the page like an illuminated manuscript. Hidden on phones, where
   the screen is too narrow to give up the width.                         */

.edge {
  position: fixed;
  inset-block: 0;
  inline-size: 34px;
  z-index: 2;
  pointer-events: none;
  color: var(--gold-deep);
  opacity: .3;
  display: none;
}
.edge svg { inline-size: 100%; block-size: 100%; }
.edge--start { inset-inline-start: 10px; }
.edge--end   { inset-inline-end: 10px; transform: scaleX(-1); }

@media (min-width: 60rem) {
  .edge { display: block; }
}

/* ---- Ornate divider ------------------------------------------------------
   Replaces the plain rule: a khatam star flanked by two curls, with the
   whole assembly drawing itself in on reveal.                            */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, .875rem);
  margin-inline: auto;
  margin-block: clamp(.5rem, 1.8svh, 1.5rem);
  inline-size: min(100%, 26rem);
  color: var(--gold-deep);
}

.divider__curl {
  flex: 1 1 0;
  min-inline-size: 0;
  max-inline-size: 9rem;
  block-size: clamp(18px, 5vw, 24px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease) .25s;
}
.divider__curl--start { transform: scaleX(-1); }
.divider.is-visible .divider__curl { opacity: .85; }

.divider__star {
  flex: none;
  inline-size: clamp(26px, 7vw, 36px);
  block-size: clamp(26px, 7vw, 36px);
  opacity: 0;
  rotate: -45deg;
  scale: .6;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    rotate  1.4s var(--ease-out),
    scale   1.4s var(--ease-out);
}
.divider.is-visible .divider__star { opacity: 1; rotate: 0deg; scale: 1; }

/* ---- Crest with rotating halo -------------------------------------------*/

.crest {
  position: relative;
  inline-size: min(clamp(84px, 25vw, 158px), 15svh);
  aspect-ratio: 140 / 152;
  margin-inline: auto;
  color: var(--gold-deep);
}

.crest__body,
.crest__halo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
}

.crest__halo {
  block-size: 92%;
  color: var(--gold);
  opacity: 0;
  transform-origin: 50% 46%;
  transition: opacity 1.6s var(--ease) 1.1s;
  animation: halo-turn 90s linear infinite;
}
.crest.is-visible .crest__halo { opacity: .55; }

@keyframes halo-turn { to { rotate: 360deg; } }

.crest__body { block-size: 100%; }

.crest__letter {
  font-family: var(--ff-display);
  font-size: 48px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  fill: url(#foilGrad);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease) var(--dur-draw);
}
.crest.is-visible .crest__letter { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .crest__letter { opacity: 1; transition: none; }
  .crest__halo   { animation: none; opacity: .55; transition: none; }
  .shamsa        { animation: none; }
  .divider__curl { opacity: .85; transition: none; }
  .divider__star { opacity: 1; rotate: 0deg; scale: 1; transition: none; }
}

/* ---- Button foil shimmer -------------------------------------------------*/

.btn {
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 250, 235, .55) 45%,
    rgba(255, 250, 235, .8) 50%,
    transparent
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: -1;
  transition: inset-inline-start .85s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before { inset-inline-start: 120%; }

.btn--primary::before {
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 250, 235, .38) 45%,
    rgba(255, 250, 235, .58) 50%,
    transparent
  );
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
}