/* ════════════════════════════════════════════════════════════════════════
 * BUNYAN × MASMAK — MADNESS LAYER
 *
 * The "WHAT IS THIS?" moment. Monumental typography watermark, 3D-tilt
 * fortress, gold cursor trail, marquee heritage ribbon, manifesto block.
 *
 * Performance budget:
 *   - Only `transform` + `opacity` + `clip-path` animated (compositor only)
 *   - 5 KB additional payload total
 *   - Mobile: cursor trail OFF, 3D tilt OFF, watermark dimmed
 *   - `prefers-reduced-motion` respected
 * ════════════════════════════════════════════════════════════════════════ */


/* ── 1. MONUMENTAL WATERMARK ────────────────────────────────────────────
 * A giant "بُنيان" wordmark sits behind the hero text — gold-leaf gradient,
 * Aref Ruqaa at 28vw. Subtle parallax via scroll (controlled by JS). */
.hero-elevated::before {
  content: 'بُنيان';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: clamp(8rem, 28vw, 22rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg,
    rgba(201, 164, 90, .06) 0%,
    rgba(244, 215, 122, .14) 40%,
    rgba(138, 104, 44, .10) 75%,
    rgba(201, 164, 90, .05) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  z-index: 1;       /* sits between canvas (0) and content (5) */
  transform: translateZ(0);
  will-change: transform;
  user-select: none;
}
@media (max-width: 720px) {
  .hero-elevated::before {
    font-size: clamp(6rem, 32vw, 12rem);
    /* keep visible on mobile but slightly dimmer */
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-elevated::before { will-change: auto; }
}


/* ── 2. GOLD CURSOR FOLLOWER (desktop, fine pointer only) ──────────────
 * A small gold dot lags behind the cursor with ease. JS controls its
 * `--cursor-x`, `--cursor-y` variables. */
.bn-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(244, 215, 122, .55) 0%,
    rgba(201, 164, 90, .25) 50%,
    transparent 75%);
  border: 1px solid rgba(201, 164, 90, .6);
  mix-blend-mode: multiply;
  transform: translate(var(--cursor-x, -100px), var(--cursor-y, -100px));
  transition: transform 80ms cubic-bezier(0.16, 1, 0.3, 1),
              width 200ms ease, height 200ms ease;
  display: none;       /* hidden by default; JS enables on desktop */
}
.bn-cursor.bn-cursor--active { display: block; }
.bn-cursor.bn-cursor--hover {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  background: radial-gradient(circle at center,
    rgba(244, 215, 122, .35) 0%,
    rgba(201, 164, 90, .15) 60%,
    transparent 80%);
  border-color: rgba(244, 215, 122, .8);
}
/* Hide native cursor only when our custom cursor is active */
body.bn-has-cursor a,
body.bn-has-cursor button,
body.bn-has-cursor [role="button"],
body.bn-has-cursor .bunyan-lockup,
body.bn-has-cursor .pro-btn,
body.bn-has-cursor .step-card {
  cursor: none;
}
@media (hover: none), (pointer: coarse) {
  .bn-cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-cursor { transition: none !important; }
}


/* ── 3. MASMAK 3D TILT — perspective on mouse position ─────────────────
 * JS sets `--tilt-x` and `--tilt-y` based on cursor distance from hero centre. */
