/* ==========================================================================
   BeART TM Motion
   --------------------------------------------------------------------------
   Pohyb je súčasťou reklamného remesla, ale nesmie stáť výkon. Preto len
   CSS a SVG: animuje sa výhradne transform, opacity a stroke-dashoffset —
   vlastnosti, ktoré prehliadač rieši na kompozítore, bez prepočtu layoutu.
   Žiadna knižnica, žiadny build step.

   Celý súbor rešpektuje prefers-reduced-motion: pri „reduce" sa nehýbe nič
   a obsah ostáva v koncovom, čitateľnom stave.
   ========================================================================== */

:root {
	/* Ostré, mechanické krivky — firma reže a tlačí presne, pohyb to má
	   odrážať. Žiadne mäkké „bounce" efekty. */
	--beart-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--beart-ease-sharp: cubic-bezier(0.22, 1, 0.36, 1);
	--beart-dur-fast: 140ms;
	--beart-dur-base: 260ms;
	--beart-dur-slow: 520ms;
	--beart-stagger: 70ms;
}

/* --------------------------------------------------------------------------
   Nábeh sekcií pri scrollovaní
   --------------------------------------------------------------------------
   Dve cesty k tomu istému: natívna scroll-driven animácia tam, kde ju
   prehliadač vie (bez JS vlákna), a IntersectionObserver z app.js ako
   záloha pre Firefox. Preto je základný stav skrytý len vtedy, keď je
   niektorá z ciest k dispozícii — inak by pri vypnutom JS ostal obsah
   neviditeľný.
   -------------------------------------------------------------------------- */
.beart-reveal {
	will-change: opacity, transform;
}

/* Skrývame výhradne pod `html.js` (triedu pridáva inline skript v header.php).
   Keď je JavaScript vypnutý, trieda nepribudne, `is-revealed` nemá kto nasadiť
   a obsah by ostal neviditeľný — presne to sa dialo, kým bolo `opacity: 0`
   v nepodmienenom pravidle. Overené snímkou s vypnutým JS. */
html.js .beart-reveal {
	opacity: 0;
	transform: translateY(26px);
}

/*
 * Odhalenie beží ako jednorazová ANIMÁCIA, nie transition. Dôvod: karty
 * (.beart-service-card, .beart-product-card-inner …) si neskôr v kaskáde nastavujú
 * vlastný hover `transition` (transform/box-shadow/border/background), ktorý
 * by ten reveal-transition prebil — a karta by sa objavila skokom namiesto
 * jemného nabehnutia. Animácia animuje len opacity a transform nezávisle od
 * hover transitionu; `backwards` znamená, že počas animation-delay drží
 * počiatočný (skrytý) kľúčový snímok a po dobehnutí odovzdá kontrolu späť
 * CSS hodnotám (.is-revealed) — takže hover po skončení funguje bez delay.
 */
html.js .beart-reveal.is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
	animation: beart-reveal-in var(--beart-dur-slow) var(--beart-ease-out) backwards;
}

html.no-js .beart-reveal,
.beart-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@keyframes beart-reveal-in {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Nábeh obsahu nad záhybom (hlavný článok, prvé karty mriežky) — čisto CSS,
   bez JS a bez opacity. Prvok je viditeľný od prvého vykreslenia, takže sa
   hneď započíta ako LCP; pohne sa len posunom. Pri reduce motion nič. */
@media (prefers-reduced-motion: no-preference) {
	.beart-enter {
		animation: beart-enter-in var(--beart-dur-slow) var(--beart-ease-out) backwards;
	}
}

@keyframes beart-enter-in {
	from {
		transform: translateY(18px);
	}
	to {
		transform: none;
	}
}

/* Postupné nabiehanie kariet za sebou — rytmus, nie chaos.
   Delay ide cez animation-delay, aby nepresakoval do hover transitionu. */
.beart-reveal--1 { animation-delay: calc(1 * var(--beart-stagger)); }
.beart-reveal--2 { animation-delay: calc(2 * var(--beart-stagger)); }
.beart-reveal--3 { animation-delay: calc(3 * var(--beart-stagger)); }
.beart-reveal--4 { animation-delay: calc(4 * var(--beart-stagger)); }
.beart-reveal--5 { animation-delay: calc(5 * var(--beart-stagger)); }
.beart-reveal--6 { animation-delay: calc(6 * var(--beart-stagger)); }

/* Scroll-driven varianta (animation-timeline: view()) je zámerne preč.
   Prvkom nad záhybom v Chrome nikdy nedobehla do konca — pri scrollTop 0
   stoja na začiatku fázy `entry`, takže hero aj prvý obrázok ostávali
   polopriehľadné, akoby ich prekrývala biela plocha. IntersectionObserver
   v app.js odhalí prvky vo viewporte hneď po načítaní a robí to spoľahlivo
   vo všetkých prehliadačoch. */

/* --------------------------------------------------------------------------
   Mikrointerakcie
   -------------------------------------------------------------------------- */

/* Podčiarknutie sa vykresľuje zľava doprava, nie „zjaví sa". */
.beart-nav-link,
.beart-card-link {
	position: relative;
}

.beart-nav-link::after,
.beart-card-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--beart-dur-base) var(--beart-ease-out);
}

