/* TVORCA by Stevejur – tvorca.sk */

/* Písmo Nunito (SIL Open Font License 1.1, pozri fonty/OFL.txt) */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonty/nunito-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonty/nunito-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonty/nunito-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonty/nunito-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonty/nunito-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonty/nunito-latin-ext-800.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --text: #1b2a1e;
  --text-jemny: #4a5a4e;
  --zelena-tmava: #12401a;
  --zelena: #2e7d32;
  --zelena-stredna: #43a047;
  --lime: #8bc34a;
  --zelena-svetla: #f2f8ee;
  --zelena-linka: #dcebd3;
  --cervena: #c8141a;
  --oranzova: #f08c1a;
  --biela: #ffffff;
  --sirka: 72rem;
  --zaoblenie: 1.5rem;
  --tien: 0 18px 50px -18px rgba(18, 64, 26, .28);
  --hlavicka-v: 84px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hlavicka-v);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--biela);
  color: var(--text);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--zelena-tmava); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h3 { font-size: 1.3rem; font-weight: 800; }
p { margin: 0 0 1em; }
a { color: var(--zelena); text-underline-offset: .18em; }
a:hover { color: var(--zelena-tmava); }
:focus-visible { outline: 3px solid var(--oranzova); outline-offset: 3px; border-radius: 6px; }

.skryte { position: absolute; width: 0; height: 0; overflow: hidden; }
.obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 1.25rem; }

.preskocit {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1rem; border-radius: .5rem;
  background: var(--zelena-tmava); color: var(--biela); text-decoration: none;
}
.preskocit:focus { top: 1rem; color: var(--biela); }

/* ================= HLAVIČKA (vždy čisto biela – priehľadné logo) ================= */
.hlavicka {
  position: sticky; top: 0; z-index: 50;
  background: var(--biela);
  transition: box-shadow .3s ease;
}
.hlavicka.posunute { box-shadow: 0 8px 30px -12px rgba(18, 64, 26, .25); }
.priebeh {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; z-index: 1;
  transform-origin: left; transform: scaleX(var(--priebeh, 0));
  background: linear-gradient(90deg, var(--cervena), var(--oranzova), var(--lime), var(--zelena));
}
.hlavicka__obal {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--hlavicka-v); padding-top: .5rem; padding-bottom: .5rem;
}
.hlavicka__obal { position: relative; }
.hlavicka__logo { display: block; width: 170px; transition: width .3s ease; }
@media (min-width: 48rem) {
  .hlavicka__logo { width: 210px; }
  .hlavicka.posunute .hlavicka__logo { width: 180px; }
}

/* Malé logo sa objaví až keď veľké logo v úvode zmizne (riadi skript cez --logo-hl 0 → 1) */
.js .hlavicka__logo {
  opacity: var(--logo-hl, 0);
  transform: scale(calc(.8 + .2 * var(--logo-hl, 0)));
  transform-origin: left center;
  filter: blur(calc((1 - var(--logo-hl, 0)) * 6px));
}
.js .hlavicka.logo-skryte .hlavicka__logo { visibility: hidden; }

/* Kŕdlik motýľov na mieste malého loga – pri posúvaní odletí (riadi --odlet 0 → 1) */
.hlavicka__motyle { display: none; }
.js .hlavicka__motyle {
  display: block; position: absolute; left: 1.25rem; top: .3rem; bottom: .3rem; width: 170px; pointer-events: none;
}
@media (min-width: 48rem) { .js .hlavicka__motyle { width: 210px; } }
.js .hlavicka.motyle-prec .hlavicka__motyle { visibility: hidden; }
.hm {
  position: absolute; left: var(--x); top: var(--y); width: var(--v);
  transform: translate(calc(var(--odlet, 0) * var(--ox)), calc(var(--odlet, 0) * var(--oy))) rotate(calc(var(--odlet, 0) * var(--f) * -20deg)) scale(calc(1 + var(--odlet, 0) * .5));
  opacity: calc(1 - var(--odlet, 0) * var(--odlet, 0) * var(--odlet, 0));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}
@media (min-width: 48rem) { .hm { width: calc(var(--v) * 1.2); } }
.hm__let { display: block; animation: poletovanie var(--d) ease-in-out var(--o) infinite; }
@keyframes poletovanie {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  25% { transform: translate(6px, -7px) rotate(3deg); }
  50% { transform: translate(-3px, -11px) rotate(-2deg); }
  75% { transform: translate(-7px, -3px) rotate(5deg); }
}
.hm__telo { position: relative; display: block; aspect-ratio: 230 / 200; transform: scaleX(var(--f)); filter: drop-shadow(0 6px 5px rgba(30, 40, 20, .2)); }
.hm__telo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm__kridla { transform-origin: 50% 76%; }
.hm--leti .hm__kridla { animation: mavanie-kurzor .17s ease-in-out infinite alternate; }
.hm--sedi .hm__let { animation: none; }
.hm--sedi .hm__kridla { animation: otvaranie 3.4s ease-in-out infinite; }
.hlavicka.odlietaju .hm--sedi .hm__kridla { animation: mavanie-kurzor .15s ease-in-out infinite alternate; }

