/* Scroll effects for mahadnasir.com - added 2026-08-28
 * Elementor Pro's motion-effects module throws on this install, so the hero
 * parallax and the name convergence are driven by mn-scroll.js instead.
 * JS only writes three custom properties; all layout stays in CSS.
 */

:root {
  --mn-hero-y: 0px;   /* hero portrait parallax offset */
  --mn-name-l: 0px;   /* MAHAD  - travels right, toward the portrait */
  --mn-name-r: 0px;   /* NASIR  - travels left, toward the portrait */
  --mn-name-o: 1;
}

@media (prefers-reduced-motion: no-preference) {

  /* --- Hero portrait: drifts up slightly faster than the page --- */
  .elementor-7 .elementor-element.elementor-element-1d5699c6 img {
    transform: translate3d(0, calc(var(--mn-hero-y) * -1), 0) scale(1.08);
    transform-origin: center 40%;
    will-change: transform;
  }

  /* --- Name section: the two halves converge on the portrait --- */
  .elementor-7 .elementor-element.elementor-element-7dd45215,
  .elementor-7 .elementor-element.elementor-element-e9aa4de {
    will-change: transform, opacity;
  }

  .elementor-7 .elementor-element.elementor-element-7dd45215 {
    transform: translate3d(var(--mn-name-l), 0, 0);
    opacity: var(--mn-name-o);
  }

  .elementor-7 .elementor-element.elementor-element-e9aa4de {
    transform: translate3d(var(--mn-name-r), 0, 0);
    opacity: var(--mn-name-o);
  }

  /* The centre portrait lifts a touch as the names close in, so the three
     elements read as one movement rather than two separate ones. */
  .elementor-7 .elementor-element.elementor-element-22b0438f img {
    transform: translate3d(0, calc(var(--mn-hero-y) * -0.35), 0);
    will-change: transform;
  }
}

/* The name is set in Bilbo Swash Caps, whose capitals carry long flourishes
   that overhang the text box. Pinned at 4px they were being clipped by the
   viewport edge on small screens, so give them room to breathe. */
@media (max-width: 767px) {
  body:not(.rtl) .elementor-7 .elementor-element.elementor-element-7dd45215 { left: 18px; }
  body:not(.rtl) .elementor-7 .elementor-element.elementor-element-e9aa4de { right: 18px; }
  body.rtl .elementor-7 .elementor-element.elementor-element-7dd45215 { right: 18px; }
  body.rtl .elementor-7 .elementor-element.elementor-element-e9aa4de { left: 18px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body:not(.rtl) .elementor-7 .elementor-element.elementor-element-7dd45215 { left: 24px; }
  body:not(.rtl) .elementor-7 .elementor-element.elementor-element-e9aa4de { right: 24px; }
}

/* Nothing moves for visitors who ask for reduced motion; the section still
   reads correctly because the resting layout is the finished composition. */
@media (prefers-reduced-motion: reduce) {
  .elementor-7 .elementor-element.elementor-element-1d5699c6 img,
  .elementor-7 .elementor-element.elementor-element-22b0438f img,
  .elementor-7 .elementor-element.elementor-element-7dd45215,
  .elementor-7 .elementor-element.elementor-element-e9aa4de {
    transform: none;
    opacity: 1;
  }
}