/* =========================================================
   17 STUDIOS · V3 (2027)
   Clona ako podpis značky, plynulé prechody (View Transitions),
   mozaika prác, ručné poznámky, okamžitá odozva.
   Pohyb ide len cez transform/opacity, aby web ostal plynulý.
========================================================= */

@font-face { font-family: 'Hand'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/caveat-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Hand'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/caveat-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-024F; }



/* Lepšie zalamovanie: nadpisy bez osamotených slov, odseky bez „vdov“ */
h1, h2, h3, h4, .section-title, .services-main-title { text-wrap: balance; }

/* =========================================================
   1 · CLONA: úvod pri prvej návšteve
========================================================= */
.leader.iris { background: transparent !important; overflow: hidden; }
.iris-blades { position: absolute; inset: 0; }
.iris-blades i { position: absolute; left: 50%; top: 50%; width: 82vmax; height: 170vmax; margin-top: -85vmax; transform-origin: 0 50%;
  background: linear-gradient(90deg, #1A1612 0%, #0E0C0A 18%, #0B0908 100%); box-shadow: inset 1px 0 0 rgba(240,165,122,.22);
  transform: rotate(calc(var(--k) * 60deg)) translateX(0);
  transition: transform .95s cubic-bezier(.75, 0, .2, 1); }
.iris-go .iris-blades i { transform: rotate(calc(var(--k) * 60deg + 48deg)) translateX(80vmax); }
.leader.iris .leader-brand { position: relative; z-index: 2; transition: opacity .35s, transform .6s cubic-bezier(.2,.7,.1,1); }
.iris-go .leader-brand { opacity: 0; transform: scale(1.08); }
.leader.iris { transition: none !important; }

/* Clona pri odoslaní formulára: zavrie sa a otvorí ako záver fotoaparátu */
.iris-flash { position: fixed; inset: 0; z-index: 9800; pointer-events: none; overflow: hidden; }
.iris-flash i { position: absolute; left: 50%; top: 50%; width: 82vmax; height: 170vmax; margin-top: -85vmax; transform-origin: 0 50%;
  background: #0E0C0A; box-shadow: inset 1px 0 0 rgba(240,165,122,.25);
  transform: rotate(calc(var(--k) * 60deg + 48deg)) translateX(80vmax);
  animation: irisShut .62s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes irisShut {
  0% { transform: rotate(calc(var(--k) * 60deg + 48deg)) translateX(80vmax); }
  42%, 52% { transform: rotate(calc(var(--k) * 60deg)) translateX(0); }
  100% { transform: rotate(calc(var(--k) * 60deg + 48deg)) translateX(80vmax); }
}

/* =========================================================
   2 · PLYNULÉ PRECHODY (View Transitions)
========================================================= */
/* Medzi stránkami (hlavná ↔ mestá ↔ angličtina): jemné prelínanie, logo ostane na mieste */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* Prepínanie služieb na počítači: nový panel sa otvorí šesťuholníkom ako clona */
@media (min-width: 1000px) {
  .vt-cat .cat-item.open .cat-panel { view-transition-name: catpanel; }
  .vt-cat .cat-item.open .cat-tab { view-transition-name: cattab; }
  .vt-cat ::view-transition-old(root), .vt-cat ::view-transition-new(root) { animation: none; }
}
::view-transition-old(catpanel) { animation: vtFade .28s ease both; }
::view-transition-new(catpanel) { animation: vtIris .62s cubic-bezier(.65, 0, .2, 1) both; }
::view-transition-group(cattab) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.7,.1,1); }
@keyframes vtFade { to { opacity: 0; transform: scale(.985); } }
@keyframes vtIris {
  from { clip-path: polygon(50% 46%, 53.5% 48%, 53.5% 52%, 50% 54%, 46.5% 52%, 46.5% 48%); opacity: .4; }
  to   { clip-path: polygon(50% -75%, 165% -12%, 165% 112%, 50% 175%, -65% 112%, -65% -12%); opacity: 1; }
}

/* =========================================================
   3 · NÁHĽAD FOTKY PRI SLUŽBÁCH (len myš)
========================================================= */
.catprev { position: fixed; left: 0; top: 0; z-index: 950; width: 230px; aspect-ratio: 4 / 3; pointer-events: none; border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(22,19,15,.55); opacity: 0; transform: translate3d(-999px, 0, 0); will-change: transform, opacity;
  transition: opacity .25s ease; }
.catprev.on { opacity: 1; }
.catprev img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.catprev.on img { transform: none; }

/* =========================================================
   4 · KDE SOM: priebeh čítania a názov sekcie v lište
========================================================= */
.nav-sec { margin-left: 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.1,1); white-space: nowrap; }
.nav-sec::before { content: '/'; margin-right: 10px; opacity: .4; }
.nav-sec.on { opacity: .75; transform: none; }
@media (max-width: 1100px) { .nav-sec { display: none; } }

