/* =====================================================
   PAW-UI 2027 — аддон для лендинга «Помоги пушистикам»
   Подключать ПОСЛЕ основного css. Префикс paw- = без конфликтов
===================================================== */

/* --- База аддона --- */
.paw-hero,.paw-section,.paw-final{position:relative;overflow:hidden}
.paw-hero{background:linear-gradient(180deg,#f6fffc 0%,#e6f6f3 55%,#dcf1e9 100%);padding:var(--space-xl) 0 var(--space-xxl)}
.paw-section{padding:var(--space-xxl) 0}
.paw-section--tint{background:linear-gradient(180deg,#fff 0%,#eef8f6 45%,#fff 100%)}
.paw-final{background:linear-gradient(180deg,#fff 0%,#e0f4f2 45%,#dcf1e9 100%);text-align:center;padding:var(--space-xxl) 0 calc(var(--space-xxl) + 70px)}

/* --- Типографика --- */
.paw-h1{font-size:clamp(2.4rem,7.5vw,4.8rem);line-height:1.02;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:var(--color-5);margin:.3em 0 .45em}
.paw-h2{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.15;font-weight:800;color:var(--color-5);margin-bottom:.6em}
.paw-lead{font-size:var(--text-md);line-height:1.55;color:var(--color-5);max-width:36em}
.paw-gradient-text{background:linear-gradient(92deg,var(--color-4) 0%,var(--color-6) 55%,var(--color-7) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.08em}

/* --- Стекло --- */
.paw-glass{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.75);box-shadow:0 18px 50px rgba(52,134,131,.14)}
.paw-badge{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.3em;border-radius:999px;font-size:var(--text-xxs);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--color-4)}
.paw-chip{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.15em;border-radius:999px;font-size:var(--text-xs);font-weight:500;color:var(--color-5)}

/* --- Aurora-фон --- */
.paw-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.paw-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:pawBlob 20s ease-in-out infinite alternate}
.paw-aurora i:nth-child(1){width:420px;height:420px;background:#caeae8;top:-120px;left:-90px}
.paw-aurora i:nth-child(2){width:360px;height:360px;background:#ffd9b8;top:28%;right:-110px;animation-delay:-6s}
.paw-aurora i:nth-child(3){width:300px;height:300px;background:#ffe3de;bottom:-90px;left:32%;animation-delay:-12s}
@keyframes pawBlob{from{transform:translate(0,0) scale(1)}to{transform:translate(45px,30px) scale(1.18)}}

/* --- Летящие лапки --- */
.paw-float{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.paw-float i{position:absolute;bottom:-40px;width:22px;height:22px;opacity:0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23348683'><ellipse cx='20' cy='16' rx='8' ry='11'/><ellipse cx='44' cy='16' rx='8' ry='11'/><ellipse cx='7' cy='32' rx='7' ry='9'/><ellipse cx='57' cy='32' rx='7' ry='9'/><path d='M32 28c-12 0-22 13-22 22 0 6 5 9 10 9 5 0 8-2 12-2s7 2 12 2c5 0 10-3 10-9 0-9-10-22-22-22z'/></g></svg>") center/contain no-repeat;animation:pawUp 16s linear infinite}
.paw-float i:nth-child(3n){background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='%23ff7000'><ellipse cx='20' cy='16' rx='8' ry='11'/><ellipse cx='44' cy='16' rx='8' ry='11'/><ellipse cx='7' cy='32' rx='7' ry='9'/><ellipse cx='57' cy='32' rx='7' ry='9'/><path d='M32 28c-12 0-22 13-22 22 0 6 5 9 10 9 5 0 8-2 12-2s7 2 12 2c5 0 10-3 10-9 0-9-10-22-22-22z'/></g></svg>")}
.paw-float i:nth-child(1){left:4%;animation-duration:15s}
.paw-float i:nth-child(2){left:12%;width:14px;height:14px;animation-duration:19s;animation-delay:-4s}
.paw-float i:nth-child(3){left:21%;animation-duration:13s;animation-delay:-8s}
.paw-float i:nth-child(4){left:30%;width:30px;height:30px;animation-duration:21s;animation-delay:-2s}
.paw-float i:nth-child(5){left:39%;width:16px;height:16px;animation-duration:17s;animation-delay:-11s}
.paw-float i:nth-child(6){left:48%;animation-duration:14s;animation-delay:-6s}
.paw-float i:nth-child(7){left:57%;width:26px;height:26px;animation-duration:22s;animation-delay:-15s}
.paw-float i:nth-child(8){left:66%;width:14px;height:14px;animation-duration:16s;animation-delay:-3s}
.paw-float i:nth-child(9){left:75%;animation-duration:18s;animation-delay:-9s}
.paw-float i:nth-child(10){left:84%;width:28px;height:28px;animation-duration:20s;animation-delay:-13s}
.paw-float i:nth-child(11){left:92%;width:16px;height:16px;animation-duration:15s;animation-delay:-7s}
.paw-float i:nth-child(12){left:97%;animation-duration:23s;animation-delay:-17s}
@keyframes pawUp{0%{transform:translateY(0) rotate(-12deg);opacity:0}8%{opacity:.45}85%{opacity:.3}100%{transform:translateY(-108vh) rotate(28deg);opacity:0}}

/* --- Фото-рамки + Ken Burns --- */
.paw-frame{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(38,90,112,.28);margin:0}
.paw-frame img{display:block;width:100%;height:100%;object-fit:cover}
.paw-frame::after{content:"";position:absolute;inset:12px;border:2px dashed rgba(255,255,255,.55);border-radius:20px;pointer-events:none;z-index:2}
.paw-frame figcaption{position:absolute;left:14px;bottom:14px;z-index:3;padding:.7em 1.2em;border-radius:18px;text-align:left;color:var(--color-5)}
.paw-frame figcaption .paw-counter{display:block;font-size:var(--text-xl);font-weight:900;color:var(--color-6);line-height:1.1;font-variant-numeric:tabular-nums}
.paw-frame figcaption small{font-size:var(--text-xxs);font-weight:500;color:var(--color-4)}
.paw-kenburns img{animation:pawKen 16s ease-in-out infinite alternate}
@keyframes pawKen{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.15) translate3d(-2%,-2%,0)}}

/* --- Бегущая строка --- */
.paw-marquee{overflow:hidden;background:linear-gradient(90deg,var(--color-6),var(--color-7));color:var(--color-1);padding:.85em 0;position:relative;z-index:3;transform:rotate(-1.4deg);width:104%;margin-left:-2%;margin-top:calc(var(--space-lg)*-1);box-shadow:0 12px 40px rgba(255,112,0,.35)}
.paw-marquee__track{display:flex;width:max-content;animation:pawMarquee 28s linear infinite}
.paw-marquee__group{display:flex;align-items:center;gap:2.5em;padding-right:2.5em;font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:var(--text-xs);white-space:nowrap}
.paw-marquee__group i{width:8px;height:8px;border-radius:50%;background:var(--color-1);opacity:.85;flex-shrink:0}
@keyframes pawMarquee{to{transform:translateX(-50%)}}

/* --- Карточки «как работает» --- */
.paw-card{border-radius:24px;padding:var(--space-lg);position:relative;overflow:hidden;height:100%}
.paw-card__icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,rgba(255,112,0,.16),rgba(255,30,0,.12));color:var(--color-7);margin-bottom:var(--space-sm)}
.paw-card h3{font-size:var(--text-lg);font-weight:800;color:var(--color-5);margin-bottom:.4em}
.paw-card p{font-size:var(--text-sm);color:var(--color-5)}
.paw-card__val{font-size:var(--text-xxl);font-weight:900;color:var(--color-6);line-height:1;margin-top:var(--space-sm)}

/* --- Формула добра --- */
.paw-formula{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6em 1em;border-radius:24px;padding:var(--space-md) var(--space-lg);font-size:var(--text-sm);font-weight:500;color:var(--color-5)}
.paw-formula b{font-size:var(--text-md);font-weight:900;color:var(--color-6)}
.paw-formula__plus,.paw-formula__eq{font-size:var(--text-lg);font-weight:900;color:var(--color-3)}

/* --- Прогресс-бар цели --- */
.paw-progress{height:16px;border-radius:999px;background:rgba(52,134,131,.12);box-shadow:inset 0 2px 5px rgba(52,134,131,.18);overflow:hidden;position:relative}
.paw-progress b{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--color-4),var(--color-6) 60%,var(--color-7));box-shadow:0 0 18px rgba(255,112,0,.55);position:relative;transition:width 2.4s var(--ease-out)}
.paw-progress b::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:pawShine 2.6s ease-in-out infinite}
@keyframes pawShine{0%{left:-60%}60%,100%{left:120%}}

/* --- Статистика --- */
.paw-stat{border-radius:22px;padding:var(--space-md);text-align:center}
.paw-stat b{display:block;font-size:var(--text-xxl);font-weight:900;color:var(--color-6);line-height:1.1;font-variant-numeric:tabular-nums}
.paw-stat small{font-size:var(--text-xs);color:var(--color-4);font-weight:500}

/* --- Ступени целей --- */
.paw-tier{border-radius:26px;padding:var(--space-lg) var(--space-md);text-align:center;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,rgba(149,188,186,.65),rgba(255,124,10,.6)) border-box;transition:transform .45s var(--bounce),box-shadow .45s ease;position:relative;height:100%}
.paw-tier:hover{transform:translateY(-10px);box-shadow:0 24px 60px rgba(52,134,131,.28)}
.paw-tier__plus{font-size:var(--text-sm);font-weight:700;color:var(--color-4);text-transform:uppercase;letter-spacing:.08em}
.paw-tier__sum{font-size:var(--text-xxl);font-weight:900;color:var(--color-6);line-height:1.1;margin:.2em 0}
.paw-tier__cap{font-size:var(--text-xs);color:var(--color-3);font-weight:500}
.paw-tier__flag{position:absolute;top:12px;right:12px;background:var(--color-7);color:var(--color-1);font-size:var(--text-xxs);font-weight:900;letter-spacing:.1em;padding:.35em .8em;border-radius:999px;box-shadow:0 6px 18px rgba(255,30,0,.4)}
.paw-note{border-radius:18px;padding:var(--space-sm) var(--space-md);display:inline-block;font-size:var(--text-sm);font-weight:500;color:var(--color-4)}

/* --- Пиццы --- */
.paw-pizza-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--space-md)}
.paw-pizza{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#e5533d 0 6px,transparent 7px),radial-gradient(circle at 66% 42%,#e5533d 0 5px,transparent 6px),radial-gradient(circle at 44% 68%,#e5533d 0 5px,transparent 6px),radial-gradient(circle at 70% 74%,#e5533d 0 4px,transparent 5px),#ffc93c;box-shadow:inset 0 0 0 5px #f5a623,0 8px 20px rgba(245,166,35,.35);animation:pawWiggle 2.8s ease-in-out infinite;animation-delay:calc(var(--i,0)*.12s)}
@keyframes pawWiggle{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-9deg) scale(1.07)}60%{transform:rotate(7deg) scale(1.03)}}

