/* ==========================================================================
   StuckArt — Domov (len šablóna home): hero slider, čísla, bežiaci pás.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--ink); color: var(--light); overflow: hidden; display: grid; }
.hero__slide { grid-area: 1 / 1; position: relative; display: flex; opacity: 0; z-index: 1; transition: opacity 900ms ease-in-out; }
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__media { position: absolute; inset: 0; background: var(--ink-2); will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active .hero__media.is-kb { animation: kb 7.4s ease-out forwards; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 20, 15, 0.78) 0%, rgba(22, 20, 15, 0.45) 55%, rgba(22, 20, 15, 0.15) 100%); }
@media (max-width: 767px) { .hero__overlay { background: linear-gradient(90deg, rgba(22, 20, 15, 0.8) 0%, rgba(22, 20, 15, 0.62) 100%); } }
.hero__content { position: relative; width: 100%; min-height: 100%; padding-top: 112px; padding-bottom: 196px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .hero__content { padding-bottom: 148px; } }
.hero__text { max-width: 680px; }
.hero__text .eyebrow { margin-bottom: 20px; }
.hero__title { margin: 0 0 24px; max-width: 22ch; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 84px); line-height: 1.05; letter-spacing: -0.02em; color: var(--light); }
.hero__sub { margin: 0 0 36px; max-width: 46ch; font-size: 18px; line-height: 1.65; color: var(--on-dark); }
.hero.is-animating .hero__slide.is-active [data-slidetext] > * { animation: slideText 680ms var(--ease) backwards; }
.hero.is-animating .hero__slide.is-active [data-slidetext] > :nth-child(2) { animation-delay: 80ms; }
.hero.is-animating .hero__slide.is-active [data-slidetext] > :nth-child(3) { animation-delay: 160ms; }
.hero.is-animating .hero__slide.is-active [data-slidetext] > :nth-child(4) { animation-delay: 240ms; }
@keyframes slideText { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero__controls { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 5; }
@media (min-width: 1024px) { .hero__controls { bottom: 0; } }
.hero__controls-inner { display: flex; align-items: center; gap: 24px; padding-bottom: 40px; }
.hero__counter { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--light); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero__counter-total { color: rgba(251, 249, 245, 0.62); }
.hero__progress { flex: 1; height: 1px; background: rgba(251, 249, 245, 0.28); position: relative; overflow: hidden; min-width: 40px; }
.hero__progress span { position: absolute; inset: 0; background: var(--light); transform: scaleX(0); transform-origin: left; }
.hero__progress.is-running span { animation: progress 7s linear forwards; }
.hero.is-paused .hero__progress span, .hero.is-paused .hero__media.is-kb { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }
.hero__buttons { display: flex; gap: 8px; }
@media (max-width: 380px) { .hero__controls-inner { gap: 14px; } .hero__buttons .icon-btn { width: 44px; height: 44px; } }

/* ---------- Čísla ---------- */
.trust { position: relative; background: var(--light); border-bottom: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
@media (max-width: 459px) { .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust__item { background: var(--light); padding: 40px 28px; }
@media (max-width: 459px) { .trust__item { padding: 28px 18px; } }
.trust__value { margin: 0 0 8px; font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 8vw, 40px); line-height: 1; color: var(--accent); overflow-wrap: anywhere; }
.trust__label { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- Bežiaci pás referencií ---------- */
.marquee { position: relative; overflow: hidden; padding: 26px 0; border-top: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; flex-shrink: 0; }
.marquee__list li { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
.marquee__dot { width: 5px; height: 5px; background: var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 2px; background: var(--light); color: var(--muted); opacity: 0; transition: opacity 200ms ease; }
.marquee:hover .marquee__toggle, .marquee__toggle:focus-visible, .marquee.is-paused .marquee__toggle { opacity: 1; }
@media (hover: none) { .marquee__toggle { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .marquee__toggle { display: none; } }