/* ==========================================================================
   Dočaska · redesign 2026-11-05
   Vrstva nad style.css: klidnější textury, ploché karty se stínem,
   větší typografie, jeden význam pro růžovou, stavy a animace.
   Načítá se až po style.css, takže stačí smazat <link> a web je zpět.
   ========================================================================== */
:root{
 --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' preserveAspectRatio='none'%3E%3Cpath d='M0.8 14.0 L10.0 3.8 L20.0 9.8 L30.0 2.9 L40.0 8.4 L50.0 6.4 L60.0 2.7 L70.0 8.1 L80.0 2.4 L90.0 7.2 L100.0 2.8 L110.0 3.1 L120.0 7.1 L130.0 11.9 L140.0 3.5 L150.0 4.7 L160.0 9.5 L170.0 13.4 L180.0 8.9 L190.0 6.8 L200.0 13.7 L210.0 2.6 L220.0 12.3 L230.0 5.5 L240.0 3.7 L250.0 3.4 L260.0 5.7 L270.0 11.8 L280.0 4.2 L290.0 9.0 L300.0 9.7 L310.0 6.5 L320.0 8.6 L330.0 2.8 L340.0 2.7 L350.0 4.5 L360.0 10.2 L370.0 7.1 L380.0 5.8 L390.0 9.0 L386.2 10.0 L400.0 69.6 L390.0 75.5 L380.0 74.4 L370.0 68.9 L360.0 72.9 L350.0 72.3 L340.0 76.5 L330.0 74.8 L320.0 69.5 L310.0 77.8 L300.0 67.4 L290.0 71.0 L280.0 75.1 L270.0 67.8 L260.0 71.9 L250.0 66.5 L240.0 74.0 L230.0 75.2 L220.0 72.9 L210.0 76.5 L200.0 69.8 L190.0 74.3 L180.0 73.1 L170.0 73.0 L160.0 71.5 L150.0 76.1 L140.0 77.3 L130.0 71.7 L120.0 74.0 L110.0 66.7 L100.0 74.4 L90.0 73.8 L80.0 77.9 L70.0 75.9 L60.0 69.4 L50.0 70.6 L40.0 74.0 L30.0 66.3 L20.0 71.5 L10.0 68.0 L0.0 67.4Z' fill='%23F4E4C5'/%3E%3C/svg%3E");
 --ease:cubic-bezier(.2,.7,.2,1);
 --ease-spring:cubic-bezier(.34,1.56,.64,1);
 --sh-1:0 1px 0 rgba(20,42,24,.05),0 6px 18px -10px rgba(20,42,24,.28);
 --sh-2:0 2px 0 rgba(20,42,24,.04),0 22px 44px -18px rgba(20,42,24,.42);
 --card-line:rgba(20,42,24,.11);
 --krem-hi:#FFF9EC;
 --ruz-tisk:#E25E9A;
}

/* ---------- 1. Textury: jedna jemná zrnitost místo skvrn ---------- */
body{background:var(--grain-light),radial-gradient(120% 70% at 50% 0%,#F8EBCF 0%,transparent 60%),var(--krem)}
.top{background:radial-gradient(60% 80% at 78% 30%,rgba(244,228,197,.10),transparent 70%),var(--grain),var(--les)}
.dark,.panel.dark,.side-box.dark,.done-box,.empty,.tile{background:var(--grain),var(--les)}
.note.dark{background:radial-gradient(70% 90% at 15% 100%,rgba(244,228,197,.09),transparent 70%),var(--grain),var(--les)}

/* karty: plochý krémový papír, jemná linka, stín místo skvrn */
.card,.story,.panel,.toc,details.tpl,.row,.mcard,.tip,.pillars li,.rules li,.req,.post,.side-box,.ref,.welcome{
 background:var(--card);border-color:var(--card-line);box-shadow:var(--sh-1)}
.answer,.mine-list>a,.mine-list>div.it{background:var(--krem-hi)}
input[type=text],input[type=search],input[type=email],input[type=number],input[type=date],input[type=month],select,textarea{background:var(--krem-hi)}

/* růžová bez skvrn */
.btn,.tag.p,.pill.p,.heart[aria-pressed=true],.bubble.zero,.mcard.best::before,.help-fab{background:var(--ruz)}
.btn.dark{background:var(--les)}
.tag,.pill.d,.vet,.step i,.chip[aria-pressed=true],.bubble,.ava.c2{background-image:none}
.ava{background:var(--krem)}.ava.c1{background:var(--salvej)}

/* pryč s nálepkami: washi páska, výstražné pruhy, razítko, tečkované cestičky */
.card::before{display:none}
.stamp{display:none}
.trail{display:none}
#zvirata .trail{display:none}
.notice{background:rgba(140,146,120,.14);border:0;border-radius:999px;padding:8px 16px 8px 36px;position:relative;display:inline-block}
.notice span{background:none;padding:0}
.notice::before{content:"i";position:absolute;left:10px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--salvej);color:var(--card);font:700 12px/18px 'Manrope',sans-serif;text-align:center}
.notice[hidden]{display:none}
.note::after,.door.sos::after{display:none}
.prose h2{background:none;padding-bottom:0}
.prose h2::after{content:"";display:block;width:40px;height:2px;margin-top:12px;background:var(--ruz);border-radius:2px}

/* ---------- 2. Typografie ---------- */
h1{font-size:clamp(42px,7.2vw,86px);line-height:.98;letter-spacing:-.025em}
h2{font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-.02em}
body[data-page] h1{font-size:clamp(40px,6vw,72px)}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6}
.lead strong,.lead-dark strong{font-weight:600}
.in b{font-size:28px;letter-spacing:-.01em}
.pillars h3,.tip h3,.row b{font-size:26px;letter-spacing:-.01em}
.door h3{font-size:clamp(28px,2.6vw,34px)}
.k-head h2,.bar h2{margin-bottom:4px}
.eyebrow{display:inline-block;font:700 12px/1 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin:0 0 14px}

