/* Harrat Ventures website: chapters (assets/js/chapters.js). Each section enters like a scene in an editorial
   film: its label types in behind an ember caret, its numbers count up, and a small line diagram draws itself
   beside the text. Diagrams sit beside the words, never behind them, play once and never loop. */

html{scroll-behavior:smooth}

/* Typed labels: letters (words in Arabic) stay clear until the caret reaches them. Opacity, not visibility, so
   the words are always there for screen readers, find in page and the walkthrough rail's names. */
.hv-tw{display:inline}
.hv-typing .hv-u{opacity:0}
.hv-typing .hv-u.on{opacity:1}
.hv-caret{display:inline-block;width:2px;height:1.2em;margin-inline-start:3px;vertical-align:-.24em;background:var(--accent)}
.hv-caret.end{animation:hv-blink .9s steps(1,end) both}
@keyframes hv-blink{0%{opacity:1}25%{opacity:0}50%{opacity:1}75%,100%{opacity:0}}

/* Header: the chapter you are reading, typed in beside the logo (wide screens) */
.hv-chap{display:none}
@media (min-width:1101px){
.hv-chap{display:flex;align-items:center;gap:10px;min-width:0;padding:0 18px;height:var(--ih,52px);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--border-subtle);font:500 11px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;opacity:0;transition:opacity var(--dur-slow) var(--ease-standard)}
.hv-chap::before{content:"";width:6px;height:6px;background:var(--accent);flex-shrink:0}
.hv-chap.on{opacity:1}
.hv-chap-t:empty{display:none}
[lang=ar] .hv-chap{font:500 13px/1 var(--font-sans);letter-spacing:0}
}

/* Approach panels: a rail runs through the three numbers, stopping at each one */
.hv-rail-host{position:relative}
.hv-rail{position:absolute;top:0;left:0;z-index:2;overflow:visible;pointer-events:none}
.hv-rail .ln{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75;transition:stroke-dashoffset var(--t,.5s) cubic-bezier(.45,0,.25,1) var(--at,0s)}
.hv-rail .nd{fill:var(--bg-page);stroke:var(--accent);stroke-width:1.25;transform-box:fill-box;transform-origin:center;scale:0;transition:scale .42s var(--ease-standard) var(--at,0s)}
.hv-rail .hd{fill:none;stroke:var(--accent);stroke-width:1.25;opacity:0;transition:opacity .3s var(--ease-enter) var(--at,0s)}
.hv-drawn .hv-rail .ln{stroke-dashoffset:0}
.hv-drawn .hv-rail .nd{scale:1}
.hv-drawn .hv-rail .hd{opacity:.85}

/* Focus cards: defence in depth for security (rings closing on an ember core), a network for AI (a cyan node) */
.hv-glyph-host{position:relative}
.hv-glyph{position:absolute;top:44px;inset-inline-end:52px;width:120px;height:120px;overflow:visible;pointer-events:none}
[dir=rtl] .hv-glyph{scale:-1 1}
.hv-glyph .ln{fill:none;stroke:var(--border-strong);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-fracture) calc(var(--i) * 110ms + 250ms)}
.hv-glyph .nd{fill:var(--text-muted);transform-box:fill-box;transform-origin:center;scale:0;transition:scale .35s var(--ease-standard) calc(var(--i) * 70ms + 700ms)}
.hv-glyph .core{transform-box:fill-box;transform-origin:center;scale:0;transition:scale .45s var(--ease-standard) 1.15s}
.g-rings .core{fill:var(--accent)}
.g-net .core{fill:var(--data)}
.hv-drawn .hv-glyph .ln{stroke-dashoffset:0}
.hv-drawn .hv-glyph :is(.nd,.core){scale:1}
.hv-glyph .ln.hot{transition:stroke-dashoffset .9s var(--ease-fracture) calc(var(--i) * 110ms + 250ms),stroke .6s var(--ease-standard) 1.2s}
.hv-drawn .g-rings .ln.hot{stroke:var(--accent)}
.hv-drawn .g-net .ln.hot{stroke:var(--data)}

/* Principles: a signal runs along the top rule and lights each principle as it passes */
.hv-run-host{position:relative}
.hv-run{position:absolute;top:-1px;left:0;width:72px;height:3px;background:linear-gradient(90deg,transparent,var(--accent));opacity:0;pointer-events:none}
[dir=rtl] .hv-run{background:linear-gradient(270deg,transparent,var(--accent))}
.hv-drawn>.hv-run{animation:hv-run var(--t,1.1s) cubic-bezier(.45,0,.25,1) .2s both}
@keyframes hv-run{0%{opacity:0;translate:var(--x0,0) 0}12%{opacity:1}88%{opacity:1}100%{opacity:0;translate:var(--x1,0) 0}}
.hv-run-host .pr::after{transition-delay:calc(var(--ri,0) * var(--step,260ms) + 260ms)}

/* Ecosystem: the shared foundation feeds the three parts of the ecosystem */
.hv-hub-host{position:relative}
.hv-hub{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.hv-hub .ln{fill:none;stroke:var(--border-strong);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t,.6s) cubic-bezier(.45,0,.25,1) var(--at,0s)}
.hv-hub .ln.hot{stroke:var(--accent)}
.hv-hub .nd{fill:var(--bg-page);stroke:var(--accent);stroke-width:1.25;transform-box:fill-box;transform-origin:center;scale:0;transition:scale .4s var(--ease-standard) var(--at,0s)}
.hv-drawn>.hv-hub .ln{stroke-dashoffset:0}
.hv-drawn>.hv-hub .nd{scale:1}

/* Madinah: an ember line draws under the last word of the statement */
.hv-under{position:absolute;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-fracture);pointer-events:none}
[dir=rtl] .hv-under{transform-origin:right}
.hv-under.on{transform:none}

/* The closing question keeps its caret for a moment */
.cta .wrap{position:relative}
.hv-caret.cta-c{position:absolute;width:max(3px,.06em);height:.82em;margin:0;font:800 clamp(38px,5vw,72px)/1 var(--font-display);animation:hv-blink3 2.6s steps(1,end) both}
@keyframes hv-blink3{0%,16%{opacity:1}17%,33%{opacity:0}34%,50%{opacity:1}51%,67%{opacity:0}68%,84%{opacity:1}85%,100%{opacity:0}}

@media (max-width:900px){
.hv-glyph{position:static;width:84px;height:84px;margin:6px 0 2px}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hv-caret{display:none}
.hv-rail .ln,.hv-glyph .ln,.hv-hub .ln{transition:none;stroke-dashoffset:0}
.hv-rail .nd,.hv-glyph :is(.nd,.core),.hv-hub .nd{transition:none;scale:1}
.hv-rail .hd{transition:none;opacity:.85}
.hv-run{display:none}
.hv-under{transition:none;transform:none}
.hv-chap{transition:none}
}