/* blog-motion.css — same motion system as index/contact, for blogs.html + blog-detail.html. Load AFTER blogs.css */
:root{--ease:cubic-bezier(.22,1,.36,1);--record:#FF3B30}
.js-ready .reveal:not(.in-view){opacity:0;transform:translateY(24px)}
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-ready .reveal-scale:not(.in-view){opacity:0;transform:scale(.94) translateY(18px)}
.reveal-scale{transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js-ready .reveal-left:not(.in-view){opacity:0;transform:translateX(-40px)}
.reveal-left{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-ready .reveal-curtain:not(.in-view){clip-path:inset(0 0 100% 0)}
.reveal-curtain{transition:clip-path .9s var(--ease)}

/* live-recording waveform */
.wave{display:inline-flex;align-items:center;gap:2px;height:16px}
.wave span{display:block;width:3px;border-radius:2px;background:var(--record);animation:wavepulse 1.1s ease-in-out infinite}
.wave span:nth-child(1){height:6px;animation-delay:-.9s}.wave span:nth-child(2){height:14px;animation-delay:-.6s}
.wave span:nth-child(3){height:9px;animation-delay:-1.05s}.wave span:nth-child(4){height:16px;animation-delay:-.3s}
.wave span:nth-child(5){height:7px;animation-delay:-.15s}
@keyframes wavepulse{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* glass orb behind hero copy */
.blog-hero,.art-hero{position:relative;overflow:hidden}
.blog-hero>*:not(.hero-blob),.art-hero>.container{position:relative;z-index:2}
.hero-blob{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:min(900px,140vw);height:560px;z-index:1;pointer-events:none}
.hero-blob canvas{width:100%;height:100%;display:block}
@media(max-width:860px){.hero-blob{height:400px}}

/* header shadow, card hover, reading progress */
header{transition:box-shadow .3s ease}header.scrolled{box-shadow:0 8px 24px -18px rgba(28,26,22,.4)}
.post-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.post-card:hover{transform:translateY(-6px);box-shadow:0 22px 36px -22px rgba(28,26,22,.4)}
.post-thumb{overflow:hidden}.post-thumb img{transition:transform .6s var(--ease)}.post-card:hover .post-thumb img{transform:scale(1.06)}
.mn-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange,#FF6A3D);z-index:100;transition:width .1s linear}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .reveal,.reveal-scale,.reveal-left{opacity:1!important;transform:none!important}.reveal-curtain{clip-path:none!important}
}

/* ---- App promo section (:::cta) — responsive: text left + phone photo right, stacks when narrow ---- */
.promo-split{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px 40px;position:relative;overflow:hidden;background:#fff;border:1px solid #FBEFC9;border-radius:0;padding:clamp(24px,5vw,56px);margin:44px 0;box-sizing:border-box;max-width:100%}
.promo-split::before{content:'';position:absolute;left:-160px;bottom:-200px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,#FFE3DA 0%,rgba(255,227,218,0) 70%);pointer-events:none}
.promo-split>*{position:relative;min-width:0}
.promo-split>div:first-child{flex:1 1 300px}
.prose .promo-split h3{font-family:var(--font-title,'Fraunces',serif);font-weight:600;font-size:clamp(24px,3vw,36px);line-height:1.18;letter-spacing:-.01em;color:#16213A;margin:0 0 16px;word-break:normal;overflow-wrap:normal;hyphens:none}
.prose .promo-split p{font-family:'Quicksand',sans-serif;color:#6B5A55;font-size:16px;line-height:1.7;margin:0 0 26px;max-width:none;word-break:normal;overflow-wrap:normal}
.prose .promo-split .promo-btn{display:inline-flex;align-items:center;justify-content:center;width:auto;flex:none;white-space:nowrap;background:#E8551A;color:#fff;padding:15px 28px;border-radius:10px;font-family:var(--font-title,'Fraunces',serif);font-weight:600;font-size:16px;line-height:1;text-decoration:none;border:0;box-shadow:none;transition:transform .25s var(--ease),background .2s}
.prose .promo-split .promo-btn:hover{background:#CF4610;transform:translateY(-2px)}
.promo-split .promo-img{flex:0 1 280px;width:280px;max-width:100%;line-height:0}
.prose .promo-split .promo-img img{width:100%;height:auto;display:block;margin:0;border-radius:0;box-shadow:none;border:0}
@media(max-width:600px){.promo-split{gap:24px}.promo-split>div:first-child{flex-basis:100%}.promo-split .promo-img{flex-basis:100%;width:auto;max-width:300px;margin:0 auto}}

/* ---- Blog hero title: always visible, centered, Fraunces ---- */
.blog-hero h1{position:relative;z-index:2;font-family:var(--font-title,'Fraunces',serif);font-weight:600;font-size:clamp(36px,5.2vw,60px);line-height:1.15;letter-spacing:-.01em;color:var(--ink,#1C1A16);text-align:center;margin:0 auto 18px;opacity:1;visibility:visible}
.blog-hero p{text-align:center;margin-left:auto;margin-right:auto;max-width:640px}

/* safety: even if a split-text animation left the hero title letters hidden, keep them visible */
.blog-hero h1,.blog-hero h1 *{opacity:1!important;transform:none!important;visibility:visible!important;clip-path:none!important}

/* header: "Book a Demo" removed — spacer keeps the nav links centered */
.nav-spacer{flex:0 0 167px}
@media(max-width:860px){.nav-spacer{display:none}}