/* ux-119 (Claude, 4. 11. 2026): ilustrácia Avíza v príbehu – rovnaký štýl ako Služby a sociálne siete.
   .stairs-art = zdroj v míľniku (zoznam bez JS, kapitola na /o-nas/), .stairs-card-photos.is-art = karta schodiska.
   Pohyb len pri aktívnej/hover karte; prefers-reduced-motion bez pohybu. */
:is(.stairs-art,.stairs-card-photos.is-art){--si-plinth:#e2ded3;--si-plinth-l:#d3cec1;--si-plinth-r:#c2bcae;--si-light:#fbfaf6;--si-soft:#e8e4da;--si-shade:#cbc6b8;
 --si-mid:#4f6858;--si-mid-soft:#8fa596;--si-deep-soft:#45594c;--si-ink:#19211b;--si-ink-soft:#b5ae9f;--si-shadow:#19211b;--accent:#b5463c;
 background:radial-gradient(120% 95% at 50% 100%,#e2ded3 0%,#ebe7de 58%,#efebe4 100%)}
.stairs-art{display:block;width:min(100%,420px);aspect-ratio:272/206;margin:26px 0 0;border-radius:14px;overflow:hidden}
.stairs-art .story-art,.stairs-card-photos.is-art .story-art{display:block;width:100%;height:100%}
.stairs-card-photos.is-art{align-items:center;justify-content:center}
.stairs-card-photos.is-art .story-art{height:78%;margin-bottom:22%}
.stairs-card-photos.is-art::after{background:linear-gradient(#0e141100 55%,#0e1411d9)}
.stairs-live .stairs-milestone .stairs-art{display:none}
.story-art *{transform-box:fill-box;transform-origin:center}
.story-art .si-circle{stroke-dashoffset:100;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.7,.2,1)}
.story-art .si-pen{transition:translate .9s cubic-bezier(.22,.7,.2,1)}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art .si-circle,.stairs-art .story-art .si-circle{stroke-dashoffset:0}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art .si-pen{translate:-6px -4px}
.stairs-card-photos img.is-contain{object-fit:contain;object-position:center;background:#1c2a21}
@media(prefers-reduced-motion:reduce){.story-art *{transition:none!important}.story-art .si-circle{stroke-dashoffset:0}}

/* ux-119d: Kríza a Prečo TWINS ako vlastné SVG (namiesto AI obrázkov) */
.story-art .si-trend{stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.22,.7,.2,1)}
.story-art .si-trend-head{opacity:0;transition:opacity .4s 1.2s}
.story-art .si-bridge{transition:translate .9s cubic-bezier(.22,.7,.2,1)}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art .si-trend,.stairs-art .story-art .si-trend{stroke-dashoffset:0}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art .si-trend-head,.stairs-art .story-art .si-trend-head{opacity:1}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art .si-bridge{translate:0 -4px}
@media(prefers-reduced-motion:reduce){.story-art .si-trend{stroke-dashoffset:0}.story-art .si-trend-head{opacity:1}}

/* ux-121: Začiatky realitných portálov – prehliadač s ponukami, nie brána. */
.story-art .si-browser,.story-art .si-paper{transition:translate .8s cubic-bezier(.22,.7,.2,1)}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .si-browser{translate:0 -5px}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .si-paper{translate:5px -3px}
.stairs-card.is-word .stairs-card-meta b{overflow-wrap:normal;text-wrap:balance;font-size:clamp(15px,1.55vw,24px);line-height:1.1}
@media(prefers-reduced-motion:reduce){.story-art .si-browser,.story-art .si-paper{translate:none!important}}

/* ux-124: original editorial illustrations, restrained movement. */
.story-art .sa-sheet,.story-art .sa-accent,.story-art .sa-pair-a,.story-art .sa-pair-b{transition:translate .85s cubic-bezier(.22,.7,.2,1)}
.story-art .sa-ring,.story-art .sa-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s ease}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .sa-sheet{translate:0 -3px}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .sa-accent{translate:-4px -3px}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) :is(.sa-ring,.sa-line),.stairs-art :is(.sa-ring,.sa-line){stroke-dashoffset:0}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .sa-pair-a{translate:3px -2px}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .sa-pair-b{translate:-3px -2px}
@media(prefers-reduced-motion:reduce){.story-art *{transition:none!important;translate:none!important}.story-art :is(.sa-ring,.sa-line){stroke-dashoffset:0}}

/* ux-155 (Claude, 7. 11. 2026): ilustračné karty v karuseli – ilustrácia ako svetlý rámik hore,
   text (zlatý štítok + biely nadpis) na tmavom podklade ako pri fotkách. Predtým sivý prechod = slabý kontrast. */
.stairs-card-photos.is-art{background:#151c18;align-items:flex-start;justify-content:center;padding:4px 4px 0}
.stairs-card-photos.is-art .story-art{width:100%;height:auto;margin:0;flex:0 0 auto}
.stairs-card-photos.is-art::after{background:linear-gradient(#151c1800 58%,#151c18 74%)}
.stairs-card.has-art .stairs-card-meta small{color:#d9c9a3}
.stairs-card.has-art .stairs-card-meta b{color:#f4f1ea}

/* ux-155b (Claude, 7. 11. 2026): animácia „Dve osobnosti. Jeden spoločný príbeh.“
   Neaktívna karta: okienka mierne od seba. Aktívna: priblížia sa k sebe, zlaté „+“ vyskočí,
   po fotkách prebehne odlesk, pod textom sa zo stredu nakreslí zlatá linka, okolo „+“ jemne pulzuje kruh. */
.story-art--preco .sa-pair-a{translate:-8px 0}
.story-art--preco .sa-pair-b{translate:8px 0}
.story-art--preco .sa-twins-plus{scale:.35;rotate:-90deg;opacity:0;transition:scale .7s .3s cubic-bezier(.34,1.56,.64,1),rotate .7s .3s cubic-bezier(.34,1.56,.64,1),opacity .3s .3s}
.story-art--preco .sa-twins-text{opacity:.5;translate:0 4px;transition:opacity .7s .45s,translate .7s .45s cubic-bezier(.22,.7,.2,1)}
.story-art--preco .sa-twins-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s .65s cubic-bezier(.22,.7,.2,1)}
.story-art--preco .sa-twins-shine,.story-art--preco .sa-twins-pulse{opacity:0}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--preco :is(.sa-pair-a,.sa-pair-b),.stairs-art .story-art--preco :is(.sa-pair-a,.sa-pair-b){translate:0 0}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--preco .sa-twins-plus,.stairs-art .story-art--preco .sa-twins-plus{scale:1;rotate:0deg;opacity:1}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--preco .sa-twins-text,.stairs-art .story-art--preco .sa-twins-text{opacity:1;translate:0 0}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--preco .sa-twins-line,.stairs-art .story-art--preco .sa-twins-line{stroke-dashoffset:0}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--preco .sa-twins-shine{animation:twins-shine-155 1.25s .55s cubic-bezier(.4,0,.2,1) both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--preco .sa-twins-shine-b{animation-delay:.72s}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--preco .sa-twins-pulse{animation:twins-pulse-155 2.8s 1.2s ease-out infinite}
@keyframes twins-shine-155{0%{translate:0 0;opacity:0}18%{opacity:1}100%{translate:220px 0;opacity:0}}
@keyframes twins-pulse-155{0%{scale:1;opacity:.75}70%,100%{scale:2.2;opacity:0}}
@media(prefers-reduced-motion:reduce){.story-art--preco :is(.sa-pair-a,.sa-pair-b,.sa-twins-text){translate:none!important}.story-art--preco :is(.sa-twins-plus,.sa-twins-text){opacity:1!important;scale:1!important;rotate:0deg!important}.story-art--preco .sa-twins-line{stroke-dashoffset:0}.story-art--preco :is(.sa-twins-shine,.sa-twins-pulse){animation:none!important;opacity:0!important}}

/* ux-156 (Claude, 7. 11. 2026): Reality.sk okienko – po aktivovaní karty sa do vyhľadávania napíše
   „Dúbravka, Bratislava“, kurzor prejde na Hľadať a klikne, zobrazí sa riadok s výsledkami; fotka sa jemne hýbe. */
.story-art--reality .rs-type{translate:0 0}
.story-art--reality .rs-result,.story-art--reality .rs-ripple{opacity:0}
.stairs-art .story-art--reality .rs-type{translate:80px 0}
.stairs-art .story-art--reality .rs-ph,.stairs-art .story-art--reality .rs-lines{opacity:0}
.stairs-art .story-art--reality .rs-result{opacity:1}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .rs-ph{animation:rs-fade-out .25s .35s both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .rs-type{animation:rs-type 1.1s .55s steps(20,end) both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .rs-caret{animation:rs-caret .5s 1.7s 4 step-end both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .sa-accent{animation:rs-cursor 2.6s .2s cubic-bezier(.45,0,.2,1) both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .reality-search{animation:rs-press .32s 2.3s ease both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .rs-ripple{animation:rs-ripple .8s 2.38s ease-out both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .rs-lines{animation:rs-fade-out .3s 2.55s both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .rs-result{animation:rs-result .5s 2.6s cubic-bezier(.22,.7,.2,1) both}
.stairs-card:is(.is-current,.is-hovered,.is-held,:focus-visible) .story-art--reality .rs-hero{animation:rs-hero 9s 0s ease-in-out infinite alternate}
@keyframes rs-fade-out{to{opacity:0}}
@keyframes rs-type{from{translate:0 0}to{translate:80px 0}}
@keyframes rs-caret{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes rs-cursor{0%{translate:-150px -10px}12%{translate:-150px -10px}55%{translate:-150px -10px}88%,100%{translate:0 0}}
@keyframes rs-press{0%,100%{scale:1}45%{scale:.9}}
@keyframes rs-ripple{0%{opacity:.8;scale:.6}100%{opacity:0;scale:2.2}}
@keyframes rs-result{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes rs-hero{from{scale:1}to{scale:1.07}}
@media(prefers-reduced-motion:reduce){.story-art--reality :is(.rs-ph,.rs-type,.rs-caret,.sa-accent,.reality-search,.rs-ripple,.rs-lines,.rs-result,.rs-hero){animation:none!important}.story-art--reality .rs-type{translate:80px 0}.story-art--reality :is(.rs-ph,.rs-lines){opacity:0}.story-art--reality .rs-result{opacity:1}}