/* ==========================================================
   Hyperion – Global glow utility classes.
   Πρόσθεσέ τες σε οποιοδήποτε Elementor widget από το πεδίο
   "CSS Classes" (καρτέλα Advanced): hr-glow-text, hr-glow-line, hr-glow
   ========================================================== */

.hr-glow-text {
	background: linear-gradient(
		90deg,
		var( --e-global-color-primary, #6796ec ),
		var( --e-global-color-accent, #abc1de )
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hr-glow-line {
	display: block;
	width: 100%;
	height: 2px;
	border: 0;
	border-radius: 999px;
	background: var( --e-global-color-accent, #abc1de );
	box-shadow: 0 0 8px var( --e-global-color-accent, #abc1de ),
		0 0 16px var( --e-global-color-accent, #abc1de );
}

.hr-glow {
	box-shadow: 0 0 16px var( --e-global-color-accent, #abc1de );
}

/* ==========================================================
   Animation utilities
   Πρόσθεσε τις classes σε ΟΠΟΙΟΔΗΠΟΤΕ Elementor widget από
   την καρτέλα Advanced → CSS Classes. Δουλεύουν και σε
   widgets του θέματος, όχι μόνο στα δικά μας.
   ========================================================== */

/* ---------- Εικόνες ---------- */

.hr-img {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
	isolation: isolate;
}

.hr-img img {
	display: block;
	transition:
		transform 0.65s cubic-bezier( 0.22, 1, 0.36, 1 ),
		filter 0.5s ease;
}

.hr-img:hover img {
	transform: scale( 1.06 );
}

/* Λάμψη που διασχίζει την εικόνα στο hover. */
.hr-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 45%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba( 255, 255, 255, 0.16 ) 45%,
		var( --e-global-color-accent, #abc1de ) 50%,
		rgba( 255, 255, 255, 0.16 ) 55%,
		transparent 100%
	);
	opacity: 0.45;
	transform: skewX( -18deg );
	transition: left 0.8s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.hr-img:hover::after {
	left: 140%;
}

/* Ασπρόμαυρη μέχρι το hover. */
.hr-img-gray img {
	filter: grayscale( 1 ) contrast( 1.05 );
}

.hr-img-gray:hover img {
	filter: grayscale( 0 );
}

/* Γωνιακά άγκιστρα HUD γύρω από την εικόνα. */
.hr-img-hud::before {
	content: '';
	position: absolute;
	inset: 12px;
	z-index: 3;
	pointer-events: none;
	border: 2px solid var( --e-global-color-primary, #6796ec );
	clip-path: polygon(
		0 0, 18px 0, 18px 2px, 2px 2px, 2px 18px, 0 18px,
		0 100%, 18px 100%, 18px calc( 100% - 2px ), 2px calc( 100% - 2px ), 2px calc( 100% - 18px ), 0 calc( 100% - 18px ),
		0 0,
		100% 0, 100% 18px, calc( 100% - 2px ) 18px, calc( 100% - 2px ) 2px, calc( 100% - 18px ) 2px, calc( 100% - 18px ) 0,
		100% 100%, calc( 100% - 18px ) 100%, calc( 100% - 18px ) calc( 100% - 2px ), calc( 100% - 2px ) calc( 100% - 2px ), calc( 100% - 2px ) calc( 100% - 18px ), 100% calc( 100% - 18px )
	);
	opacity: 0;
	transform: scale( 0.97 );
	transition: opacity 0.35s ease, transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hr-img-hud:hover::before {
	opacity: 0.85;
	transform: scale( 1 );
}

/* Αργό ζουμ που δεν σταματά. */
.hr-img-kb img {
	animation: hr-kb 18s ease-in-out infinite alternate;
}

@keyframes hr-kb {
	from { transform: scale( 1 ); }
	to   { transform: scale( 1.08 ); }
}

/* ---------- Κάρτες ---------- */

.hr-card {
	position: relative;
	overflow: hidden;
	transition:
		transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}

.hr-card:hover {
	transform: translateY( -7px );
	border-color: var( --e-global-color-primary, #6796ec );
	box-shadow:
		0 26px 52px -26px rgba( 0, 0, 0, 0.8 ),
		0 0 32px -16px var( --e-global-color-primary, #6796ec );
}

/* Κλίση 3D που ακολουθεί το ποντίκι δεν γίνεται χωρίς JS,
   αλλά μια σταθερή κλίση δίνει παρόμοια αίσθηση. */
.hr-card-tilt:hover {
	transform: translateY( -7px ) rotateX( 4deg ) rotateY( -3deg ) scale( 1.02 );
}

/* Λάμψη που διασχίζει την κάρτα. */
.hr-card-shine::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 42%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba( 255, 255, 255, 0.12 ) 45%,
		var( --e-global-color-accent, #abc1de ) 50%,
		rgba( 255, 255, 255, 0.12 ) 55%,
		transparent 100%
	);
	opacity: 0.4;
	transform: skewX( -18deg );
	transition: left 0.8s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.hr-card-shine:hover::after {
	left: 140%;
}

/* Φωτεινή γραμμή που τραβιέται στην κορυφή. */
.hr-card-line::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient( 90deg, var( --e-global-color-primary, #6796ec ), var( --e-global-color-accent, #abc1de ) );
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hr-card-line:hover::before {
	transform: scaleX( 1 );
}

/* Το εικονίδιο μέσα στην κάρτα αντιδρά κι αυτό. */
.hr-card .elementor-icon,
.hr-card .elementor-icon-box-icon,
.hr-card img {
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ), filter 0.35s ease;
}

.hr-card:hover .elementor-icon,
.hr-card:hover .elementor-icon-box-icon {
	transform: translateY( -4px ) scale( 1.08 );
	filter: drop-shadow( 0 6px 14px rgba( 0, 0, 0, 0.5 ) );
}

/* ---------- Είσοδος με scroll ---------- */

.hr-reveal {
	opacity: 0;
	transform: translateY( 26px );
}

.hr-reveal.hr-in {
	opacity: 1;
	transform: translateY( 0 );
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hr-reveal-left  { transform: translateX( -30px ); }
.hr-reveal-right { transform: translateX( 30px ); }
.hr-reveal-zoom  { transform: scale( 0.94 ); }

.hr-reveal-left.hr-in,
.hr-reveal-right.hr-in,
.hr-reveal-zoom.hr-in {
	transform: none;
}

/* Στον editor όλα πρέπει να φαίνονται. */
.elementor-editor-active .hr-reveal {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.hr-img img,
	.hr-img-kb img,
	.hr-card,
	.hr-reveal {
		animation: none !important;
		transition: none !important;
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================
   Anchor links
   Με sticky header, το άλμα σε ένα section το κρύβει κάτω από
   τη μπάρα. Το scroll-margin το σπρώχνει πιο κάτω.
   ========================================================== */

html {
	scroll-behavior: smooth;
}

[ id ] {
	scroll-margin-top: var( --hr-anchor-offset, 96px );
}

/* Βάλε στο Advanced -> CSS Classes του section αν το header
   είναι πιο ψηλό ή πιο χαμηλό από το κανονικό. */
.hr-anchor-sm { scroll-margin-top: 64px; }
.hr-anchor-lg { scroll-margin-top: 140px; }

@media ( max-width: 767px ) {
	[ id ] {
		scroll-margin-top: var( --hr-anchor-offset-m, 76px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}