/* Harrat Ventures home page: the walkthrough (assets/js/walkthrough.js). Modes are classes on <html>, set in the
   page head: .walk (motion allowed), plus .walk-pin (wide and tall enough: the diagram sections hold still and
   step) or .walk-lite (phones and short screens: decks). Without them (reduced motion) nothing here applies.
   Text is never hidden, faded or moved by scroll: the states below change accents only. */

/* Shared with the intro (hero mark) and the Ecosystem mark: facets driven by --u, 0 = apart and clear, 1 = whole */
:root .hv-scrub .mark .fct{transition:none;transform:translate(calc(var(--dx)*(1 - var(--u,0))),calc(var(--dy)*(1 - var(--u,0)))) rotate(calc(var(--r)*(1 - var(--u,0))));opacity:var(--u,0)}

/* Every walk mode. The script keeps the reader's place itself when the layout changes (language, resize, fonts),
   so the browser's own scroll anchoring is off: it would move the page before the script reads where the reader
   was. The ticker and the line under Madinah follow the scroll (the script writes their transforms). */
:root.walk{overflow-anchor:none}
:root.walk .tick .track{animation:none}
:root.walk .hv-under{transition:none}

/* ---------- walk-pin: the diagram sections hold still (native sticky; the script sets the height and --pin-top) ---------- */
:root.walk-pin [data-walk].hv-pin>.wrap{position:sticky;top:var(--pin-top,0px)}
:root.walk-pin:not([data-theme=light]) .sunk.hv-pin{background:var(--basalt-975)}

/* Shorter screens: a little less air, so every section fits while it holds; the hero keeps its buttons on screen */
@media (max-height:820px){
:root.walk-pin :is([data-walk=approach],[data-walk=focus],[data-walk=principles],[data-walk=ecosystem]) .head{margin-bottom:40px}
:root.walk-pin [data-walk] .pn{min-height:360px}
:root.walk-pin [data-walk] .eco .mk{margin-top:32px}
:root.walk-pin .hero .copy{padding-top:clamp(105px,calc(100svh - 640px),180px)}
:root.walk-pin .hero .display{font-size:min(clamp(46px,7vw,108px),11svh)}
:root.walk-pin .hero .hmark{margin-bottom:clamp(24px,4svh,40px)}
:root.walk-pin .hero .ctas{margin-top:clamp(28px,4svh,40px)}
}
:root.walk-pin.hv-hero-tight .hero .hmark{width:64px;margin-bottom:20px}
:root.walk-pin.hv-hero-tight .hero .display{font-size:min(clamp(46px,7vw,108px),10svh);margin-top:20px}
:root.walk-pin.hv-hero-tight .hero .lede{margin-top:20px}
:root.walk-pin.hv-hero-tight .hero .ctas{margin-top:24px}

/* The part being read is lit (the panel's own hover look; an ember outline on the card) */
:root.walk-pin .hv-pin .pn{transition:opacity var(--dur-deliberate) var(--ease-enter) var(--d,0ms),transform var(--dur-deliberate) var(--ease-enter) var(--d,0ms),background var(--dur-base) var(--ease-standard),box-shadow var(--dur-slow) var(--ease-standard)}
:root.walk-pin .hv-pin .pn.is-on{background:var(--surface-3);box-shadow:inset 0 2px 0 var(--accent)}
:root.walk-pin .hv-pin .pn.is-on .go{color:var(--accent-text)}
/* (in the light theme the sunk section itself is surface-3, so the lit panel goes one step further) */
:root.walk-pin[data-theme=light] .hv-pin .pn.is-on{background:var(--surface-4)}
:root.walk-pin .hv-pin .fcard{transition:opacity var(--dur-deliberate) var(--ease-enter) var(--d,0ms),transform var(--dur-deliberate) var(--ease-enter) var(--d,0ms),box-shadow var(--dur-slow) var(--ease-standard)}
:root.walk-pin .hv-pin .fcard.is-on{box-shadow:inset 0 0 0 1px var(--accent-border)}

