/* reveal.css — the home page's entrance animations (js/reveal.js), 2026-10-22.
   One family, like the "O Firmie" section: things rise gently into view, once, as they are
   scrolled to. Only opacity and transform (smooth, no layout jumps). After an item has arrived
   its classes are removed, so its own hover effects from main.css work as before.
   The Metoda section has its own animation and is left alone. Nothing here runs for people
   who asked their device to reduce motion. */

/* rise into view */
.rv { opacity: 0; transform: translateY(26px); }
.rv-left { opacity: 0; transform: translateX(-34px); }
.rv-right { opacity: 0; transform: translateX(34px); }
.rv, .rv-left, .rv-right { transition: opacity .75s ease, transform .85s cubic-bezier(.2, .7, .2, 1); }
.rv.rv-in, .rv-left.rv-in, .rv-right.rv-in { opacity: 1; transform: none; }
/* benefits list: quicker and shorter, so it keeps ahead of the scroll */
.rv-left.rv-fast { transform: translateX(-40px); transition: opacity .6s ease, transform .65s cubic-bezier(.2, .7, .2, 1); }
.rv-left.rv-fast.rv-in { transform: none; }

/* section titles: the thin line under the title draws itself from left to right */
.rv-rule { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
.clc-section-title--center .rv-rule { transform-origin: center; }
.rv-rule.rv-in { transform: scaleX(1); }

/* product photos settle in from a slight zoom; video thumbnails come in from a soft blur */
.rv-zoom { transform: scale(1.07); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.rv-zoom.rv-in { transform: none; }
.rv-blur { filter: blur(10px); transition: filter .7s ease; }
.rv-blur.rv-in { filter: none; }

/* each line of the hero headline stays on one line; the inline hero script shrinks it to fit if needed */
.clc-hero__headline { white-space: nowrap; }

/* the hero headline is typed (a copy over the real headline, which stays for translations) */
.hero-typed { position: absolute; margin: 0; pointer-events: none; }
/* every letter of the copy appears at its own scheduled moment (animation-delay, set by the inline
   hero script) — played by the browser's graphics side, so the page's own loading cannot stall it.
   Each letter carries a cursor (::after, outside the text flow) that shows until the next letter. */
.hero-typed .ht-ch { position: relative; opacity: 0; animation: htIn 1ms linear forwards; }
@keyframes htIn { to { opacity: 1; } }
.hero-typed .ht-ch::after { content: ""; position: absolute; left: 100%; top: .1em; width: .07em; height: .86em; margin-left: .03em;
  background: currentColor; opacity: 0; animation: htCaret var(--cl, 24ms) linear var(--cd, 0ms) 1 none; }
@keyframes htCaret { from { opacity: 1; } to { opacity: 1; } }
/* html.hero-typing (set in the page's <head> before anything is drawn): the real headline and what
   follows it wait for the typing; when the class goes, the headline shows and the rest fades up */
html.hero-typing .clc-hero__headline:not(.hero-typed) { visibility: hidden; }
.clc-hero__sub, .clc-hero__cta { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.clc-hero__cta { transition-delay: .1s; }
html.hero-typing .clc-hero__sub, html.hero-typing .clc-hero__cta { opacity: 0; transform: translateY(12px); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-left, .rv-right, .rv-fast, .rv-rule, .rv-zoom, .rv-blur { opacity: 1; transform: none; filter: none; transition: none; }
  html.hero-typing .clc-hero__headline, html.hero-typing .clc-hero__sub, html.hero-typing .clc-hero__cta { visibility: visible; opacity: 1; transform: none; }
}