@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(assets/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(assets/fonts/unbounded-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122}
/* Небо v17: фотографическое небо + настоящие облака слоями (параллакс), работы — на тонком стекле перед облаками.
   Поверх движка wall.css. Текст на небе белый, на стекле — тёмно-синий. */
.sky{--ink:#10304f;--green:#1f6fc4;--muted:#3f5f80;--white:#ffffff;--wall:#4a9be8}
body.sky{background:#3d8fe0}
.sky .world::before,.sky .light{display:none}
.sky .viewport{z-index:1}

/* layers */
.sky-bg{position:fixed;inset:-4% -8%;z-index:0;pointer-events:none;background:#3d8fe0 url(assets/sky-pano.jpg) center 70%/cover no-repeat;transition:transform 1.1s var(--ease)}
.sky-bg::after{content:"";position:absolute;inset:0;opacity:.12;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sky-far,.sky-near{position:absolute;left:0;top:0;height:100vh;pointer-events:none;transition:transform 1.1s var(--ease)}
.sky-far{width:640vw;z-index:0;filter:blur(1.5px)}
.sky-near{width:1200vw;z-index:5;filter:blur(3px);opacity:.92}
.sky-far img,.sky-near img{position:absolute;height:auto;user-select:none}
.sky-far.slow,.sky-near.slow,.sky-bg.slow{transition:transform 2.4s cubic-bezier(.45,.05,.2,1)}
.sky-far.instant,.sky-near.instant,.sky-bg.instant{transition:none}
.sky-near img{animation:drift 26s ease-in-out infinite alternate}
.sky-near img:nth-child(2n){animation-duration:34s;animation-delay:-9s}
@keyframes drift{from{translate:-2vw 0}to{translate:2vw -.6vh}}
.far .sky-near{opacity:0;transition:opacity .6s}

/* lettering on the sky: clean white */
.sky .paint-name{color:#fff;opacity:.85;text-shadow:0 1px 12px rgba(10,50,100,.25)}
.sky .paint-title{color:#fff;mix-blend-mode:normal;font-weight:600;text-shadow:0 2px 30px rgba(10,50,100,.22)}
.sky .accent,.sky .paint-title em{color:#fff6dc}
.sky .paint-lead{color:#fff;font-weight:450;text-shadow:0 1px 18px rgba(10,50,100,.3)}
.sky .paint-hint{color:#fff;opacity:.85;text-shadow:0 1px 12px rgba(10,50,100,.3)}
/* company names: big clean white with a soft haze of cloud behind */
.sky .cloud-word{color:#fff;mix-blend-mode:normal;opacity:1;font-weight:600;font-size:136px;letter-spacing:-.035em;line-height:1;padding:0;margin:0;filter:none;rotate:0deg;text-shadow:0 2px 34px rgba(10,50,100,.22)}
.sky .cloud-word::before{content:"";position:absolute;z-index:-1;left:-6%;right:-10%;top:-30%;bottom:-40%;background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,.1) 60%,transparent);filter:blur(18px)}
.sky .cloud-word.long{font-size:124px}
.sky.portrait .cloud-word{font-size:96px}.sky.portrait .cloud-word.long{font-size:76px}
.sky .zoomed .cloud-word,.sky.zoomed .cloud-word{opacity:.3}

/* works on thin glass, floating in front of the clouds */
.sky .cloud{padding:16px;border-radius:26px;overflow:hidden;isolation:auto;animation:none;
  background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 26px 50px -24px rgba(8,40,90,.45)}
.sky .cloud::before,.sky .cloud::after,.sky .bay>.cloud:nth-child(3n)::before,.sky .bay>.cloud:nth-child(3n+1)::before{content:none}
.sky .cloud:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 34px 60px -24px rgba(8,40,90,.5);background:linear-gradient(150deg,rgba(255,255,255,.42),rgba(255,255,255,.2))}
.sky .art img{border-radius:14px;box-shadow:0 8px 22px rgba(8,40,90,.28)}
.sky .cloud>.txt,.sky .cloud>.ph{translate:0 0}
.sky .ph{border-radius:16px;border:1px dashed rgba(255,255,255,.75);background:rgba(255,255,255,.12);color:#fff;font-size:21px;font-weight:550;text-shadow:0 1px 10px rgba(10,50,100,.25)}
.sky .ph small{color:rgba(255,255,255,.8);font-size:14px;font-weight:500}
.sky .txt{color:#fff;text-shadow:0 1px 10px rgba(10,50,100,.22)}
.sky .txt b{color:#fff}
.sky .tagcloud .txt{place-items:start;text-align:left;align-content:end;gap:4px;padding:10px 8px 6px}
.sky .tagcloud .txt b{font-size:30px;letter-spacing:-.02em}
.sky .tagcloud .txt span{font-size:17px;color:rgba(255,255,255,.85)}
.sky .tagcloud .txt em{margin-top:12px;justify-self:start;font-style:normal;font-size:15px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.9);padding:8px 14px;border-radius:999px;text-shadow:none;border:0}
.sky .tagcloud .txt em::after{content:" →"}
.sky .step .txt i{color:#fff6dc}
.sky .step .txt{color:rgba(255,255,255,.9)}
.sky .tool .txt{color:rgba(255,255,255,.88);font-size:18px}
.sky .tool .txt b{color:#fff;font-size:32px}
.sky .qr .txt b{color:#fff}
.sky .qr .txt img{width:72%;background:rgba(255,255,255,.92);border-radius:16px;padding:10px;opacity:1}
.sky .qr .txt span{color:#fff}

/* photo frame in soft sunlight (no cartoon sun) */
.sun{aspect-ratio:1;position:relative;border-radius:50%;filter:none}
.sun::before{content:"";position:absolute;inset:-30%;border-radius:50%;pointer-events:none;filter:none;animation:glow 7s ease-in-out infinite;
  background:radial-gradient(circle,rgba(255,250,232,.55) 0 30%,rgba(255,244,214,.18) 52%,transparent 70%)}
@keyframes glow{0%,100%{opacity:.8}50%{opacity:1}}
.sun-disc{position:absolute;inset:12%;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,255,255,.38),rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -26px rgba(8,40,90,.45)}
.sun-disc::before{content:none}
.sun-photo{width:84%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:20px;font-weight:550;color:#fff;border:1px dashed rgba(255,255,255,.7);background:none}
.sun:hover{transform:translateY(-6px)}
.zoomed .sun:not(.target){opacity:.3}

/* side arrows */
.side-arrow{position:fixed;z-index:29;top:50%;width:58px;height:58px;margin-top:-29px;border-radius:50%;display:grid;place-items:center;color:#fff;opacity:.9;transition:opacity .25s,transform .25s var(--ease)}
.side-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.side-arrow.prev{left:max(14px,env(safe-area-inset-left,0px))}
.side-arrow.next{right:max(14px,env(safe-area-inset-right,0px));animation:nudge-r 2.6s var(--ease) infinite}
.side-arrow:hover{opacity:1;transform:scale(1.06)}
@keyframes nudge-r{0%,70%,100%{translate:0 0}35%{translate:6px 0}}
.zoomed .side-arrow{opacity:0;pointer-events:none}
.sky.horizontal.portrait .strip{flex-direction:row}
.sky:not(.portrait) .bay:not(#hello):not(#contact)>.it{top:calc((var(--y) + 44) * 1px);width:calc(var(--w) * .88px)}

/* interface glass tuned for a blue background */
.sky .glass{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
.sky .bar-name{color:#fff}
.sky .bar-cta{background:#fff;color:var(--ink)}
.sky .dock-list button{color:rgba(255,255,255,.85)}
.sky .dock-list button[aria-current=true]{background:#fff;color:var(--ink)}
.sky .dock-arrow{background:rgba(255,255,255,.3);color:#fff}
.sky .dock-zoom{background:#fff;color:var(--ink)}
.sky .panel{background:rgba(250,252,255,.86)}
.sky .viewer{background:rgba(255,255,255,.3)}
@media (max-width:760px){.side-arrow{width:38px;height:38px;margin-top:-19px;opacity:.75}.side-arrow svg{width:18px;height:18px}.side-arrow.prev{left:4px}.side-arrow.next{right:4px}.sky-near{filter:blur(2px)}}
@media (prefers-reduced-motion:reduce){.sky-near img{animation:none}}

/* v17.1: contrast fixes */
.sky-bg{inset:0}
.sky .cloud{background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(24,86,160,.2))}
.sky .cloud:hover{background:linear-gradient(150deg,rgba(255,255,255,.36),rgba(24,86,160,.24))}
.sky .ph,.sky .txt{text-shadow:0 1px 3px rgba(8,40,90,.35),0 1px 14px rgba(8,40,90,.25)}
.sky .ph small,.sky .tagcloud .txt span,.sky .tool .txt,.sky .step .txt{color:#fff;opacity:.92}
.sky .dock.glass,.sky .bar.glass{background:rgba(16,58,110,.32);border-color:rgba(255,255,255,.4)}
.sky .dock-list button{color:#fff}
.sky .paint-hint{opacity:1}

/* v18: Safari/WebKit drops huge filtered layers — blur each cloud instead, keep layers light */
.sky-far,.sky-near{filter:none;will-change:transform;contain:layout style}
.sky-far img{filter:blur(1.2px)}
.sky-near img{filter:blur(2.5px)}

/* v19: clouds as CSS sprites (embedded once in standalone) */
.sky-far .c,.sky-near .c{position:absolute;display:block;background-position:center;background-size:contain;background-repeat:no-repeat}
.c1{background-image:url(assets/cloud-1.webp);aspect-ratio:900/455}
.c3{background-image:url(assets/cloud-3.webp);aspect-ratio:614/514}
.c4{background-image:url(assets/cloud-4.webp);aspect-ratio:1000/249}
.c5{background-image:url(assets/cloud-5.webp);aspect-ratio:603/276}
.c6{background-image:url(assets/cloud-6.webp);aspect-ratio:277/197}
.c7{background-image:url(assets/cloud-7.webp);aspect-ratio:617/173}
.c8{background-image:url(assets/cloud-8.webp);aspect-ratio:940/249}
.c9{background-image:url(assets/cloud-9.webp);aspect-ratio:389/236}
.c10{background-image:url(assets/cloud-10.webp);aspect-ratio:497/261}
.c11{background-image:url(assets/cloud-11.webp);aspect-ratio:803/223}
.sky-far .c{filter:blur(1px) brightness(1.06)}
.sky-near .c{filter:blur(2.5px) brightness(1.05);animation:drift 26s ease-in-out infinite alternate}
.sky-near .c:nth-child(2n){animation-duration:34s;animation-delay:-9s}
/* nothing covers a zoomed work */
.zoomed .sky-near{opacity:0;transition:opacity .4s}
.zoomed .sky-far{opacity:.25;transition:opacity .4s}
.sky-far,.sky-near{transition:transform 1.1s var(--ease),opacity .4s}
/* hint on a glass pill */
.sky .paint-hint{display:inline-block;width:auto!important;padding:12px 22px;border-radius:999px;background:rgba(16,58,110,.32);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:20px;text-shadow:none}

/* v20: crisp photo clouds back; only near clouds step aside when a work is zoomed */
.sky-far .c{filter:brightness(1.1) saturate(.9)}
.sky-near .c{filter:blur(.8px) brightness(1.08)}
.zoomed .sky-far{opacity:1}
.zoomed .sky-near{opacity:0}

/* ===== v21: light cool sky, dark readable text, atmospheric depth ===== */
.sky{--ink:#0f2f52;--muted:#38587a}
body.sky,.sky-bg{background-color:#bfe0fb}
.sky-bg{filter:blur(1.5px) saturate(.95)}
/* depth: far = small, pale, soft; near = big, bright, crisp */
.sky-far .c{filter:blur(2.2px) brightness(1.18) saturate(.7);opacity:.6!important;transform:scale(.8);transform-origin:left top}
.sky-near{opacity:1}
.sky-near .c{filter:brightness(1.06) drop-shadow(0 18px 24px rgba(40,90,150,.18));animation-duration:30s}
/* text: dark ink on the light sky */
.sky .paint-name{color:var(--ink);opacity:.75;text-shadow:none}
.sky .paint-title{color:var(--ink);text-shadow:0 2px 30px rgba(255,255,255,.55)}
.sky .accent,.sky .paint-title em{color:#2f7fd0}
.sky .paint-lead{color:var(--ink);text-shadow:0 1px 16px rgba(255,255,255,.7)}
.sky .cloud-word{color:var(--ink);text-shadow:0 2px 30px rgba(255,255,255,.6)}
.sky .cloud-word::before{background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,.15) 60%,transparent)}
/* glass cards: white glass, dark text */
.sky .cloud{background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.34));border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 26px 50px -24px rgba(20,60,120,.35)}
.sky .cloud:hover{background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.42))}
.sky .ph,.sky .txt{color:var(--ink);text-shadow:none}
.sky .txt b{color:var(--ink)}
.sky .ph{border-color:rgba(15,47,82,.25);background:rgba(255,255,255,.25)}
.sky .ph small,.sky .tagcloud .txt span,.sky .tool .txt,.sky .step .txt{color:var(--muted);opacity:1}
.sky .step .txt i{color:#2f7fd0}
.sky .tool .txt b,.sky .qr .txt b{color:var(--ink)}
.sky .qr .txt span{color:#2f7fd0}
.sky .tagcloud .txt em{background:var(--ink);color:#fff}
.sun-disc{background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(255,255,255,.3));border-color:rgba(255,255,255,.9)}
.sun-photo{color:var(--ink);border-color:rgba(15,47,82,.3)}
.sun::before{background:radial-gradient(circle,rgba(255,255,255,.75) 0 30%,rgba(255,255,255,.2) 52%,transparent 70%)}
/* interface */
.sky .bar.glass,.sky .dock.glass{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.85)}
.sky .bar-name{color:var(--ink)}
.sky .bar-cta,.sky .dock-zoom{background:var(--ink);color:#fff}
.sky .dock-list button{color:var(--muted)}
.sky .dock-list button[aria-current=true]{background:#fff;color:var(--ink)}
.sky .dock-arrow{background:rgba(255,255,255,.7);color:var(--ink)}
.side-arrow{color:var(--ink)}
.sky .side-arrow.glass{background:rgba(255,255,255,.55)}
.sky .paint-hint{background:rgba(15,47,82,.82);color:#fff;border-color:rgba(255,255,255,.3);opacity:1}

/* ===== v22 ===== */
.sky{--accent2:#3b6694}
/* no glow behind lettering */
.sky .paint-title,.sky .paint-lead,.sky .cloud-word,.sky .paint-name{text-shadow:none}
.sky .cloud-word::before{content:none}
/* company names: Unbounded */
.sky .cloud-word{font-family:"Unbounded","Onest",Arial,sans-serif;font-weight:700;font-size:112px;letter-spacing:-.03em;line-height:1.05}
.sky .cloud-word.long{font-size:96px}
.sky.portrait .cloud-word{font-size:76px}.sky.portrait .cloud-word.long{font-size:58px}
/* calmer accent instead of bright azure */
.sky .accent,.sky .paint-title em,.sky .step .txt i{color:var(--accent2)}
/* summary cards: bigger, clear call */
.sky .tagcloud .txt b{font-size:34px}
.sky .tagcloud .txt span{font-size:21px;line-height:1.35;color:var(--muted)}
.sky .tagcloud .txt em{font-size:18px;padding:11px 20px;margin-top:14px;background:var(--ink);color:#fff}
.sky .tagcloud .txt em::after{content:"  →";font-size:20px}
.panel.dossier .panel-kicker::before{content:none}
/* QR: no extra card, same colour as the title */
.sky .qr .txt img{background:none;padding:0;border-radius:0;width:70%}
.sky .qr .txt span{color:var(--ink)}
/* three depth planes of clouds */
.sky-mid{position:absolute;left:0;top:0;height:100vh;width:900vw;z-index:4;pointer-events:none;transition:transform 1.1s var(--ease)}
.sky-mid .c{position:absolute;display:block;background-position:center;background-size:contain;background-repeat:no-repeat;filter:blur(1px) brightness(1.1)}
.sky-mid.slow{transition:transform 2.4s cubic-bezier(.45,.05,.2,1)}.sky-mid.instant{transition:none}
.sky-near .c{filter:brightness(1.06) drop-shadow(0 18px 24px rgba(40,90,150,.16))}
.far .sky-mid{opacity:.6;transition:opacity .6s}
/* zoom: clouds stay, but slide down so they only touch the card edges */
.zoomed .sky-near{opacity:1;translate:0 9vh;transition:translate .8s var(--ease)}
.zoomed .sky-mid{translate:0 6vh;transition:translate .8s var(--ease)}
.sky-near,.sky-mid{translate:0 0;transition:transform 1.1s var(--ease),translate .8s var(--ease),opacity .4s}
/* whole-wall view: bays step up and down */
.sky .bay{transition:translate 1s var(--ease)}
.sky.far .bay:nth-child(2n){translate:0 140px}
.sky.far .bay:nth-child(2n+1){translate:0 -100px}
.sky.far.portrait .bay:nth-child(2n){translate:0 220px}
.zoomed .sky-near{translate:0 16vh}.zoomed .sky-mid{translate:0 10vh}
.zoomed .sky-near,.zoomed .sky-mid{translate:0 0}

/* v23: all headings in Unbounded; secondary words in white */
.sky .paint-title{font-family:"Unbounded","Onest",Arial,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1}
.sky .paint-title{font-size:118px}
.sky .paint-title.small{font-size:74px;line-height:1.08}
.sky.portrait .paint-title{font-size:84px}
.sky.portrait .paint-title.small{font-size:56px}
.sky .paint-title em{color:#fff}

.sun-photo.has-photo{width:90%;border:0;overflow:hidden;box-shadow:0 10px 30px -10px rgba(15,47,82,.45)}
.sun-photo.has-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:50%;display:block}

/* videos on the wall */
.vid video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#0f2f52;box-shadow:0 8px 22px rgba(8,40,90,.28)}
.vid .play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(8,40,90,.3);opacity:.0;transition:opacity .3s}
.vid .play::after{content:"";position:absolute;left:21px;top:16px;border-left:16px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent}
.vid:hover .play{opacity:1}
.viewer video{flex:1;min-height:0;max-width:100%;border-radius:18px;background:#000;box-shadow:0 18px 40px -16px rgba(38,52,56,.45)}

/* v27: clouds drift in around a zoomed work and only touch its edges */
.zoom-clouds{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.zoom-clouds .zc{position:absolute;display:block;opacity:0;translate:var(--from,0) 10px;transition:opacity .45s ease-out,translate 1.1s var(--ease),left 1.1s var(--ease),top 1.1s var(--ease),width 1.1s var(--ease)}
.zoom-clouds.on .zc{opacity:var(--op,1);translate:0 0}
.zoom-clouds .c{position:relative;display:block;width:100%;background-position:center;background-size:contain;background-repeat:no-repeat;filter:brightness(1.06) drop-shadow(0 14px 22px rgba(30,80,140,.28));animation:zdrift 9s ease-in-out infinite alternate}
.zoom-clouds .zc:nth-child(2) .c{animation-duration:11s;animation-delay:-4s}
.zoom-clouds .zc:nth-child(3) .c{filter:blur(1.5px) brightness(1.12);animation-duration:13s}
@keyframes zdrift{from{translate:-10px 0}to{translate:10px -5px}}
.viewing .zoom-clouds .zc{opacity:0;transition-delay:0s}
.far .zoom-clouds{display:none}
@media (prefers-reduced-motion:reduce){.zoom-clouds .zc{transition:opacity .2s}.zoom-clouds .c{animation:none}}

/* presentation: cover on the wall, slideshow in the viewer */

.sky .pres .pages{position:absolute;left:10px;top:10px;padding:5px 11px;border-radius:999px;background:rgba(15,47,82,.82);color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em}
.viewer-nav{display:none;position:absolute;top:50%;margin-top:-30px;width:52px;height:52px;border-radius:50%;place-items:center;background:rgba(255,255,255,.82);color:var(--ink);box-shadow:0 10px 26px -12px rgba(8,40,90,.5);z-index:2;cursor:pointer;border:0}
.viewer-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.viewer-nav.prev{left:28px}.viewer-nav.next{right:28px}
.viewer.slideshow .viewer-nav{display:grid}
.viewer-nav:hover{background:#fff}
.viewer.slideshow img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}
.sky .slides-btn{font-weight:650}
@media (max-width:760px){.viewer-nav{width:40px;height:40px;margin-top:-20px}.viewer-nav.prev{left:14px}.viewer-nav.next{right:14px}}
.zoom-clouds.snap .zc{transition:none!important}
/* zoomed slide card: click the picture itself to flip through */
.zoomed .it.target.pres{cursor:zoom-in}
.vid.wide video{aspect-ratio:16/9}
.vid.card video{aspect-ratio:1080/1484}
.vid.r45 video{aspect-ratio:4/5}
.vid.fl video{aspect-ratio:1080/1500}

/* кото-заяц на последнем экране показывает на QR */
.mascot{width:calc(var(--w) * 1px);pointer-events:none;z-index:2}
.mascot img{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:mascot-bob 3.6s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(8,40,90,.22))}
.portrait .mascot{width:calc(var(--pw) * 1px)}
.portrait .mascot img{scale:-1 1}
@keyframes mascot-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.mascot img{animation:none}}

/* логотипы программ справа от названия */
.sky .tool .tlogo{display:inline-block;width:1.05em;height:1.05em;margin-left:.32em;vertical-align:-.16em}
.sky .tool .tlogo svg,.sky .tool .tlogo img{display:block;width:100%;height:100%}
.sky .tool .tlogo img{border-radius:22%}
.sky .tool .ti-fig svg{width:68%;margin:0 auto}
.sky .tool .tlogo.ti-ed{vertical-align:-.22em}

/* arrows beside a zoomed work */
.side-arrow.item-arrow{opacity:0;pointer-events:none;animation:none;transition:opacity .3s ease,transform .25s var(--ease)}
.side-arrow.item-arrow.moving{transition:opacity .15s ease}
.zoomed:not(.viewing) .side-arrow.item-arrow{opacity:.95;pointer-events:auto}
.zoomed:not(.viewing) .side-arrow.item-arrow:hover{opacity:1;transform:scale(1.08)}
.side-arrow.item-arrow[hidden]{display:none}
@media (max-width:760px){.zoomed:not(.viewing) .side-arrow.item-arrow{opacity:.9}}
.zoomed:not(.viewing) .side-arrow.item-arrow.moving{opacity:0;pointer-events:none}

/* v24 UX (desktop): captions, intro button, «open in full», all-works grid, clouds clear of the zoomed work */
.sky .paint-hint{cursor:pointer;transition:background .25s,transform .25s}
.sky .paint-hint:hover{background:var(--ink);transform:translateY(-2px)}
.caps-world{z-index:6;pointer-events:none;transition:transform 1.1s var(--ease),opacity .3s}
.portrait .caps-world,.sky.far .caps-world,.sky.zoomed .caps-world,.grid-on .caps-world{opacity:0}
.cap-box{position:absolute;transform:rotate(var(--r,0deg))}
.it-cap{display:block;position:absolute;left:50%;top:100%;margin-top:14px;translate:-50% 0;white-space:nowrap;font-size:17px;font-weight:600;line-height:1;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.72);color:var(--ink);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(30,80,140,.12);pointer-events:none;transition:opacity .3s}
.item-open{position:fixed;z-index:35;translate:-50% 0;padding:11px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px rgba(15,47,82,.3);transition:opacity .3s,transform .2s}
.item-open:hover{transform:translateY(-2px)}
.viewing .item-open,body:not(.zoomed) .item-open,.portrait .item-open{display:none}
.dock-grid{font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;white-space:nowrap;background:#fff;color:var(--ink)}
.dock-grid[aria-pressed=true]{background:var(--green);color:#fff}
.portrait .dock-grid{display:none}
.panel .about{border-radius:14px;background:rgba(255,255,255,.6)}
.panel .about>summary{cursor:pointer;padding:10px 14px;font-size:14px;font-weight:600;color:var(--ink);list-style:none}
.panel .about>summary::-webkit-details-marker{display:none}
.panel .about>summary::after{content:" ↓";color:var(--muted)}
.panel .about[open]>summary::after{content:" ↑"}
.panel .about[open]{padding-bottom:10px}
.panel .about>:not(summary){margin:8px 14px 0}
.sky.zoomed:not(.portrait) .sky-mid{translate:0 16vh}
.sky.zoomed:not(.portrait) .sky-near{translate:0 22vh}
.grid-on .side-arrow{opacity:0;pointer-events:none}
.panel:not(.open){pointer-events:none}
.sky.far:not(.portrait) .side-arrow{opacity:0;pointer-events:none}

/* v25 «Все работы»: each company is its own card */
.grid-sheet{position:fixed;inset:0;z-index:45;padding:calc(var(--bar-h) + 4px) 16px calc(var(--dock-h) + 8px);background:rgba(12,44,86,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.grid-sheet.open{opacity:1}
.sky .grid-in,.sky .grid-in.glass{height:100%;max-width:1280px;margin:0 auto;border-radius:28px;background:rgba(236,243,250,.96);border:1px solid rgba(255,255,255,.9);overflow-y:auto;padding:0 22px 24px;overscroll-behavior:contain;scroll-padding-top:96px}
.grid-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:20px;margin:0 -22px;padding:18px 22px 14px;background:rgba(236,243,250,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(55,73,77,.08)}
.grid-top h2{margin:0;font-family:"Unbounded","Onest",Arial,sans-serif;font-size:24px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.grid-nav{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none}
.grid-nav button{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--ink);box-shadow:0 2px 8px rgba(30,80,140,.08);transition:transform .2s}
.grid-nav button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc)}
.grid-nav button:hover{transform:translateY(-2px)}
.gco{margin-top:20px;padding:24px 26px 28px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(30,80,140,.08);position:relative;overflow:hidden}
.gco::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--acc)}
.gco-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(55,73,77,.1)}
.gco-head h3{margin:0;font-family:"Unbounded","Onest",Arial,sans-serif;font-size:28px;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.gco-head p{margin:8px 0 0;font-size:14px;color:var(--muted)}
.gco-side{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.gco-count{font-size:13px;font-weight:600;color:var(--muted);padding:8px 12px;border-radius:999px;background:#eef3f8}
.gco-go{font-size:13px;font-weight:600;padding:9px 15px;border-radius:999px;background:var(--ink);color:#fff;transition:transform .2s}
.gco-go:hover{transform:translateY(-2px)}
.grid-row{display:flex;flex-wrap:wrap;gap:22px 18px}.grid-row::after{content:"";flex:999 1 0}
.grid-it{display:flex;flex-direction:column;gap:7px;text-align:left;flex:var(--ar,.8) 1 calc(var(--ar,.8) * 210px);min-width:0}
.gi-img{position:relative;display:block;aspect-ratio:var(--ar,.8);border-radius:16px;overflow:hidden;background:#eef3f8;transition:transform .25s,box-shadow .25s}
.gi-img img{width:100%;height:100%;object-fit:cover;display:block}
.grid-it.is-vid .gi-img::after{content:"▶";position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.grid-it:hover .gi-img{transform:translateY(-4px);box-shadow:0 14px 28px rgba(30,80,140,.18)}
.grid-it b{font-size:14px;line-height:1.3;color:var(--ink);font-weight:600}
.grid-it small{font-size:12px;color:var(--muted)}
/* v25 contacts + CV (desktop) */
.bar-right{display:flex;align-items:center;gap:6px}
.bar-link{font-size:14px;font-weight:500;color:var(--ink);padding:10px 12px;border-radius:999px;transition:background .2s}
.bar-link:hover{background:rgba(255,255,255,.7)}
.bar-cv{font-size:14px;font-weight:600;padding:10px 16px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid rgba(15,47,82,.15);transition:transform .2s}
.bar-cv:hover{transform:translateY(-1px)}
@media (max-width:1100px){.bar-link{display:none}}
.portrait .bar-link,.portrait .bar-cv{display:none}
.contact-lines{display:flex;flex-wrap:wrap;gap:12px;width:calc(var(--w) * 1px)}
.contact-lines a{font-size:22px;font-weight:600;color:var(--ink);padding:12px 20px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(30,80,140,.12);transition:transform .2s}
.contact-lines a:hover{transform:translateY(-2px)}
.contact-lines .cl-cv{background:var(--ink);color:#fff;border-color:transparent}
.portrait .contact-lines{display:none}