/* HorsePeaksGelatin — companion stylesheet for the bits Tailwind utilities
   can't express cleanly (keyframe animation bodies, SVG specifics, a few
   layered effects). Layout/spacing/color/typography live in Tailwind
   utility classes directly on the markup. All custom classes here are
   namespaced hpg- to keep this build's fingerprint distinct. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --hpg-ink: #191313;
  --hpg-brand: #B21A1A;
  --hpg-brand-dark: #7C1010;
  --hpg-gold: #B8860B;
  --hpg-line: #EBDCD6;
}

html{scroll-behavior:smooth;overflow-x:hidden;}
body{overflow-x:hidden;font-family:'Manrope',-apple-system,sans-serif;}
.hpg-serif{font-family:'Bricolage Grotesque',Georgia,serif;}
.hpg-mono{font-family:'Space Mono',ui-monospace,monospace;}

/* scroll reveal */
.hpg-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);}
.hpg-reveal.hpg-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.hpg-reveal{opacity:1!important;transform:none!important;transition:none!important;}}
noscript .hpg-reveal{opacity:1;}

/* scroll progress bar */
.hpg-scrollbar{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--hpg-brand),var(--hpg-gold));z-index:60;transition:width .1s linear;}

/* mobile nav */
.hpg-nav{transition:transform .28s ease;}
@media (max-width:767px){.hpg-nav.hpg-closed{transform:translateX(100%);}}
.hpg-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(25,19,19,.4);z-index:50;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;}
.hpg-backdrop.hpg-open{opacity:1;visibility:visible;}
.hpg-burger-bar{position:absolute;left:0;right:0;height:2px;background:var(--hpg-ink);transition:transform .25s ease,opacity .2s ease,top .25s ease;}
.hpg-burger[aria-expanded="true"] .hpg-bar-1{top:10px!important;transform:rotate(45deg);}
.hpg-burger[aria-expanded="true"] .hpg-bar-2{opacity:0;}
.hpg-burger[aria-expanded="true"] .hpg-bar-3{top:10px!important;transform:rotate(-45deg);}

/* evidence meter */
.hpg-meter{height:5px;background:var(--hpg-line);border-radius:3px;overflow:hidden;}
.hpg-meter-fill{display:block;height:100%;width:0;border-radius:3px;transition:width 1s cubic-bezier(.2,.7,.3,1);}
.hpg-reveal.hpg-visible .hpg-meter-fill{width:var(--hpg-w,0);}

/* dose chart */
.hpg-bar-track{height:10px;background:#F3E5E1;border-radius:6px;overflow:hidden;}
.hpg-bar-fill{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--hpg-brand),var(--hpg-brand-dark));transition:width 1s cubic-bezier(.2,.7,.3,1);}
.hpg-reveal.hpg-visible .hpg-bar-fill{width:var(--hpg-w,0);}

/* peak-ascent hero visualization */
.hpg-peak-path{stroke-dasharray:520;stroke-dashoffset:520;animation:hpg-draw 3.4s ease-in-out infinite;}
@keyframes hpg-draw{0%{stroke-dashoffset:520;}55%{stroke-dashoffset:0;}100%{stroke-dashoffset:0;}}
.hpg-peak-flag{transform-box:fill-box;transform-origin:center;animation:hpg-flag 2.4s ease-in-out infinite;}
@keyframes hpg-flag{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@media (prefers-reduced-motion:reduce){.hpg-peak-path{animation:none;stroke-dashoffset:0;}.hpg-peak-flag{animation:none;}}

/* back to top */
.hpg-totop{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s;}
.hpg-totop.hpg-show{opacity:1;visibility:visible;transform:none;}

/* faq caret */
.hpg-faq[open] .hpg-caret{transform:rotate(45deg);}
.hpg-caret{transition:transform .22s ease;display:inline-block;}

::selection{background:var(--hpg-brand);color:#fff;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--hpg-brand-dark);outline-offset:3px;}