/* Natural transparent artwork: slightly smaller, with no circular clipping. */
.lion-lang-en #home .hero .hero-person,
.lion-lang-ar #home .hero .hero-person {
  transform: translateX(-50%) scale(1.05);
  transform-origin: center bottom;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
  object-fit: contain;
  object-position: center bottom;
}

/* Mobile: let the larger artwork reach the ticker behind the stats row. */
@media (max-width: 760px) {
  .lion-lang-en #home .hero .hero-person,
  .lion-lang-ar #home .hero .hero-person {
    width: 96%;
    height: calc(100% - 120px);
    bottom: 0;
    transform: translateX(-50%);
  }
  .lion-lang-en #home .hero .hero-left,
  .lion-lang-ar #home .hero .hero-left {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding-inline: 18px;
    z-index: 5;
    background: linear-gradient(to top, var(--blue), transparent);
    text-shadow: 0 2px 8px #100a20;
  }
}

/* Mobile only: keep the headline near the header and bring the head into it. */
@media (max-width: 760px) {
  .lion-lang-en #home .hero,
  .lion-lang-ar #home .hero { height: 550px; min-height: 0; }
  .lion-lang-en #home .hero h1,
  .lion-lang-en #home .hero .outline,
  .lion-lang-ar #home .hero h1,
  .lion-lang-ar #home .hero .outline {
    top: 18px;
    z-index: 1;
  }
  .lion-lang-en #home .hero .hero-person,
  .lion-lang-ar #home .hero .hero-person {
    height: calc(100% - 10px);
    transform: translateX(-50%);
    z-index: 2;
    opacity: 1;
  }
}

@media (max-width: 380px) {
  .lion-lang-en #home .hero,
  .lion-lang-ar #home .hero { height: 495px; }
}

/* Mobile: repeat the headline as a transparent outline in front of the lion. */
@media (max-width: 760px) {
  .lion-lang-en #home .hero .outline,
  .lion-lang-ar #home .hero .outline {
    z-index: 3;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--acid);
    pointer-events: none;
  }
}

/* v1.8.35: add depth and a warmer focal point without changing the hero layout. */
.lion-lang-en #home .hero,
.lion-lang-ar #home .hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 53%, rgba(242, 192, 148, .13) 0, rgba(126, 78, 146, .11) 27%, transparent 61%),
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 42%);
}
.lion-lang-en #home .hero::before,
.lion-lang-ar #home .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(68vw, 850px);
  aspect-ratio: 1;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(242,192,148,.15) 0, rgba(242,192,148,.055) 39%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(242,192,148,.10), 0 0 100px rgba(136,82,167,.14);
}
.lion-lang-en #home .hero h1,
.lion-lang-ar #home .hero h1 {
  color: #f5c49d;
  text-shadow: 0 8px 36px rgba(242,192,148,.12);
}
.lion-lang-en #home .hero .hero-person,
.lion-lang-ar #home .hero .hero-person {
  filter: drop-shadow(0 18px 34px rgba(5,3,15,.35)) drop-shadow(0 0 26px rgba(242,192,148,.10));
}
.lion-lang-en #home .hero .star,
.lion-lang-ar #home .hero .star {
  box-shadow: 0 0 0 9px rgba(242,192,148,.045), 0 0 32px rgba(242,192,148,.12);
  background: rgba(35,26,55,.26);
}
.lion-lang-en #home .hero-left div,
.lion-lang-ar #home .hero-left div {
  border-color: rgba(242,192,148,.58);
}
.lion-lang-en #home .hero-right .btn,
.lion-lang-ar #home .hero-right .btn {
  box-shadow: 0 8px 24px rgba(7,4,18,.18);
}
@media (max-width: 760px) {
  .lion-lang-en #home .hero::before,
  .lion-lang-ar #home .hero::before {
    width: min(108vw, 500px);
    top: 48%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lion-lang-en #home .hero *,
  .lion-lang-ar #home .hero * { scroll-behavior: auto; }
}