/* ux-168 (Claude, 7. 11. 2026): sociálne siete ako „živé“ ukážky obsahu s našimi skutočnými fotkami. */
.social-illustration:has(.sf){display:grid;place-items:center;padding:18px;overflow:hidden}
.sf{position:relative;width:min(100%,250px);color:#19211b;font-size:10px;line-height:1.25}
.sf img{display:block;width:100%;height:100%;object-fit:cover}
.sf-meta{display:flex;align-items:center;gap:8px;margin-top:9px}
.sf-meta b{display:block;font-weight:500;font-size:11px}
.sf-meta small{display:block;color:#6a746b;font-size:9px;margin-top:2px}
.sf-av{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#19211b;color:#eeeae3;font-size:8.5px;letter-spacing:.06em}
.sf-chip{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:99px;background:#19211bd9;color:#eeeae3;font-size:8.5px}
/* YouTube */
.sf-yt-screen{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;box-shadow:0 14px 30px #19211b2e}
.sf-yt-screen img{animation:sf-kb 9s ease-in-out infinite alternate}
.sf-yt-play{position:absolute;left:50%;top:50%;width:44px;height:30px;margin:-15px 0 0 -22px;display:grid;place-items:center;border-radius:9px;background:#e62117;box-shadow:0 6px 16px #e621175c;animation:sf-pulse 2.4s ease-in-out infinite}
.sf-yt-play svg{width:15px;fill:#fff}
.sf-yt-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff4d}
.sf-yt-bar i{position:absolute;inset:0 auto 0 0;width:0;background:#e62117;animation:sf-progress 7s linear infinite}
/* Instagram */
.sf-ig{padding:9px;border-radius:14px;background:#fff;box-shadow:0 14px 30px #19211b26}
.sf-ig-head{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.sf-ig-head b{font-weight:500;font-size:10.5px}
.sf-av--ring{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #d62976}
.sf-ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.sf-ig-grid span{aspect-ratio:1;overflow:hidden;border-radius:3px;animation:sf-tile 4.2s calc(var(--k)*.7s) ease-in-out infinite}
.sf-heart{position:absolute;left:50%;top:50%;width:46px;margin-left:-23px;opacity:0;animation:sf-heart 4.2s 1.4s ease-out infinite}
.sf-heart svg{fill:#fff;filter:drop-shadow(0 4px 10px #0006)}
/* Facebook */
.sf-fb-post{padding:10px;border-radius:14px;background:#fff;box-shadow:0 14px 30px #19211b26}
.sf-meta--top{margin:0 0 8px}
.sf-fb-img{aspect-ratio:16/9;border-radius:8px;overflow:hidden}
.sf-fb-img img{animation:sf-kb 10s ease-in-out infinite alternate}
.sf-fb-react{display:flex;align-items:center;gap:2px;margin-top:8px;padding-top:7px;border-top:1px solid #19211b14;white-space:nowrap}
.sf-fb-react .r{display:inline-grid;place-items:center;width:17px;height:17px;font-size:11px;animation:sf-pop 4.2s ease-in-out infinite}
.sf-fb-react .r2{animation-delay:.25s}.sf-fb-react .r3{animation-delay:.5s}
.sf-fb-react em{font-style:normal;font-size:8.5px;color:#65676b;margin-left:auto}
.sf-fb-react em+em{margin-left:8px}
/* TikTok */
.sf-tt{display:grid;place-items:center}
.sf-tt-phone{position:relative;width:128px;aspect-ratio:9/17;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 4px #19211b,0 18px 34px #19211b45}
.sf-tt-feed{position:absolute;inset:0;animation:sf-feed 10s cubic-bezier(.7,0,.2,1) infinite}
.sf-tt-feed img{height:100%}
.sf-tt-side{position:absolute;right:6px;bottom:44px;display:grid;gap:8px;color:#fff;font-style:normal;font-size:12px;text-align:center}
.sf-tt-side i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0006}
.sf-tt-side i:first-child{animation:sf-pop 2.5s ease-in-out infinite;color:#fe2c55}
.sf-tt-cap{position:absolute;left:8px;bottom:12px;color:#fff;font-size:8.5px;font-weight:600;text-shadow:0 1px 4px #000a}
.sf-tt-cap small{font-weight:400}
.sf-tt-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff40}
.sf-tt-prog i{position:absolute;inset:0 auto 0 0;background:#fff;animation:sf-progress 2.5s linear infinite}
@keyframes sf-kb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-2%,-1%)}}
@keyframes sf-pulse{0%,100%{scale:1}50%{scale:1.08}}
@keyframes sf-progress{from{width:0}to{width:100%}}
@keyframes sf-tile{0%,8%,100%{filter:none;scale:1}4%{filter:brightness(1.12);scale:.94}}
@keyframes sf-heart{0%{opacity:0;scale:.3}8%{opacity:1;scale:1.15}14%{scale:1}26%{opacity:0;scale:1}100%{opacity:0}}
@keyframes sf-pop{0%,100%{scale:1}12%{scale:1.35}24%{scale:1}}
@keyframes sf-feed{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-100%)}50%,70%{transform:translateY(-200%)}75%,95%{transform:translateY(-300%)}100%{transform:translateY(-400%)}}
.social-rail-card.is-active .sf-ig,.social-rail-card.is-active .sf-fb-post{background:#f7f5ef}
@media(prefers-reduced-motion:reduce){.sf *{animation:none!important}}
/* ux-168: štýlové doplnky – farebná žiara platformy, jemné vznášanie, nábeh pri aktivácii (bez nakláňania a rozmazania). */
.social-illustration:has(.sf){--sf-glow:#b9a273;background-image:radial-gradient(70% 60% at 50% 62%,color-mix(in srgb,var(--sf-glow) 22%,transparent),transparent 70%)}
.social-illustration:has(.sf-yt){--sf-glow:#e62117}.social-illustration:has(.sf-ig){--sf-glow:#d62976}.social-illustration:has(.sf-fb){--sf-glow:#1877f2}.social-illustration:has(.sf-tt){--sf-glow:#25f4ee}
.social-illustration:has(.sf)::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 60%,color-mix(in srgb,var(--sf-glow) 30%,transparent),transparent 72%);opacity:0;transition:opacity .7s}
.social-rail-card.is-active .social-illustration:has(.sf)::after,.social-rail-card:focus-visible .social-illustration:has(.sf)::after{opacity:1}
@media(hover:hover) and (pointer:fine){.social-rail-card:hover .social-illustration:has(.sf)::after{opacity:1}.social-rail-card:hover .sf{scale:1.04}}
.sf{z-index:1;animation:sf-float 6s ease-in-out infinite;transition:scale .7s cubic-bezier(.22,.72,.16,1)}
.social-rail-card:nth-child(2n) .sf{animation-delay:-3s}
.social-rail-card.is-active .sf{scale:1.04}
.sf-av--ilja{background:#2c4a36}
@keyframes sf-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
.social-rail-card:is(.is-active,:focus-visible) .sf-yt .sf-meta b{color:#eeeae3}
.social-rail-card:is(.is-active,:focus-visible) .sf-yt .sf-meta small{color:#aab4a9}
@media(hover:hover) and (pointer:fine){.social-rail-card:hover .sf-yt .sf-meta b{color:#eeeae3}.social-rail-card:hover .sf-yt .sf-meta small{color:#aab4a9}}
.sf-yt .sf-meta b,.sf-yt .sf-meta small{transition:color .6s}

/* ux-170 (Claude, 7. 11. 2026): YouTube karty so skutočnými videami z kanálov (Julián / Iľja), ostrejšie a menej presvetlené ukážky. */
.sf-yt-slides{position:absolute;inset:0;display:block}
.sf-yt-slides img{position:absolute;inset:0;opacity:0;animation:sf-slide 12s calc(var(--i)*3s) linear infinite}
.sf-yt-slides img:first-child{opacity:1}
.sf-yt--slides .sf-yt-screen>img{display:none}
.sf-yt--slides .sf-yt-bar i{animation-duration:3s}
.sf-meta b.sf-yt-titles{display:grid}
.sf-yt-titles>span{grid-area:1/1;opacity:0;animation:sf-slide-t 12s calc(var(--i)*3s) linear infinite;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-yt-titles>span:first-child{opacity:1}
@keyframes sf-slide{0%{opacity:0;transform:scale(1.04)}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0;transform:scale(1)}}
@keyframes sf-slide-t{0%{opacity:0;translate:0 4px}4%,25%{opacity:1;translate:0 0}29%,100%{opacity:0;translate:0 -4px}}
/* ostrosť a expozícia */
.sf img{filter:contrast(1.06) saturate(1.06) brightness(.95);image-rendering:auto}
.sf-fb-img img{animation:none}
.sf-yt-screen{box-shadow:0 10px 24px #19211b3d,0 0 0 1px #19211b14}
.sf-ig,.sf-fb-post{box-shadow:0 10px 24px #19211b29,0 0 0 1px #19211b12}
.social-illustration:has(.sf){background-image:radial-gradient(70% 60% at 50% 62%,color-mix(in srgb,var(--sf-glow) 10%,transparent),transparent 70%)}
.social-illustration:has(.sf)::after{background:radial-gradient(60% 50% at 50% 60%,color-mix(in srgb,var(--sf-glow) 16%,transparent),transparent 72%)}
.sf{animation-duration:7s}
@media(prefers-reduced-motion:reduce){.sf-yt-slides img:not(:first-child),.sf-yt-titles>span:not(:first-child){display:none}}
.social-illustration:has(.sf){grid-template-columns:minmax(0,1fr)}
.sf{min-width:0;justify-self:center}
.sf-meta>span:last-child{min-width:0;flex:1 1 auto}
.sf-yt-titles{min-width:0;max-width:100%}

/* ux-171 (Claude, 7. 11. 2026): Instagram, Facebook a TikTok so skutočným obsahom z našich účtov (príspevky, videá, čísla). */
/* Instagram */
.sf-ig-id{display:grid;min-width:0;line-height:1.15}
.sf-ig-id small{color:#6a746b;font-size:8px;margin-top:1px;white-space:nowrap}
.sf-ig--real .sf-ig-grid span{position:relative}
.sf-ig-reel{position:absolute;right:3px;top:3px;width:11px;height:11px;filter:drop-shadow(0 1px 2px #0009)}
.sf-ig-reel svg{display:block;width:100%;height:100%}
/* Facebook – dva príspevky sa striedajú */
.sf-fb-text{display:grid;margin:7px 0 6px;font-weight:500;font-size:9.5px;line-height:1.25}
.sf-fb-text>span{grid-area:1/1;opacity:0;animation:sf-fbt 10s calc(var(--i)*5s) linear infinite;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sf-fb-text>span:first-child{opacity:1}
.sf-fb-slides{position:relative}
.sf-fb-slides img{position:absolute;inset:0;opacity:0;animation:sf-fbs 10s calc(var(--i)*5s) linear infinite}
.sf-fb-slides img:first-child{opacity:1}
@keyframes sf-fbs{0%{opacity:0;transform:scale(1.04)}5%{opacity:1}50%{opacity:1}55%{opacity:0}100%{opacity:0;transform:scale(1)}}
@keyframes sf-fbt{0%{opacity:0;translate:0 4px}5%,50%{opacity:1;translate:0 0}55%,100%{opacity:0;translate:0 -4px}}
/* TikTok – názov a počet videní ku každému videu */
.sf-tt-cap{right:34px;line-height:1.2}
.sf-tt-caps{display:grid;margin-top:2px}
.sf-tt-caps>span{grid-area:1/1;display:grid;opacity:0;animation:sf-ttc 10s calc(var(--i)*2.5s) linear infinite;min-width:0}
.sf-tt-caps>span:first-child{opacity:1}
.sf-tt-caps small{font-weight:400;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sf-tt-caps em{font-style:normal;font-weight:600;font-size:7.5px;opacity:.85;margin-top:1px}
@keyframes sf-ttc{0%{opacity:0}2%,22%{opacity:1}25%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sf-fb-slides img:not(:first-child),.sf-fb-text>span:not(:first-child),.sf-tt-caps>span:not(:first-child){display:none}}
.sf-tt--real .sf-tt-phone::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(#0000,#000000b3);pointer-events:none}
.sf-tt--real :is(.sf-tt-cap,.sf-tt-side,.sf-tt-prog){z-index:1}
/* mobil: telefón sa celý zmestí do okna karty (predtým bol spodok orezaný) */
@media(max-width:700px){.social-illustration:has(.sf-tt){padding:8px}.sf-tt-phone{width:104px;border-radius:16px}.sf-tt-side{right:4px;gap:5px;font-size:10px}.sf-tt-side i{width:18px;height:18px}.sf-tt-cap{right:26px}.social-illustration:has(.sf-fb){padding:10px}.sf-fb--real .sf-fb-post{padding:8px}.sf-fb--real .sf-fb-text{margin:5px 0 4px}.sf-fb--real .sf-fb-img{aspect-ratio:2/1}.sf-fb--real .sf-fb-react{margin-top:5px;padding-top:5px}}