.masmak-cinema {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.masmak-cinema > * {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-elevated {
    --tilt-x: 0;
    --tilt-y: 0;
  }
  .hero-elevated .masmak-cinema {
    transform: rotateX(calc(var(--tilt-y) * -1deg)) rotateY(calc(var(--tilt-x) * 1deg));
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-elevated .hero-sun {
    transform: translate3d(calc(var(--tilt-x) * 1.5px), calc(var(--tilt-y) * 1.5px), 0);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hero-elevated .hero-mashrabiya--tr {
    transform: translate3d(calc(var(--tilt-x) * -2px), calc(var(--tilt-y) * -2px), 0) rotate(0deg);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}


/* ── 4. MANIFESTO SECTION — typographic moment ─────────────────────────
 * A breath section after the hero with a single, massive declaration. */
.bn-manifesto {
  position: relative;
  padding: clamp(6rem, 14vh, 12rem) clamp(1rem, 4vw, 4rem);
  text-align: center;
  background:
    radial-gradient(ellipse 50% 40% at 50% 30%, rgba(244, 215, 122, .12), transparent 70%),
    linear-gradient(180deg, transparent, rgba(201, 164, 90, .04), transparent);
  overflow: hidden;
}
.bn-manifesto::before {
  /* Subtle gold thread above the headline */
  content: '';
  position: absolute;
  top: clamp(3rem, 8vh, 6rem);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: clamp(40px, 5vh, 72px);
  background: linear-gradient(180deg, transparent, var(--gold-mid, #c9a45a));
}
.bn-manifesto-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(.92rem, 1.2vw, 1.15rem);
  color: var(--gold-deep, #8A682C);
  letter-spacing: .42em;
  text-transform: uppercase;
  display: block;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.bn-manifesto-headline {
  font-family: 'Aref Ruqaa', 'Reem Kufi', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 6.2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--dawn-ink, #1F1808);
  max-width: 18ch;
  margin: 0 auto;
}
.bn-manifesto-headline em {
  background: linear-gradient(135deg, #8A682C, #C9A45A 50%, #F4D77A);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}
.bn-manifesto-attribution {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  color: var(--dawn-ink-soft, #4A3D1E);
  letter-spacing: .12em;
  margin-top: clamp(2rem, 4vh, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.bn-manifesto-attribution::before,
.bn-manifesto-attribution::after {
  content: '';
  width: 36px; height: 1px;
  background: var(--gold-deep, #8A682C);
  opacity: .5;
}


/* ── 5. HERITAGE MARQUEE — infinite Arabic ornament ribbon ─────────────
 * CSS-only: a row of motif chips that loops via `@keyframes` translateX.
 * Two duplicated tracks for seamless looping. */
.bn-marquee {
  overflow: hidden;
  position: relative;
  padding: clamp(2rem, 4vh, 3rem) 0;
  background: linear-gradient(180deg, transparent, rgba(31, 24, 8, .04), transparent);
  border-top: 1px solid var(--dawn-rule-soft, #DDD0A6);
  border-bottom: 1px solid var(--dawn-rule-soft, #DDD0A6);
}
.bn-marquee::before, .bn-marquee::after {
  /* Fade edges to soft cream */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.bn-marquee::before { left: 0;  background: linear-gradient(90deg, var(--dawn-canvas, #FAF6EC), transparent); }
.bn-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--dawn-canvas, #FAF6EC), transparent); }

.bn-marquee-track {
  display: flex;
  gap: clamp(3rem, 6vw, 5rem);
  width: max-content;
  animation: bn-marquee-flow 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bn-marquee-track { animation: none; }
}
@keyframes bn-marquee-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }    /* one duplicate-cycle */
}
.bn-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Aref Ruqaa', serif;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  color: var(--dawn-ink-soft, #4A3D1E);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.bn-marquee-item::after {
  content: '✦';
  font-family: 'Times New Roman', serif;
  font-size: 0.7em;
  color: var(--gold-mid, #c9a45a);
}
.bn-marquee-item:last-child::after { content: ''; }


/* ── 6. SECTION DIVIDER — refined ──────────────────────────────────────
 * A more elaborate version of bn-divider with calligraphic flourish. */
.bn-divider-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: clamp(4rem, 8vw, 7rem) auto;
  font-family: 'Aref Ruqaa', serif;
  color: var(--gold-deep, #8A682C);
  position: relative;
}
.bn-divider-art .bn-divider-glyph {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  background: linear-gradient(135deg, #8A682C, #F4D77A 50%, #8A682C);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bn-divider-art::before,
.bn-divider-art::after {
  content: '';
  width: clamp(80px, 14vw, 220px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep, #8A682C));
  position: absolute;
  top: 50%;
}
.bn-divider-art::before { right: 50%; margin-right: clamp(2.5rem, 4vw, 3.5rem); }
.bn-divider-art::after  { left:  50%; margin-left:  clamp(2.5rem, 4vw, 3.5rem);
  background: linear-gradient(-90deg, transparent, var(--gold-deep, #8A682C)); }


/* ── 7. SECTION HEAD UPGRADE — drop-cap eyebrow ────────────────────────
 * For the elevated "How it works" section heading. */
.how .section-head {
  position: relative;
  padding-top: clamp(2rem, 5vh, 4rem);
}
.how .section-head::before {
  content: 'I';
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 400;
  color: var(--gold-deep, #8A682C);
  opacity: .25;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  line-height: 1;
}


/* ── 8. EXTREME HOVER — step cards get a 3D lift ───────────────────────
 * Cards get a real 3D tilt with shadow on hover (desktop only). */
@media (hover: hover) and (pointer: fine) {
  .step-card {
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 300ms ease;
  }
  .step-card:hover {
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
    box-shadow:
      0 24px 48px -16px rgba(31, 24, 8, .25),
      0 4px 12px -4px rgba(31, 24, 8, .15),
      inset 0 1px 0 rgba(244, 215, 122, .15);
  }
}


/* ── 9. SCROLLING NAV SHADOW (when user scrolls past hero) ─────────────
 * The nav grows a subtle drop shadow once you've left the hero. */
.nav { transition: box-shadow 300ms ease; }
.nav.bn-nav-scrolled {
  box-shadow: 0 6px 24px -8px rgba(31, 24, 8, .15);
}


/* ── 10. CTA ARROW MARCHES ON HOVER ────────────────────────────────────
 * The arrow inside the primary CTA marches forward on hover. */
.hero-elevated .btn-primary svg {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-elevated .btn-primary:hover svg {
  transform: translateX(-8px);   /* RTL: arrow points right via SVG, "forward" is -X */
}
html[dir="ltr"] .hero-elevated .btn-primary:hover svg {
  transform: translateX(8px);
}