/* DISC360 · слой анимации и маскота. Подключается последним. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(252,250,247,.92);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.header .head-row{transition:height .3s var(--ease)}
.header.is-compact .head-row{height:68px}
.header.is-compact{box-shadow:0 8px 24px rgba(60,40,30,.06)}
.mo-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.mo-progress i{display:block;height:100%;width:100%;background:var(--coral);transform-origin:0 50%;transform:scaleX(0)}
.mo-rider{position:absolute;bottom:3px;left:0;width:34px;height:34px;margin-left:-17px;pointer-events:none;will-change:left}
.mo-rider svg{display:block;width:100%;height:auto;overflow:visible}
@media(max-width:760px){.header.is-compact .head-row{height:60px}}

/* --- Маскот --- */
.mascot-wrap{display:block;line-height:0}
.mascot-wrap:not(.hero-report-mascot){position:relative}
.mascot-wrap>svg{display:block;width:100%;height:auto;overflow:visible}
.mascot-bubble{position:absolute;z-index:5;left:50%;bottom:92%;transform:translate(-50%,8px) scale(.9);transform-origin:50% 100%;opacity:0;pointer-events:none;width:max-content;max-width:190px;padding:9px 13px;border-radius:14px;background:#fff;color:#1B1F2A;border:1.5px solid #1B1F2A;font:700 13px/1.35 Inter,Arial,sans-serif;letter-spacing:-.01em;box-shadow:0 8px 20px rgba(60,40,30,.14);transition:opacity .25s,transform .35s var(--spring)}
.mascot-bubble::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;background:#fff;border-right:1.5px solid #1B1F2A;border-bottom:1.5px solid #1B1F2A;transform:translate(-50%,-5px) rotate(45deg)}
.mascot-wrap.say .mascot-bubble{opacity:1;transform:translate(-50%,0) scale(1)}
.mascot-wrap[data-side=left] .mascot-bubble{left:0;transform:translate(0,8px) scale(.9);transform-origin:20% 100%}
.mascot-wrap[data-side=left].say .mascot-bubble{transform:translate(0,0) scale(1)}
.mascot-wrap[data-side=left] .mascot-bubble::after{left:34px}
.mascot-wrap[data-side=right] .mascot-bubble{left:auto;right:0;transform:translate(0,8px) scale(.9);transform-origin:80% 100%}
.mascot-wrap[data-side=right].say .mascot-bubble{transform:translate(0,0) scale(1)}
.mascot-wrap[data-side=right] .mascot-bubble::after{left:auto;right:30px;transform:translate(0,-5px) rotate(45deg)}
.hero-report-mascot{cursor:pointer}
.hero-report-mascot .mascot-bubble{bottom:100%;max-width:150px}
.mascot-wrap{-webkit-tap-highlight-color:transparent}

.mo-fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 20px 6px 8px;border-radius:999px;background:var(--coral);color:#fff;font-weight:700;font-size:15px;box-shadow:0 12px 28px rgba(199,73,44,.35);transform:translateY(90px) scale(.9);opacity:0;pointer-events:none;transition:transform .5s var(--spring),opacity .3s,background .18s}
.mo-fab.is-on{transform:none;opacity:1;pointer-events:auto}
.mo-fab:hover{background:#AD3B21}
.mo-fab .fab-face{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
.mo-fab .fab-face svg{width:34px;height:auto;display:block}
.mo-fab:focus-visible{outline:3px solid #1B1F2A;outline-offset:3px}
@media(max-width:520px){.mo-fab{font-size:14px;padding-right:16px}}

.mo-shapes{position:absolute;inset:0;pointer-events:none;z-index:0}
.mo-shape{position:absolute;display:block;will-change:transform}
.mo-s-circle{border-radius:50%;background:#FA7268}
.mo-s-peach{border-radius:50%;background:#F9EBE4}
.mo-s-quarter{background:#E9EAEC;border-radius:100% 0 0 0}
.mo-s-semi{background:#FA7268;border-radius:100px 100px 0 0}
.hero-v3,.editorial-hero,.about-hero,.report-intro{position:relative}
.hero-v3>*:not(.mo-shapes),.editorial-hero>*:not(.mo-shapes),.about-hero>*:not(.mo-shapes),.report-intro>*:not(.mo-shapes){position:relative;z-index:1}
.hero-v3>.report-hero-art{position:relative}

@media(prefers-reduced-motion:no-preference){
/* ---- Маскот: движение ---- */
.dmascot .m-body{animation:m-bob 3.8s ease-in-out infinite;transform-origin:130px 194px}
.dmascot .m-shadow{animation:m-shadow 3.8s ease-in-out infinite;transform-origin:130px 200px}
.dmascot .m-eyes{transition:transform .12s ease-out}
.dmascot .m-eye{animation:m-blink 5.2s infinite;transform-box:fill-box;transform-origin:50% 50%}
.dmascot .m-eye.b{animation-delay:.02s}
.dmascot .m-arm-l{animation:m-wave 5s ease-in-out infinite;transform-origin:74px 124px}
.dmascot .m-arm-r{animation:m-pump 4.4s ease-in-out infinite;transform-origin:186px 132px}
.dmascot .m-star{transform-box:fill-box;transform-origin:50% 50%;animation:m-twinkle 2.6s ease-in-out infinite}
.dmascot .m-star.s2{animation-delay:.7s}
.dmascot .m-star.s3{animation-delay:1.3s}
.dmascot .m-heart{transform-box:fill-box;transform-origin:50% 100%;animation:m-heart 3s ease-in-out infinite}
.dmascot .m-heart.h2{animation-delay:1.1s}
.dmascot .m-plus{transform-box:fill-box;transform-origin:50% 50%;animation:m-spin 7s linear infinite}
.dmascot .m-mouth{transform-box:fill-box;transform-origin:50% 0}
.dmascot.is-jump .m-body{animation:m-jump .75s var(--spring) 1}
.dmascot.is-jump .m-arm-l{animation:m-wave-fast .75s ease-in-out 1}
.dmascot.is-jump .m-mouth{animation:m-grin .75s ease-in-out 1}
.dmascot.is-cheer .m-arm-l{animation:m-wave-fast .6s ease-in-out 3}
.dmascot.is-cheer .m-arm-r{animation:m-pump-fast .6s ease-in-out 3}
.dmascot.is-cheer .m-body{animation:m-jump .9s var(--spring) 2}
.dmascot.is-wave .m-arm-l{animation:m-wave-fast .9s ease-in-out infinite}
.dmascot.is-lost .m-body{animation:m-wobble 3.2s ease-in-out infinite}
.dmascot.is-lost .m-eyes{animation:m-scan 4.2s ease-in-out infinite}
.dmascot.is-lost .m-eyes{transition:none}
.dmascot.is-lost .m-heart{animation:m-fadeq 3s ease-in-out infinite}
@keyframes m-bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-6px) rotate(.8deg)}}
@keyframes m-shadow{0%,100%{transform:scaleX(1);opacity:.1}50%{transform:scaleX(.82);opacity:.06}}
@keyframes m-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes m-wave{0%,62%,100%{transform:rotate(0)}70%{transform:rotate(-22deg)}78%{transform:rotate(8deg)}86%{transform:rotate(-20deg)}94%{transform:rotate(4deg)}}
@keyframes m-wave-fast{0%,100%{transform:rotate(0)}25%{transform:rotate(-26deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-24deg)}}
@keyframes m-pump{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-9deg)}90%{transform:rotate(3deg)}}
@keyframes m-pump-fast{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes m-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.72) rotate(18deg);opacity:.75}}
@keyframes m-heart{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-9px) scale(1.12);opacity:.85}}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-jump{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(2px) scale(1.04,.95)}45%{transform:translateY(-26px) scale(.97,1.04) rotate(-3deg)}70%{transform:translateY(0) scale(1.03,.97)}100%{transform:translateY(0) scale(1,1)}}
@keyframes m-grin{0%,100%{transform:scale(1)}40%{transform:scale(1.25,1.5)}}
@keyframes m-wobble{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-5px)}}
@keyframes m-scan{0%,100%{transform:translate(0,0)}15%{transform:translate(-5px,-1px)}45%{transform:translate(5px,-1px)}70%{transform:translate(4px,3px)}85%{transform:translate(-3px,3px)}}
@keyframes m-fadeq{0%,100%{opacity:.3}50%{opacity:1}}