/* ---------- Menu na počítači: skupina odkazov s posuvnou „bublinou“ + tlačidlo Kontakt ---------- */
.menu { display: none; align-items: center; gap: .9rem; }
.menu__zoznam {
  position: relative; display: flex; align-items: center; gap: .15rem;
  margin: 0; padding: .3rem; list-style: none; border-radius: 999px;
  background: var(--zelena-svetla); border: 1px solid var(--zelena-linka);
}
.menu__zoznam::before {
  content: ""; position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: 0;
  width: var(--bw, 0px); transform: translateX(var(--bx, 0px)); border-radius: 999px;
  background: var(--biela);
  box-shadow: 0 8px 20px -10px rgba(18, 64, 26, .45), inset 0 0 0 1px rgba(46, 125, 50, .14);
  opacity: var(--bo, 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.menu__zoznam a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.15rem; border-radius: 999px;
  color: var(--zelena-tmava); font-weight: 700; text-decoration: none; transition: color .3s ease;
}
.menu__zoznam a:hover, .menu__zoznam a.aktivna { color: var(--zelena); }
html:not(.js) .menu__zoznam a:hover { background: var(--biela); }
.menu__ikona { display: inline-grid; place-items: center; }
.menu__ikona svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
.menu__zoznam a:hover .menu__ikona svg { transform: scale(1.15) rotate(-6deg); }
.menu__zoznam a[href="#o-znacke"]:hover .menu__ikona svg, .menu__zoznam a[href="#o-znacke"].aktivna .menu__ikona svg { fill: rgba(200, 20, 26, .18); stroke: var(--cervena); }

.menu__tlacidlo {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1.35rem .5rem .5rem; border-radius: 999px;
  background: linear-gradient(135deg, #2e7d32 0%, #43a047 55%, #7cb342 100%);
  color: var(--biela); font-weight: 800; text-decoration: none;
  box-shadow: 0 12px 26px -12px rgba(46, 125, 50, .8);
  transition: transform .25s ease, box-shadow .25s ease, translate .35s cubic-bezier(.2, .8, .2, 1);
}
/* jemný lesk, ktorý občas prebehne cez tlačidlo */
.menu__tlacidlo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-130%); animation: lesk 6s ease-in-out 2.5s infinite;
}
@keyframes lesk { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.menu__tlacidlo:hover { color: var(--biela); transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(46, 125, 50, .85); }
.menu__tlacidlo-ikona {
  position: relative; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.menu__tlacidlo-ikona::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55);
  animation: vlnka 2.4s ease-out infinite;
}
@keyframes vlnka { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.menu__tlacidlo-ikona svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.menu__tlacidlo:hover .menu__tlacidlo-ikona svg { animation: zvonenie .5s ease; }
@keyframes zvonenie { 25% { transform: rotate(-14deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }

/* ---------- Mobilné menu ---------- */
.menu-mobil { position: relative; }
.menu-mobil summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  padding: .65rem 1.1rem; border-radius: 999px;
  background: var(--zelena-svetla); border: 1px solid var(--zelena-linka);
  color: var(--zelena-tmava); font-weight: 800;
  transition: background-color .25s, color .25s;
}
.menu-mobil[open] summary { background: var(--zelena); border-color: var(--zelena); color: var(--biela); }
.menu-mobil summary::-webkit-details-marker { display: none; }
.menu-mobil__ikona, .menu-mobil__ikona::before, .menu-mobil__ikona::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .25s;
}
.menu-mobil__ikona { position: relative; }
.menu-mobil__ikona::before, .menu-mobil__ikona::after { content: ""; position: absolute; left: 0; }
.menu-mobil__ikona::before { top: -6px; }
.menu-mobil__ikona::after { top: 6px; }
.menu-mobil[open] .menu-mobil__ikona { background: transparent; }
.menu-mobil[open] .menu-mobil__ikona::before { transform: translateY(6px) rotate(45deg); }
.menu-mobil[open] .menu-mobil__ikona::after { transform: translateY(-6px) rotate(-45deg); }
.menu-mobil__panel {
  position: absolute; right: 0; top: calc(100% + .75rem); width: min(19.5rem, calc(100vw - 2.5rem));
  padding: .6rem; border-radius: 1.4rem; background: var(--biela);
  border: 1px solid var(--zelena-linka); box-shadow: 0 30px 60px -24px rgba(18, 64, 26, .45);
  animation: vysun .3s cubic-bezier(.2, .8, .2, 1);
}
.menu-mobil ul { margin: 0; padding: 0; list-style: none; }
.menu-mobil ul a {
  display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border-radius: 1rem;
  color: var(--zelena-tmava); font-size: 1.1rem; font-weight: 800; text-decoration: none;
  transition: background-color .2s;
}
.menu-mobil ul a:hover, .menu-mobil ul a:focus-visible { background: var(--zelena-svetla); }
.menu-mobil__znak {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem;
  background: var(--zelena-svetla); border: 1px solid var(--zelena-linka);
}
.menu-mobil__znak svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--zelena); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-mobil__sipka { margin-left: auto; color: var(--lime); font-weight: 800; transition: transform .2s; }
.menu-mobil ul a:hover .menu-mobil__sipka { transform: translateX(4px); }
.menu-mobil__volat {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: .5rem; padding: .95rem 1rem; border-radius: 1rem;
  background: linear-gradient(135deg, #2e7d32 0%, #43a047 55%, #7cb342 100%);
  color: var(--biela); font-weight: 800; text-decoration: none;
}
.menu-mobil__volat:hover { color: var(--biela); }
.menu-mobil__volat svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@keyframes vysun { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

@media (min-width: 48rem) {
  .menu { display: flex; }
  .menu-mobil { display: none; }
}

/* ================= ÚVOD ================= */
.uvod {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--hlavicka-v));
  display: grid; align-items: center;
  padding: clamp(2.5rem, 2rem + 4vw, 5rem) 0 clamp(5rem, 4rem + 4vw, 7rem);
  background: var(--biela);
  text-align: center;
}
.uvod__pozadie { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Farebné škvrny – držia sa okrajov, stred pod logom zostáva biely */
.skvrna {
  position: absolute; border-radius: 50%;
  will-change: transform;
  animation: plavanie 22s ease-in-out infinite alternate;
}
.skvrna--1 { width: 46vmax; height: 46vmax; left: -22vmax; top: -18vmax;
  background: radial-gradient(circle, rgba(139, 195, 74, .38), rgba(139, 195, 74, 0) 68%); }
.skvrna--slnko { width: 44vmax; height: 44vmax; right: -20vmax; top: -18vmax;
  background: radial-gradient(circle, rgba(255, 214, 120, .42), rgba(255, 228, 160, .18) 40%, rgba(255, 228, 160, 0) 68%); animation-duration: 26s; animation-delay: -6s; }
/* Slnečné lúče z pravého horného rohu */
.luce {
  position: absolute; right: -32vmax; top: -34vmax; width: 84vmax; height: 84vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0) 0deg 7deg, rgba(255, 222, 140, .32) 9deg, rgba(255, 222, 140, 0) 11deg 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 32%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 32%, transparent 62%);
  animation: otacanie 160s linear infinite;
}
@keyframes otacanie { to { transform: rotate(360deg); } }
.uvod__pozadie { translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -10px); transition: translate 1.2s cubic-bezier(.2, .8, .2, 1); }
.skvrna--3 { width: 42vmax; height: 42vmax; right: -18vmax; bottom: -24vmax;
  background: radial-gradient(circle, rgba(255, 193, 77, .34), rgba(255, 193, 77, 0) 68%); animation-duration: 24s; animation-delay: -12s; }
