/* ================================================================== */
/* Decorative overlays shared across pages (loaded site-wide).        */
/* .grain-overlay lives in style.css; this adds the gold star lattice. */
/* ================================================================== */

/* Islamic 8-point star lattice in brand gold */
.ud-hero-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffb703' stroke-width='1'%3E%3Cpath d='M40 12l8 20 20 8-20 8-8 20-8-20-20-8 20-8z'/%3E%3Crect x='26' y='26' width='28' height='28' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3Cpath d='M0 0l12 12M80 0L68 12M0 80l12-12M80 80L68 68'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
/* Placement variants — where the pattern is strongest before fading out */
.ud-hero-pattern.is-left {
  opacity: 0.13;
  -webkit-mask-image: radial-gradient(ellipse at 20% 50%, #000 15%, transparent 70%);
          mask-image: radial-gradient(ellipse at 20% 50%, #000 15%, transparent 70%);
}
.ud-hero-pattern.is-center {
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 70%);
}
.ud-hero-pattern.is-full {
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.25));
          mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.25));
  opacity: 0.05;
}

/* On a dark section that hosts overlays, lift its real content above them */
.pattern-host { position: relative; overflow: hidden; }
.pattern-host > :not(.ud-hero-pattern):not(.grain-overlay):not(.absolute) { position: relative; }