/* ---- Появление при загрузке ---- */
.mo .hero-v3 .eyebrow,.mo .hero-v3 h1,.mo .hero-v3 .lead,.mo .hero-v3 .actions,.mo .hero-v3 .hero-affirmation,.mo .editorial-hero>div>*,.mo .about-hero>div>*,.mo .report-intro>div>*,.mo .empty>*,.mo .crumb{animation:mo-rise .8s var(--ease) both}
.mo .hero-v3 h1,.mo .editorial-hero h1,.mo .about-hero h1,.mo .report-intro h1,.mo .empty h1{animation-delay:.08s}
.mo .hero-v3 .lead,.mo .editorial-hero p,.mo .about-hero p,.mo .report-intro p{animation-delay:.18s}
.mo .hero-v3 .actions,.mo .editorial-hero .actions,.mo .about-hero .actions,.mo .report-intro .actions,.mo .empty .actions{animation-delay:.28s}
.mo .hero-v3 .hero-affirmation{animation-delay:.4s}
.mo .hero-v3 h1 span,.mo .editorial-hero h1 span,.mo .about-hero h1 span,.mo .report-intro h1 span{background:linear-gradient(#F6D3C6,#F6D3C6) 0 90%/0% .2em no-repeat;animation:mo-mark 1.1s .7s var(--ease) forwards}
.mo .report-hero-art{animation:mo-art 1s .1s var(--ease) both}
.mo .hero-insight{animation:mo-pop .8s .7s var(--spring) both}
.mo .hero-art-label{animation:mo-rise .8s .35s var(--ease) both}
.mo .product-strip .strip-item{animation:mo-rise .8s var(--ease) both}
.mo .product-strip .strip-item:nth-child(1){animation-delay:.5s}.mo .product-strip .strip-item:nth-child(2){animation-delay:.6s}.mo .product-strip .strip-item:nth-child(3){animation-delay:.7s}
.mo .cover-link{animation:mo-cover 6s ease-in-out infinite}
.mo .report-intro-cover img,.mo .blog-feature-art img{animation:mo-float 7s ease-in-out infinite}
.mo .hero-affirmation>span{display:inline-block;animation:mo-spin-s 6s ease-in-out infinite}
@keyframes mo-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mo-pop{from{opacity:0;transform:translateY(20px) scale(.88)}to{opacity:1;transform:none}}
@keyframes mo-art{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mo-mark{to{background-size:100% .2em}}
@keyframes mo-cover{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes mo-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:.8deg}}
@keyframes mo-spin-s{0%,70%,100%{transform:rotate(0) scale(1)}85%{transform:rotate(180deg) scale(1.25)}}

/* ---- Появление при прокрутке ---- */
.mo [data-reveal]{opacity:.35;transform:translateY(30px) scale(.985);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.mo [data-reveal].in{opacity:1;transform:none}
.mo [data-reveal=left]{transform:translateX(-34px)}
.mo [data-reveal=right]{transform:translateX(34px)}
.mo [data-reveal=left].in,.mo [data-reveal=right].in{transform:none}
.mo .timeline-step .num{transition:transform .6s var(--spring) .15s,background .3s,color .3s}
.mo .timeline-step[data-reveal]:not(.in) .num{transform:scale(.4)}
.mo .timeline-step.in .num{background:var(--coral);color:#fff;border-color:var(--coral)}
.mo .timeline-step{position:relative}
.mo .timeline-step::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--coral);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ease) .2s}
.mo .timeline-step.in::before{transform:scaleX(1)}
.mo .section-head h2{background:linear-gradient(transparent 88%,#F6D3C6 88%) 0 0/0% 100% no-repeat;transition:background-size 1.1s var(--ease) .3s}

/* ---- Диалог ---- */
.mo .dialogue .message{opacity:0;transform:translateY(16px) scale(.96);transition:opacity .45s,transform .55s var(--spring)}
.mo .dialogue.talk .message{opacity:1;transform:none}
.mo .dialogue .message.answer{transition-delay:1.5s}
.mo .dialogue-takeaway,.mo .dialogue-label{transition:opacity .6s 2.4s;opacity:1}
.mo .dialogue:not(.talk) .dialogue-takeaway{opacity:0}
.mo-typing{display:inline-flex;gap:5px;align-items:center;margin:0 0 12px auto;padding:12px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);opacity:0;height:0;overflow:hidden}
.mo-typing i{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:mo-dot 1s ease-in-out infinite}
.mo-typing i:nth-child(2){animation-delay:.15s}.mo-typing i:nth-child(3){animation-delay:.3s}
.dialogue.talk .mo-typing{animation:mo-typing 1.5s both}
@keyframes mo-dot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
@keyframes mo-typing{0%{opacity:0;height:0;padding:0 16px;margin-bottom:0}10%,90%{opacity:1;height:38px;padding:12px 16px;margin-bottom:12px}100%{opacity:0;height:0;padding:0 16px;margin-bottom:0}}

/* ---- Интерактив ---- */
.btn{position:relative;overflow:hidden;transition:background .18s,transform .25s var(--spring),box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary:hover{box-shadow:0 12px 24px rgba(199,73,44,.28)}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:mo-shine 5.5s 2s infinite}
@keyframes mo-shine{0%,70%{left:-60%}100%{left:130%}}
.text-link{transition:letter-spacing .25s,color .2s}
.text-link:hover{letter-spacing:.01em}
.audience-block{transition:transform .35s var(--ease),box-shadow .35s}
.audience-block:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(60,40,30,.1)}
.circle-arrow{transition:transform .4s var(--spring),background .2s}
.audience-block:hover .circle-arrow{transform:rotate(45deg) scale(1.1)}
.visual-disc{animation:mo-roll 14s linear infinite}
@keyframes mo-roll{to{transform:rotate(360deg)}}
.team-marker{animation:mo-bob 3.6s ease-in-out infinite;display:inline-flex}
.team-marker:nth-child(2){animation-delay:.3s}.team-marker:nth-child(3){animation-delay:.6s}.team-marker:nth-child(4){animation-delay:.9s}
@keyframes mo-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.blog-card{transition:transform .35s var(--ease),box-shadow .35s,border-color .2s}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(60,40,30,.12);border-color:#D4C5B6}
.blog-card .article-art{transition:transform .6s var(--ease)}
.blog-card:hover .article-art{transform:scale(1.05) rotate(-.6deg)}
.blog-card:not([hidden]){animation:mo-card .55s var(--ease) both}
@keyframes mo-card{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.art-bubble{animation:mo-bob 4s ease-in-out infinite}.art-bubble.reply{animation-delay:.8s}
.shape-circle,.shape-quarter{animation:mo-bob 5s ease-in-out infinite}.shape-circle{animation-delay:1s}
.art-disc span{animation:mo-bob 4s ease-in-out infinite}.art-disc span:nth-child(2){animation-delay:.25s}.art-disc span:nth-child(3){animation-delay:.5s}.art-disc span:nth-child(4){animation-delay:.75s}
.factor-button{transition:transform .3s var(--spring),box-shadow .2s,background .2s}
.factor-button:hover{transform:translateY(-4px)}
.factor-button[aria-pressed=true]{transform:translateY(-3px) scale(1.04)}
.factor-detail.swap>*{animation:mo-swap .5s var(--ease) both}
.factor-detail.swap>*:nth-child(2){animation-delay:.05s}.factor-detail.swap>*:nth-child(3){animation-delay:.1s}.factor-detail.swap>*:nth-child(4){animation-delay:.15s}
@keyframes mo-swap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.report-page-link img,.cover-link img{transition:opacity .25s,transform .45s var(--ease)}
.report-page-link.flip img{animation:mo-page .6s var(--ease) both}
@keyframes mo-page{from{opacity:0;transform:translateX(26px) rotate(1.5deg)}to{opacity:1;transform:none}}
.reading-content.swap>*{animation:mo-swap .5s var(--ease) both}
.reading-content.swap>*:nth-child(2){animation-delay:.05s}.reading-content.swap>*:nth-child(3){animation-delay:.1s}.reading-content.swap>*:nth-child(4){animation-delay:.15s}.reading-content.swap>*:nth-child(5){animation-delay:.2s}
.sample-controls button,.report-choice,.context-switch button,.blog-filters button{transition:transform .25s var(--spring),background .2s,color .2s,border-color .2s}
.sample-controls button:active,.report-choice:active,.context-switch button:active,.blog-filters button:active{transform:scale(.94)}
.report-choice:hover{transform:translateX(4px)}
details>summary{transition:color .2s}
details[open]>summary~*{animation:mo-swap .4s var(--ease) both}
details>summary::after,details>summary::marker{transition:transform .3s var(--spring)}
.principle-grid article,.format-card,.audience-card{transition:transform .35s var(--ease),box-shadow .35s}
.principle-grid article:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(60,40,30,.08)}
.cta{position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(250,114,104,.35),transparent 68%);animation:mo-glow 7s ease-in-out infinite;pointer-events:none}
@keyframes mo-glow{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.25);opacity:1}}
.article-toc a.is-active{color:var(--coral);transform:translateX(4px)}
.article-toc a{transition:transform .25s var(--ease),color .2s}
.mo-fab .fab-face svg .m-body{animation:m-bob 3.2s ease-in-out infinite;transform-origin:130px 194px}
}
.footer{position:relative}
.footer .mo-peek{position:absolute;right:max(24px,calc((100% - 1200px)/2 + 24px));top:-46px;width:104px;height:46px;overflow:hidden;pointer-events:none}
.footer .mo-peek svg{display:block;width:100%;height:auto}
@media(max-width:700px){.footer .mo-peek{width:80px;height:36px;top:-36px;right:16px}}
.cta .m-halo{opacity:.1}
.crumb{position:relative;z-index:1}
.empty .mascot-wrap{width:200px;margin:0 auto 8px}
.about-art .mascot-wrap{width:clamp(140px,14vw,180px)}
.editorial-hero .mascot-wrap{width:160px}

/* e-mail contact panel (replaces callback form) */
.mail-panel{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.mail-panel h3{margin:0}.mail-panel p{margin:0}
.mail-big{font-size:clamp(20px,2.6vw,28px);font-weight:700;word-break:break-all}
.mail-actions{display:flex;gap:12px;flex-wrap:wrap}
.mail-h{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.mail-list{margin:0;padding-left:20px;display:grid;gap:6px}
.mail-note{font-size:14px;opacity:.75}