.skvrna--4 { width: 38vmax; height: 38vmax; left: -16vmax; bottom: -22vmax;
  background: radial-gradient(circle, rgba(67, 160, 71, .26), rgba(67, 160, 71, 0) 68%); animation-duration: 28s; animation-delay: -3s; }
@keyframes plavanie {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4vmax, 3vmax) scale(1.08); }
  100% { transform: translate(-2vmax, 5vmax) scale(.96); }
}

/* Lúka */
.uvod__luka { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 9vw, 130px); z-index: -1; pointer-events: none; overflow: hidden; }
.vlna { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; will-change: transform; animation: vlna 28s linear infinite; }
.vlna--1 { fill: #e7f3de; height: 100%; }
.vlna--2 { fill: #c9e4b4; height: 78%; animation-duration: 20s; animation-direction: reverse; }
.vlna--3 { fill: #9ccc65; height: 52%; animation-duration: 14s; }
@keyframes vlna { to { transform: translateX(-50%); } }

/* Popredie: padajúce realistické lístky v troch hĺbkach + svetelné iskry */
/* Zadná a stredná vrstva sú za textom (text ostáva čitateľný), predná vrstva na okrajoch je pred ním */
.uvod__popredie { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hlbka { position: absolute; inset: 0; translate: calc(var(--mx, 0) * var(--h) * 1px) calc(var(--my, 0) * var(--h) * .7px + var(--posun, 0) * var(--h) * -6px); transition: translate .9s cubic-bezier(.2, .8, .2, 1); }
.hlbka--zadna { --h: 8; z-index: 1; }
.hlbka--stredna { --h: 18; z-index: 1; }
.hlbka--predna { --h: 42; z-index: 4; }
.padajuci-list {
  position: absolute; left: var(--x); top: 0; width: calc(120px * var(--s));
  perspective: 500px; will-change: transform;
  animation: padanie var(--d) linear var(--o) infinite;
}
.padajuci-list img {
  display: block; width: 100%; height: auto; transform-origin: 25% 50%;
  filter: drop-shadow(0 10px 12px rgba(20, 60, 20, .2));
  animation: tancovanie calc(var(--d) / 3) ease-in-out var(--o) infinite alternate;
}
.hlbka--zadna .padajuci-list img { filter: blur(1.4px); opacity: .7; }
.hlbka--predna .padajuci-list img { filter: blur(5px) drop-shadow(0 16px 18px rgba(20, 60, 20, .2)); opacity: .9; }
@media (max-width: 47.99rem) {
  /* na mobile menšie lístky v popredí, aby nezasahovali do textu */
  .hlbka--predna .padajuci-list { width: calc(64px * var(--s)); }
}
@keyframes padanie { from { transform: translateY(-22vh); } to { transform: translateY(112vh); } }
@keyframes tancovanie {
  0%   { transform: translateX(-34px) rotate(calc(var(--r) - 28deg)) rotateY(0deg); }
  50%  { transform: translateX(12px) rotate(var(--r)) rotateY(55deg); }
  100% { transform: translateX(44px) rotate(calc(var(--r) + 26deg)) rotateY(8deg); }
}
.iskra {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 210, 1) 0%, rgba(245, 180, 60, .75) 38%, rgba(245, 180, 60, 0) 72%);
  box-shadow: 0 0 10px 2px rgba(245, 180, 60, .35);
  opacity: 0; animation: iskrenie var(--d) ease-in-out var(--o) infinite;
}
@keyframes iskrenie {
  0%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  20%  { opacity: .95; }
  50%  { transform: translate(14px, -44px) scale(1); }
  80%  { opacity: .6; }
  100% { transform: translate(-8px, -96px) scale(.4); opacity: 0; }
}

/* Obsah úvodu */
.uvod__obsah { position: relative; z-index: 3; }
.uvod__texty { translate: 0 calc(var(--posun, 0) * 40px); }
.uvod__logo {
  position: relative; width: min(640px, 88vw); margin: 0 auto clamp(1.5rem, 1rem + 2vw, 2.5rem);
  animation: logo-prichod 1.2s cubic-bezier(.2, .8, .2, 1) both;
}
/* Biela plocha za logom – logo vždy leží na čisto bielom (#fff) */
.uvod__logo::before {
  content: ""; position: absolute; inset: -10% -3%; z-index: -1; border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 60px 50px #fff;
}
.uvod__logo { translate: calc(var(--mx, 0) * 6px) calc(var(--my, 0) * 4px + var(--posun, 0) * 40px); transition: translate .9s cubic-bezier(.2, .8, .2, 1); }
.uvod__logo picture { display: block; animation: vznasanie 7s ease-in-out 1.2s infinite; }
@keyframes logo-prichod { from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(8px); } }
@keyframes vznasanie { 50% { transform: translateY(-8px); } }

.uvod h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 4.2rem); margin: 0 0 .55em; }
.uvod h1 .riadok { display: block; }
.slovo {
  display: inline-block;
  animation: slovo-prichod .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.55s + var(--i) * .12s);
}
@keyframes slovo-prichod { from { opacity: 0; transform: translateY(.6em) rotate(3deg); filter: blur(6px); } }
.riadok--prechod .slovo {
  background: linear-gradient(100deg, #1b5e20 0%, #2e7d32 25%, #4c9a2a 50%, #2e7d32 75%, #1b5e20 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: slovo-prichod .8s cubic-bezier(.2, .8, .2, 1) both, trblietanie 6s linear infinite;
  animation-delay: calc(.55s + var(--i) * .12s), 0s;
}
@keyframes trblietanie { to { background-position: -250% 0; } }

.uvod__text {
  max-width: 41rem; margin: 0 auto 2.2rem;
  font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); color: var(--text-jemny);
  animation: zjavenie .9s ease 1.2s both;
}
@keyframes zjavenie { from { opacity: 0; transform: translateY(16px); } }

