/* Masir hero — clean recreation of the original (topographic bg + big bilingual headline).
   Piece 1: background + headline. (floating parallax shapes + course card come next.) */

.masir-hero{
  position:relative; direction:rtl; overflow:hidden; isolation:isolate;
  margin-top:-64px;                 /* slide up under the transparent fixed-feel nav */
  min-height:clamp(520px,82vh,680px);
  display:flex; align-items:center; justify-content:flex-start; text-align:right;
}

/* topographic contour backdrop — subtle, theme-aware */
.masir-hero-topo{
  position:absolute; inset:0; z-index:0;
  background:url("/images/topo-bg.svg") center/cover no-repeat;
  opacity:.08; filter:grayscale(1);
}
.dark .masir-hero-topo{opacity:.11; filter:grayscale(1) brightness(.8);}

/* fade the backdrop into the page on the edges */
.masir-hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb,var(--background) 28%,transparent) 0%, transparent 26%, transparent 52%, var(--background) 100%);
}

.masir-hero-inner{ position:relative; z-index:3; max-width:640px; padding:124px 7vw 64px 24px; }

.masir-hero-welcome{
  color:var(--muted-foreground); font-weight:600;
  font-size:clamp(15px,2vw,18px); letter-spacing:.6px; margin:0 0 16px;
}

.masir-hero-title{
  margin:0 0 32px; font-weight:600; color:var(--foreground);
  font-size:clamp(26px,4.2vw,46px); line-height:1.55;
}
.masir-hero-title span{ display:block; }

/* the big "مسیر" wordmark */
.masir-hero-word{
  font-weight:700; line-height:.95; letter-spacing:.04em;
  font-size:clamp(86px,19vw,210px); margin:2px 0 30px;
  background:linear-gradient(180deg,
    var(--foreground) 0%,
    color-mix(in srgb,var(--primary) 65%,var(--foreground)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.masir-hero-cta{ display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; }

@media (max-width:640px){
  .masir-hero{ min-height:auto; }
  .masir-hero-inner{ padding:48px 20px; }
}

/* no divider line directly under the hero */
#courses{border-top:none;}

/* —— animated course "routes" traced over the topographic map —— */
.masir-hero-routes{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.route{
  fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  opacity:.6; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1;
  animation:route-draw 18s ease-in-out forwards;
}
#route2{ animation-delay:2s; animation-duration:22s; }
#route3{ animation-delay:1.2s; }
@keyframes route-draw{ to{ stroke-dashoffset:0; } }
/* light theme: white is invisible on a light map → use the ink color instead */
@media (prefers-reduced-motion:reduce){ .route{animation:none;stroke-dashoffset:0;} .route-dot{display:none;} }

/* per-course route colors (derived from each course card) */
#route1{ stroke:#EB4CF0; }   /* PD — fun magenta */
#route2{ stroke:#F7AC3B; }   /* AI — fun amber */


/* participant dots — hidden until routes finish drawing, then fade in (fill+glow inline by JS) */
.p-dot{ opacity:0; transition:opacity 1.6s ease; }
.masir-hero-routes.dots-in .p-dot{ opacity:1; }