/* Landing motion layer — transform/opacity only, progressive (needs html.js), reduced-motion safe. */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ── Base fixes ───────────────────────────────────────────────────────────── */
main > section {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* touch targets (≥44px) for small inline links */
.contact-meta a,
.place-contact a,
.office-list a,
.social-btn,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
}
.map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  color: var(--fg-muted);
}

/* ── Scroll progress ──────────────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  height: 100%;
  transform-origin: right center;
  transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, #7a5a12, #f5d76e, #fff3b8);
  box-shadow: 0 0 12px rgba(245, 215, 110, 0.6);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(100svh - var(--nav-h) - var(--dock-h), 760px);
  align-content: center;
  padding-bottom: 2.5rem;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -25% -15% auto;
  height: 90%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(55% 60% at 68% 22%, rgba(212, 175, 55, 0.2), transparent 70%);
  animation: sky-breathe 9s ease-in-out infinite alternate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(75% 60% at 62% -5%, rgba(255, 236, 160, 0.32), transparent 70%);
  opacity: 0;
  transition: opacity 0.9s ease-out;
}
.hero.is-flash::after {
  opacity: 1;
  transition-duration: 0.05s;
}
.fx-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
@keyframes sky-breathe {
  from {
    opacity: 0.65;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* seal: float, orbit, halos, tilt, sheen */
.hero-visual {
  display: grid;
  place-items: center;
}
.seal-stage {
  position: relative;
  width: min(58vw, 236px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: perspective(900px) rotateX(calc(var(--ry, 0) * -8deg)) rotateY(calc(var(--rx, 0) * 10deg));
  transition: transform 0.25s ease-out;
  animation: seal-float 7s ease-in-out infinite;
  will-change: transform;
}
.seal-stage .seal-ring {
  position: relative;
  width: 100%;
}
.seal-stage::before,
.seal-stage::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  pointer-events: none;
  animation: seal-spin 6.5s linear infinite;
}
.seal-stage::before {
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(245, 215, 110, 0.95) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.seal-stage::after {
  background: radial-gradient(circle at 50% 0%, #fffbe6 0 3px, rgba(245, 215, 110, 0.85) 4px, transparent 12px);
}
@keyframes seal-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes seal-float {
  50% {
    translate: 0 -10px;
  }
}
.halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 215, 110, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: halo 4.4s ease-out infinite;
}
.halo-2 {
  animation-delay: 2.2s;
}
@keyframes halo {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}
.seal-sheen {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at var(--sx, 32%) var(--sy, 24%), rgba(255, 255, 255, 0.2), transparent 46%);
  mix-blend-mode: overlay;
}

/* hero copy: staged entrance + shimmering title */
.js .hero-copy > * {
  animation: rise 0.95s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.js .hero-visual {
  animation: pop 1.3s var(--ease) both;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.84);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-copy h1 {
  background: linear-gradient(100deg, #e0b32e 0%, #f5d76e 36%, #fff7cf 47%, #f5d76e 58%, #e0b32e 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-bright);
}
.js .hero-copy h1 {
  animation: rise 0.95s var(--ease) both, shimmer 7s linear 1.4s infinite;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms), 1.4s;
}
@keyframes shimmer {
  to {
    background-position: -260% 0;
  }
}
.latin {
  letter-spacing: 0.12em;
}

.scroll-cue {
  display: none;
}

/* ── Reveal on scroll ─────────────────────────────────────────────────────── */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc(var(--rd, 0) * 85ms);
}
.js [data-reveal="scale"] {
  transform: scale(0.94);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.section-head h2::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 99px;
  background: linear-gradient(90deg, #7a5a12, #f5d76e);
  transition: width 0.9s var(--ease) 0.3s;
}
.section-head.is-in h2::after,
html:not(.js) .section-head h2::after {
  width: 3.5rem;
}

/* ── Cards: spotlight, lift, icon draw ────────────────────────────────────── */
.card,
.stats article,
.rider-card {
  position: relative;
  transition: translate 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card::after,
.stats article::after,
.rider-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  transition: opacity 0.3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 215, 110, 0.17), transparent 62%);
}
@media (hover: hover) {
  .card:hover,
  .stats article:hover,
  .rider-card:hover {
    translate: 0 -5px;
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.18);
  }
  .card:hover::after,
  .stats article:hover::after,
  .rider-card:hover::after {
    opacity: 1;
  }
}
.fx-ready .card .icon path,
.fx-ready .card .icon circle,
.fx-ready .stop-node path,
.fx-ready .stop-node circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease) 0.25s;
}
.fx-ready .card.is-in .icon path,
.fx-ready .card.is-in .icon circle,
.fx-ready .stop.is-in .stop-node path,
.fx-ready .stop.is-in .stop-node circle {
  stroke-dashoffset: 0;
}
.card .icon {
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) {
  .card:hover .icon {
    transform: rotate(-6deg) scale(1.08);
  }
}