/* Jemné odhalenie: spustí sa raz, keď prvok príde na obrazovku (trieda .in z v3.js), scroll potom nič neprepočítava */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1.3s cubic-bezier(.2,.7,.1,1); }
.rv.in { opacity: 1; transform: none; }

/* =========================================================
   5 · OKAMŽITÁ ODOZVA
========================================================= */
.btn.is-press { filter: brightness(1.08); transform: scale(.98); }
.nav-links a { transition: letter-spacing .25s, color .2s; }
.nav-links a:hover { letter-spacing: .02em; }
.price-row .p-name { transition: transform .25s cubic-bezier(.2,.7,.1,1); }
.price-row:hover .p-name, .price-row:focus-visible .p-name { transform: translateX(6px); }

/* =========================================================
   6 · MOZAIKA PRÁC (bento)
========================================================= */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto repeat(2, clamp(170px, 18vw, 250px)); gap: 12px;
  grid-template-areas: "k k k k" "a a b c" "a a d c"; margin: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.bento-k { grid-area: k; align-self: end; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--peach); }
.bt-a { grid-area: a; } .bt-b { grid-area: b; } .bt-c { grid-area: c; } .bt-d { grid-area: d; }
.bento-tile { position: relative; overflow: hidden; border-radius: 14px; background: #1A1714; isolation: isolate; container-type: inline-size; }
.bento-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform .8s cubic-bezier(.2,.7,.1,1), filter .6s; filter: saturate(.92) brightness(.82); }
.bento-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,12,10,0) 30%, rgba(14,12,10,.86) 100%); }
.bento-tile:hover img { transform: scale(1.07); filter: saturate(1) brightness(.9); }
.bt-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(14px, 4cqi, 26px); color: var(--on-stage); }
.bt-k { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.bt-body h4 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 7cqi, 44px); line-height: 1; -webkit-text-stroke: .02em currentColor; }
.bt-body p:not(.bt-k) { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: #D9D0C3; max-width: 36ch; }
.bt-go { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--on-stage); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.bt-go::after { content: '→'; transition: transform .3s cubic-bezier(.2,.7,.1,1); }
.bento-tile:hover .bt-go::after { transform: translateX(5px); }
.bt-go::before { content: ''; position: absolute; inset: 0; }     /* celá dlaždica je klikateľná */
@container (max-width: 260px) { .bt-body p:not(.bt-k) { display: none; } }
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(4, 180px); grid-template-areas: "k k" "a a" "a a" "b c" "d c"; }
}