/* --- Сердцебиение --- */
.paw-heart{display:inline-block;animation:pawBeat 1.5s ease-in-out infinite;transform-origin:center}
@keyframes pawBeat{0%,100%{transform:scale(1)}20%{transform:scale(1.25)}35%{transform:scale(.92)}50%{transform:scale(1.15)}70%{transform:scale(1)}}

/* --- Кнопки CTA --- */
.paw-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1em 2em;border-radius:999px;background:linear-gradient(135deg,var(--color-6),var(--color-7));color:var(--color-1);font-weight:800;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;box-shadow:0 14px 40px rgba(255,112,0,.45);transition:transform .35s var(--bounce),box-shadow .35s ease,color .3s;position:relative;overflow:hidden;text-decoration:none;cursor:pointer}
.paw-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 55px rgba(255,112,0,.55);color:var(--color-1)}
.paw-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:pawShine 3.4s ease-in-out infinite}
.paw-cta--ghost{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--color-4);box-shadow:var(--shadow-md)}
.paw-cta--ghost:hover{color:var(--color-6)}
.paw-cta--xl{font-size:var(--text-md);padding:1.1em 2.8em}

/* --- Tilt + прожектор --- */
.paw-tilt{transform-style:preserve-3d;will-change:transform}
.paw-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,112,0,.14),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.paw-tilt:hover::after{opacity:1}