.beart-nav-link:hover::after,
.beart-nav-link:focus-visible::after,
.beart-card-link:hover::after {
	transform: scaleX(1);
}

/* Karta sa pri priblížení jemne nadvihne. Maximálne 3 px — viac pôsobí lacno. */
.beart-service-card,
.beart-product-card-inner,
.beart-megamenu-col {
	transition:
		transform var(--beart-dur-base) var(--beart-ease-out),
		box-shadow var(--beart-dur-base) var(--beart-ease-out),
		border-color var(--beart-dur-base) ease,
		background-color var(--beart-dur-base) ease;
}

.beart-service-card:hover,
.beart-product-card-inner:hover {
	transform: translateY(-3px);
}

/* Rohové krížiky sa rozostúpia do rohov — orezové značky pri nastavovaní
   tlače. Drobnosť, ktorá poteší tlačiara aj oko. */
.beart-pass-corner,
.beart-upload-corner {
	transition:
		transform var(--beart-dur-base) var(--beart-ease-out),
		color var(--beart-dur-base) ease;
}

.beart-production-pass:hover .beart-pass-corner--tl,
.beart-upload-container:hover .beart-upload-corner--tl { transform: translate(-3px, -3px); }

.beart-production-pass:hover .beart-pass-corner--tr,
.beart-upload-container:hover .beart-upload-corner--tr { transform: translate(3px, -3px); }

.beart-production-pass:hover .beart-pass-corner--bl,
.beart-upload-container:hover .beart-upload-corner--bl { transform: translate(-3px, 3px); }

.beart-production-pass:hover .beart-pass-corner--br,
.beart-upload-container:hover .beart-upload-corner--br { transform: translate(3px, 3px); }

/* Dropzone pri pretiahnutí súboru zreteľne odpovie. */
.beart-dropzone.is-dragover {
	animation: beart-pulse 1.1s var(--beart-ease-out) infinite;
}

@keyframes beart-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.012); }
}

/* --------------------------------------------------------------------------
   Ikona pred veľkým nadpisom — ťahy sa raz „nakreslia"
   --------------------------------------------------------------------------
   Celý blok je pod `no-preference`: pri zapnutom „reduce motion" sa nenastaví
   ani stroke-dasharray, takže ikona sa vykreslí rovno celá a statická.

   Animuje sa výhradne stroke-dashoffset (ťahy), opacity a transform (doštička)
   — nič, čo by vyvolalo prepočet layoutu. Beží raz po načítaní, potom sa
   nehýbe nič; hover je jediná ďalšia reakcia.

   Dĺžka čiarky 110 je zvolená tak, aby bezpečne presahovala najdlhší ťah
   v sade (najdlhší obrys má ~70 jednotiek). Keby bola kratšia, dlhý obrys by
   sa na konci animácie nedokreslil a ostala by v ňom medzera.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	.beart-heading-icon {
		animation: beart-hicon-in var(--beart-dur-slow) var(--beart-ease-out) backwards;
		transition:
			transform var(--beart-dur-base) var(--beart-ease-out),
			border-color var(--beart-dur-base) ease;
	}

	.beart-heading-icon svg > * {
		stroke-dasharray: 110;
		stroke-dashoffset: 110;
		animation: beart-hicon-draw 950ms var(--beart-ease-sharp) 120ms forwards;
	}

	/* Hover na celom riadku nadpisu — ikona sa jemne nadvihne, nič viac. */
	.beart-title-row:hover .beart-heading-icon {
		transform: translateY(-2px) scale(1.03);
		border-color: var(--beart-line-strong);
	}
}