.uvod__dalej {
  position: relative; display: block; margin: clamp(1.5rem, 1rem + 2vw, 2.6rem) auto 0;
  width: 28px; height: 46px; border-radius: 16px; border: 2px solid rgba(18, 64, 26, .35);
  translate: 0 calc(var(--posun, 0) * 40px); transition: border-color .25s;
  animation: zjavenie 1s ease 2s both;
}
.uvod__dalej:hover { border-color: var(--zelena); }
.uvod__dalej span {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px;
  background: var(--zelena); animation: koliesko 1.8s ease-in-out infinite;
}
@keyframes koliesko { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ================= BEŽIACI PÁS ================= */
.pas-obal { position: relative; z-index: 2; overflow: hidden; margin: -3.2rem 0 -1.6rem; padding: 1.6rem 0; }
.pas {
  overflow: hidden;
  padding: 1.05rem 0;
  background: linear-gradient(90deg, var(--zelena-tmava), var(--zelena) 50%, var(--zelena-tmava));
  transform: rotate(-1.6deg) scale(1.04);
  box-shadow: 0 20px 40px -20px rgba(18, 64, 26, .5);
}
.pas__pohyb { display: flex; width: max-content; animation: pas 38s linear infinite; }
.pas ul { display: flex; margin: 0; padding: 0; list-style: none; }
.pas li {
  display: flex; align-items: center; white-space: nowrap;
  color: var(--biela); font-weight: 800; font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem); letter-spacing: .02em;
}
.pas li::after {
  content: ""; width: 2em; height: .9em; margin: 0 1.4rem;
  background: no-repeat center / contain url("../obrazky/list.webp");
  transform: rotate(-12deg);
}
.pas li:nth-child(even)::after { transform: scaleX(-1) rotate(-18deg); }
@keyframes pas { to { transform: translateX(-50%); } }