/* --- Появление при скролле --- */
.paw-reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease-out),transform .9s var(--bounce)}
.paw-reveal.paw-in{opacity:1;transform:translateY(0)}
.paw-reveal[data-delay="1"]{transition-delay:.12s}
.paw-reveal[data-delay="2"]{transition-delay:.24s}
.paw-reveal[data-delay="3"]{transition-delay:.36s}
.paw-reveal[data-delay="4"]{transition-delay:.48s}

/* --- Липкая CTA (моб) --- */
.paw-sticky-cta{position:fixed;left:10px;right:10px;bottom:10px;z-index:var(--z-index-9999);display:flex;gap:8px;padding:8px;border-radius:22px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(38,90,112,.28);transform:translateY(130%);transition:transform .5s var(--bounce)}
.paw-sticky-cta.paw-show{transform:translateY(0)}
.paw-sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;padding:.85em .5em;border-radius:16px;background:linear-gradient(135deg,var(--color-6),var(--color-7));color:var(--color-1);font-weight:800;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.paw-sticky-cta a+a{background:rgba(52,134,131,.12);color:var(--color-4)}
@media only screen and (min-width:64rem){.paw-sticky-cta{display:none}}

/* --- Уважение к reduced-motion --- */
@media (prefers-reduced-motion:reduce){
    .paw-aurora i,.paw-float i,.paw-kenburns img,.paw-marquee__track,.paw-pizza,.paw-heart,.paw-cta::after,.paw-progress b::after{animation:none!important}
    .paw-reveal{opacity:1;transform:none;transition:none}
}