/* ===========================
   ROYAL HERO BACKGROUND
   Add class "ajibolas-hero" to the section/row
   =========================== */
.ajibolas-hero{
  /* sizing */
  min-height: 85vh;
  padding: clamp(2rem, 6vw, 6rem)  clamp(1.25rem, 4vw, 4rem);
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  color: #fff;

  /* --- LAYERED ROYAL BACKGROUND --- */
  /* Layer 1: subtle glitter/speckle */
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.08) 0 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.06) 0 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.05) 0 50%, transparent 51%),

  /* Layer 2: purple spotlight behind the title (left side) */
    radial-gradient(closest-side at 28% 38%, rgba(139, 0, 139, .55), transparent 70%),

  /* Layer 3: faint warm glow (top-right) */
    radial-gradient(60rem 40rem at 92% 6%, rgba(255, 80, 55, .18), transparent 60%),

  /* Layer 4: deep royal gradient base */
    linear-gradient(180deg, #180014 0%, #26002E 45%, #0B0710 100%);

  background-repeat: no-repeat;
  background-size: auto,auto,auto, 120% 120%, 100% 100%, 100% 100%;
  background-position: center center, center center, center center, 0 0, 0 0, 0 0;

  /* give the whole section that velvety depth */
  box-shadow: inset 0 0 120px rgba(0,0,0,.6);
}

/* Optional: faux “marble floor” band at the bottom with reflective sheen */
.ajibolas-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:min(26vh, 260px);
  background:
    /* faint vein lines */
    repeating-linear-gradient(125deg,
      rgba(255,60,100,.12) 0 4px,
      transparent 4px 38px),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35)),
    #0b0a0f;
  filter: saturate(0.9) contrast(1.05);
  box-shadow: inset 0 20px 50px rgba(0,0,0,.6);
  z-index:-1;         /* sits behind content */
}

/* ===========================
   GLITTERY ROYAL TITLE
   Use on your H1/H2
   =========================== */
.ajibolas-title{
  font-family: "Bodoni Moda", "Didot", "Bodoni", Georgia, serif;
  font-size: clamp(46px, 8vw, 120px);
  line-height: .95;
  letter-spacing: .5px;
  font-weight: 700;

  /* red glitter gradient text */
  background: linear-gradient(45deg, #8a001c 0%, #ff446c 40%, #c40032 65%, #ff6b81 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* sparkle & depth */
  text-shadow:
    0 1px 0 #5e0013,
    0 2px 8px rgba(0,0,0,.55);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

/* Optional subline like “BY LADY SINCLAIR” */
.ajibolas-sub{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.2vw, 16px);
  color: #E9E4EF;
  opacity: .92;
}

/* ===========================
   GOLD FLOURISH / BLACK ROSE
   Use on decorative PNG/SVG images you place next to the title
   =========================== */
.gold-flourish{
  filter:
    drop-shadow(0 2px 0 rgba(155,105,0,.9))
    drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.black-rose{
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.9))
    drop-shadow(0 14px 28px rgba(0,0,0,.6));
}

/* ===========================
   RESPONSIVE POLISH
   =========================== */
@media (max-width: 768px){
  .ajibolas-hero{
    padding: 2.25rem 1.25rem;
    background-size: auto,auto,auto, 200% 200%, 100% 100%, 100% 100%;
    background-position: center, center, center, 35% 40%, 100% 0, 0 0; /* keep glow behind text */
  }
  .ajibolas-hero::after{ height: 18vh; }
}