/* =========================================================
   7 · RUČNÉ POZNÁMKY
   Šípka je vystrihnutá z Matejových poznámok, text je rukopisné písmo.
========================================================= */
.hn { position: absolute; z-index: 3; margin: 0; font-family: 'Hand', 'Segoe Print', cursive; font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.05; color: var(--peach); transform: rotate(-4deg); pointer-events: none; white-space: nowrap; }
.hn-arrow { display: inline-block; width: 64px; height: 26px; vertical-align: middle; background: url(assets/img/hand-arrow-peach.png) center / contain no-repeat; }
.hn-bento .hn-arrow { background-image: url(assets/img/hand-arrow-cream.png); }
.hn-calc .hn-arrow { background-image: url(assets/img/hand-arrow-ember.png); }
.hn-host { position: relative; }
.hn-feature { right: 4%; bottom: -62px; text-align: left; padding-left: 58px; }
.hn-feature .hn-arrow { position: absolute; left: 0; top: -14px; width: 54px; transform: rotate(70deg); }
.hn-bento { right: 14px; top: 14px; color: #FFE3C8; transform: rotate(4deg); text-align: right; font-size: 21px; }
.hn-bento .hn-arrow { display: block; margin: 2px 0 0 auto; width: 48px; transform: rotate(-60deg) scaleX(-1); }
.calc-sum { position: sticky; }
.hn-calc { left: -12px; top: -48px; color: var(--ember); transform: rotate(-5deg); }
.hn-calc .hn-arrow { width: 46px; transform: rotate(-115deg) scaleY(-1); margin-left: 4px; }
.hn-wrap b { position: relative; }
.hn-oval { position: absolute; left: -16%; top: -14%; width: 132%; height: 128%; overflow: visible; pointer-events: none; }
.hn-oval path { fill: none; stroke: var(--rec); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hn-oval.drawn path { transition: stroke-dashoffset 1.8s cubic-bezier(.6,.1,.3,1); stroke-dashoffset: 0; }
@media (max-width: 760px) {
  .hn-feature { bottom: -54px; right: 0; font-size: 19px; }
  .hn-calc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hn-oval path { stroke-dashoffset: 0; } }

/* =========================================================
   12 · DOPYT PRIAMO Z GALÉRIE
========================================================= */
.fancybox__caption { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fb-ask { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ember); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px -12px rgba(193,61,18,.8); transition: transform .2s; }
.fb-ask:hover { transform: translateY(-1px); }
.fb-ask:active { transform: scale(.97); }

/* =========================================================
   13 · ÚVOD PODĽA TOHO, ODKIAĽ PRICHÁDZATE
========================================================= */
.resume { position: relative; z-index: 4; margin-top: 18px; max-width: 100%; display: none; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 8px 8px 16px; border-radius: 22px; background: rgba(239,233,223,.12); border: 1px solid rgba(239,233,223,.22); color: var(--on-stage); font-size: 14px;
 }
.resume.on { display: inline-flex; animation: rise .5s cubic-bezier(.2,.7,.1,1) both; }
.resume button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--on-stage); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.resume .x { background: none; color: inherit; padding: 0 8px; opacity: .6; }
@media (max-width: 600px) { .resume { font-size: 13.5px; } .resume span { flex: 1 1 100%; } .resume .go { flex: 1; } }

@media (prefers-reduced-motion: reduce) {
  .iris-blades i, .iris-flash i { transition: none !important; animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 760px) { .hn-host { margin-bottom: 64px; } }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================
   PRACOVNÝ STÔL — druhá polovica webu
   Papier, páska, pečiatky, zvýrazňovač ako v Matejových zošitoch.
   Všetko sa „položí na stôl“ raz, keď to uvidíte (trieda .in),
   pri scrollovaní sa nič neprepočítava.
========================================================= */
:root { --hl: rgba(240, 112, 72, .5); --paper-w: #FBF8F2; --tape: rgba(236, 226, 205, .78); }
.hand { font-family: 'Hand', 'Segoe Print', cursive; font-weight: 500; }

/* Zvýrazňovač: mäkký piesočný ťah ZA textom (spodné dve tretiny písmen), s nerovným okrajom ako od fixky */
:root { --hl: #F0D2AE; }
.hl { padding: 0 .12em; margin: 0 -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 5, 90 7, 140 5 S 190 6, 197 8 L 198 33 C 160 36, 110 34, 60 36 S 12 35, 2 34 Z' fill='%23F0D2AE'/%3E%3C/svg%3E") no-repeat 0 88% / 0% 72%;
  transition: background-size 1.2s cubic-bezier(.6,.1,.3,1) .35s; }
.in .hl, .hl.in { background-size: 100% 72%; }
.in li:nth-child(2) .hl { transition-delay: .7s; } .in li:nth-child(3) .hl { transition-delay: 1.05s; }
.in li:nth-child(4) .hl { transition-delay: 1.4s; } .in li:nth-child(5) .hl { transition-delay: 1.75s; }
.timeline.in .hl { transition-delay: 1.2s; } .timeline.in > div:nth-child(2) .hl { transition-delay: 1.7s; } .timeline.in > div:nth-child(3) .hl { transition-delay: 2.2s; }

/* Páska na papieroch */
.taped { position: relative; }
.taped::before { content: ''; position: absolute; z-index: 2; left: 50%; top: -12px; width: 92px; height: 26px; margin-left: -46px; background: var(--tape);
  transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(22,19,15,.12); pointer-events: none; border-radius: 1px; }

/* Papiere sa jemne položia na stôl */
.desk > * { --r: 0deg; transform: rotate(var(--r)) translateY(40px) scale(.97); opacity: 0; transition: opacity .9s ease, transform 1.3s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.desk > .in { transform: rotate(var(--r)); opacity: 1; }
@media (min-width: 701px) { .desk > .in:nth-child(2) { transition-delay: .25s; } .desk > .in:nth-child(3) { transition-delay: .5s; } }
.desk > *:nth-child(1) { --r: -1.4deg; } .desk > *:nth-child(2) { --r: .9deg; } .desk > *:nth-child(3) { --r: -.7deg; }
@media (hover: hover) { .desk > .in:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 34px 60px -30px rgba(22,19,15,.45); } }

/* Pečiatka */
.stamp { display: inline-block; padding: 5px 12px 4px; border: 2px solid currentColor; border-radius: 6px; color: var(--ember) !important; font-size: 12.5px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-5deg); opacity: .85; }
.offer-card-dark .stamp, .offer-card-halloween .stamp, .lm-card .stamp { color: var(--peach) !important; }

/* ---------- Čo a kedy dostanete: fotky ako výtlačky ---------- */
.delivery-grid.desk { gap: clamp(18px, 3vw, 36px); padding-top: 14px; }
.delivery-grid.desk .delivery-card { background: var(--paper-w); border: 0; border-radius: 3px; padding: clamp(22px, 2.6vw, 32px); box-shadow: 0 1px 0 rgba(22,19,15,.06), 0 22px 40px -28px rgba(22,19,15,.4); }
.delivery-card h3 { font-family: var(--serif); }
.delivery-times.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 70px); padding-top: 34px; border: 0; }
.delivery-times.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'%3E%3Cpath d='M2 13 C 60 6, 110 17, 170 11 S 290 5, 350 12 S 470 18, 530 9 S 590 12, 598 10' fill='none' stroke='%23C13D12' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 2.2s cubic-bezier(.6,.1,.3,1) .2s; }
.delivery-times.timeline.in::before { clip-path: inset(0 0 0 0); }
.delivery-times.timeline > div { position: relative; border: 0 !important; padding: 0 !important; background: none !important; }
.delivery-times.timeline > div::before { content: ''; position: absolute; left: 2px; top: -27px; width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px rgba(193,61,18,.15); }
.delivery-times.timeline dd { font-family: 'Hand', cursive; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.1; color: var(--ink); }
@media (max-width: 700px) {
  .delivery-times.timeline { grid-template-columns: 1fr; padding: 0 0 0 30px; gap: 22px; }
  .delivery-times.timeline::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(var(--ember), var(--ember)); clip-path: inset(0 0 100% 0); }
  .delivery-times.timeline.in::before { clip-path: inset(0 0 0 0); }
  .delivery-times.timeline > div::before { left: -29px; top: 8px; }
}