/* zvýrazněné slovo v nadpisu: vlepený výstřižek natrženého papíru s růžovou páskou (obojí z brand archů textury-1/2.png) */
.brush{color:var(--les);white-space:nowrap;display:inline-block;position:relative;padding:.04em .24em .1em;margin:0 .04em;background:url(img/textury/papir-natrzeny.png) center/100% 100% no-repeat;transform:rotate(-1.6deg);filter:drop-shadow(0 .06em .08em rgba(0,0,0,.35))}
.brush::after{display:none!important}
.brush::before{content:"";position:absolute;left:-.22em;top:-.16em;width:1.1em;height:.34em;background:url(img/textury/paska-ruzova.png) center/100% 100% no-repeat;transform:rotate(-24deg)}
html.motion .brush{animation:nalepit .7s cubic-bezier(.3,1.4,.5,1) both .45s}
html.motion .brush::before{animation:paska .45s var(--ease) both 1.05s}
@keyframes nalepit{0%{opacity:0;transform:translateY(-.25em) rotate(-7deg) scale(1.12)}60%{opacity:1}100%{opacity:1;transform:rotate(-1.6deg)}}
@keyframes paska{from{opacity:0;transform:translate(-.3em,-.2em) rotate(-24deg) scale(1.2)}to{opacity:1;transform:rotate(-24deg)}}

/* ---------- 3. Barvy: růžová = hlavní akce, naléhavost, srdce ---------- */
.lang b{background:var(--krem);color:var(--les)}
.rules li::before{background:var(--les);color:var(--krem)}
.door.sos{box-shadow:inset 0 0 0 2px var(--ruz)}
nav a{border-bottom:0;position:relative}
nav a:not(.lang a)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ruz);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
nav a:not(.lang a):hover::after,nav a[aria-current]::after{transform:scaleX(1)}
nav .lang a::after{display:none}

