/* ==========================================================
   Hyperion – Actions widget
   ========================================================== */

.hact {
	--hact-cols: 3;
	--hact-gap: 28px;
	--hact-fx: var( --e-global-color-primary, #6796ec );
	--hact-fx2: var( --e-global-color-accent, #abc1de );
	--hact-filter-active: var( --e-global-color-accent, #abc1de );
	--hact-lm-bg: rgba( 255, 255, 255, 0.04 );
	--hact-lm-bd: var( --e-global-color-primary, #6796ec );
}

/* ==========================================================
   Φίλτρα
   ========================================================== */

.hact__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.hact__filter-btn {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	padding: 9px 20px;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var( --e-global-color-text, #ffffff );
	transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	user-select: none;
}

/* Γέμισμα που σκάει από το κέντρο στο hover. */
.hact__filter-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var( --hact-filter-active );
	opacity: 0.14;
	transform: scaleX( 0 );
	transform-origin: center;
	transition: transform 0.35s cubic-bezier( 0.65, 0, 0.35, 1 );
}

.hact__filter-btn:hover::before,
.hact__filter-btn.is-active::before {
	transform: scaleX( 1 );
}

.hact__filter-btn:hover,
.hact__filter-btn.is-active {
	color: var( --hact-filter-active );
	border-color: var( --hact-filter-active );
	box-shadow: 0 0 16px -4px var( --hact-filter-active );
}

/* ==========================================================
   Grid & κάρτα
   ========================================================== */

.hact__grid {
	display: grid;
	grid-template-columns: repeat( var( --hact-cols, 3 ), 1fr );
	gap: var( --hact-gap, 28px );
	perspective: 1200px;
}

.hact__card {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background-color: var( --e-global-color-secondary, #343d46 );
	cursor: pointer;
	transform-style: preserve-3d;
	transition:
		transform 0.42s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.42s ease;
}

.hact__card.is-hidden {
	display: none;
}

/* ---------- Κίνηση κάρτας ---------- */

.hact--motion-lift .hact__card:hover {
	transform: translateY( -8px );
	box-shadow: 0 24px 48px -12px rgba( 0, 0, 0, 0.55 );
}

.hact--motion-zoom .hact__card:hover {
	transform: scale( 1.035 );
	box-shadow: 0 24px 48px -12px rgba( 0, 0, 0, 0.55 );
}

.hact--motion-tilt .hact__card:hover {
	transform: translateY( -6px ) rotateX( 5deg ) rotateY( -4deg );
	box-shadow: 0 30px 55px -14px rgba( 0, 0, 0, 0.6 );
}

/* ---------- Περίγραμμα που λάμπει ---------- */

.hact--border .hact__card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	border: 1px solid transparent;
	pointer-events: none;
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.hact--border .hact__card:hover::after {
	border-color: var( --hact-fx );
	box-shadow:
		inset 0 0 22px -10px var( --hact-fx ),
		0 0 24px -8px var( --hact-fx );
}

/* ---------- Διαγώνια λάμψη (holo sweep) ---------- */

.hact__shine {
	display: none;
}

.hact--shine .hact__shine {
	display: block;
	position: absolute;
	top: 0;
	left: -70%;
	width: 45%;
	height: 100%;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba( 255, 255, 255, 0.16 ) 40%,
		var( --hact-fx2 ) 50%,
		rgba( 255, 255, 255, 0.16 ) 60%,
		transparent 100%
	);
	opacity: 0.55;
	transform: skewX( -18deg );
	transition: left 0.7s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.hact--shine .hact__card:hover .hact__shine {
	left: 130%;
}

/* ---------- Γωνιακά άγκιστρα HUD ---------- */

.hact__hud {
	display: none;
}

.hact--hud .hact__hud {
	display: block;
	position: absolute;
	width: 18px;
	height: 18px;
	z-index: 6;
	pointer-events: none;
	border-color: var( --hact-fx );
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.hact__hud--tl { top: 12px; left: 12px; border-top: 2px solid; border-left: 2px solid; transform: translate( 6px, 6px ); }
.hact__hud--tr { top: 12px; right: 12px; border-top: 2px solid; border-right: 2px solid; transform: translate( -6px, 6px ); }
.hact__hud--bl { bottom: 12px; left: 12px; border-bottom: 2px solid; border-left: 2px solid; transform: translate( 6px, -6px ); }
.hact__hud--br { bottom: 12px; right: 12px; border-bottom: 2px solid; border-right: 2px solid; transform: translate( -6px, -6px ); }

.hact--hud .hact__card:hover .hact__hud {
	opacity: 0.9;
	transform: translate( 0, 0 );
}

/* ==========================================================
   Εικόνα
   ========================================================== */

.hact__card-img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba( 255, 255, 255, 0.04 );
}

.hact__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.65s cubic-bezier( 0.22, 1, 0.36, 1 ), filter 0.5s ease;
}

.hact--img-zoom .hact__card:hover .hact__card-img img {
	transform: scale( 1.09 );
}

.hact--img-zoomrot .hact__card:hover .hact__card-img img {
	transform: scale( 1.12 ) rotate( 1.6deg );
}

.hact--img-saturate .hact__card-img img {
	filter: grayscale( 1 ) contrast( 1.05 );
}

.hact--img-saturate .hact__card:hover .hact__card-img img {
	filter: grayscale( 0 ) contrast( 1 );
	transform: scale( 1.05 );
}

/* Πέπλο που σκουραίνει στο hover — δίνει βάθος στο κείμενο. */

.hact__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba( 0, 0, 0, 0 ) 35%,
		rgba( 0, 0, 0, 0.55 ) 100%
	);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.hact__card:hover .hact__veil {
	opacity: 1;
}

/* ---------- Scanline πάνω στην εικόνα ---------- */

.hact__scanline {
	display: none;
}

.hact--scan .hact__scanline {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: -40%;
	height: 40%;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		transparent 0%,
		var( --hact-fx ) 50%,
		transparent 100%
	);
	opacity: 0;
	mix-blend-mode: screen;
}

.hact--scan .hact__card:hover .hact__scanline {
	opacity: 0.35;
	animation: hact-scan 1.6s cubic-bezier( 0.5, 0, 0.5, 1 ) infinite;
}

@keyframes hact-scan {
	0%   { top: -40%; }
	100% { top: 105%; }
}

/* ---------- Πλέγμα πάνω στην εικόνα ---------- */

.hact__mesh {
	display: none;
}

.hact--grid .hact__mesh {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient( var( --hact-fx ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --hact-fx ) 1px, transparent 1px );
	background-size: 26px 26px;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.hact--grid .hact__card:hover .hact__mesh {
	opacity: 0.14;
}

/* ---------- Αριθμός κάρτας ---------- */

.hact__num {
	display: none;
}

.hact--number .hact__num {
	display: block;
	position: absolute;
	top: 14px;
	left: 16px;
	z-index: 3;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var( --hact-fx );
	text-shadow: 0 0 10px rgba( 0, 0, 0, 0.6 );
	opacity: 0.85;
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.hact--number .hact__card:hover .hact__num {
	opacity: 1;
	transform: translateY( -3px );
}

/* ==========================================================
   Σώμα κάρτας
   ========================================================== */

.hact__card-body {
	position: relative;
	z-index: 3;
	padding: 20px 22px 26px;
}

.hact__cat {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var( --e-global-color-accent, #abc1de );
	transition: letter-spacing 0.4s ease;
}

.hact__card:hover .hact__cat {
	letter-spacing: 2.6px;
}

.hact__title {
	position: relative;
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: #ffffff;
	transition: color 0.3s ease, transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hact__card:hover .hact__title {
	transform: translateX( 3px );
}

/* ---------- Glitch στον τίτλο ---------- */

.hact--glitch .hact__card:hover .hact__title {
	animation: hact-glitch 0.36s steps( 2, end ) 1;
}

@keyframes hact-glitch {
	0%   { text-shadow: none; }
	25%  { text-shadow: -2px 0 var( --hact-fx2 ), 2px 0 var( --hact-fx ); transform: translateX( 2px ); }
	50%  { text-shadow: 2px 0 var( --hact-fx2 ), -2px 0 var( --hact-fx ); transform: translateX( -2px ); }
	75%  { text-shadow: -1px 0 var( --hact-fx ); transform: translateX( 1px ); }
	100% { text-shadow: none; transform: translateX( 3px ); }
}

/* ---------- Κουμπί που εμφανίζεται στο hover ---------- */

.hact__card-cta {
	display: none;
}

.hact--cta .hact__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 0;
	max-height: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 0;
	transform: translateY( 8px );
	transition:
		max-height 0.4s ease,
		margin-top 0.4s ease,
		opacity 0.35s ease 0.05s,
		transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.05s;
}

.hact--cta .hact__card:hover .hact__card-cta {
	max-height: 40px;
	margin-top: 14px;
	opacity: 1;
	transform: translateY( 0 );
}

.hact__arrow {
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var( --hr-ico-arrow-right ) center / contain no-repeat;
	mask: var( --hr-ico-arrow-right ) center / contain no-repeat;
	transition: transform 0.3s ease;
}

.hact--cta .hact__card:hover .hact__arrow {
	animation: hact-arrow 1.2s ease-in-out infinite;
}

@keyframes hact-arrow {
	0%, 100% { transform: translateX( 0 ); }
	50%      { transform: translateX( 5px ); }
}

/* ---------- Είσοδος καρτών με scroll ---------- */

.hact--reveal .hact__card {
	opacity: 0;
	transform: translateY( 28px );
}

.hact--reveal .hact__card.is-in {
	opacity: 1;
	transform: translateY( 0 );
	transition:
		opacity 0.6s ease calc( var( --hact-i, 0 ) * 0.08s ),
		transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) calc( var( --hact-i, 0 ) * 0.08s );
}

/* Στον editor του Elementor οι κάρτες πρέπει να φαίνονται πάντα. */
.elementor-editor-active .hact--reveal .hact__card {
	opacity: 1;
	transform: none;
}

/* ==========================================================
   Κουμπί «Φόρτωσε περισσότερα»
   ========================================================== */

/* Οι κάρτες πέρα από το όριο κρύβονται από το JS. */
.hact__card.is-over {
	display: none;
}

.hact__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.hact__more-wrap.is-done {
	display: none;
}

.hact .hact__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 14px 30px;
	background-color: var( --hact-lm-bg );
	background-image: none;
	border: 1px solid var( --hact-lm-bd );
	border-radius: 999px;
	box-shadow: none;
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease, gap 0.25s ease;
}

.hact .hact__more::after {
	content: none;
}

/* Λάμψη που διασχίζει το κουμπί στο hover. */
.hact .hact__more::before {
	content: '';
	position: absolute;
	top: 0;
	left: -70%;
	width: 45%;
	height: 100%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.2 ) 50%, transparent );
	transform: skewX( -18deg );
	transition: left 0.7s cubic-bezier( 0.4, 0, 0.2, 1 );
	pointer-events: none;
}

.hact .hact__more:hover {
	gap: 15px;
	transform: translateY( -2px );
	background-color: rgba( 255, 255, 255, 0.07 );
	box-shadow: 0 12px 30px -14px var( --hact-lm-bd ), 0 0 24px -12px var( --hact-lm-bd );
}

.hact .hact__more:hover::before {
	left: 130%;
}

.hact__more-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	opacity: 0.6;
}