/* ---------- Ťahák: stránka zo zošita ---------- */
.light-tips.notebook { position: relative; background: var(--paper-w); border-radius: 4px; padding: clamp(30px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(30px, 4vw, 56px) clamp(56px, 7vw, 96px);
  background-image: linear-gradient(90deg, transparent calc(clamp(40px, 5vw, 70px) - 1px), rgba(193,61,18,.35) calc(clamp(40px, 5vw, 70px) - 1px), rgba(193,61,18,.35) clamp(40px, 5vw, 70px), transparent clamp(40px, 5vw, 70px)),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(70,110,170,.16) 33px 34px);
  box-shadow: 0 30px 60px -40px rgba(22,19,15,.45); transform: rotate(-.6deg); }
.light-tips.notebook .light-k { font-family: 'Hand', cursive; font-size: 28px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ember) !important; }
.light-tips.notebook ol { counter-reset: tip; }
.light-tips.notebook li { counter-increment: tip; }
.light-tips.notebook li::marker { content: ''; }
.light-tips.notebook li::before { content: counter(tip) '.'; font-family: 'Hand', cursive; font-size: 30px; color: var(--ember); margin-right: 10px; }

/* ---------- Ponuky: letáky na páske s pečiatkou ---------- */
.offers-grid.desk { gap: clamp(20px, 3vw, 36px); padding-top: 16px; }
.offers-grid.desk .offer-card { border-radius: 3px; }

/* ---------- Kalkulačka: súčet ako účtenka ---------- */
.calc-sum.receipt { background: var(--paper-w); color: var(--ink); border-radius: 2px 2px 0 0; box-shadow: 0 30px 50px -30px rgba(22,19,15,.45);
  padding-bottom: 40px; margin-bottom: 12px; }
.calc-sum.receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
  background: linear-gradient(-45deg, transparent 8px, var(--paper-w) 8px) 0 0 / 16px 12px repeat-x, linear-gradient(45deg, transparent 8px, var(--paper-w) 8px) 0 0 / 16px 12px repeat-x; }