/* ---------- 4. Interakce: stavy pro všechno klikací ---------- */
.btn,.chip,.heart,.tile,.subnav a,.lang a,.linkbtn,.card,.row,.door,.mcard,.tip,.pillars li,.org-foot .btn,details.tpl,.toc a,.side-box a.t,nav a{
 transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,color .2s,border-color .2s,opacity .2s,filter .2s}
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 rgba(20,42,24,.15);position:relative}
.btn:hover{filter:none;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -10px rgba(226,94,154,.75)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn.ghost{box-shadow:none}
.btn.ghost:hover{background:var(--krem);color:var(--les);border-color:var(--krem);box-shadow:none}
main .btn.ghost:hover,.panel:not(.dark) .btn.ghost:hover,.welcome .btn.ghost:hover{background:var(--les);color:var(--krem);border-color:var(--les)}
.dark .btn.ghost:hover,.door .btn.ghost:hover,.note .btn.ghost:hover,.done-box .btn.ghost:hover{background:var(--krem);color:var(--les);border-color:var(--krem)}
.btn.dark:hover{box-shadow:0 10px 22px -10px rgba(20,42,24,.6)}
.btn.is-off:hover{transform:none;box-shadow:none}
/* šipka v "Přehled →" a podobných odkazech */
.more,.k-head a.more{text-decoration:none;display:inline-flex;gap:4px;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.more:hover{color:var(--ruz-tisk)}

.chip:hover{background:rgba(20,42,24,.07)}
.chip[aria-pressed=true]:hover{background:var(--les)}
.chip:active,.heart:active,.tile:active{transform:scale(.96)}
.panel.dark .chip:hover{background:rgba(244,228,197,.12)}

/* karty zvířat: zvednutí, stín, fotka se lehce přiblíží */
.card{overflow:hidden;box-shadow:var(--sh-1)}
.card .photo{border-radius:0}
.card .photo img{transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.card:hover .photo img{transform:scale(1.05)}
.card:hover .in b{color:#000}
.row:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--card-line)}
.mcard:hover,.tip:hover{box-shadow:var(--sh-2)}
.door{box-shadow:0 0 0 0 transparent}
.door:hover{transform:translateY(-6px);box-shadow:0 28px 50px -24px rgba(20,42,24,.7)}
.door img{transition:transform .5s var(--ease-spring)}
.door:hover img{transform:rotate(-4deg) scale(1.06)}
.tile:hover{border-color:rgba(240,116,172,.5);transform:translateY(-3px)}
.tile img{transition:transform .4s var(--ease-spring)}
.tile:hover img{transform:scale(1.08)}
.tile[aria-pressed=true]::after{animation:pop .35s var(--ease-spring)}
.heart[aria-pressed=true]{animation:pop .4s var(--ease-spring)}
details.tpl:hover{box-shadow:var(--sh-2)}
details.tpl summary::after{transition:transform .3s var(--ease)}
details.tpl[open] summary::after{content:"+";transform:rotate(45deg)}
.toc a{border-left:2px solid transparent;padding-left:10px;margin-left:-12px}
.toc a:hover{border-left-color:var(--ruz);color:inherit}

/* focus: kroužek kopíruje tvar tlačítka */
.btn:focus-visible,.chip:focus-visible,.subnav a:focus-visible,.lang a:focus-visible,.heart:focus-visible,a.btn:focus-visible{outline:2px solid var(--ruz);outline-offset:3px;border-radius:999px}
.card:focus-visible,.door:focus-visible,.row:focus-visible{outline:3px solid var(--ruz);outline-offset:3px;border-radius:var(--r)}

/* select s vlastní šipkou */
select{-webkit-appearance:none;appearance:none;padding-right:40px;background:var(--krem-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--les);box-shadow:0 0 0 4px rgba(240,116,172,.28)}

/* ---------- 5. Ilustrace ---------- */
.top::after{z-index:1}
.page-hero .head-art,.hero .art{position:relative;z-index:2}
body[data-page=komunita] .head-art{max-width:420px;justify-self:end}
.art img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.18))}

/* ---------- 6. Sekce a rytmus ---------- */
.sec{padding:72px 0 40px}
.home-why,.home-community{margin-top:96px}
.pillars{gap:18px}
.pillars li{padding:22px 22px 24px}
.grid{gap:28px 22px}
.org-foot{border-top:1px solid var(--card-line);background:rgba(140,146,120,.06)}
.org .ico{opacity:.5}
.pocet.nic{font-weight:500;opacity:.55}

/* "Jak to funguje" na úvodu */
.how{margin-top:96px}
.how ol{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:k;border-top:1px solid var(--card-line)}
.how li{counter-increment:k;padding:28px 28px 8px 0;position:relative}
.how li+li{padding-left:28px;border-left:1px solid var(--card-line)}
.how li::before{content:"0" counter(k);display:block;font:400 64px/1 'Gilda Display',serif;color:var(--ruz-tisk);letter-spacing:-.03em;margin-bottom:14px}
.how h3{margin:0 0 6px;font-size:26px}
.how p{margin:0;font-size:15.5px;opacity:.85;max-width:32ch}
@media(max-width:720px){.how ol{grid-template-columns:1fr}.how li,.how li+li{padding:22px 0 18px;border-left:0;border-bottom:1px solid var(--card-line)}.how li::before{font-size:48px;margin-bottom:8px}}

/* patička */
footer{margin-top:120px;padding:56px 0 48px;position:relative}
footer .wrap>span:first-child{max-width:44ch;opacity:.8}
footer .wrap>span:first-child::before{content:"Dočaska";display:block;font:400 34px/1 'Gilda Display',serif;opacity:1;margin-bottom:10px;color:var(--krem)}

