.miyaar-animated-hero{
  --mah-bg:#fff;
  --mah-text:#2b2b2b;
  --mah-accent:#f4a100;
  --mah-muted:#4b5563;
  --mah-sky:#0b2a63;
  --mah-title-size:clamp(34px,4vw,56px);
  --mah-sub-size:clamp(14px,1.3vw,18px);
  --mah-font-weight:800;
  --mah-letter:0.10em;
  --mah-word:0.05em;
  --mah-align:center;
  background:var(--mah-bg);
  color:var(--mah-text);
  min-height:min(860px, 92vh);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  padding: clamp(18px, 4vw, 48px) 18px 0;
  box-sizing:border-box;
}

.miyaar-animated-hero *{ box-sizing:border-box; }

.miyaar-animated-hero .mah-inner{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.miyaar-animated-hero .mah-content{
  text-align:var(--mah-align);
  width:100%;
  padding-top: 18px;
}

.miyaar-animated-hero .mah-logo{
  display:inline-block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.08));
}

.miyaar-animated-hero .mah-logo--float{ animation: mahFloat 5.5s ease-in-out infinite; }
.miyaar-animated-hero .mah-logo--pulse{ animation: mahPulse 2.6s ease-in-out infinite; }
.miyaar-animated-hero .mah-logo--spin{ animation: mahSpin 12s linear infinite; }

@keyframes mahFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes mahPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
@keyframes mahSpin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

.miyaar-animated-hero .mah-title{
  font-size: var(--mah-title-size);
  font-weight: var(--mah-font-weight);
  letter-spacing: var(--mah-letter);
  word-spacing: var(--mah-word);
  margin: 0;
  line-height: 1.05;
  position:relative;
  display:inline-block;
}

.miyaar-animated-hero .mah-title-text{
  display:inline-block;
  white-space:pre-wrap;
}

.miyaar-animated-hero .mah-title--reflect::after{
  content: attr(data-text);
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  transform: scaleY(-1);
  opacity:.22;
  color: var(--mah-text);
  letter-spacing: var(--mah-letter);
  word-spacing: var(--mah-word);
  filter: blur(.2px);
  /* fade mask */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
  pointer-events:none;
}

.miyaar-animated-hero .mah-sub{
  margin: 18px auto 0;
  max-width: 820px;
  font-size: var(--mah-sub-size);
  line-height: 1.8;
  color: var(--mah-muted);
}

.miyaar-animated-hero .mah-bottom{
  width:100%;
  margin-top: 34px;
}

.miyaar-animated-hero .mah-skyline-img{
  width:100%;
  height: min(140px, 18vh);
  object-fit: contain;
  display:block;
}

/* Backward compatibility (older versions used inline SVG). */
.miyaar-animated-hero .mah-skyline{
  width:100%;
  height: min(140px, 18vh);
  display:block;
}

.miyaar-animated-hero .mah-unit{
  display:inline-block;
  will-change: transform, opacity;
}

.miyaar-animated-hero .mah-unit.mah-accent{
  color: var(--mah-accent);
}

.miyaar-animated-hero[data-stroke="1"] .mah-title{
  -webkit-text-stroke: 1px rgba(0,0,0,.15);
  text-stroke: 1px rgba(0,0,0,.15);
}
.miyaar-animated-hero[data-shadow="1"] .mah-title{
  text-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.miyaar-animated-hero[data-gradient="1"] .mah-title{
  background: linear-gradient(90deg, var(--mah-text), var(--mah-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.miyaar-animated-hero .mah-unit.mah-anim-up{ opacity:0; transform: translateY(16px); }
.miyaar-animated-hero .mah-unit.mah-anim-down{ opacity:0; transform: translateY(-16px); }
.miyaar-animated-hero .mah-unit.mah-anim-fade{ opacity:0; transform: translateY(0); }

.miyaar-animated-hero.mah-running .mah-unit{
  animation-fill-mode: both;
}

@keyframes mahUp { to { opacity:1; transform: translateY(0);} }
@keyframes mahDown { to { opacity:1; transform: translateY(0);} }
@keyframes mahFade { to { opacity:1; } }

.miyaar-animated-hero.mah-no-motion .mah-unit,
@media (prefers-reduced-motion: reduce){
  .miyaar-animated-hero .mah-unit{ animation: none !important; opacity:1 !important; transform:none !important; }
  .miyaar-animated-hero .mah-logo{ animation:none !important; }
}