/* Approach: the rail draws to each panel in turn (state k: node k and the line into it), then on to the arrow */
:root.walk-pin .hv-pin .hv-rail .ln{stroke-dashoffset:1;transition:stroke-dashoffset .42s cubic-bezier(.45,0,.25,1) 0s}
:root.walk-pin .hv-pin.ws2 .hv-rail .ln[data-k="2"],:root.walk-pin .hv-pin.ws3 .hv-rail .ln[data-k="3"],:root.walk-pin .hv-pin.ws4 .hv-rail .ln[data-k="4"]{stroke-dashoffset:0}
:root.walk-pin .hv-pin .hv-rail .nd{scale:0;transition:scale .42s var(--ease-standard) 0s}
:root.walk-pin .hv-pin.ws1 .hv-rail .nd[data-k="1"]{scale:1}
:root.walk-pin .hv-pin.ws2 .hv-rail .nd[data-k="2"],:root.walk-pin .hv-pin.ws3 .hv-rail .nd[data-k="3"]{scale:1;transition-delay:.28s}
:root.walk-pin .hv-pin .hv-rail .hd{opacity:0;transition:opacity .3s var(--ease-enter) 0s}
:root.walk-pin .hv-pin.ws4 .hv-rail .hd{opacity:.85;transition-delay:.42s}

/* Focus: each card's glyph draws when its card is read, and stays */
:root.walk-pin .hv-pin .hv-glyph .ln{stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-fracture) 0s}
:root.walk-pin .hv-pin .hv-glyph .ln.hot{stroke:var(--border-strong);transition:stroke-dashoffset .9s var(--ease-fracture) 0s,stroke .6s var(--ease-standard) 0s}
:root.walk-pin .hv-pin .hv-glyph :is(.nd,.core){scale:0;transition:scale .35s var(--ease-standard) 0s}
:root.walk-pin .hv-pin.ws1 .fcard:nth-child(1) .hv-glyph .ln,:root.walk-pin .hv-pin.ws2 .fcard:nth-child(2) .hv-glyph .ln{stroke-dashoffset:0;transition-delay:calc(var(--i) * 110ms + 250ms)}
:root.walk-pin .hv-pin.ws1 .fcard:nth-child(1) .hv-glyph .ln.hot,:root.walk-pin .hv-pin.ws2 .fcard:nth-child(2) .hv-glyph .ln.hot{transition-delay:calc(var(--i) * 110ms + 250ms),1.2s}
:root.walk-pin .hv-pin.ws1 .fcard:nth-child(1) .g-rings .ln.hot{stroke:var(--accent)}
:root.walk-pin .hv-pin.ws2 .fcard:nth-child(2) .g-net .ln.hot{stroke:var(--data)}
:root.walk-pin .hv-pin.ws1 .fcard:nth-child(1) .hv-glyph .nd,:root.walk-pin .hv-pin.ws2 .fcard:nth-child(2) .hv-glyph .nd{scale:1;transition-delay:calc(var(--i) * 70ms + 700ms)}
:root.walk-pin .hv-pin.ws1 .fcard:nth-child(1) .hv-glyph .core,:root.walk-pin .hv-pin.ws2 .fcard:nth-child(2) .hv-glyph .core{scale:1;transition:scale .45s var(--ease-standard) 1.15s}

/* How we work: the signal glides to each principle and its bar draws; earlier bars stay */
:root.walk-pin .hv-pin .hv-run{animation:none;opacity:0;translate:var(--cx,var(--x0,0px)) 0;transition:translate .52s var(--ease-fracture),opacity .3s var(--ease-standard)}
:root.walk-pin .hv-pin.ws1:not(.ws5) .hv-run{opacity:1}
:root.walk-pin .hv-pin .pr::after{transform:scaleX(0);transition:transform .6s var(--ease-fracture) 0s}
:root.walk-pin .hv-pin .pr.is-seen::after{transform:none;transition-delay:.3s}