/* ---------- 7. Mobil ---------- */
@media(max-width:720px){
 header.open nav:not(.subnav){animation:menu-in .35s var(--ease) both}
 header.open nav:not(.subnav) a{animation:rise .4s var(--ease) both}
 header.open nav:not(.subnav) a:nth-child(2){animation-delay:.03s}
 header.open nav:not(.subnav) a:nth-child(3){animation-delay:.06s}
 header.open nav:not(.subnav) a:nth-child(4){animation-delay:.09s}
 header.open nav:not(.subnav) a:nth-child(5){animation-delay:.12s}
 header.open nav:not(.subnav) a:nth-child(6){animation-delay:.15s}
 .menu-btn{transition:background .2s}.menu-btn:active{transform:scale(.96)}
 .sec{padding:48px 0 24px}
 .home-why,.home-community,.how{margin-top:64px}
 .hero .art img{max-width:300px;margin:0 auto}
}
@media(max-width:560px){
 /* katalog ve dvou sloupcích, kompaktní karty */
 #katalog .grid{grid-template-columns:1fr 1fr;gap:14px 12px}
 #katalog .card .photo{aspect-ratio:1}
 #katalog .card .in{padding:10px 12px 14px}
 #katalog .card .in b{font-size:22px}
 #katalog .card .meta{font-size:12.5px;line-height:1.45}
 #katalog .card .orig{font-size:11.5px;padding:1px 8px 1px 18px}
 #katalog .card .orig::before{left:6px;width:7px;height:7px}
 #katalog .card .tag{font-size:11.5px;padding:3px 16px 3px 10px;bottom:8px}
 .notice{border-radius:14px}
}

/* ---------- 8. Pohyb ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes float-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes beat{0%,100%{transform:scale(1)}20%{transform:scale(1.25)}40%{transform:scale(.95)}60%{transform:scale(1.12)}}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

html.motion .hero h1,html.motion .page-hero h1,html.motion .top h1{animation:rise .8s var(--ease) both .05s}
html.motion .hero .lead,html.motion .page-hero .lead{animation:rise .8s var(--ease) both .18s}
html.motion .hero .actions,html.motion .page-hero .actions,html.motion .subnav{animation:rise .8s var(--ease) both .28s}
html.motion .hero .art,html.motion .head-art{animation:float-in 1.1s var(--ease) both .2s}
html.motion .logo span{display:inline-block;animation:beat 1.4s ease-in-out .9s 1}
html.motion .logo:hover span{animation:beat 1s ease-in-out infinite}

/* odhalení při scrollu (třídy přidává motion.js) */
html.motion .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
html.motion .rv.vis{opacity:1;transform:none}
html.motion .rv.vis:hover{transition-delay:0s}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 html.motion .rv{opacity:1;transform:none}
}
.card.tilt:hover,.door.tilt:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
@media(min-width:821px){.page-hero{grid-template-columns:1fr 400px}body[data-page=komunita] .page-hero{grid-template-columns:1fr 460px}}
@media(max-width:560px){#katalog .card .orig{border-radius:10px}}

/* ilu-2026-11: nové ilustrace — kroky na úvodu, scénky v průvodci */
.how-ilu ol{background:var(--grain),var(--mottle-dark),var(--les);color:var(--krem);border:0;border-radius:var(--r);padding:8px 8px 24px;overflow:hidden}
.how-ilu li{padding:0 28px 8px!important;border-color:rgba(244,228,197,.14)!important}
.how-ilu li::before{color:var(--krem);opacity:.45;font-size:44px;margin:0 0 8px}
.how-ilu .how-art{display:block;width:100%;height:210px;object-fit:contain;object-position:left bottom;mix-blend-mode:lighten;margin:0 0 6px}
.how-ilu p{opacity:.85}
@media(max-width:720px){.how-ilu li{padding:6px 20px 18px!important;border-bottom:1px solid rgba(244,228,197,.14)!important}.how-ilu li:last-child{border-bottom:0!important}.how-ilu .how-art{height:170px;object-position:center bottom}}
.prose .ilu{margin:30px 0 34px;padding:22px 22px 16px;border-radius:var(--r);background:var(--grain),var(--mottle-dark),var(--les);color:var(--krem)}
.prose .ilu img{display:block;width:100%;mix-blend-mode:lighten;border-radius:0;margin:0}
.prose .ilu figcaption{font-size:14px;opacity:.8;margin-top:10px}
.prose .ilu.cesta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px;align-items:end}
.prose .ilu.cesta>div{display:grid;gap:6px}
.prose .ilu.cesta img{height:150px;object-fit:contain;object-position:center bottom}
.prose .ilu.cesta span{font-size:13.5px;font-weight:600;opacity:.85;text-align:center}
.prose .ilu.cesta figcaption{grid-column:1/-1;text-align:center}
.prose .ilu.pair{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:center}
.prose .ilu.pair figcaption{grid-column:1/-1}
.prose .ilu.single img{max-width:340px;margin:0 auto}
@media(max-width:720px){.prose .ilu.cesta{grid-template-columns:1fr 1fr}.prose .ilu.cesta img{height:120px}.prose .ilu.pair{grid-template-columns:1fr}}