@keyframes beart-hicon-in {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes beart-hicon-draw {
	to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Prístupnosť
   --------------------------------------------------------------------------
   Fokus musí byť vidieť na každom interaktívnom prvku. Outline nikdy
   nerušíme bez náhrady.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--beart-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Respektovanie systémového nastavenia
   --------------------------------------------------------------------------
   Prebíja aj html { scroll-behavior: smooth } z main.css.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.beart-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Prechody medzi stránkami — natívne View Transitions (čisté CSS)
   --------------------------------------------------------------------------
   Žiadna knižnica: prehliadač sám prechodí medzi starým a novým stavom.
   Hlavička a pätička zostanú stabilné (verzia s view-transition-name),
   obsah sa jemne posunie. Pri prefers-reduced-motion sa celá funkcia
   vypne (prehliadač prejde bez animácie). Staré prehliadače bez podpory
   jednoducho zobrazia bežnú navigáciu.
   -------------------------------------------------------------------------- */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 360ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(root) {
	animation-name: beart-vt-out;
}

::view-transition-new(root) {
	animation-name: beart-vt-in;
}

@keyframes beart-vt-out {
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@keyframes beart-vt-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* Hlavička a pätička ostávajú na mieste — neprebiehajú spolu s obsahom. */
.beart-header {
	view-transition-name: beart-header;
}

.beart-footer {
	view-transition-name: beart-footer;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}


/* --------------------------------------------------------------------------
   Fotky v obsahu reagujú na kurzor
   --------------------------------------------------------------------------
   Rovnaká reč ako karty: rám sa nadvihne o 3 px a dostane tieň, obrázok
   vnútri sa jemne priblíži. Zväčšenie orezáva rodič (overflow: hidden),
   takže sa nič nevysunie z rámu a layout sa nehýbe — CLS ostáva 0.
   Animuje sa len transform a box-shadow, žiadny filter.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {

	.beart-single-content .wp-block-image,
	.beart-page-content .wp-block-image {
		transition:
			transform var(--beart-dur-base) var(--beart-ease-out),
			box-shadow var(--beart-dur-base) var(--beart-ease-out),
			border-color var(--beart-dur-base) ease;
	}

	.beart-single-content .wp-block-image img,
	.beart-page-content .wp-block-image img {
		transition: transform var(--beart-dur-slow) var(--beart-ease-out);
	}

	.beart-single-content .wp-block-image:hover,
	.beart-page-content .wp-block-image:hover {
		transform: translateY(-3px);
		box-shadow: var(--beart-shadow-card);
		border-color: var(--beart-border-hover);
	}

	.beart-single-content .wp-block-image:hover img,
	.beart-page-content .wp-block-image:hover img {
		transform: scale(1.04);
	}

	/* Náhľadová fotka je veľká plocha — stačí jej priblíženie, bez nadvihnutia. */
	.beart-single-featured-image img {
		transition: transform var(--beart-dur-slow) var(--beart-ease-out);
	}

	.beart-single-featured-image:hover img {
		transform: scale(1.03);
	}
}

/* Kontaktné karty reagujú rovnako ako ostatné karty — nadvihnutie a tieň. */
@media (hover: hover) and (pointer: fine) {

	.beart-contact-card {
		transition:
			transform var(--beart-dur-base) var(--beart-ease-out),
			box-shadow var(--beart-dur-base) var(--beart-ease-out),
			border-color var(--beart-dur-base) ease;
	}

	.beart-contact-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--beart-shadow-card);
		border-color: var(--beart-border-hover);
	}
}