/* ── News ticker: soft edges ──────────────────────────────────────────────── */
.news-viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* ── Journey (من الطلب إلى باب الزبون) ───────────────────────────────────── */
.journey {
  padding: 3rem 1rem;
}
.route {
  --node: 56px;
  --p: 0;
  position: relative;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.7rem;
  transition: --p 0.55s ease-out;
}
.stop {
  position: relative;
  z-index: 1;
  min-height: var(--node);
  padding-inline-start: calc(var(--node) + 1.1rem);
}
.stop-node {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: var(--node);
  height: var(--node);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1.5px solid rgba(212, 175, 55, 0.3);
  color: #9a8a5f;
  transition: color 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease), scale 0.5s var(--ease);
}
.stop.is-reached .stop-node {
  color: var(--ink);
  background: linear-gradient(180deg, #f5d76e, #c9a227);
  border-color: #f5d76e;
  box-shadow: 0 0 0 7px rgba(245, 215, 110, 0.12), 0 10px 26px rgba(212, 175, 55, 0.35);
  scale: 1.05;
}
.stop h3 {
  font-size: 1.12rem;
  margin-bottom: 0.15rem;
}
.stop p {
  margin: 0;
  color: var(--fg-muted);
}
.route-line {
  position: absolute;
  z-index: 0;
  inset-inline-start: calc(var(--node) / 2 - 1.5px);
  top: calc(var(--node) / 2);
  bottom: calc(var(--node) / 2);
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
}
.route-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  transform-origin: top;
  transform: scaleY(var(--p));
  background: linear-gradient(180deg, #f5d76e, #c9a227);
  box-shadow: 0 0 14px rgba(245, 215, 110, 0.65);
}
.rider {
  position: absolute;
  z-index: 2;
  inset-inline-start: calc(var(--node) / 2 - 16px);
  top: calc(var(--node) / 2 + (100% - var(--node)) * var(--p) - 16px);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff1a8, #d4af37);
  box-shadow: 0 0 0 5px rgba(245, 215, 110, 0.2), 0 6px 18px rgba(0, 0, 0, 0.55);
  animation: rider-pulse 2s ease-in-out infinite;
}
@keyframes rider-pulse {
  50% {
    box-shadow: 0 0 0 10px rgba(245, 215, 110, 0.08), 0 6px 18px rgba(0, 0, 0, 0.55);
  }
}
@media (min-width: 900px) {
  .journey {
    max-width: 1180px;
    margin-inline: auto;
    padding: 4rem 2rem;
  }
  .route {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.6rem;
  }
  .stop {
    padding-inline-start: 0;
    padding-top: calc(var(--node) + 1.2rem);
    text-align: center;
  }
  .stop-node {
    inset-inline-start: auto;
    left: 50%;
    translate: -50% 0;
  }
  .stop.is-reached .stop-node {
    scale: 1.06;
  }
  .route-line {
    inset-inline: 12.5%;
    top: calc(var(--node) / 2 - 1.5px);
    bottom: auto;
    width: auto;
    height: 3px;
  }
  .route-fill {
    transform-origin: right;
    transform: scaleX(var(--p));
  }
  .rider {
    inset-inline-start: auto;
    right: calc(12.5% + 75% * var(--p) - 16px);
    top: calc(var(--node) / 2 - 16px);
  }
}

/* ── Gallery / partner / map / form / footer ──────────────────────────────── */
.shot-open {
  overflow: hidden;
}
.shot.is-active img {
  animation: kenburns 10s ease-out both;
}
@keyframes kenburns {
  from {
    transform: scale(1.09);
  }
  to {
    transform: scale(1);
  }
}
.map-pin-icon .pin {
  position: relative;
  display: block;
  animation: pin-drop 0.85s var(--ease) both;
  animation-delay: calc(var(--k, 0) * 110ms);
}
@keyframes pin-drop {
  0% {
    transform: translateY(-36px) scale(0.6);
    opacity: 0;
  }
  60% {
    transform: translateY(4px) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
.pin-hq::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  border: 2px solid rgba(245, 215, 110, 0.75);
  opacity: 0;
  animation: ground-ping 2.6s ease-out 1.2s infinite;
}
@keyframes ground-ping {
  0% {
    transform: scale(0.3);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.form-note:not(:empty) {
  animation: rise 0.5s var(--ease) both;
}
.site-footer img {
  animation: bolt-pulse 3.2s ease-in-out infinite;
}
@keyframes bolt-pulse {
  50% {
    filter: drop-shadow(0 0 10px rgba(245, 215, 110, 0.75));
  }
}
.btn-gold {
  translate: var(--tx, 0) var(--ty, 0);
}

/* ── Mobile composition ───────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .hero {
    gap: 1.1rem;
    padding: 0.9rem 1rem 1.6rem;
  }
  .hero-actions {
    margin: 0.9rem 0;
  }
  .hero-note {
    display: none;
  }
}

/* ── Desktop ──────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* map and office panel end at the same height (the list scrolls inside) */
  .map-canvas {
    height: 460px;
  }
  .office-list {
    max-height: 300px;
  }
  .seal-stage {
    width: min(40vw, 400px);
  }
  .hero {
    padding-bottom: 5rem;
  }
  .scroll-cue {
    display: grid;
    position: absolute;
    bottom: 1.2rem;
    inset-inline: 0;
    margin-inline: auto;
    width: 28px;
    height: 46px;
    border: 1.5px solid rgba(245, 215, 110, 0.5);
    border-radius: 16px;
    place-items: start center;
  }
  .scroll-cue span {
    width: 4px;
    height: 9px;
    margin-top: 8px;
    border-radius: 2px;
    background: #f5d76e;
    animation: cue 1.9s ease-in-out infinite;
  }
}
@keyframes cue {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(14px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ── Reduced motion: everything visible, nothing moving ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .hero-copy > *,
  .js .hero-visual,
  .js .hero-copy h1,
  .hero::before,
  .seal-stage,
  .seal-stage::before,
  .seal-stage::after,
  .halo,
  .scroll-cue span,
  .shot.is-active img,
  .map-pin-icon .pin,
  .pin-hq::after,
  .site-footer img,
  .rider,
  .form-note:not(:empty) {
    animation: none !important;
  }
  .hero-copy h1 {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .halo,
  .fx-sky,
  .scroll-progress {
    display: none;
  }
  .route {
    --p: 1;
    transition: none;
  }
  .fx-ready .card .icon path,
  .fx-ready .card .icon circle,
  .fx-ready .stop-node path,
  .fx-ready .stop-node circle {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  .section-head h2::after {
    width: 3.5rem;
    transition: none;
  }
}

/* the hero counters live inside <strong>; keep them inline (the base `.proof span` rule is for labels) */
.proof strong {
  white-space: nowrap;
}
.proof strong span {
  display: inline;
  font-size: inherit;
  color: inherit;
}

/* office list scrolls inside its panel: fade the bottom edge as a hint (padding keeps the last item readable) */
.office-list {
  padding-bottom: 1.6rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent);
}

/* route: the rider hands over to a "delivered" ripple on the last stop */
.rider {
  transition: opacity 0.45s ease, scale 0.45s ease;
}
.route.is-done .rider {
  opacity: 0;
  scale: 0.4;
  animation: none;
}
.route.is-done .stop:nth-child(4) .stop-node {
  animation: arrive 1.8s ease-out 1;
}
@keyframes arrive {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 215, 110, 0.65), 0 10px 26px rgba(212, 175, 55, 0.35);
  }
  100% {
    box-shadow: 0 0 0 26px rgba(245, 215, 110, 0), 0 10px 26px rgba(212, 175, 55, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .route.is-done .stop:nth-child(4) .stop-node {
    animation: none;
  }
}