/* Βέλος προς τα κάτω, με μικρό σκίρτημα. */
.hact__more-ico {
	display: block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var( --hr-ico-arrow-down ) center / contain no-repeat;
	mask: var( --hr-ico-arrow-down ) center / contain no-repeat;
	animation: hact-more-bob 2.2s ease-in-out infinite;
}

@keyframes hact-more-bob {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( 3px ); }
}

/* Οι νέες κάρτες μπαίνουν με fade, όχι απότομα. */
.hact__card.is-new {
	animation: hact-more-in 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ) backwards;
}

@keyframes hact-more-in {
	from { opacity: 0; transform: translateY( 20px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* ==========================================================
   Modal
   ========================================================== */

.hact-modal {
	--hact-modal-blur: 20px;
	--hact-thumb: 68px;
	--hact-thumb-active: var( --e-global-color-primary, #6796ec );
	--hact-bold: #a048fb;
	--hact-link: var( --e-global-color-primary, #6796ec );
	--hact-h: #ffffff;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
}

.hact-modal.is-open {
	display: flex;
}

.hact-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba( 3, 6, 10, 0.6 );
	backdrop-filter: blur( 5px );
	animation: hact-fade 0.3s ease forwards;
}

@keyframes hact-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.hact-modal__dialog {
	position: relative;
	margin: auto;
	width: min( 1100px, 100% );
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	background-color: rgba( 14, 17, 22, 0.72 );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba( 0, 0, 0, 0.7 );
	animation: hact-modal-in 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ) forwards;
}

.hact-modal--glass .hact-modal__dialog {
	backdrop-filter: blur( var( --hact-modal-blur ) ) saturate( 165% );
	-webkit-backdrop-filter: blur( var( --hact-modal-blur ) ) saturate( 165% );
}

@keyframes hact-modal-in {
	from { opacity: 0; transform: translateY( 24px ) scale( 0.97 ); }
	to   { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}

/* ==========================================================
   Άγκιστρα HUD του modal — «ζωντανά»
   Σχεδιάζονται όταν ανοίγει, αναπνέουν συνεχώς και ανοίγουν
   προς τις γωνίες όταν ο δείκτης είναι πάνω στο modal.
   ========================================================== */

.hact-modal__hud {
	position: absolute;
	width: 30px;
	height: 30px;
	z-index: 12;
	pointer-events: none;
	border-color: var( --hact-link );
	opacity: 0;
	filter: drop-shadow( 0 0 6px var( --hact-link ) );
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 0.3s ease;
}

.hact-modal.is-open .hact-modal__hud {
	animation:
		hact-hud-draw 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ) forwards,
		hact-hud-breathe 3.2s ease-in-out 1s infinite;
}

.hact-modal.is-open .hact-modal__hud--tl { animation-delay: 0.28s, 1.0s; }
.hact-modal.is-open .hact-modal__hud--tr { animation-delay: 0.36s, 1.1s; }
.hact-modal.is-open .hact-modal__hud--bl { animation-delay: 0.44s, 1.2s; }
.hact-modal.is-open .hact-modal__hud--br { animation-delay: 0.52s, 1.3s; }

.hact-modal__hud--tl { top: 14px; left: 14px;  border-top: 2px solid; border-left: 2px solid;  border-top-left-radius: 6px; }
.hact-modal__hud--tr { top: 14px; right: 14px; border-top: 2px solid; border-right: 2px solid; border-top-right-radius: 6px; }
.hact-modal__hud--bl { bottom: 14px; left: 14px;  border-bottom: 2px solid; border-left: 2px solid;  border-bottom-left-radius: 6px; }
.hact-modal__hud--br { bottom: 14px; right: 14px; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: 6px; }

/* Στο hover του modal οι γωνίες «ανοίγουν» προς τα έξω. */
.hact-modal__dialog:hover .hact-modal__hud--tl { transform: translate( -5px, -5px ); }
.hact-modal__dialog:hover .hact-modal__hud--tr { transform: translate( 5px, -5px ); }
.hact-modal__dialog:hover .hact-modal__hud--bl { transform: translate( -5px, 5px ); }
.hact-modal__dialog:hover .hact-modal__hud--br { transform: translate( 5px, 5px ); }

@keyframes hact-hud-draw {
	from { opacity: 0; clip-path: inset( 0 100% 100% 0 ); }
	to   { opacity: 0.85; clip-path: inset( 0 0 0 0 ); }
}

@keyframes hact-hud-breathe {
	0%, 100% { opacity: 0.85; }
	50%      { opacity: 0.4; }
}

/* Ίδια λογική με το hamburger: τα <button> μας δέχονται κανόνες
   του Elementor kit / θέματος, οπότε γράφουμε με ειδικότητα 0,2,0
   και μηδενίζουμε ρητά ό,τι μπορεί να κληρονομηθεί. */

.hact-modal .hact-modal__close,
.hact-modal .hact-modal__nav {
	margin: 0;
	padding: 0;
	min-width: 0;
	min-height: 0;
	background-image: none;
	text-shadow: none;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	font-size: 0;
	line-height: 0;
}

.hact-modal .hact-modal__close::before,
.hact-modal .hact-modal__close::after,
.hact-modal .hact-modal__nav::before {
	content: '';
}

.hact-modal .hact-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	background-color: rgba( 255, 255, 255, 0.06 );
	color: rgba( 255, 255, 255, 0.85 );
	cursor: pointer;
	z-index: 13;
	display: grid;
	place-items: center;
	box-shadow: none;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.hact-modal .hact-modal__close::before,
.hact-modal .hact-modal__close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 2px;
	margin: -1px 0 0 -7.5px;
	background: currentColor;
	border-radius: 2px;
}

.hact-modal .hact-modal__close::before { transform: rotate( 45deg ); }
.hact-modal .hact-modal__close::after  { transform: rotate( -45deg ); }

.hact-modal .hact-modal__close:hover {
	transform: rotate( 90deg );
	background-color: rgba( 255, 60, 60, 0.22 );
}

.hact-modal__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	flex: 1;
	min-height: 0;
}

.hact-modal--top .hact-modal__grid {
	/* Το control «Πλάτος Στήλης Εικόνας» γράφει `grid-template-columns`
	   με selector `.hact-modal[data-hact-id] .hact-modal__grid`, που έχει
	   μεγαλύτερη specificity από εδώ. Χωρίς το !important το modal έμενε
	   δίστηλο στον υπολογιστή. Το control αφορά μόνο το «Εικόνα Πλάι». */
	grid-template-columns: 100% !important;
	grid-template-rows: auto 1fr;
}

/* Override πλάτους στήλης ανά project. Η class μπαίνει από τη JS μόνο
   όταν το project ορίζει δική του τιμή — αλλιώς ισχύει η καθολική. */
.hact-modal--colovr .hact-modal__grid {
	grid-template-columns: var( --hact-media-col, 1.1fr ) 1fr !important;
}

/* Πλαφόν ύψους και στο «Εικόνα Πλάι». Εδώ το fallback είναι `none`:
   χωρίς ρύθμιση η στήλη συμπεριφέρεται όπως πάντα, δηλαδή τεντώνεται
   όσο το κείμενο. Στο «Εικόνα Πάνω» το fallback είναι 15em. */
.hact-modal--side .hact-modal__media {
	max-height: var( --hact-media-maxh, none );
}

/* ----------------------------------------------------------
   Layout «Εικόνα Πάνω» — μπάνερ πλήρους πλάτους
   ----------------------------------------------------------
   Μία στήλη: η φωτογραφία τέρμα πάνω σε όλο το πλάτος, το κείμενο
   από κάτω. Το κάδρο κρατάει σταθερή αναλογία (--hact-img-ar,
   προεπιλογή 16/9) και δεν κόβεται ποτέ δεξιά/αριστερά. Κόβεται
   μόνο κατακόρυφα, και το σημείο της κοπής το ορίζει το
   --hact-img-y (0% = πάνω μέρος, 50% = κέντρο, 100% = κάτω).
   Και τα δύο τα δίνει το widget ανά project. */

.hact-modal--top .hact-modal__media {
	height: auto;
	/* Πλαφόν ύψους. Ό,τι περισσεύει από την αναλογία κόβεται πάνω/κάτω
	   (το media έχει ήδη overflow: hidden), με βάση το --hact-img-y. */
	max-height: var( --hact-media-maxh, 15em );
}

/* Με τα thumbnails κάτω από την εικόνα, το πλαφόν πάει στο stage:
   στο media θα έτρωγε τη λωρίδα των thumbnails. */
.hact-modal--top.hact-modal--gal-below .hact-modal__media {
	max-height: none;
}

.hact-modal--top.hact-modal--gal-below .hact-modal__stage {
	max-height: var( --hact-media-maxh, 15em );
}

.hact-modal--top .hact-modal__stage,
.hact-modal--top.hact-modal--gal-overlay .hact-modal__stage {
	flex: 0 0 auto;
	width: 100%;
	height: auto;
	aspect-ratio: var( --hact-img-ar, 16 / 9 );
	/* Το ίδιο πλαφόν και εδώ: αλλιώς το κάδρο της αναλογίας ξεπερνάει
	   το max-height του media και η εικόνα κόβεται από κάτω. */
	max-height: var( --hact-media-maxh, 15em );
	overflow: hidden;
}

.hact-modal--top .hact-modal__img {
	width: 100%;
	height: 100%;
}

/* ==========================================================
   Αριστερή στήλη — εικόνα + συλλογή
   ========================================================== */

.hact-modal__media {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	background: rgba( 0, 0, 0, 0.25 );
	overflow: hidden;
}

.hact-modal__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.hact-modal__img {
	display: block;
	width: 100%;
	height: 100%;
	/* `contain` = ολόκληρη η φωτογραφία μέσα στο κάδρο, χωρίς κόψιμο.
	   Με `cover` γεμίζει το κάδρο και κόβεται ό,τι περισσεύει.
	   Οι δύο στοιχίσεις ορίζουν πού κάθεται η εικόνα μέσα στο κάδρο και,
	   ταυτόχρονα, το κέντρο του zoom. */
	object-fit: var( --hact-img-fit, contain );
	object-position: var( --hact-img-x, 50% ) var( --hact-img-y, 50% );
	border-radius: var( --hact-img-radius, 0px );
	transform-origin: var( --hact-img-x, 50% ) var( --hact-img-y, 50% );
	animation: hact-img-in 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) forwards;
}

