/* Hilal: every live MyPakistan app on the flag's crescent, the star (one MyPakistan ID) in its opening.
   Built by js/hero-apps.js. Mounted on the photo (split, split-l, poster), beside the text (wide default hero)
   or in the text flow (centred compositions, small screens without a photo block). */
.hilal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; container-type: size; pointer-events: none; }
.hilal--side, .hilal--photo { z-index: 3; } /* above .hero-in, whose full-width box would otherwise take the clicks */
.hilal--side { inset: 68px 0 0 52%; }
/* photo placement: the same box as .hero-img in each composition (events.css) */
@media (min-width: 960px) {
  [data-compose="split"] .hilal--photo { inset: 68px 0 0 50%; }
  [data-compose="split-l"] .hilal--photo { inset: 68px 50% 0 0; }
  [data-compose="poster"] .hilal--photo { inset: 0 0 auto 50%; height: 56vh; min-height: 380px; }
}
@media (max-width: 959px) { .hilal--photo { inset: 68px 0 auto 0; height: 44vh; min-height: 240px; } }
.hilal--flow { position: relative; inset: auto; height: clamp(300px, 92vw, 440px); margin: 26px 0 0; container-type: size; }
[data-compose="center"] .hilal--flow, [data-compose="sky"] .hilal--flow, [data-compose="solemn"] .hilal--flow, [data-compose="verse"] .hilal--flow { margin-inline: auto; width: min(100%, 440px); }
.hilal__ring { position: relative; width: min(94cqmin, 580px); aspect-ratio: 1; container-type: inline-size; pointer-events: auto; touch-action: pan-y;
  --ic: clamp(40px, 12.6cqw, 74px); }

/* the moon disc behind the centre label keeps text readable on any photo */
.hilal__core { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(255,255,255,.14), rgba(4,30,16,.55) 62%, rgba(4,30,16,.25) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(1.2); backdrop-filter: blur(7px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 30px 80px -30px rgba(0,0,0,.6); }
.hilal__label { position: absolute; left: 50%; top: 50%; width: 50%; translate: -50% -50%; text-align: center; color: #fff; pointer-events: none; }
.hilal__name { display: block; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(18px, 6.6cqw, 34px); text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hilal__tag { display: block; margin-top: 6px; font-size: clamp(11.5px, 3.1cqw, 15px); line-height: 1.3; color: rgba(255,255,255,.86); }
.hilal__hint { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; font-size: clamp(10.5px, 2.5cqw, 12.5px); font-weight: 700; letter-spacing: .04em;
  color: var(--hc, #2fbf71); background: rgba(255,255,255,.92); }
.hilal__label > * { transition: opacity .28s ease, transform .28s ease; }
.hilal__label.is-swap > * { opacity: 0; transform: translateY(6px); }

/* the crescent line and the light that runs along it */
.hilal__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hilal__arc .base { fill: none; stroke: rgba(255,255,255,.22); stroke-width: .35; stroke-dasharray: .6 1.4; stroke-linecap: round; }
.hilal__arc .comet { fill: none; stroke: url(#hilal-g); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 16 200; filter: drop-shadow(0 0 1.4px #7ef0b0);
  animation: hilal-comet 5.5s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes hilal-comet { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -170; } }

/* one app */
.hilal__app { position: absolute; left: calc(50% + var(--x) * 40%); top: calc(50% + var(--y) * 40%); width: var(--ic); height: var(--ic);
  margin: calc(var(--ic) / -2) 0 0 calc(var(--ic) / -2); border-radius: 28%; text-decoration: none; outline: none; will-change: transform; z-index: 1; }
.hilal__app.is-on { z-index: 3; }
.hilal__pop { display: block; width: 100%; height: 100%; animation: hilal-in .9s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes hilal-in { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.15) rotate(-40deg); } to { opacity: 1; transform: none; } }
.hilal__float { display: block; width: 100%; height: 100%; animation: hilal-float var(--fd, 6s) ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes hilal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hilal__tile { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 28%; overflow: hidden;
  background: var(--tile); box-shadow: 0 10px 24px -10px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.18);
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.hilal__tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 42%); mix-blend-mode: soft-light; }
.hilal__tile .logo { display: grid; place-items: center; width: 100%; height: 100%; background: none !important; }
.hilal__tile svg { width: 58%; height: 58%; }
.hilal__app[data-plain] .hilal__tile svg { width: 74%; height: 74%; }
/* brand-colour light under the active app, plus a ring that ripples out */
.hilal__halo { position: absolute; inset: -38%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 0%, transparent 62%); filter: blur(4px); }
.hilal__app.is-on .hilal__halo { opacity: 1; }
.hilal__app.is-on .hilal__tile { transform: scale(1.14); box-shadow: 0 16px 34px -12px var(--c), 0 0 0 2px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.hilal__app.is-on::before { content: ""; position: absolute; inset: -6px; border-radius: 32%; border: 2px solid var(--c); pointer-events: none;
  animation: hilal-ripple 1.6s ease-out infinite; }
@keyframes hilal-ripple { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
.hilal__app:focus-visible .hilal__tile { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c); }
.hilal__app:active .hilal__tile { transform: scale(.94); transition-duration: .08s; }

/* the star: one MyPakistan ID for every app */
.hilal__star { position: absolute; left: calc(50% + .7071 * 31%); top: calc(50% - .7071 * 31%); width: calc(var(--ic) * .82); height: calc(var(--ic) * .82);
  margin: calc(var(--ic) * -.41) 0 0 calc(var(--ic) * -.41); display: grid; place-items: center; border-radius: 50%; color: #fff; text-decoration: none; z-index: 2;
  animation: hilal-in .9s cubic-bezier(.34,1.56,.64,1) both .05s; }
.hilal__star svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(255,255,255,.65)); animation: hilal-twinkle 3.2s ease-in-out infinite; }
@keyframes hilal-twinkle { 0%, 100% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 8px rgba(255,255,255,.55)); } 50% { transform: rotate(18deg) scale(1.1); filter: drop-shadow(0 0 16px rgba(255,240,180,.95)); } }
.hilal__star:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* quiet versions: solemn days and reduced motion keep the crescent, drop the motion and colour light */
[data-compose="solemn"] .hilal__comet, [data-compose="solemn"] .hilal__arc .comet { display: none; }
[data-compose="solemn"] .hilal__float, [data-compose="solemn"] .hilal__star svg { animation: none; }
[data-compose="solemn"] .hilal__tile { filter: grayscale(.85); }
[data-compose="solemn"] .hilal__app.is-on::before, [data-compose="solemn"] .hilal__halo { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hilal__pop, .hilal__float, .hilal__star, .hilal__star svg, .hilal__arc .comet, .hilal__app.is-on::before { animation: none !important; }
}
:root[data-mp-motion="reduce"] :is(.hilal__pop, .hilal__float, .hilal__star, .hilal__star svg, .hilal__arc .comet, .hilal__app.is-on::before) { animation: none !important; }
/* beside-the-text placement: the text column gives the crescent the right half */
.hero:has(> .hilal--side) .hero-in > :not(.skyline):not(.hero-meta) { max-width: 48%; }