/* ==========================================================================
   وصول — home page motion layer ("رحلة الوصول")
   Everything here degrades to a static, fully readable page without JS or with
   prefers-reduced-motion. `html.motion` is set inline before paint.
   ========================================================================== */

/* ---------- HERO ---------- */
.hero-v2 { min-height: calc(100svh - 72px); display: flex; align-items: center; isolation: isolate; }
.hero-v2 .container { padding-block: 72px 120px; grid-template-columns: 1.05fr .95fr; }
.hero-v2 h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 22px; }
.hero-v2 h1 .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero-v2 h1 .li { display: inline-block; }
.hero-v2 .lead { font-size: 1.18rem; max-width: 540px; }

.rotator { position: relative; display: inline-block; vertical-align: bottom; color: #9CC0FF; white-space: nowrap; }
.rotator > span:not(:first-child) { display: none; }
html.motion .rotator.is-on { height: 1.25em; overflow: hidden; transition: width .6s cubic-bezier(.65, 0, .35, 1); }
html.motion .rotator.is-on > span { display: block; position: absolute; inset-inline-start: 0; top: 0; }
.rotator::after {
  content: ""; position: absolute; inset-inline: 0; bottom: .02em; height: .09em; border-radius: 99px;
  background: linear-gradient(270deg, #9CC0FF, rgba(156, 192, 255, 0)); opacity: .6;
}

/* Aurora background */
.hero-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; mix-blend-mode: screen; }
.hero-aurora i:nth-child(1) { width: 520px; height: 520px; background: #1F4F9C; top: -160px; left: 8%; animation: drift1 18s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 420px; height: 420px; background: #2B62BC; bottom: -200px; right: 12%; opacity: .3; animation: drift2 22s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(3) { width: 300px; height: 300px; background: #5C8FE0; top: 30%; left: 40%; opacity: .18; animation: drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-140px, -60px) scale(.9); } }

/* Hero scene */
.hero-scene { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; justify-self: center; }
.hero-svg { width: 100%; height: 100%; overflow: visible; }
.hs-wp { fill: #0F2B5B; stroke: #9CC0FF; stroke-width: 2; transition: fill .3s, r .3s; }
.hs-wp.lit { fill: #9CC0FF; }
.hs-dest { fill: #9CC0FF; }
.hs-start { fill: #fff; }
.hs-traveler { fill: #fff; filter: drop-shadow(0 0 8px rgba(156, 192, 255, .95)); }
.hs-ping { fill: none; stroke: #9CC0FF; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ping 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.hs-ping2 { animation-delay: 1.3s; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.hs-glow { transform-box: fill-box; transform-origin: center; }
.hs-label {
  position: absolute; left: 15.2%; top: 82.6%; transform: translate(-50%, 24px); white-space: nowrap;
  font-size: .78rem; font-weight: 600; color: #DCE6F7; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  padding: 3px 10px; border-radius: 99px; backdrop-filter: blur(6px);
}
.hs-card {
  position: absolute; right: -4%; top: 27%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); min-width: 190px;
}
.hs-card .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.hs-card b { display: block; color: var(--navy-900); font-size: .92rem; }
.hs-card span { color: var(--muted); font-size: .78rem; }
.chip {
  position: absolute; left: var(--x); top: var(--y); white-space: nowrap; font-size: .8rem; font-weight: 600; color: #DCE6F7;
  padding: 6px 13px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px); transition: background .35s, color .35s, box-shadow .35s, border-color .35s;
}
.chip.lit { background: #9CC0FF; color: var(--navy-950); border-color: #9CC0FF; box-shadow: 0 0 28px rgba(156, 192, 255, .55); }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
  color: #9FB2D3; font-size: .8rem; font-weight: 500; z-index: 2;
}
.scroll-cue:hover { color: #fff; }
.scroll-cue i { width: 22px; height: 36px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: #9CC0FF; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* Intro: hidden until JS plays it (safety net reveals after 2.5s) */
html.motion [data-hero-in], html.motion:not(.motion-ready) .hero-v2 h1, html.motion [data-hero-scene] { opacity: 0; animation: safety-show .01s 2.5s forwards; }
html.motion-ready .hero-v2 h1 .li { opacity: 0; }
@keyframes safety-show { to { opacity: 1; } }
html.motion-ready [data-hero-in], html.motion-ready [data-hero-scene] { animation: none; }

/* ---------- STORY (pinned particle morph) ---------- */
.story { position: relative; background: linear-gradient(180deg, var(--navy-950) 0%, #071733 100%); color: #fff; overflow: hidden; }
.story::before {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 30% 50%, #000 10%, transparent 70%);
}
.story-inner { min-height: 100svh; display: flex; align-items: center; padding-block: 72px; }
.story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; position: relative; }
.kicker-light { color: #9CC0FF; }
.story-progress { display: flex; gap: 6px; margin: 6px 0 28px; max-width: 260px; }
.story-progress i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
.story-progress i::after { content: ""; position: absolute; inset: 0; background: #9CC0FF; transform-origin: right; transform: scaleX(var(--p, 0)); }
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.story-num {
  display: block; font-size: 3.6rem; font-weight: 700; line-height: 1; margin-bottom: 10px; color: transparent;
  -webkit-text-stroke: 1px rgba(156, 192, 255, .55); font-variant-numeric: tabular-nums;
}
.story-step h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.7rem); margin-bottom: 12px; }
.story-step p { color: #C9D6EE; font-size: 1.12rem; line-height: 1.9; max-width: 460px; margin: 0; }
.story-stage { display: none; position: relative; aspect-ratio: 1.15; width: 100%; max-height: 72svh; }
.story-canvas { width: 100%; height: 100%; display: block; }
.story-caption {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); font-size: .82rem; font-weight: 600; color: #DCE6F7;
  padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px);
}
html.has-story .story-stage { display: block; }
html.has-story .story-steps { display: block; position: relative; min-height: 300px; }
html.has-story .story-step { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
html.has-story .story-step.is-active { visibility: visible; }

/* ---------- JOURNEY LINE ---------- */
.journey { position: relative; }
.journey > section { position: relative; }
.journey-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.journey-track { fill: none; stroke: #CBD6E6; stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.journey-line { fill: none; stroke: var(--primary-500); stroke-width: 3; stroke-linecap: round; }
.journey-conn { fill: none; stroke: #CBD6E6; stroke-width: 2; stroke-dasharray: 2 5; transition: stroke .4s; }
.journey-conn.on { stroke: var(--primary-500); stroke-dasharray: none; }
.journey-node { fill: #fff; stroke: #CBD6E6; stroke-width: 2; transition: fill .4s, stroke .4s, stroke-width .4s; }
.journey-node.on { fill: var(--primary-500); stroke: var(--primary-100); stroke-width: 5; }
.journey-head { fill: var(--primary-500); filter: drop-shadow(0 0 7px rgba(43, 98, 188, .75)); }
html:not(.motion) .journey-svg { display: none; }

.kicker[data-checkpoint] { position: relative; transition: color .4s; }
html.motion [data-chapter]:not(.is-reached) .kicker[data-checkpoint] { color: var(--muted); }

/* Card spotlight */
[data-spot], .program-card { position: relative; }
[data-spot]::after, .program-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 98, 188, .09), transparent 60%);
}
[data-spot]:hover::after, .program-card:hover::after { opacity: 1; }

/* Steps connector */
.steps-v2 { position: relative; padding-top: 34px; }
.steps-line { position: absolute; top: 9px; inset-inline: 48px; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.steps-line i { position: absolute; inset: 0; background: var(--primary-500); transform-origin: right; transform: scaleX(var(--fill, 0)); }
html:not(.motion) .steps-line i { transform: scaleX(1); }
.steps-v2 .step::after {
  content: ""; position: absolute; top: -32px; inset-inline-start: 41px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-2); transition: background .35s, border-color .35s, box-shadow .35s;
}
.steps-v2 .step.on::after, html:not(.motion) .steps-v2 .step::after { background: var(--primary-500); border-color: var(--primary-100); box-shadow: 0 0 0 5px rgba(43, 98, 188, .12); }
.steps-v2 .step .ic { transition: background .35s, transform .35s; }
.steps-v2 .step.on .ic { background: var(--primary-500); transform: scale(1.06); }

/* CTA destination */
.cta-v2 { position: relative; overflow: hidden; isolation: isolate; }
.cta-v2::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .8s;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(156, 192, 255, .55) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px;
}
.cta-v2.arrived::before { opacity: 1; animation: spin 4s linear infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
.cta-kicker { display: inline-block; color: #9CC0FF; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.cta-burst { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.cta-burst span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #9CC0FF; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-v2 .container { grid-template-columns: 1fr; padding-block: 56px 120px; }
  .hero-v2 .hero-scene { max-width: 380px; margin-top: -8px; }
  .hs-card { display: none; }
  .story-grid { grid-template-columns: 1fr; gap: 20px; }
  .story-stage { aspect-ratio: auto; height: 40svh; order: -1; }
  html.has-story .story-steps { min-height: 250px; }
  .story-inner { padding-block: 32px; }
  .story-num { font-size: 2.6rem; }
}
@media (max-width: 640px) {
  .hero-v2 h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .steps-line, .steps-v2 .step::after { display: none; }
  .steps-v2 { padding-top: 0; }
  html.has-story .story-steps { min-height: 270px; }
  .story-step p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aurora i, .hs-ping, .scroll-cue i::after, .cta-v2.arrived::before { animation: none !important; }
}

/* Static story (no JS / reduced motion): a clean 2×2 grid instead of an empty stage column */
html:not(.has-story) .story-grid { grid-template-columns: 1fr; }
html:not(.has-story) .story-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
@media (max-width: 760px) { html:not(.has-story) .story-steps { grid-template-columns: 1fr; } }