.hact-modal__stage {
	padding: var( --hact-img-pad, 0px );
	background: var( --hact-img-bg, transparent );
	box-sizing: border-box;
}

.hact-modal__img.is-swapping {
	animation: hact-img-swap 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ) forwards;
}

/* Το zoom μπαίνει μέσα στα keyframes: τα animations έχουν `forwards`,
   οπότε ένα σκέτο `transform: scale()` στο .hact-modal__img θα το έσβηνε
   η τελική κατάσταση του animation. */
@keyframes hact-img-in {
	from { transform: scale( calc( var( --hact-img-zoom, 1 ) * 1.08 ) ); opacity: 0.4; }
	to   { transform: scale( var( --hact-img-zoom, 1 ) ); opacity: 1; }
}

@keyframes hact-img-swap {
	from { transform: scale( calc( var( --hact-img-zoom, 1 ) * 1.05 ) ); opacity: 0.25; filter: blur( 6px ); }
	to   { transform: scale( var( --hact-img-zoom, 1 ) ); opacity: 1; filter: blur( 0 ); }
}

/* ---------- Μετρητής ---------- */

.hact-modal__count {
	display: none;
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 6;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba( 6, 9, 13, 0.72 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	border: 1px solid var( --hact-thumb-active );
	box-shadow: 0 0 18px -6px var( --hact-thumb-active );
	color: rgba( 255, 255, 255, 0.7 );
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	line-height: 1;
	white-space: nowrap;
	animation: hact-count-in 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.25s backwards;
}

@keyframes hact-count-in {
	from { opacity: 0; transform: translateY( -8px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.hact-modal--count.has-gallery .hact-modal__count {
	display: block;
}

.hact-modal__count b {
	color: var( --hact-thumb-active );
	font-weight: 800;
}

/* ---------- Βελάκια πλοήγησης ---------- */

.hact-modal .hact-modal__nav {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 6;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	background-color: rgba( 0, 0, 0, 0.45 );
	background-image: none;
	backdrop-filter: blur( 8px );
	box-shadow: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.28s ease, background 0.25s ease, transform 0.25s ease;
}

.hact-modal--nav.has-gallery .hact-modal__nav {
	display: block;
}

.hact-modal__media:hover .hact-modal__nav {
	opacity: 1;
}

/* Το βελάκι είναι γωνία (δύο πλευρές τετραγώνου). Το οπτικό του
   κέντρο δεν συμπίπτει με το κέντρο του πλαισίου, γι' αυτό η
   μετατόπιση μπαίνει ΠΡΙΝ την περιστροφή και είναι ασύμμετρη. */
.hact-modal .hact-modal__nav::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	border-radius: 1px;
	color: #ffffff;
}

.hact-modal .hact-modal__nav--prev { left: 14px; }
.hact-modal .hact-modal__nav--next { right: 14px; }

.hact-modal .hact-modal__nav--prev::before { transform: translate( -35%, -50% ) rotate( -135deg ); }
.hact-modal .hact-modal__nav--next::before { transform: translate( -65%, -50% ) rotate( 45deg ); }

.hact-modal .hact-modal__nav:hover {
	background-color: var( --hact-thumb-active );
	transform: scale( 1.08 );
}

/* ---------- Λωρίδα thumbnails ---------- */

.hact-modal__thumbs {
	display: none;
	justify-content: center;
	gap: 9px;
	padding: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba( 255, 255, 255, 0.3 ) transparent;
}

.hact-modal.has-gallery .hact-modal__thumbs {
	display: flex;
}

/* Με πολλά thumbnails το κεντράρισμα θα έκοβε το πρώτο κατά το scroll·
   το `safe` κρατάει την αρχή πάντα προσβάσιμη. */
.hact-modal__thumbs {
	justify-content: safe center;
}

.hact-modal__thumbs::-webkit-scrollbar { height: 5px; }
.hact-modal__thumbs::-webkit-scrollbar-track { background: transparent; }
.hact-modal__thumbs::-webkit-scrollbar-thumb { background: rgba( 255, 255, 255, 0.28 ); border-radius: 10px; }

/* Παραλλαγή: λωρίδα πάνω στην εικόνα, με glass φόντο. */
.hact-modal--gal-overlay .hact-modal__thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	background: linear-gradient( 180deg, transparent, rgba( 0, 0, 0, 0.55 ) 45% );
	backdrop-filter: blur( 6px );
}

.hact-modal--gal-overlay .hact-modal__media {
	display: block;
}

.hact-modal--gal-overlay .hact-modal__stage {
	height: 100%;
}

/* Παραλλαγή: λωρίδα κάτω από την εικόνα. */
.hact-modal--gal-below .hact-modal__thumbs {
	flex: 0 0 auto;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	background: rgba( 0, 0, 0, 0.3 );
}

/* ==========================================================
   Πλευρά των thumbnails — πάνω / κάτω / αριστερά / δεξιά
   ==========================================================
   Το `--gs-*` ορίζεται ανά project. Στο «Έξω από την εικόνα»
   αλλάζει η φορά του flex του media· στο «Πάνω στην εικόνα»
   αλλάζει η θέση της απόλυτης λωρίδας. */

/* ---------- Έξω από την εικόνα ---------- */

.hact-modal--gal-below.hact-modal--gs-top .hact-modal__media {
	flex-direction: column-reverse;
}

.hact-modal--gal-below.hact-modal--gs-top .hact-modal__thumbs {
	border-top: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
}

.hact-modal--gal-below.hact-modal--gs-left .hact-modal__media {
	flex-direction: row-reverse;
}

.hact-modal--gal-below.hact-modal--gs-right .hact-modal__media {
	flex-direction: row;
}

.hact-modal--gal-below.hact-modal--gs-left .hact-modal__thumbs,
.hact-modal--gal-below.hact-modal--gs-right .hact-modal__thumbs {
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	border-top: 0;
}

.hact-modal--gal-below.hact-modal--gs-left .hact-modal__thumbs {
	border-right: 1px solid rgba( 255, 255, 255, 0.08 );
}

.hact-modal--gal-below.hact-modal--gs-right .hact-modal__thumbs {
	border-left: 1px solid rgba( 255, 255, 255, 0.08 );
}

/* Με τη λωρίδα στο πλάι, το stage δεν πρέπει να έχει κλειδωμένο ύψος
   γραμμής — μοιράζονται το πλάτος. */
.hact-modal--gal-below.hact-modal--gs-left .hact-modal__stage,
.hact-modal--gal-below.hact-modal--gs-right .hact-modal__stage {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Πάνω στην εικόνα ---------- */

.hact-modal--gal-overlay.hact-modal--gs-top .hact-modal__thumbs {
	top: 0;
	bottom: auto;
	background: linear-gradient( 0deg, transparent, rgba( 0, 0, 0, 0.55 ) 45% );
}

.hact-modal--gal-overlay.hact-modal--gs-left .hact-modal__thumbs,
.hact-modal--gal-overlay.hact-modal--gs-right .hact-modal__thumbs {
	top: 0;
	bottom: 0;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}

.hact-modal--gal-overlay.hact-modal--gs-left .hact-modal__thumbs {
	right: auto;
	background: linear-gradient( 90deg, rgba( 0, 0, 0, 0.55 ) 45%, transparent );
}

.hact-modal--gal-overlay.hact-modal--gs-right .hact-modal__thumbs {
	left: auto;
	background: linear-gradient( 270deg, rgba( 0, 0, 0, 0.55 ) 45%, transparent );
}

/* ---------- Χωρίς thumbnails ---------- */

.hact-modal--gal-off.has-gallery .hact-modal__thumbs {
	display: none;
}

.hact__thumb {
	flex: 0 0 auto;
	width: var( --hact-thumb );
	height: var( --hact-thumb );
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	opacity: 0.55;
	border: 2px solid transparent;
	transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.hact__thumb:hover {
	opacity: 1;
	transform: translateY( -3px );
}

.hact__thumb.is-active {
	opacity: 1;
	border-color: var( --hact-thumb-active );
	box-shadow: 0 0 14px -3px var( --hact-thumb-active );
}

.hact-modal__body {
	padding: 44px;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: rgba( 255, 255, 255, 0.85 );
	scrollbar-width: thin;
	scrollbar-color: rgba( 255, 255, 255, 0.22 ) transparent;
}

/* Η προεπιλεγμένη μπάρα κύλισης χαλάει το glass ύφος. */
.hact-modal__body::-webkit-scrollbar {
	width: 6px;
}

.hact-modal__body::-webkit-scrollbar-track {
	background: transparent;
}

.hact-modal__body::-webkit-scrollbar-thumb {
	background: rgba( 255, 255, 255, 0.2 );
	border-radius: 10px;
}

.hact-modal__body::-webkit-scrollbar-thumb:hover {
	background: var( --hact-link );
}

/* ==========================================================
   Κλιμακωτή είσοδος περιεχομένου
   Κάθε κομμάτι μπαίνει λίγο μετά το προηγούμενο, ώστε το modal
   να «χτίζεται» μπροστά στα μάτια αντί να εμφανίζεται ξερά.
   ========================================================== */

.hact-modal.is-open .hact-modal__cat,
.hact-modal.is-open .hact-modal__title,
.hact-modal.is-open .hact-modal__desc,
.hact-modal.is-open .hact-modal__cta {
	animation: hact-up 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ) backwards;
}

.hact-modal.is-open .hact-modal__cat   { animation-delay: 0.14s; }
.hact-modal.is-open .hact-modal__title { animation-delay: 0.20s; }
.hact-modal.is-open .hact-modal__desc  { animation-delay: 0.28s; }
.hact-modal.is-open .hact-modal__cta   { animation-delay: 0.36s; }

@keyframes hact-up {
	from { opacity: 0; transform: translateY( 16px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

/* Τα thumbnails μπαίνουν το ένα μετά το άλλο. */
.hact-modal.is-open .hact__thumb {
	animation: hact-thumb-in 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ) backwards;
}

.hact-modal.is-open .hact__thumb:nth-child( 1 ) { animation-delay: 0.30s; }
.hact-modal.is-open .hact__thumb:nth-child( 2 ) { animation-delay: 0.35s; }
.hact-modal.is-open .hact__thumb:nth-child( 3 ) { animation-delay: 0.40s; }
.hact-modal.is-open .hact__thumb:nth-child( 4 ) { animation-delay: 0.45s; }
.hact-modal.is-open .hact__thumb:nth-child( 5 ) { animation-delay: 0.50s; }
.hact-modal.is-open .hact__thumb:nth-child( n + 6 ) { animation-delay: 0.55s; }

@keyframes hact-thumb-in {
	from { opacity: 0; transform: translateY( 14px ) scale( 0.85 ); }
	to   { opacity: 0.55; transform: translateY( 0 ) scale( 1 ); }
}

.hact-modal__cat {
	position: relative;
	display: inline-block;
	margin: 0 0 10px;
	padding-left: 26px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.6 );
}

/* Γραμμούλα που «τραβιέται» πριν την ετικέτα. */
.hact-modal__cat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 2px;
	background: var( --hact-link );
	box-shadow: 0 0 8px var( --hact-link );
	transform-origin: left center;
}

.hact-modal.is-open .hact-modal__cat::before {
	animation: hact-line 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) 0.3s backwards;
}

@keyframes hact-line {
	from { transform: scaleX( 0 ); }
	to   { transform: scaleX( 1 ); }
}

.hact-modal__title {
	position: relative;
	margin: 0 0 18px;
	font-size: 30px;
	line-height: 1.25;
	color: #ffffff;
}

/* Λάμψη που περνά μία φορά πάνω από τον τίτλο μόλις ανοίξει. */
.hact-modal.is-open .hact-modal__title::after {
	content: '';
	position: absolute;
	inset: -4px -10px;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 40%,
		rgba( 255, 255, 255, 0.28 ) 50%,
		transparent 60%
	);
	animation: hact-title-sweep 1.1s ease 0.45s backwards;
}

@keyframes hact-title-sweep {
	from { transform: translateX( -110% ); opacity: 1; }
	to   { transform: translateX( 110% ); opacity: 0; }
}

/* ==========================================================
   Περιγραφή — σέβεται πλήρως τη μορφοποίηση του editor
   ========================================================== */

.hact-modal__desc {
	line-height: 1.75;
	font-size: 15px;
	color: rgba( 255, 255, 255, 0.85 );
	margin-bottom: 26px;
}

.hact-modal__desc > :first-child { margin-top: 0; }
.hact-modal__desc > :last-child  { margin-bottom: 0; }

.hact-modal__desc p { margin: 0 0 1em; }

.hact-modal__desc strong,
.hact-modal__desc b {
	color: var( --hact-bold );
	font-weight: 700;
}

.hact-modal__desc em,
.hact-modal__desc i {
	font-style: italic;
}

.hact-modal__desc u { text-decoration: underline; }
.hact-modal__desc s,
.hact-modal__desc del { text-decoration: line-through; opacity: 0.7; }

.hact-modal__desc a {
	color: var( --hact-link );
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.hact-modal__desc a:hover { opacity: 0.75; }

.hact-modal__desc h1,
.hact-modal__desc h2,
.hact-modal__desc h3,
.hact-modal__desc h4,
.hact-modal__desc h5,
.hact-modal__desc h6 {
	color: var( --hact-h );
	line-height: 1.3;
	margin: 1.4em 0 0.5em;
	font-weight: 800;
}

.hact-modal__desc h1 { font-size: 1.7em; }
.hact-modal__desc h2 { font-size: 1.45em; }
.hact-modal__desc h3 { font-size: 1.25em; }
.hact-modal__desc h4 { font-size: 1.1em; }
.hact-modal__desc h5,
.hact-modal__desc h6 { font-size: 1em; letter-spacing: 1px; text-transform: uppercase; }

.hact-modal__desc ul,
.hact-modal__desc ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.hact-modal__desc ul { list-style: none; padding-left: 0; }

.hact-modal__desc ul > li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.55em;
}

/* Κουκκίδα λίστας σε σχήμα βέλους — δένει με το tech ύφος. */
.hact-modal__desc ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 11px;
	height: 11px;
	background-color: var( --hact-link );
	-webkit-mask: var( --hr-ico-arrow-right ) center / contain no-repeat;
	mask: var( --hr-ico-arrow-right ) center / contain no-repeat;
}

