/* Animated blog covers (js/covers.js). Dark leather panel + copper, one small looping scene per topic. */
.cv{position:relative;display:block;overflow:hidden;isolation:isolate;color:var(--cream,#f3e6d6);
  background:radial-gradient(rgba(243,230,214,.09) 1px,transparent 1px) 0 0/14px 14px,radial-gradient(120% 90% at 100% 0%,rgba(214,138,94,.38),transparent 60%),radial-gradient(80% 80% at 0% 100%,rgba(196,80,106,.18),transparent 60%),linear-gradient(160deg,#3b2920,#1d1410)}
.cv svg{display:block;width:100%;height:100%}
.cv-label{position:absolute;left:14px;bottom:12px;z-index:5;font:600 11px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cream,#f3e6d6);background:rgba(29,20,16,.55);border:1px solid rgba(243,230,214,.16);border-radius:999px;padding:5px 10px;backdrop-filter:blur(4px)}

/* where covers sit: blog list cards (left column) and the article header (right column) */
.list .post.has-cover::before{display:none}
.list .post .cv{grid-row:1 / span 4;grid-column:1;min-height:200px;margin:0}
@media (max-width:640px){.list .post .cv{grid-row:auto;min-height:170px}}
.top .hero.has-cover{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:44px;align-items:center}
.top .hero.has-cover > *{grid-column:1}
.top .hero.has-cover > .cv{grid-column:2;grid-row:1 / span 6;height:250px;border-radius:20px;border:1px solid rgba(243,230,214,.16);box-shadow:0 30px 70px rgba(0,0,0,.45)}
@media (max-width:860px){.top .hero.has-cover{grid-template-columns:1fr}.top .hero.has-cover > .cv{grid-column:1;grid-row:auto;height:190px;margin-top:22px}}

/* ---- reviews: stars pop in, review cards float, +1 ---- */
.cv-stars{position:absolute;left:50%;top:20%;translate:-50% 0;display:flex;gap:4%;width:62%;max-width:200px}
.cv-stars i{flex:1;fill:#f3b23c;filter:drop-shadow(0 4px 10px rgba(243,178,60,.5));animation:starpop 4s calc(var(--i) * .18s) cubic-bezier(.3,1.6,.5,1) infinite both}
@keyframes starpop{0%,8%{transform:scale(0) rotate(-40deg);opacity:0}18%,80%{transform:none;opacity:1}92%,100%{transform:scale(.6);opacity:0}}
.cv-card{position:absolute;display:flex;align-items:center;gap:8px;width:46%;padding:7px 9px;border-radius:10px;background:#fffdf9;box-shadow:0 10px 24px rgba(0,0,0,.35);animation:cardfloat 6s ease-in-out infinite}
.cv-card.k1{left:7%;top:44%}.cv-card.k2{right:6%;top:62%;animation-delay:-3s}
.cv-card .av{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#d68a5e,#c4506a);flex:none}
.cv-card .ln{display:flex;flex-direction:column;gap:4px;flex:1}.cv-card .ln b{height:4px;border-radius:3px;background:#e8ddd2}.cv-card .ln b+b{width:60%}
.cv-card .mini{display:flex;width:36%;fill:#f3b23c}.cv-card .mini svg{width:20%}
@keyframes cardfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.cv-plus{position:absolute;right:9%;top:12%;font:800 12px/1 "Archivo",sans-serif;color:#1d1410;background:#d68a5e;border-radius:999px;padding:5px 9px;animation:plus 4s ease-out infinite}
@keyframes plus{0%,30%{opacity:0;translate:0 10px}40%,75%{opacity:1;translate:0 0}90%,100%{opacity:0;translate:0 -10px}}

/* ---- google: map, dropping pin, rings, listing card ---- */
.cv-map{position:absolute;inset:0;opacity:.55}
.cv-map path{fill:none;stroke:rgba(243,230,214,.28);stroke-width:5;stroke-linecap:round}
.cv-pin{position:absolute;left:44%;top:16%;width:13%;max-width:46px;fill:#d68a5e;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));animation:pindrop 3.6s cubic-bezier(.3,1.4,.5,1) infinite}
.cv-pin circle{fill:#1d1410}
@keyframes pindrop{0%{translate:0 -120%;opacity:0}18%{translate:0 0;opacity:1}85%{translate:0 0;opacity:1}100%{translate:0 0;opacity:0}}
.cv-ring{position:absolute;left:50.5%;top:47%;width:16%;aspect-ratio:2.4;translate:-50% -50%;border-radius:50%;border:2px solid rgba(214,138,94,.75);opacity:0;animation:ring 3.6s .5s ease-out infinite}
.cv-ring.r2{animation-delay:1.1s}
@keyframes ring{0%{scale:.3;opacity:.9}70%,100%{scale:3;opacity:0}}
.cv-listing{position:absolute;right:6%;top:12%;display:flex;flex-direction:column;gap:3px;padding:8px 11px;border-radius:10px;background:#fffdf9;color:#231a15;box-shadow:0 10px 24px rgba(0,0,0,.35);font:600 11px/1.2 "IBM Plex Sans",sans-serif;animation:cardfloat 5s ease-in-out infinite}
.cv-listing span{display:flex;width:62px;fill:#f3b23c}.cv-listing em{font-style:normal;color:#188038;font-size:10px}

/* ---- website: a page builds itself, cursor clicks the button ---- */
.cv-browser{position:absolute;left:50%;translate:-50% 0;width:76%;max-width:250px;top:12%;bottom:24%;border-radius:10px;overflow:hidden;background:#fbf7f2;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cv-browser .chrome{display:flex;gap:4px;padding:6px 8px;background:#2a211c}.cv-browser .chrome i{width:6px;height:6px;border-radius:50%;background:#e0685a}.cv-browser .chrome i:nth-child(2){background:#e6b450}.cv-browser .chrome i:nth-child(3){background:#6cc070}
.cv-browser .page{position:relative;height:calc(100% - 18px)}
.cv-browser .b{position:absolute;border-radius:5px;opacity:0;animation:build 6s infinite}
.cv-browser .nav{left:6%;right:6%;top:7%;height:9%;background:#2c1e18;animation-delay:.2s}
.cv-browser .hero{left:6%;width:55%;top:24%;height:24%;background:linear-gradient(90deg,#d68a5e,#e7a479);animation-delay:.7s}
.cv-browser .btn{left:6%;width:24%;top:54%;height:10%;border-radius:999px;background:#c4506a;animation-delay:1.2s}
.cv-browser .c1,.cv-browser .c2,.cv-browser .c3{top:72%;height:19%;width:27%;background:#e8ddd2}
.cv-browser .c1{left:6%;animation-delay:1.6s}.cv-browser .c2{left:36.5%;animation-delay:1.8s}.cv-browser .c3{left:67%;animation-delay:2s}
@keyframes build{0%{opacity:0;transform:translateY(8px) scale(.96)}8%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
.cv-cursor{position:absolute;width:6%;max-width:20px;fill:#fff;stroke:#1d1410;stroke-width:1.4;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));animation:cursor 6s ease-in-out infinite}
@keyframes cursor{0%,30%{left:80%;top:80%}55%,65%{left:24%;top:60%}60%{scale:.85}70%{scale:1}100%{left:80%;top:80%}}

/* ---- social: phone feed scrolls, hearts float up ---- */
.cv-phone{position:absolute;left:50%;top:9%;bottom:-12%;width:30%;max-width:120px;translate:-50% 0;border-radius:16px 16px 0 0;padding:6px 6px 0;background:#0f0b09;border:1px solid rgba(243,230,214,.22);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.cv-phone .feed{display:grid;grid-template-columns:1fr 1fr;gap:5px;animation:feed 8s linear infinite}
.cv-phone .feed span{aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,#d68a5e,#c4506a)}
.cv-phone .feed span:nth-child(3n+2){background:linear-gradient(135deg,#efab4f,#a85f37)}.cv-phone .feed span:nth-child(3n){background:linear-gradient(135deg,#7a3f22,#e7a479)}
@keyframes feed{to{transform:translateY(-50%)}}
.cv-heart{position:absolute;width:7%;max-width:26px;fill:#c4506a;filter:drop-shadow(0 4px 8px rgba(196,80,106,.5));opacity:0;animation:heart 4.5s ease-out infinite}
.cv-heart.h1{right:20%;bottom:20%}.cv-heart.h2{right:13%;bottom:30%;animation-delay:1.5s;fill:#d68a5e}.cv-heart.h3{right:26%;bottom:26%;animation-delay:3s}
@keyframes heart{0%{opacity:0;translate:0 0;scale:.5}15%{opacity:1;scale:1.1}100%{opacity:0;translate:-10px -90px;scale:.9}}

/* ---- follow-ups: envelopes fly to the inbox, check pops ---- */
.cv-trail{position:absolute;left:8%;right:26%;top:52%;border-top:2px dashed rgba(243,230,214,.25)}
.cv-mail{position:absolute;left:6%;top:42%;width:13%;max-width:44px;fill:#fffdf9;stroke:#a85f37;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));opacity:0;animation:fly 4.5s cubic-bezier(.5,0,.3,1) infinite}
.cv-mail.m2{animation-delay:1.5s}.cv-mail.m3{animation-delay:3s}
@keyframes fly{0%{opacity:0;left:6%;translate:0 0;rotate:-8deg}10%{opacity:1}45%{left:38%;translate:0 -40%;rotate:6deg}80%{left:calc(90% - min(20%,72px));translate:0 0;rotate:0;opacity:1}90%,100%{left:calc(90% - min(20%,72px) + 6px);translate:0 6%;opacity:0}}
.cv-inbox{position:absolute;right:10%;top:36%;width:20%;max-width:72px;aspect-ratio:1.2;border-radius:10px;background:#2c1e18;border:2px solid #d68a5e;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.cv-inbox .tray{position:absolute;left:12%;right:12%;bottom:18%;height:18%;border-radius:4px;background:rgba(214,138,94,.35)}
.cv-inbox .chk{position:absolute;right:-12px;top:-12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#2e7d4f;color:#fff;font-size:13px;font-weight:800;animation:chk 1.5s ease-out infinite}
@keyframes chk{0%,40%{scale:0}60%{scale:1.25}75%,100%{scale:1}}

/* ---- missed calls: phone rings, the text-back bubble pops ---- */
.cv-ring-phone{position:absolute;left:14%;top:24%;width:22%;max-width:84px;aspect-ratio:1}
.cv-ring-phone .ph{position:absolute;inset:18%;border-radius:50%;display:grid;place-items:center;padding:18%;background:#d68a5e;fill:#1d1410;animation:shake 2.4s ease-in-out infinite}
@keyframes shake{0%,40%,100%{rotate:0}5%,15%,25%{rotate:-14deg}10%,20%,30%{rotate:14deg}}
.cv-ring-phone .wave{position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(214,138,94,.8);animation:ring 2.4s ease-out infinite}
.cv-ring-phone .w2{animation-delay:.6s}
.cv-sms{position:absolute;right:7%;top:32%;width:52%;max-width:210px;padding:8px 10px;border-radius:14px 14px 4px 14px;background:#1a73e8;color:#fff;font:600 11.5px/1.35 "IBM Plex Sans",sans-serif;box-shadow:0 12px 26px rgba(0,0,0,.4);animation:sms 4.8s ease-out infinite}
.cv-sms small{display:block;font-weight:500;font-size:10px;opacity:.8;margin-bottom:2px}
@keyframes sms{0%,35%{opacity:0;translate:0 12px;scale:.92}45%,88%{opacity:1;translate:0 0;scale:1}100%{opacity:0}}

/* ---- chat: bubbles appear one after another ---- */
.cv-chat{position:absolute;left:16%;right:16%;top:12%;bottom:18%;display:flex;flex-direction:column;justify-content:center;gap:6px}
.cv-chat p{margin:0;max-width:72%;padding:6px 10px;border-radius:12px;font:600 11.5px/1.3 "IBM Plex Sans",sans-serif;opacity:0;animation:bub 6s ease-out infinite}
.cv-chat .in{align-self:flex-start;background:#fffdf9;color:#231a15;border-bottom-left-radius:4px}
.cv-chat .out{align-self:flex-end;background:#d68a5e;color:#1d1410;border-bottom-right-radius:4px}
.cv-chat .a1{animation-delay:.8s}.cv-chat .q2{animation-delay:1.6s}.cv-chat .dots{animation-delay:2.4s;display:flex;gap:3px;padding:8px 10px}
.cv-chat .dots i{width:5px;height:5px;border-radius:50%;background:#1d1410;animation:dot 1.2s infinite}.cv-chat .dots i:nth-child(2){animation-delay:.2s}.cv-chat .dots i:nth-child(3){animation-delay:.4s}
@keyframes bub{0%{opacity:0;translate:0 8px}8%,85%{opacity:1;translate:0 0}95%,100%{opacity:0}}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* ---- past customers: a loop around the shop, dots come back ---- */
.cv-loop{position:absolute;left:50%;top:50%;width:46%;max-width:170px;aspect-ratio:1;translate:-50% -50%;animation:spin 7s linear infinite}
.cv-loop path{fill:none;stroke:#d68a5e;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
@keyframes spin{to{rotate:360deg}}
.cv-shop{position:absolute;left:50%;top:50%;width:18%;max-width:64px;translate:-50% -50%;fill:#2c1e18;stroke:#f3e6d6;stroke-width:2.2;stroke-linejoin:round}
.cv-dot{position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;border-radius:50%;background:#efab4f;box-shadow:0 0 12px rgba(239,171,79,.7);animation:back 4s ease-in-out infinite}
.cv-dot.d1{--x:10%;--y:30%}.cv-dot.d2{--x:84%;--y:24%;animation-delay:1.3s;background:#c4506a}.cv-dot.d3{--x:78%;--y:72%;animation-delay:2.6s}
@keyframes back{0%{opacity:0;scale:.5;left:var(--x);top:var(--y)}20%{opacity:1;scale:1;left:var(--x);top:var(--y)}85%{opacity:1}100%{opacity:0;scale:.4;left:calc(50% - 5px);top:calc(50% - 5px)}}
.cv-tag{position:absolute;right:8%;top:12%;font:800 11.5px/1 "Archivo",sans-serif;color:#1d1410;background:#efab4f;border-radius:999px;padding:6px 10px;animation:plus 4s ease-out infinite}

/* ---- new business launch: the shop opens, sign swings, confetti ---- */
.cv-shop.cv-launch{top:56%;width:26%;max-width:96px}
.cv-t-launch .cv-ring{top:74%;width:30%;border-color:rgba(239,171,79,.7)}
.cv-open{position:absolute;left:50%;top:14%;translate:-50% 0;font:800 12px/1 "Archivo",sans-serif;letter-spacing:.1em;color:#1d1410;background:#efab4f;border-radius:6px;padding:7px 11px;box-shadow:0 8px 18px rgba(0,0,0,.35);transform-origin:50% -14px;animation:swing 3s ease-in-out infinite}
.cv-open::before{content:"";position:absolute;left:50%;top:-14px;width:22px;height:14px;translate:-50% 0;border:1.5px solid rgba(243,230,214,.55);border-bottom:0;border-radius:3px 3px 0 0}
@keyframes swing{0%,100%{rotate:-7deg}50%{rotate:7deg}}
.cv-conf i{position:absolute;top:-8%;width:7px;height:11px;border-radius:2px;background:#d68a5e;opacity:0;animation:conf 3.6s linear infinite}
.cv-conf i:nth-child(1){left:10%}.cv-conf i:nth-child(2){left:24%;background:#c4506a;animation-delay:.5s}.cv-conf i:nth-child(3){left:37%;background:#efab4f;animation-delay:1.6s}.cv-conf i:nth-child(4){left:63%;animation-delay:2.2s}
.cv-conf i:nth-child(5){left:76%;background:#efab4f;animation-delay:.9s}.cv-conf i:nth-child(6){left:89%;background:#c4506a;animation-delay:2.8s}.cv-conf i:nth-child(7){left:52%;background:#f3e6d6;animation-delay:1.2s}
@keyframes conf{0%{opacity:0;translate:0 0;rotate:0deg}10%{opacity:1}85%{opacity:1}100%{opacity:0;translate:-14px 240px;rotate:540deg}}

/* covers placed on other pages: <span class="cv-slot" data-cover="..."> */
.cv-slot{display:block;position:relative}
.cv-slot > .cv{position:absolute;inset:0}

/* ---- anything else: copper swoosh waves ---- */
.cv-waves{position:absolute;inset:0}
.cv-waves path{fill:none;stroke-linecap:round;stroke-dasharray:320;animation:wave 5s ease-in-out infinite}
.cv-waves .w1{stroke:#d68a5e;stroke-width:4}.cv-waves .w2{stroke:rgba(239,171,79,.7);stroke-width:3;animation-delay:.6s}.cv-waves .w3{stroke:rgba(196,80,106,.6);stroke-width:3;animation-delay:1.2s}
@keyframes wave{0%{stroke-dashoffset:320}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-320}}

/* calm versions */
@media (prefers-reduced-motion:reduce){.cv *,.cv *::before,.cv *::after{animation:none!important}.cv-browser .b,.cv-chat p,.cv-heart,.cv-mail,.cv-sms,.cv-plus,.cv-tag,.cv-dot{opacity:1!important}.cv-heart,.cv-mail,.cv-conf{display:none}}
@media print{.cv{display:none}}