/* Ecosystem: the feed and spine, then each part's tick and node; the part being read is lit in ember */
:root.walk-pin .hv-pin .hv-hub .ln{stroke-dashoffset:1;transition:stroke-dashoffset var(--t,.6s) cubic-bezier(.45,0,.25,1) 0s,stroke var(--dur-slow) var(--ease-standard) 0s}
:root.walk-pin .hv-pin .hv-hub .nd{scale:0;transition:scale .4s var(--ease-standard) 0s,fill var(--dur-slow) var(--ease-standard) 0s}
:root.walk-pin .hv-pin.ws1 .hv-hub .ln[data-k="1"],:root.walk-pin .hv-pin.ws2 .hv-hub .ln[data-k="2"],:root.walk-pin .hv-pin.ws3 .hv-hub .ln[data-k="3"],:root.walk-pin .hv-pin.ws4 .hv-hub .ln[data-k="4"]{stroke-dashoffset:0;transition-delay:var(--wat,0s),0s}
:root.walk-pin .hv-pin.ws1 .hv-hub .nd[data-k="1"],:root.walk-pin .hv-pin.ws2 .hv-hub .nd[data-k="2"],:root.walk-pin .hv-pin.ws3 .hv-hub .nd[data-k="3"],:root.walk-pin .hv-pin.ws4 .hv-hub .nd[data-k="4"]{scale:1;transition-delay:var(--wat,0s),0s}
:root.walk-pin .hv-pin[data-on="1"] .hv-hub .tk[data-item="1"],:root.walk-pin .hv-pin[data-on="2"] .hv-hub .tk[data-item="2"],:root.walk-pin .hv-pin[data-on="3"] .hv-hub .tk[data-item="3"]{stroke:var(--accent)}
:root.walk-pin .hv-pin[data-on="1"] .hv-hub .nd[data-item="1"],:root.walk-pin .hv-pin[data-on="2"] .hv-hub .nd[data-item="2"],:root.walk-pin .hv-pin[data-on="3"] .hv-hub .nd[data-item="3"]{fill:var(--accent)}

/* ---------- walk-lite: on phones the panels and the focus cards stack as a deck ---------- */
:root.walk-lite .hv-deck{display:flex;flex-direction:column;gap:30svh}
:root.walk-lite .hv-deck::after{content:"";flex:none;height:16svh}
:root.walk-lite .hv-deck>:is(.pn,.fcard){position:sticky;top:calc(var(--hdr,81px) + 8px + var(--k,0) * 12px)}

/* ---------- the rail: one tick per step at the edge of the screen (walk-pin) ---------- */
.hv-walk,.hv-count,.hv-ticks{display:none}
:root.walk-pin .hv-walk{--trh:min(320px,46svh);display:block;position:fixed;z-index:45;inset-inline-end:0;top:calc(var(--hdr,70px) + (100svh - var(--hdr,70px)) / 2);width:40px;height:var(--trh);translate:0 -50%;transition:opacity var(--dur-slow) var(--ease-standard),visibility 0s}
:root.walk-pin.intro .hv-walk{opacity:0;visibility:hidden;transition:none}
.hv-walk ol{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.hv-walk ol::before,.hv-walk ol::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--border-subtle)}
.hv-walk ol::after{background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--rail-f,0))}
.hv-walk li{position:absolute;z-index:1;left:0;right:0;top:calc(var(--f,0) * 100%);height:0}
.hv-walk li a{position:absolute;z-index:1;left:50%;top:0;width:28px;height:28px;translate:-50% -50%;display:grid;place-items:center;color:var(--text-primary)}
.hv-walk .tk{display:block;width:9px;height:9px;rotate:45deg;background:var(--bg-page);box-shadow:inset 0 0 0 1px var(--border-strong);transition:scale var(--dur-slow) var(--ease-standard),background var(--dur-slow) var(--ease-standard),box-shadow var(--dur-slow) var(--ease-standard)}
.hv-walk li.is-next .tk{box-shadow:inset 0 0 0 1px var(--accent-border)}
.hv-walk li.is-past .tk{background:var(--text-muted);box-shadow:none}
.hv-walk li.is-cur .tk{scale:1.2222;background:var(--accent);box-shadow:none}
.hv-walk li .tk.tk-mark{width:14px;height:auto;rotate:none;scale:none;background:none;box-shadow:none;opacity:.7;transition:opacity var(--dur-slow) var(--ease-standard)}
.hv-walk li.is-cur .tk.tk-mark,.hv-walk li a:hover .tk.tk-mark{opacity:1}
.hv-walk .tk-mark .mark{display:block;width:14px;height:auto}
.hv-walk .st{position:absolute;left:50%;top:calc(var(--sd,0) * var(--trh));width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:var(--border-strong);transition:background var(--dur-slow) var(--ease-standard)}
.hv-walk .st.on{background:var(--accent)}
.hv-walk li a:hover .tk:not(.tk-mark),.hv-walk li a:focus-visible .tk:not(.tk-mark){box-shadow:inset 0 0 0 1px var(--accent)}
.hv-walk li.is-cur a:hover .tk,.hv-walk li.is-past a:hover .tk,.hv-walk li a .tk.tk-mark{box-shadow:none}
.hv-walk a:focus-visible{outline:2px solid var(--accent);outline-offset:0}