/* ================= SPOLOČNÉ ================= */
.hlava-sekcie { max-width: 44rem; margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.5rem); text-align: center; }
.hlava-sekcie h2 { margin-bottom: .35em; }
.maska { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .18em .02em .1em; margin: -.18em -.02em -.1em; }
.maska > span { display: inline-block; }
.js .hlava-sekcie[data-odhal] .maska > span { transform: translateY(115%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.1s + var(--i) * .08s); }
.js .hlava-sekcie[data-odhal].videt .maska > span { transform: none; }
.hlava-sekcie__text { font-size: 1.15rem; color: var(--text-jemny); margin: 0; }
.nadnadpis {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  padding: .35rem .95rem; border-radius: 999px;
  background: var(--zelena-svetla); border: 1px solid var(--zelena-linka);
  color: var(--zelena); font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.nadnadpis::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--cervena), var(--oranzova));
}

/* Postupné zobrazovanie pri posúvaní (iba keď beží JavaScript) */
.js [data-odhal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--oneskorenie, 0s);
}
.js [data-odhal].videt { opacity: 1; transform: none; }

/* ================= PROJEKTY ================= */
.projekty { position: relative; padding: clamp(5rem, 4rem + 5vw, 8rem) 0 clamp(4rem, 3rem + 4vw, 7rem); }
.karty {
  display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: 1fr;
  perspective: 1200px;
}
@media (min-width: 40rem) { .karty { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .karty { grid-template-columns: repeat(4, 1fr); } }

.karta {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 2rem 1.6rem 1.6rem;
  border-radius: var(--zaoblenie);
  background: var(--biela);
  border: 1px solid var(--zelena-linka);
  box-shadow: 0 10px 30px -18px rgba(18, 64, 26, .25);
  transform-style: preserve-3d;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.js .karta[data-odhal].videt { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity .8s ease, transform .2s ease-out, box-shadow .35s ease, border-color .35s ease; transition-delay: var(--oneskorenie, 0s), 0s, 0s, 0s; }
.karta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--akcent-2) 22%, transparent), transparent 60%);
  transition: opacity .35s ease;
}
.karta::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--akcent), var(--akcent-2));
}
@property --uhol { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.karta:hover {
  border-color: transparent;
  background: linear-gradient(var(--biela), var(--biela)) padding-box,
              conic-gradient(from var(--uhol), var(--akcent), var(--akcent-2), #ffffff, var(--akcent-2), var(--akcent)) border-box;
  box-shadow: 0 28px 60px -24px color-mix(in srgb, var(--akcent) 55%, transparent);
  animation: okraj 3s linear infinite;
}
@keyframes okraj { to { --uhol: 360deg; } }
.karta:hover::before { opacity: 1; }
.karta__cislo {
  position: absolute; right: 1.2rem; top: .9rem;
  font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: color-mix(in srgb, var(--akcent) 12%, transparent);
}
.karta__ikona {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: 1.3rem;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, var(--akcent), var(--akcent-2));
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--akcent) 70%, transparent);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.karta:hover .karta__ikona { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.karta__ikona svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.karta h3 { margin-bottom: .2em; }
.karta__adresa { margin-bottom: .9em; color: var(--akcent); font-size: .95rem; font-weight: 700; filter: brightness(.85); }
.karta p { color: var(--text-jemny); }
.stitok {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  margin: auto 0 0; padding: .35rem .9rem; border-radius: 999px;
  background: var(--zelena-svetla); border: 1px solid var(--zelena-linka);
  color: var(--zelena-tmava) !important; font-size: .85rem; font-weight: 800;
}
.stitok__bodka { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--oranzova); }
.stitok__bodka::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--oranzova);
  animation: pulz 1.8s ease-out infinite;
}
@keyframes pulz { to { transform: scale(3); opacity: 0; } }

