/* Aseel hero v3 — concentric fading arcs, layered reveal and stronger parallax.
   Loaded AFTER site.css so other approved sections remain untouched. */
.hero-wrap {
  background:linear-gradient(180deg, #ffe1d2 0%, #ffebe0 58%, #fff3ed 100%);
  isolation:isolate;
}
.hero__arcs {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  /* Fade the *actual circles*, not a rectangle painted over the bus. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.38) 16%,#000 34%,#000 62%,rgba(0,0,0,.48) 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.38) 16%,#000 34%,#000 62%,rgba(0,0,0,.48) 82%,transparent 100%);
  transform:translate3d(0,var(--hero-arc-y,0px),0);
  animation:aseel-arc-breathe 13s ease-in-out infinite alternate;
}
.hero-wrap > .hero.container {z-index:1;position:relative}
.hero-wrap > .hero-bottom {z-index:2}
/* Hide old CSS ellipses if a cached layout still contains them. */
.hero-orbit {display:none!important}
.hero__rating,
.hero__topline.hero__rating {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  column-gap:11px;
  row-gap:7px;
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  font-family:Manrope,Arial,sans-serif;
  font-size:14px;
  letter-spacing:-.03em;
  color:#1c1b1a;
  font-weight:500;
}
.hero__stars {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px 5px 11px;
  background:#fff;
  border-radius:100px;
  color:#fe902c;
  font-size:15px;
  line-height:1.3;
  letter-spacing:3.5px;
  box-shadow:0 2px 5px rgba(81,51,31,.02);
}
.hero__rating-copy {white-space:normal;line-height:1.25}
.hero__rating-copy strong {font-weight:500}
.hero h1 {margin-top:24px;margin-bottom:18px}
.hero__audience,
.hero h1 .hero__audience {
  display:block;
  margin:16px auto 0;
  max-width:760px;
  font-size:clamp(14px,1.12vw,19px);
  line-height:1.5;
  letter-spacing:.035em;
  font-weight:700;
  text-transform:uppercase;
  color:#292321;
}
.hero .hero__actions {margin-top:26px}
.hero__contact-btn {min-width:172px}
.hero__contact-btn--pending {cursor:not-allowed;opacity:.76;filter:saturate(.78)}
.hero__contact-btn--pending:hover {transform:none}
.hero__art {
  perspective:1100px;
  margin:48px auto -60px;
  max-width:1160px;
  position:relative;
  z-index:1;
}
.hero__motion {
  width:100%;
  position:relative;
  transform:translate3d(0,var(--hero-parallax-y,0px),0) rotateX(var(--hero-parallax-tilt,0deg)) rotateY(var(--hero-parallax-yaw,0deg)) scale(var(--hero-parallax-scale,1));
  transform-origin:50% 72%;
  backface-visibility:hidden;
}
.hero__art.is-parallax-active .hero__motion {will-change:transform}
.hero__coach {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 24px 22px rgba(51,37,28,.17));
}
.hero__mini-stamp{z-index:2}
.hero-bottom{margin-top:25px}
.rtl .hero__rating {direction:ltr}
.rtl .hero__audience {letter-spacing:0;font-family:Tajawal,Arial,sans-serif;font-size:clamp(18px,1.7vw,24px)}
/* Quiet, staggered entrance inspired by the layering in the reference.
   Separate coach animation from its parallax wrapper: CSS + JS never fight
   over the same transform property. SSR HTML remains readable with JS off. */
@keyframes aseel-reveal-up {
  from {opacity:0;transform:translate3d(0,26px,0)}
  to {opacity:1;transform:translate3d(0,0,0)}
}
@keyframes aseel-coach-reveal {
  from {opacity:0;transform:translate3d(0,86px,0) scale(.955)}
  to {opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes aseel-stamp-reveal {
  from {opacity:0;transform:translate3d(0,35px,0) rotate(-8deg) scale(.7)}
  to {opacity:1;transform:translate3d(0,0,0) rotate(8deg) scale(1)}
}
@keyframes aseel-stamp-bob {
  from {transform:translate3d(0,0,0) rotate(8deg)}
  to {transform:translate3d(0,-7px,0) rotate(11deg)}
}
@keyframes aseel-arc-breathe {
  from {opacity:.77}
  to {opacity:1}
}
@keyframes aseel-dot-pop {
  from {transform:translateY(.015em) scale(.35);opacity:0}
  to {transform:translateY(.015em) scale(1);opacity:1}
}
.hero__rating {animation:aseel-reveal-up 650ms cubic-bezier(.2,.8,.2,1) .05s both}
.hero h1 .hero__h1-first {animation:aseel-reveal-up 820ms cubic-bezier(.16,1,.3,1) .16s both}
.hero h1 .hero__h1-second {animation:aseel-reveal-up 860ms cubic-bezier(.16,1,.3,1) .27s both}
.hero h1 .hero__audience {animation:aseel-reveal-up 720ms cubic-bezier(.16,1,.3,1) .39s both}
.hero__dot {animation:aseel-dot-pop 490ms cubic-bezier(.17,.89,.32,1.45) .74s both}
.hero > p {animation:aseel-reveal-up 760ms cubic-bezier(.16,1,.3,1) .43s both}
.hero__actions .hero__contact-btn {animation:aseel-reveal-up 770ms cubic-bezier(.16,1,.3,1) .58s both;position:relative;z-index:3}
.hero__actions .hero__contact-btn:nth-child(2) {animation-delay:.70s}
.hero__coach {animation:aseel-coach-reveal 1200ms cubic-bezier(.16,1,.3,1) .60s both}
.hero__mini-stamp {
  animation:aseel-stamp-reveal 960ms cubic-bezier(.16,1,.3,1) 1.08s both,
            aseel-stamp-bob 5.5s ease-in-out 2.05s infinite alternate;
}
/* Small touch interactions; labels, focus states and destinations stay intact. */
.hero__actions .hero__contact-btn:not(.hero__contact-btn--pending) {
  transition:box-shadow .3s ease,background-color .3s ease,border-color .3s ease;
}
.hero__actions .hero__contact-btn:not(.hero__contact-btn--pending):hover {
  box-shadow:0 13px 28px rgba(40,25,19,.17);
}
.hero__actions .hero__contact-btn:focus-visible {outline:3px solid #F46B42;outline-offset:4px}
.hero__stars {transition:box-shadow .3s ease}
.hero__rating:hover .hero__stars {box-shadow:0 5px 16px rgba(254,144,44,.16)}
/* Keep the buttons clickable when the bus rises dramatically while scrolling. */
.hero__actions {position:relative;z-index:4}

@media (min-width:1440px) {
  .hero__art {margin-top:48px}
  .hero-wrap {min-height:850px}
}
@media (max-width:920px) {
  .hero__art {margin:38px auto -26px}
  .hero__rating,.hero__topline.hero__rating {font-size:12px}
}
@media (max-width:650px) {
  .hero-wrap {background:linear-gradient(180deg,#ffe1d2 0%,#ffede4 72%,#fff3ed 100%)}
  .hero {padding-top:115px}
  .hero__rating,.hero__topline.hero__rating {column-gap:7px;font-size:10px;letter-spacing:-.035em}
  .hero__stars {font-size:10px;letter-spacing:2px;padding:5px 6px 5px 8px}
  .hero h1 {font-size:clamp(48px,13.1vw,76px);margin:20px auto 12px}
  .hero h1 .hero__audience {font-size:12px;margin-top:11px;line-height:1.5;letter-spacing:.02em}
  .rtl .hero h1 .hero__audience {font-size:15px;letter-spacing:0}
  .hero p {font-size:14px}
  .hero .hero__actions {margin-top:22px;gap:9px}
  .hero__contact-btn {min-width:0}
  .hero__art {width:117%;max-width:none;margin:37px 0 0;left:50%;transform:translateX(-50%);min-height:0}
  .rtl .hero__art {width:100%;left:auto;right:auto;transform:none;margin:37px auto 0}
  .hero__mini-stamp {top:15%;right:8%}
  .hero-bottom {margin-top:0}
}
@media (prefers-reduced-motion:reduce) {
  .hero__arcs,.hero__rating,.hero h1 .hero__h1-first,
  .hero h1 .hero__h1-second,.hero h1 .hero__audience,
  .hero__dot,.hero > p,.hero__actions .hero__contact-btn,
  .hero__coach,.hero__mini-stamp {animation:none!important}
  .hero__motion {transform:none!important}
  .hero__arcs {transform:none!important}
  .hero__art.is-parallax-active .hero__motion {will-change:auto}
}