.calc-sum.receipt::before { display: none; }
.receipt .rc-head { display: flex; justify-content: space-between; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px dashed rgba(22,19,15,.3); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.receipt .calc-k { color: var(--ink-2) !important; }
.receipt .calc-list li { border-bottom-color: rgba(22,19,15,.18) !important; color: var(--ink); }
.receipt .calc-list li span:last-child, .receipt .calc-empty, .receipt .calc-note, .receipt .calc-total > span { color: var(--ink-2) !important; }
.receipt .calc-total { border-top: 1px dashed rgba(22,19,15,.35) !important; }
.receipt .calc-total strong { color: var(--ember) !important; }
.receipt .calc-save { background: rgba(240,112,72,.12) !important; border-color: rgba(193,61,18,.35) !important; color: var(--ember-2) !important; }
.receipt .rc-thanks { margin: 14px 0 0; text-align: center; font-family: 'Hand', cursive; font-size: 24px; color: var(--ink-2); }

/* ---------- Bez obáv: kartičky s otázkou napísanou rukou ---------- */
.worries-grid.desk { gap: clamp(20px, 3vw, 36px); padding-top: 14px; }
.worries-grid.desk .worry { background: var(--paper-w); border: 0; border-radius: 3px; box-shadow: 0 22px 40px -28px rgba(22,19,15,.4);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(70,110,170,.12) 31px 32px); background-position: 0 70px; }
.worries-grid.desk .worry-q { font-family: 'Hand', cursive !important; font-weight: 500 !important; font-size: clamp(28px, 2.6vw, 36px) !important; line-height: 1.05 !important; letter-spacing: 0 !important; color: var(--ink); }