/* ================= O ZNAČKE ================= */
.znacka {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(5rem, 4rem + 5vw, 8rem) 0;
  background: linear-gradient(180deg, var(--biela) 0%, var(--zelena-svetla) 30%, var(--zelena-svetla) 100%);
}
.znacka__kresba {
  position: absolute; z-index: -1; left: 50%; top: -8rem; translate: -50% 0;
  width: min(1080px, 150vw); height: auto; opacity: .5;
}
.znacka__kresba path {
  fill: none; stroke: url(#g-srdce); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .35;
}
.js .znacka__kresba[data-odhal] { transform: none; }
.js .znacka__kresba path { stroke-dashoffset: 1; transition: stroke-dashoffset 3.2s ease .2s; }
.js .znacka__kresba.videt path { stroke-dashoffset: 0; }

.symboly { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .symboly { grid-template-columns: repeat(3, 1fr); } }
.symbol {
  padding: 2.2rem 1.8rem 2rem; border-radius: var(--zaoblenie); text-align: center;
  background: var(--biela);
  border: 1px solid var(--biela);
  box-shadow: var(--tien);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.symbol:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -26px rgba(18, 64, 26, .4); }
.js .symbol[data-odhal].videt:hover { transform: translateY(-6px); }
.symbol p { margin: 0; color: var(--text-jemny); }
.symbol__ikona {
  display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin: 0 auto 1.2rem; border-radius: 50%;
  background: var(--biela);
  box-shadow: 0 14px 30px -14px rgba(18, 64, 26, .35);
}
.symbol__ikona svg { width: 3rem; height: 3rem; overflow: visible; }
.symbol--srdce .symbol__ikona { background: radial-gradient(circle at 50% 40%, #fff 0%, #ffeaea 100%); }
.symbol--list .symbol__ikona { background: radial-gradient(circle at 50% 40%, #fff 0%, #e6f4dc 100%); }
.symbol--motyl .symbol__ikona { background: radial-gradient(circle at 50% 40%, #fff 0%, #fff0dc 100%); }
.symbol--srdce svg { animation: tlkot 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes tlkot { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 28% { transform: scale(1.04); } }
.symbol__list { width: 3.9rem; height: auto; transform: rotate(-32deg); transform-origin: 12% 50%; filter: drop-shadow(0 6px 6px rgba(20, 60, 20, .22)); animation: kyvanie 3.6s ease-in-out infinite; }
@keyframes kyvanie { 50% { transform: rotate(-42deg) translateY(-2px); } }
.sediaci-motyl { position: relative; display: block; width: 4.1rem; aspect-ratio: 230 / 200; translate: 4px 2px; animation: vznasanie 4s ease-in-out infinite; }
.sediaci-motyl img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sediaci-motyl__kridla { transform-origin: 50% 76%; animation: otvaranie 3.2s ease-in-out infinite; }
@keyframes otvaranie {
  0%, 50%, 100% { transform: perspective(260px) rotateX(0deg); }
  62% { transform: perspective(260px) rotateX(62deg); }
  74% { transform: perspective(260px) rotateX(6deg); }
  84% { transform: perspective(260px) rotateX(48deg); }
}

/* ================= PRÍRODA (fotografia) ================= */
.priroda {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(26rem, 52vw, 44rem);
  background: #eef3e4;
}
.priroda__foto, .priroda__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.priroda__foto { z-index: -2; }
.priroda__foto img { object-fit: cover; object-position: 70% 55%; }
.priroda__video {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 55%;
  opacity: 0; transition: opacity 1.2s ease;
}
.priroda.hra-video .priroda__video { opacity: 1; }
/* Svetlý závoj na strane textu – kvôli čitateľnosti */
.priroda::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .6) 32%, rgba(255, 255, 255, 0) 62%);
}
/* Mäkký prechod zo sekcie nad fotkou */
.priroda::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: -1;
  background: linear-gradient(180deg, var(--zelena-svetla), rgba(242, 248, 238, 0));
}
.priroda__obsah { position: relative; }
.priroda__svetlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.priroda__ziara {
  position: absolute; left: 15%; top: 18%; width: 36vmax; height: 36vmax; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, .9) 0%, rgba(255, 214, 140, .35) 24%, rgba(255, 214, 140, 0) 60%);
  mix-blend-mode: screen; animation: dych-slnka 6s ease-in-out infinite alternate;
}
@keyframes dych-slnka { from { opacity: .4; transform: scale(.94); } to { opacity: .75; transform: scale(1.08); } }
.priroda .iskra {
  background: radial-gradient(circle, rgba(255, 255, 240, 1) 0%, rgba(255, 236, 180, .7) 40%, rgba(255, 236, 180, 0) 72%);
  box-shadow: 0 0 8px 2px rgba(255, 240, 200, .45); mix-blend-mode: screen;
}
.priroda__text { max-width: 34rem; }
.priroda h2 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); margin-bottom: .3em;
  text-shadow: 0 2px 24px rgba(255, 255, 255, .9);
}
.priroda p {
  margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 700; color: var(--zelena-tmava);
  text-shadow: 0 1px 16px rgba(255, 255, 255, .95);
}
@media (max-width: 47.99rem) {
  .priroda { align-items: flex-start; min-height: 125vw; padding-top: 3.5rem; text-align: center; }
  .priroda__foto img { object-position: 50% 100%; }
  .priroda__video { display: none; }
  .priroda__ziara { left: 88%; top: 27%; }
  .priroda::before { background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, 0) 52%); }
  .priroda__text { margin: 0 auto; }
}
/* Jemné približovanie fotky pri posúvaní (iba v prehliadačoch, ktoré to podporujú) */
@supports (animation-timeline: view()) {
  .priroda__foto img, .priroda__video {
    animation: priblizenie linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes priblizenie {
    from { transform: scale(1.18) translateY(-4%); }
    to   { transform: scale(1.1) translateY(3%); }
  }
}

/* ================= KONTAKT ================= */
.kontakt {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(5rem, 4rem + 5vw, 8rem) 0;
  background: linear-gradient(135deg, #0d3314 0%, var(--zelena-tmava) 45%, #1d6b2a 100%);
  color: #e9f5e3; text-align: center;
}
.kontakt__pozadie { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.kontakt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px circle at var(--kx, 50%) var(--ky, 25%), rgba(190, 240, 130, .13), transparent 60%);
}
.svetluska {
  position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%;
  background: #f6ffc2;
  box-shadow: 0 0 6px 2px rgba(225, 255, 130, .85), 0 0 22px 8px rgba(180, 240, 90, .3);
  animation: svetluska-a var(--d) ease-in-out var(--o) infinite, blikanie 3.4s ease-in-out var(--o) infinite;
}
.svetluska--b { animation-name: svetluska-b, blikanie; }
.svetluska--c { animation-name: svetluska-c, blikanie; width: 4px; height: 4px; }
@keyframes svetluska-a { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(40px, -30px); } 60% { transform: translate(-20px, -60px); } 80% { transform: translate(-45px, -10px); } }
@keyframes svetluska-b { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-50px, 20px); } 55% { transform: translate(-10px, 55px); } 75% { transform: translate(35px, 15px); } }
@keyframes svetluska-c { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(30px, 45px); } 65% { transform: translate(60px, -20px); } 85% { transform: translate(10px, -40px); } }
@keyframes blikanie { 0%, 100% { opacity: .12; } 40% { opacity: 1; } 60% { opacity: .75; } }
.skvrna--k1 { width: 40vmax; height: 40vmax; left: -14vmax; bottom: -20vmax;
  background: radial-gradient(circle, rgba(139, 195, 74, .35), rgba(139, 195, 74, 0) 66%); }
