/* morsidi.com hero: "Curve". The hero is a growth chart: the line climbs, each KPI is a milestone on it, and it ends at Mor.
   Self-contained; loads after site.css. Everything is scoped to .hc. */
.hc{--out:cubic-bezier(.16,1,.3,1);position:relative;min-height:max(calc(100vh - 57px),700px);overflow:hidden;background:#fff}
.hc-stage{position:absolute;inset:0}
.hc-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.hc-copy{position:relative;z-index:3;padding:clamp(48px,9vh,104px) var(--gutter) 0;max-width:calc(600px + var(--gutter))}
.hc-hello{margin:0;font-size:clamp(17px,1.4vw,21px);color:var(--ink-2)}
.hc h1{margin:16px 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(48px,6vw,100px);line-height:.96;letter-spacing:-.035em}
.hc h1 em{font-family:var(--accent);font-style:italic;font-weight:400;color:var(--blue);letter-spacing:-.01em;font-size:1.08em}
.hc-tape{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;box-sizing:content-box}
.hc-tape>span{display:flex;flex-direction:column;transition:transform .8s cubic-bezier(.3,1.35,.5,1)}
.hc-tape i{font-style:normal;height:1em;line-height:1;white-space:nowrap}
.hc-lede{margin:24px 0 0;max-width:36ch;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--mid);text-wrap:pretty}
.hc-actions{margin-top:30px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* milestones: one tag per KPI, pinned to its point on the curve */
.hc-mile{position:absolute;z-index:2;left:0;top:0;transform:translate(var(--x),var(--y));pointer-events:none}
.hc-mile .tag{position:absolute;left:14px;bottom:14px;padding:10px 14px 11px;border-radius:14px;background:rgba(255,255,255,.94);white-space:nowrap;
  box-shadow:0 14px 30px -14px rgba(7,40,80,.35),0 0 0 1px rgba(10,89,170,.1);opacity:0;transform:translateY(8px) scale(.94);transform-origin:left bottom;
  transition:opacity .45s,transform .7s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.hc-mile.on .tag{opacity:1;transform:none}
.hc-mile.hot .tag{box-shadow:0 18px 36px -14px rgba(10,89,170,.55),0 0 0 2px var(--electric);transform:translateY(-3px)}
.hc-mile b{display:block;font-family:"Clash Display",var(--serif);font-weight:700;font-size:clamp(22px,2vw,32px);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.hc-mile small{display:block;margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}

/* Mor, at the top of the curve */
.hc-peak{position:absolute;z-index:2;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;opacity:0;
  transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%));
  background:radial-gradient(85% 75% at 50% 28%,#fff 0,#E3EFFC 42%,#B9D6F4 78%,#8DBBEB 100%);
  box-shadow:0 0 0 6px #fff,0 0 0 8px var(--blue),0 40px 70px -30px rgba(10,89,170,.6)}
.hc-peak img{position:absolute;left:50%;bottom:-4%;height:94%;width:auto;max-width:none;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%);mask-image:linear-gradient(180deg,transparent 0,#000 10%)}
.hc-peak.on{animation:hcPeak .9s cubic-bezier(.3,1.35,.5,1) forwards}
@keyframes hcPeak{from{opacity:0;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%)) scale(.3)}to{opacity:1;transform:translate(calc(var(--x) - 50%),calc(var(--y) - 50%))}}

/* intro: copy rises while the chart draws */
.hjs .hc:not(.go) :is(.hc-hello,.hc h1,.hc-lede,.hc-actions){opacity:0}
.hc.go .hc-hello{animation:hcUp .7s .1s var(--out) backwards}
.hc.go h1{animation:hcUp .9s .2s var(--out) backwards}
.hc.go .hc-lede{animation:hcUp .8s .4s var(--out) backwards}
.hc.go .hc-actions{animation:hcUp .8s .5s var(--out) backwards}
@keyframes hcUp{from{opacity:0;transform:translateY(16px)}}

@media (max-width:900px){
  .hc{min-height:0}
  .hc-copy{padding-top:40px}
  .hc-stage{position:relative;height:140vw;margin-top:8px}
  .hc-mile .tag{padding:7px 10px 8px;border-radius:10px;left:auto;right:12px;bottom:6px;transform-origin:right bottom}
  .hc-mile.r .tag{right:auto;left:10px;transform-origin:left bottom}
  .hc-mile small{font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  .hc *{animation:none!important;transition:none!important}
  .hc-peak{opacity:1}
}