/* ---------- Otázky: ručne písané plus ---------- */
.faq-list summary::after { font-family: 'Hand', cursive !important; }
.faq-list details[open] summary { text-decoration: underline; text-decoration-color: #E2B98E; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- Checklist a kontakt ---------- */
.lm-cover { transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.lm-card:hover .lm-cover { transform: rotate(0deg) translateY(-4px); }
.sign { margin: 18px 0 0; font-family: 'Hand', cursive; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; color: var(--ember); transform: rotate(-3deg); transform-origin: 0 50%; }

@media (prefers-reduced-motion: reduce) {
  .desk > *, .hl, .delivery-times.timeline::before { transition: none !important; }
  .desk > * { opacity: 1; transform: rotate(var(--r)); }
  .hl { background-size: 100% 72%; }
}

/* Telefóny: svetlo v úvode stojí na mieste a je to obyčajné pozadie (žiadna obrovská pohyblivá vrstva nad videom) */
@media (pointer: coarse) {
  .hero-reveal::after { width: 100% !important; height: 100% !important; margin: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; animation: none !important; will-change: auto !important;
    background: radial-gradient(circle 46vmax at 50% 40%, rgba(17,15,13,0) 0%, rgba(17,15,13,.45) 45%, #110F0D 72%) !important; }
  .hero-light::before { animation: none !important; will-change: auto !important; transform: translate3d(50vw, 40vh, 0) !important; }
}

/* =========================================================
   ŽIVÉ DETAILY — 10 animácií (len transform, opacity a malé orezania)
========================================================= */

/* 1 · Rukopis sa napíše zľava doprava */
.hn.hn-hide { clip-path: inset(-20% 102% -20% -6%); transition: clip-path 2.4s cubic-bezier(.55, .05, .35, 1) .4s; }
.hn.hn-hide.in { clip-path: inset(-20% -6% -20% -6%); }

/* 2 · Polaroidy dopadnú na stôl */
.bento-tile { border: 7px solid #F2ECE2; border-bottom-width: 7px; border-radius: 4px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
.bt-a { --tr: -1deg; } .bt-b { --tr: 1.2deg; } .bt-c { --tr: -.8deg; } .bt-d { --tr: 1deg; }
.bento .bento-tile { transform: rotate(var(--tr, 0deg)); transition: transform .45s cubic-bezier(.2,.7,.1,1); }
.bento.anim:not(.in) .bento-tile { opacity: 0; transform: translateY(-70px) rotate(calc(var(--tr) * 5)) scale(1.06); }
.bento.anim.in .bento-tile { opacity: 1; transition: transform 1.25s cubic-bezier(.3, 1.35, .5, 1), opacity .6s ease; }
.bento.anim.in:not(.done) .bt-b { transition-delay: .35s; } .bento.anim.in:not(.done) .bt-c { transition-delay: .7s; } .bento.anim.in:not(.done) .bt-d { transition-delay: 1.05s; }
.bento.done .bento-tile:active, .bento.done .bento-tile:hover { transform: rotate(0deg) translateY(-6px); }

/* 3 · Páska priletí a pritlačí papier */
.desk.anim .taped::before, .desk.anim .wf-front.taped::before { opacity: 0; transform: translateY(-30px) rotate(-18deg) scale(1.15); transition: opacity .45s ease, transform .8s cubic-bezier(.3,1.4,.5,1); }
.desk.anim > .in.taped::before, .desk.anim > .in .taped::before { opacity: 1; transform: rotate(-3deg); transition-delay: .9s; }
@media (min-width: 701px) { .desk.anim > .in:nth-child(2) .taped::before, .desk.anim > .in.taped:nth-child(2)::before { transition-delay: 1.15s; }
  .desk.anim > .in:nth-child(3) .taped::before, .desk.anim > .in.taped:nth-child(3)::before { transition-delay: 1.4s; } }
@keyframes press { 0%, 100% { translate: 0 0; } 40% { translate: 0 4px; } }
.desk.anim > .in { animation: press .5s ease-out 1.5s both; }

/* 4 · Pečiatka buchne a kartička sa zatrasie */
.desk.anim .stamp, .lm-card.anim .stamp { opacity: 0; transform: scale(1.9) rotate(-14deg); }
.desk.anim > .in .stamp, .lm-card.anim.in .stamp { animation: stampIn .6s cubic-bezier(.2,.8,.3,1) 1.9s forwards; }
@keyframes stampIn { 0% { opacity: 0; transform: scale(1.9) rotate(-14deg); } 70% { opacity: .95; transform: scale(.94) rotate(-5deg); } 100% { opacity: .88; transform: scale(1) rotate(-5deg); } }
@keyframes thud { 0%, 100% { translate: 0 0; } 25% { translate: 1px 2px; } 55% { translate: -1px -1px; } }
.offers-grid.desk.anim > .offer-card.in { animation: press .5s ease-out 1.5s both, thud .4s ease-out 2.35s; }

/* 5 · Účtenka sa tlačí a pri odoslaní odtrhne */
.receipt .calc-list li { animation: none; }
.receipt .calc-list li.new { animation: printIn .8s cubic-bezier(.2,.8,.2,1); }
@keyframes printIn { from { opacity: 0; transform: translateY(-16px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.calc-sum.tear { animation: tear .75s cubic-bezier(.3,.7,.3,1); transform-origin: 20% 0; }
@keyframes tear { 0% { transform: none; } 30% { transform: rotate(-3deg) translate(-4px, -10px); } 60% { transform: rotate(1.2deg) translateY(2px); } 100% { transform: none; } }

/* 6 · Clona pri otvorení galérie */
.iris-flash.open i { animation: irisOpenK .62s cubic-bezier(.75, 0, .2, 1) both; }
@keyframes irisOpenK { from { transform: rotate(calc(var(--k) * 60deg)) translateX(0); } to { transform: rotate(calc(var(--k) * 60deg + 48deg)) translateX(80vmax); } }

/* 7 · Zakrúžkovanie rukou */
.hn-pill { position: relative; overflow: visible !important; }
.hn-pill .hn-oval { left: -7%; top: -26%; width: 114%; height: 152%; }
.hn-inline { position: relative; white-space: nowrap; }
.hn-inline .hn-oval { left: -10%; top: -32%; width: 120%; height: 164%; }

/* 8 · Fixka pri ťuknutí alebo prejdení myšou */
.tap-hl { cursor: pointer; padding: 0 .12em; margin: 0 -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 5, 90 7, 140 5 S 190 6, 197 8 L 198 33 C 160 36, 110 34, 60 36 S 12 35, 2 34 Z' fill='%23F0D2AE'/%3E%3C/svg%3E") no-repeat 0 88% / 0% 72%;
  transition: background-size .55s cubic-bezier(.6,.1,.3,1); }
.tap-hl.on { background-size: 100% 72%; }
@media (hover: hover) { .tap-hl:hover { background-size: 100% 72%; } }
.praca-dark .tap-hl, .bundles-section .tap-hl, .offer-card-dark .tap-hl, .offer-card-halloween .tap-hl, .lm-card .tap-hl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 5, 90 7, 140 5 S 190 6, 197 8 L 198 33 C 160 36, 110 34, 60 36 S 12 35, 2 34 Z' fill='%23704A33'/%3E%3C/svg%3E"); }

/* 9 · Kartička s otázkou sa otočí na odpoveď */
.worries-grid.desk .worry.flipcard { background: none; box-shadow: none; padding: 0; border: 0; perspective: 1200px; cursor: pointer; outline-offset: 6px; }
.wf-in { display: grid; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.8,.25,1); }
.flipped .wf-in { transform: rotateY(180deg); }
.wf { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 3px; padding: clamp(24px, 2.8vw, 36px);
  background: var(--paper-w) repeating-linear-gradient(180deg, transparent 0 31px, rgba(70,110,170,.12) 31px 32px) 0 70px; box-shadow: 0 22px 40px -28px rgba(22,19,15,.4); }
.wf-front { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 220px; }
.wf-back { transform: rotateY(180deg); }
.wf-hint { font-size: 13.5px; color: var(--ink-2); letter-spacing: .02em; }
.wf-q { margin: 0 0 10px !important; font-family: 'Hand', cursive; font-size: 22px; line-height: 1.1; color: var(--ember); }
.worry.flipcard .worry-q { margin: 0; }

/* 10 · Podpis pod formulárom sa dopíše */
.slate-wrap .sign { margin: 22px 6px 0 auto; text-align: right; transform: rotate(-3deg); transform-origin: 100% 50%; }
.sign span { display: inline-block; clip-path: inset(-25% 102% -25% -4%); transition: clip-path 2.8s cubic-bezier(.45,.05,.35,1) .3s; }
.sign.in span { clip-path: inset(-25% -4% -25% -4%); }

@media (prefers-reduced-motion: reduce) {
  .hn.hn-hide, .sign span { clip-path: none !important; }
  .bento.anim .bento-tile, .desk.anim .stamp, .lm-card.anim .stamp { opacity: 1 !important; transform: rotate(var(--tr, 0deg)) !important; animation: none !important; }
  .wf-in { transition: none; }
}

/* =========================================================
   HVIEZDNA PRIEVIDZA: tri veci, každá so svojimi ukážkami
========================================================= */
.case { display: block; }
.case-head { max-width: 760px; display: block !important; }
.case-lead { margin-bottom: 0; }
.cs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start;
  margin-top: clamp(56px, 8vw, 110px); padding-top: clamp(28px, 3.5vw, 44px); border-top: 1px solid rgba(239,233,223,.14); }
.cs-text { position: sticky; top: calc(var(--navh) + 28px); }
.cs-n { display: block; font-family: 'Hand', cursive; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--peach); transform: rotate(-4deg); transform-origin: 0 50%; margin-bottom: 10px; }
.cs-t { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.6vw, 64px); line-height: .98; margin: 0 0 16px; color: var(--on-stage); }
.cs-text p { margin: 0; max-width: 24em; color: var(--on-stage-2); font-size: 17px; line-height: 1.6; }
.cs-media { display: flex; gap: 10px; align-items: flex-start; }
.cs-media a { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: #1d1a17; min-width: 0; }
.cs-media a { cursor: zoom-in; }
.cs-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .cs-media a:hover img { transform: scale(1.03); } }
.cs-media a:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }
/* 01 · logo + vytlačené logo */
.cs-logo-a { flex: 1 1 100%; aspect-ratio: 1600 / 740; background: #100C0B !important; }
/* 02 · plagáty: rovnaká výška v jednom rade */
.cs-print .cs-media { flex-wrap: wrap; }
.cs-poster { flex: 707 1 0; aspect-ratio: 1273 / 1800; }
.cs-program { flex: 663 1 0; aspect-ratio: 1116 / 1684; }
.cs-guests { flex: 1000 1 0; aspect-ratio: 1; }
/* 03 · fotky na celú šírku */
.cs-photo { grid-template-columns: minmax(0, 1fr); }
.cs-photo .cs-text { position: static; }
.cs .case-strip { margin-top: 0; }
@media (max-width: 900px) {
  .cs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cs-text { position: static; }
  .cs-guests { flex-basis: 100%; }
}


/* =========================================================
   VYSKLADAJTE SI PROJEKT: teplejšie, každá skupina má svoj odtieň
========================================================= */
.services-section { position: relative; }
.services-section::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  background: radial-gradient(60vmax 40vmax at 8% 18%, rgba(228,82,31,.10), transparent 70%), radial-gradient(50vmax 36vmax at 95% 80%, rgba(240,165,122,.16), transparent 70%), linear-gradient(#EFE7DC, #F4EEE6); }
.services-hint { text-wrap: balance; }
.calc-rows { counter-reset: cg; background: transparent; border: 0; box-shadow: none; overflow: visible; display: grid; gap: 14px; }
.calc-row { counter-increment: cg; position: relative; border: 0 !important; border-radius: 14px; background: var(--paper-w); box-shadow: 0 1px 0 rgba(22,19,15,.05), 0 18px 34px -26px rgba(22,19,15,.35); overflow: hidden; }
.calc-row::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--g); }
.calc-row:nth-child(1) { --g: #F2D7C2; --gb: #FBF1E8; } .calc-row:nth-child(2) { --g: #EDC3A4; --gb: #FAEDE3; }
.calc-row:nth-child(3) { --g: #E5AD86; --gb: #F9E9DD; } .calc-row:nth-child(4) { --g: #DA9468; --gb: #F8E5D8; }
.calc-row:nth-child(5) { --g: #C97A4C; --gb: #F6E1D3; }
.calc-head { position: relative; }
.calc-head::before { content: '0' counter(cg); display: block; margin-bottom: 6px; font-family: 'Hand', cursive; font-size: 26px; line-height: 1; color: var(--ember); transform: rotate(-4deg); transform-origin: 0 50%; }
.calc-row .calc-gs { text-wrap: balance; }
.chip { background: var(--gb, var(--paper)); border-color: rgba(22,19,15,.12); transition: background .25s, border-color .25s, transform .2s, box-shadow .25s; }
.chip-n { text-wrap: balance; line-height: 1.3; padding: 8px 0; }
.chip:has(input:checked)::before { animation: chkPop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes chkPop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
@media (max-width: 700px) {
  .calc-row { padding: 18px 16px 16px 20px; }
  .calc-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .calc-head::before { margin: 0; }
  .calc-row .calc-gs { flex-basis: 100%; }
  .chip { min-height: 50px; }
}
/* Zvýhodnenie na účtenke: názov na jednom riadku, suma výrazne pod ním */
.calc-save > span { display: grid; gap: 2px; }
.calc-save .sv-n { font-size: 13.5px; line-height: 1.4; }
.calc-save .sv-v { font-family: 'Hand', cursive; font-size: 24px; line-height: 1.1; white-space: nowrap; }
.receipt .calc-list li span:first-child { text-wrap: balance; }
@media (min-width: 1101px) { .calc-sum.receipt { rotate: .6deg; } }

/* Plávajúce okienko: upozorní, že súhrn a odoslanie sú nižšie */
@media (max-width: 1100px) {
  .calc-peek { left: 12px; right: 12px; min-height: 62px; padding: 8px 10px 8px 18px; border-radius: 18px; gap: 10px; text-align: left;
    background: var(--ink); box-shadow: 0 18px 40px -14px rgba(22,19,15,.65), 0 0 0 1px rgba(240,165,122,.25) inset; }
  .calc-peek .pk-t { display: grid; gap: 1px; flex: 1; min-width: 0; }
  .calc-peek .pk-n { font-size: 15px; font-weight: 600; color: var(--paper); }
  .calc-peek .pk-h { font-size: 12.5px; font-weight: 450; color: var(--on-stage-2); }
  .calc-peek b { white-space: nowrap; font-size: 24px; }
  .calc-peek .pk-a { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ember); color: #fff; }
  .calc-peek.on .pk-a svg { animation: pkBob 1.4s ease-in-out infinite; }
  .calc-peek.bump { animation: pkBump .5s cubic-bezier(.3,1.5,.5,1); }
}
@keyframes pkBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes pkBump { 0% { scale: 1; } 35% { scale: 1.045; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .calc-peek .pk-a svg, .calc-peek.bump, .chip:has(input:checked)::before { animation: none !important; } }

/* =========================================================
   PORTRÉTY: prepínač Portréty / Fantasy
========================================================= */
.cat-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cat-sub-head .cat-box-k { margin: 0; }
.cat-sub { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); }
.cat-sub-b { min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.cat-sub-b.is-on { background: var(--ink); color: var(--paper); box-shadow: 0 6px 16px -10px rgba(22,19,15,.7); }
.cat-sub-b[data-sub="fantasy"].is-on { background: linear-gradient(135deg, #3B2350, #6B3A7A); }
.cat-sub-b:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.cat-sub-lead { margin: -4px 0 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cat-gallery.sub-in { animation: subIn .5s cubic-bezier(.2,.7,.1,1); }
@keyframes subIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .cat-sub { width: 100%; } .cat-sub-b { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .cat-gallery.sub-in { animation: none; } }
.cat-gallery[hidden], .cat-sub-lead[hidden] { display: none !important; }