.hact-modal__desc ol > li { margin-bottom: 0.55em; }
.hact-modal__desc ol > li::marker { color: var( --hact-link ); font-weight: 700; }

.hact-modal__desc blockquote {
	margin: 1.2em 0;
	padding: 4px 0 4px 18px;
	border-left: 2px solid var( --hact-link );
	font-style: italic;
	color: rgba( 255, 255, 255, 0.75 );
}

.hact-modal__desc code {
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba( 255, 255, 255, 0.09 );
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	color: var( --hact-link );
}

.hact-modal__desc pre {
	margin: 1.2em 0;
	padding: 16px;
	border-radius: 10px;
	background: rgba( 0, 0, 0, 0.4 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	overflow-x: auto;
}

.hact-modal__desc pre code { background: none; padding: 0; }

.hact-modal__desc img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 0.6em 0;
}

.hact-modal__desc hr {
	margin: 1.6em 0;
	border: 0;
	height: 1px;
	background: linear-gradient( 90deg, var( --hact-link ), transparent );
}

.hact-modal__desc table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: 0.94em;
}

.hact-modal__desc th,
.hact-modal__desc td {
	padding: 9px 12px;
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	text-align: left;
}

.hact-modal__desc th {
	background: rgba( 255, 255, 255, 0.05 );
	color: #ffffff;
	font-weight: 700;
}

