/* WordPress glue + motion that replaces framer-motion from the React mockup.
   All visual design lives in app.css (the mockup's compiled Tailwind build). */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:72px}
.is-hidden{display:none!important}
body.admin-bar header.fixed{top:32px}
@media (max-width:782px){body.admin-bar header.fixed{top:46px}}

/* nav bar slide-in (initial y:-40, opacity 0 -> in .8s, delay .2s) */
@keyframes myghcp-nav-in{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
header[data-testid="nav-main-container"]{animation:myghcp-nav-in .8s cubic-bezier(.22,1,.36,1) .2s both}

/* scroll reveal (framer whileInView: opacity 0, y 28 -> in, .9s) */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .9s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.js [data-testid="hero-section"] [data-reveal]{transform:translateY(18px)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="book"]{transform:perspective(1600px) rotateY(-70deg) scale(.9);transition-duration:1.6s}
.js [data-reveal="book"].is-in{transform:none}

/* hero headline: lines rise from a mask */
@keyframes myghcp-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
.js [data-testid="hero-title"]>span>span{animation:myghcp-rise 1.1s cubic-bezier(.22,1,.36,1) both}
.js [data-testid="hero-title"]>span:nth-child(1)>span{animation-delay:.35s}
.js [data-testid="hero-title"]>span:nth-child(2)>span{animation-delay:.49s}

/* line-drawing svg paths (framer pathLength) */
.js .draw-path{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .draw-path.drawn{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur,1.8s) ease-in-out}

/* interactive bits */
[data-testid="triangle-diagram"] circle{transition:r .3s cubic-bezier(.34,1.56,.64,1),fill .3s}
[data-testid="binder-preview"] img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
[data-testid="binder-tab-list"] span.ml-auto{transition:width .45s cubic-bezier(.22,1,.36,1)}
@keyframes myghcp-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes myghcp-fade-left{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.myghcp-fade-up{animation:myghcp-fade-up .5s ease both}
.myghcp-fade-left{animation:myghcp-fade-left .5s ease both}
[data-testid^="selfcheck-"][data-testid*="-"] button,button[data-testid^="selfcheck-"]{transition:color .3s,background-color .3s,border-color .3s,transform .15s}
button[data-testid^="selfcheck-"]:active{transform:scale(.9)}
[data-testid^="pyramid-triad-"],[data-testid^="triunity-service-"]{transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
[data-testid^="pyramid-triad-"]:hover,[data-testid^="triunity-service-"]:hover{transform:translateY(-6px)}
div.inline-block.mt-10:has(>[data-testid="buy-ebook-button"]){transition:transform .25s}
div.inline-block.mt-10:has(>[data-testid="buy-ebook-button"]):hover{transform:scale(1.02)}
div.inline-block.mt-10:has(>[data-testid="buy-ebook-button"]):active{transform:scale(.98)}

/* non-home page heroes (framer: eyebrow y14 .8s, h1 lines rise .3/.45, intro .9s) */
.js main>section:first-of-type.relative.grain:not([data-testid="hero-section"]) [data-reveal]{transform:translateY(14px)}
.js main>section:first-of-type.relative.grain:not([data-testid="hero-section"]) [data-reveal].is-in{transform:none}
.js main>section:first-of-type.relative.grain:not([data-testid="hero-section"]) h1>span>span,.js main>section:first-of-type.relative.grain:not([data-testid="hero-section"]) h1>span>em{animation:myghcp-rise 1.1s cubic-bezier(.22,1,.36,1) both}
.js main>section:first-of-type.relative.grain:not([data-testid="hero-section"]) h1>span:nth-child(1)>*{animation-delay:.3s}
.js main>section:first-of-type.relative.grain:not([data-testid="hero-section"]) h1>span:nth-child(2)>*{animation-delay:.45s}
[data-testid^="library-doc-"]{transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
[data-testid^="library-doc-"]:hover{transform:translateY(-6px)}
.js [data-testid="hero-title"]>span>span{animation:myghcp-rise 1.1s cubic-bezier(.22,1,.36,1) both}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js [data-testid="hero-title"]>span>span{animation:none}
  .js .draw-path{stroke-dashoffset:0}
  header[data-testid="nav-main-container"]{animation:none}
}

/* library document body typography (not in the mockup's compiled CSS) */
.ghcp-prose h2{font-family:"Playfair Display",serif;font-size:1.875rem;line-height:1.2;margin-top:2.5rem;color:#0b1220}
.ghcp-prose h3{font-family:"Playfair Display",serif;font-size:1.5rem;line-height:1.25;margin-top:2rem;color:#0b1220}
.ghcp-prose ul{list-style:disc;padding-left:1.5rem}.ghcp-prose ol{list-style:decimal;padding-left:1.5rem}
.ghcp-prose a{color:#0f766e;text-decoration:underline}