.skvrna--k2 { width: 34vmax; height: 34vmax; right: -12vmax; top: -16vmax;
  background: radial-gradient(circle, rgba(178, 232, 120, .22), rgba(178, 232, 120, 0) 66%); animation-delay: -9s; }
.kontakt h2 { color: var(--biela); }
.kontakt .hlava-sekcie__text { color: #d2e8c9; }
.kontakt .nadnadpis { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #d8f0c8; }
.kontakt__zoznam {
  display: grid; gap: 1.2rem; max-width: 46rem; margin: 0 auto; padding: 0; list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .kontakt__zoznam { grid-template-columns: 1fr 1fr; } }
.kontakt__karta {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 2rem 1.5rem; border-radius: var(--zaoblenie);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--biela); text-decoration: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .35s ease, border-color .35s ease;
}
.kontakt__karta:hover { color: var(--biela); transform: translateY(-6px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); }
.kontakt__ikona {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: .5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--lime), var(--zelena-stredna));
  box-shadow: 0 10px 24px -8px rgba(139, 195, 74, .6);
  transition: transform .35s ease;
}
.kontakt__karta:hover .kontakt__ikona { transform: scale(1.1) rotate(-8deg); }
.kontakt__ikona svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kontakt__popis { font-size: .9rem; color: #c3dfb6; }
.kontakt__hodnota { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); font-weight: 800; overflow-wrap: anywhere; }

/* ================= PÄTA (vždy čisto biela – priehľadné logo) ================= */
.pata { background: var(--biela); padding: 3rem 0 1.5rem; font-size: .9rem; color: var(--text-jemny); }
.pata__znacka {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--zelena-linka);
}
.pata__znacka img { width: 180px; }
.pata__slogan { margin: 0; color: var(--zelena-tmava); font-weight: 800; font-size: 1.05rem; }
.pata__hore { font-weight: 700; text-decoration: none; }
@media (min-width: 40rem) { .pata__hore { margin-left: auto; } }
@media (max-width: 47.99rem) { .pata { padding-bottom: 9rem; } }
.pata__panely { display: grid; gap: .9rem; align-items: start; }
@media (min-width: 52rem) { .pata__panely { grid-template-columns: 1fr 1fr; } }
.pata__panel {
  border: 1px solid var(--zelena-linka); border-radius: 1.2rem; background: var(--zelena-svetla);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pata__panel:hover { border-color: color-mix(in srgb, var(--zelena) 35%, var(--zelena-linka)); }
.pata__panel[open] { background: var(--biela); box-shadow: 0 20px 44px -24px rgba(18, 64, 26, .4); }
.pata__panel summary {
  display: flex; align-items: center; gap: .9rem; padding: .95rem 1.15rem;
  cursor: pointer; list-style: none; border-radius: 1.2rem;
  color: var(--zelena-tmava); font-weight: 800; font-size: 1rem;
}
.pata__panel summary::-webkit-details-marker { display: none; }
.pata__znak {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem;
  background: var(--biela); border: 1px solid var(--zelena-linka); transition: transform .35s ease;
}
.pata__panel:hover .pata__znak { transform: rotate(-6deg) scale(1.06); }
.pata__znak svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--zelena); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pata__nazov { display: flex; flex-direction: column; line-height: 1.3; }
.pata__nazov small { font-size: .82rem; font-weight: 400; color: var(--text-jemny); }
.pata__sipka {
  flex: none; margin-left: auto; width: .65rem; height: .65rem;
  border-right: 2.5px solid var(--zelena); border-bottom: 2.5px solid var(--zelena);
  transform: translateY(-3px) rotate(45deg); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pata__panel[open] .pata__sipka { transform: translateY(2px) rotate(-135deg); }
.pata__obsah { padding: 0 1.15rem 1.2rem; line-height: 1.7; }
@media (min-width: 40rem) { .pata__obsah { padding-left: 4.65rem; } }
.pata__panel[open] .pata__obsah { animation: zjavenie .4s ease; }
.pata address { font-style: normal; }
.pata strong { color: var(--text); }
.pata__obsah p { margin: 0; }
/* plynulé rozbalenie v prehliadačoch, ktoré to vedia */
@supports selector(::details-content) {
  html { interpolate-size: allow-keywords; }
  .pata__panel::details-content { block-size: 0; overflow: hidden; transition: block-size .45s cubic-bezier(.2, .8, .2, 1), content-visibility .45s allow-discrete; }
  .pata__panel[open]::details-content { block-size: auto; }
}
.pata__spodok { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--zelena-linka); text-align: center; font-size: .85rem; }