/* ---------- CTA modal ---------- */

.hact-modal__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	background: var( --e-global-color-primary, #6796ec );
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hact-modal__cta:hover {
	transform: translateY( -2px );
	box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.35 );
}

.hact-modal__cta.is-hidden {
	display: none;
}

@media ( max-width: 860px ) {
	.hact-modal {
		padding: 12px;
	}

	.hact-modal__grid,
	.hact-modal--top .hact-modal__grid {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto 1fr;
	}

	.hact-modal__dialog {
		max-height: 92vh;
		height: auto;
	}

	/* Σε στενή οθόνη η λωρίδα πάει πάντα κάτω από την εικόνα —
	   πάνω της θα έκρυβε πολύ μεγάλο μέρος του κάδρου. */
	.hact-modal__media,
	.hact-modal--gal-overlay .hact-modal__media {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.hact-modal__stage,
	.hact-modal--gal-overlay .hact-modal__stage {
		flex: 0 0 auto;
		height: 46vw;
		min-height: 200px;
		max-height: 300px;
	}

	/* Στο «Εικόνα Πάνω» κρατάμε την αναλογία και σε μικρή οθόνη. Το πλαφόν
	   του project δεν ξεπερνάει το 45vh, αλλιώς σε στενή οθόνη η φωτογραφία
	   θα έπιανε όλο το modal και δεν θα φαινόταν κείμενο. */
	.hact-modal--top .hact-modal__stage,
	.hact-modal--top.hact-modal--gal-overlay .hact-modal__stage {
		height: auto;
		min-height: 0;
		max-height: min( var( --hact-media-maxh, 15em ), 45vh );
	}

	.hact-modal--top .hact-modal__media {
		max-height: min( var( --hact-media-maxh, 15em ), 45vh );
	}

	.hact-modal--gal-overlay .hact-modal__thumbs {
		position: static;
		background: rgba( 0, 0, 0, 0.3 );
		border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	}

	/* Λωρίδα στο πλάι σε στενή οθόνη θα έτρωγε το μισό πλάτος της
	   εικόνας — την ξαναρίχνουμε κάτω. */
	.hact-modal--gs-left .hact-modal__media,
	.hact-modal--gs-right .hact-modal__media {
		flex-direction: column;
	}

	.hact-modal--gs-left .hact-modal__thumbs,
	.hact-modal--gs-right .hact-modal__thumbs {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		border-left: 0;
		border-right: 0;
	}

	/* Τα βελάκια είναι πάντα ορατά σε touch — δεν υπάρχει hover. */
	.hact-modal--nav.has-gallery .hact-modal__nav {
		opacity: 1;
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}

	.hact-modal__close {
		top: 10px;
		right: 10px;
		width: 34px;
		height: 34px;
	}

	.hact-modal__title { font-size: 23px; }
	.hact-modal__hud   { display: none; }
}

@media ( max-width: 520px ) {
	.hact-modal__body { padding: 22px 16px; }
	.hact-modal__title { font-size: 20px; }
	.hact-modal__desc { font-size: 14.5px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.hact__card,
	.hact__card-img img,
	.hact__scanline,
	.hact__arrow,
	.hact-modal__img,
	.hact-modal__hud,
	.hact-modal__cat,
	.hact-modal__title,
	.hact-modal__desc,
	.hact-modal__cta,
	.hact__thumb,
	.hact-modal__dialog {
		animation: none !important;
		transition: none !important;
	}

	.hact--reveal .hact__card { opacity: 1; transform: none; }

	.hact__more-ico,
	.hact__card.is-new {
		animation: none !important;
	}
}