/* the chip: the step's number and its own label, opening toward the page on hover or keyboard focus */
.hv-walk .chip{position:absolute;inset-inline-end:calc(100% + 12px);top:50%;translate:0 -50%;display:flex;align-items:center;gap:10px;padding:9px 14px;white-space:nowrap;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-subtle);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);font:500 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s var(--dur-base)}
[dir=rtl] .hv-walk .chip{clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.hv-walk .chip b{font-weight:500;color:var(--accent-text);direction:ltr;unicode-bidi:isolate}
[lang=ar] .hv-walk .chip{font:500 13px/1.2 var(--font-sans);letter-spacing:0;text-transform:none}
[lang=ar] .hv-walk .chip b{font:500 11px/1 var(--font-mono);letter-spacing:.08em}
.hv-walk a:hover .chip,.hv-walk a:focus-visible .chip{opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease-standard),visibility 0s}

/* the next cue: below the rail, it points to the next stop; it brightens once you stop scrolling */
.hv-walk .hv-next{position:absolute;left:50%;top:calc(100% + 22px);width:28px;height:28px;margin-left:-14px;display:block;transition:opacity var(--dur-slow) var(--ease-standard),visibility 0s}
.hv-walk .hv-next::before{content:"";position:absolute;inset:4px;box-shadow:inset 0 0 0 1px var(--border-default);clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%);transition:box-shadow var(--dur-slow) var(--ease-standard)}
[dir=rtl] .hv-walk .hv-next::before{clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)}
.hv-walk .hv-next::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-4px 0 0 -3px;border-right:1px solid var(--text-secondary);border-bottom:1px solid var(--text-secondary);rotate:45deg;transition:border-color var(--dur-slow) var(--ease-standard)}
.hv-walk .hv-next.ready::before{box-shadow:inset 0 0 0 1px var(--accent-border)}
.hv-walk .hv-next.ready::after{border-color:var(--accent-text)}
.hv-walk .hv-next:hover::before{box-shadow:inset 0 0 0 1px var(--accent)}
.hv-walk .hv-next.off{opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease-standard),visibility 0s var(--dur-slow)}

/* ---------- the counter ("02 / 08"), in the header (every walk mode) ---------- */
:root.walk .hv-count{display:inline-flex;align-items:center;gap:0;flex-shrink:0;direction:ltr;unicode-bidi:isolate;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:none;white-space:pre;color:var(--text-muted);transition:opacity var(--dur-slow) var(--ease-standard)}
.hv-count b{font-weight:500;color:var(--text-primary)}
:root.walk .hv-count.m{height:var(--ih,44px);padding:0 12px;background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.intro .hv-count{opacity:0}
@media (min-width:1101px){:root.walk .hv-count.m{display:none}}
@media (max-width:379px){:root.walk .hv-count.m{display:none}}

/* ---------- header notches: one per step on the progress line, ember once passed ---------- */
:root.walk .hv-ticks{display:none;position:absolute;inset-inline:0;top:calc(-1 * var(--gv,16px));height:6px;pointer-events:none}
.hv-ticks i{position:absolute;top:0;inset-inline-start:clamp(0px,calc(var(--x,0%) - 1px),calc(100% - 2px));width:2px;height:6px;background:var(--border-strong);transition:background var(--dur-slow) var(--ease-standard)}
.hv-ticks i.on{background:var(--accent)}

/* ---------- print: the page as written ---------- */
@media print{
[data-walk]{height:auto!important}
.hv-pin>.wrap,.hv-deck>*{position:static!important}
.hv-deck{gap:12px!important}
.hv-walk,.hv-ticks,.hv-count{display:none!important}
}
/* Who it is for, when pinned: an ember rule marks the line you are on */
.who-i::before{content:"";position:absolute;inset-inline-start:-22px;top:30px;bottom:30px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .38s var(--ease-standard)}
:root.walk-pin .hv-pin .who-i.is-on::before{transform:none}
:root.walk-pin .hv-pin .who-i.is-on .n{color:var(--accent)}