/* ================= Motýľ za kurzorom ================= */
.motyl-kurzor {
  position: fixed; left: 0; top: 0; z-index: 70; width: 62px; pointer-events: none;
  opacity: 0; transition: opacity .6s ease; will-change: transform;
}
.motyl-kurzor[hidden] { display: none; }
.motyl-kurzor.videt { opacity: 1; }
.motyl-kurzor__telo { position: relative; display: block; aspect-ratio: 230 / 200; filter: drop-shadow(0 10px 8px rgba(30, 40, 20, .22)); }
.motyl-kurzor__telo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.motyl-kurzor__kridla { transform-origin: 50% 76%; }
.motyl-kurzor.leti .motyl-kurzor__kridla { animation: mavanie-kurzor .14s ease-in-out infinite alternate; }
.motyl-kurzor.sedi .motyl-kurzor__kridla { animation: otvaranie 3.2s ease-in-out infinite; }
@keyframes mavanie-kurzor {
  from { transform: perspective(220px) rotateX(0deg); }
  to   { transform: perspective(220px) rotateX(74deg); }
}

/* ================= Šípka späť hore ================= */
.hore {
  position: fixed; right: 1rem; bottom: 5.1rem; z-index: 60;
  display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%;
  background: var(--biela); color: var(--zelena);
  box-shadow: 0 12px 30px -12px rgba(18, 64, 26, .45);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1), background-color .25s, color .25s;
}
.hore.zobrazena { opacity: 1; transform: none; pointer-events: auto; }
.hore:hover { background: var(--zelena); color: var(--biela); }
.hore__kruh { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hore__kruh circle {
  fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--priebeh, 0));
}
.hore__sipka { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.hore:hover .hore__sipka { transform: translateY(-3px); }
@media (max-width: 30rem) { .hore { bottom: 4.9rem; width: 3.1rem; height: 3.1rem; } }

/* ================= Tlačidlo zvuku ================= */
.zvuk {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.1rem; border: 1px solid var(--zelena-linka); border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--zelena-tmava);
  font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(18, 64, 26, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.zvuk[hidden] { display: none; }
.zvuk:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(18, 64, 26, .45); }
.zvuk__stlpce { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.zvuk__stlpce span { width: 3px; height: 4px; border-radius: 2px; background: var(--zelena); transition: height .3s; }
.zvuk[aria-pressed="true"] .zvuk__stlpce span { animation: ekvalizer 1s ease-in-out infinite alternate; }
.zvuk[aria-pressed="true"] .zvuk__stlpce span:nth-child(2) { animation-delay: -.3s; background: var(--lime); }
.zvuk[aria-pressed="true"] .zvuk__stlpce span:nth-child(3) { animation-delay: -.6s; background: var(--oranzova); }
.zvuk[aria-pressed="true"] .zvuk__stlpce span:nth-child(4) { animation-delay: -.15s; background: var(--cervena); }
@keyframes ekvalizer { from { height: 4px; } to { height: 16px; } }
/* Na mobile iba ikona – text ostáva pre čítačky obrazovky */
@media (max-width: 30rem) {
  .zvuk { padding: .85rem; }
  .zvuk__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ================= Obmedzenie pohybu ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .padajuci-list, .iskra, .svetluska, .luce, .priroda__ziara, .priroda__video, .motyl-kurzor { display: none; }
  .hm { transform: none; }
  .js .hlavicka__logo { transform: none; filter: none; }
  .js .hlava-sekcie .maska > span { transform: none; }
  .js [data-odhal] { opacity: 1; transform: none; }
  .js .znacka__kresba path { stroke-dashoffset: 0; }
}