/* =========================================================================
 * GameDeal — Motion 2026
 * ---------------------------------------------------------------------------
 * ΛΕΠΤΟΜΕΡΕΙΕΣ ΠΟΥ ΔΕΝ ΥΠΑΡΧΕΙ ΣΤΟ style.css. ΞΕΧΩΡΙΣΤΟ ΑΡΧΕΙΟ ΕΠΙΤΕΔΕΜΕΝΑ:
 * να μπορεί να αναιρεθεί ή να αντικατασταθεί χωρίς να πειχτεί το βασικό design.
 *
 * ΤΙ ΥΠΑΡΧΕΙ ΗΔΗ ΣΤΟ style.css (ΔΕΝ το ξαναγράφω — θα το κάνω σύγχυση):
 *   · .gd-reveal / .gd-reveal-x  — fade+rise, με .gd-in
 *   · .gd-shimmer               — gradient στο κείμενο
 *   · .gd-ball-a/b/c            — slow drift τα background balls
 *   · .gd-rail-track            — marquee 48s
 *   · .gd-dot                   — pulse 2.4s
 *
 * ΤΙ ΠΡΟΣΘΕΤΩ ΕΔΩ:
 *   1. Tokens ρυθμού σε ΕΝΑ σημείο (το style.css έχει --ease/--dur· εγώ
 *      προσθέτω δικό μου σύστημα χωρίς να αγγίξω τα δικά του).
 *   2. «Ζωντανή ράγα»: travelling sheen + παλμός στο data-gd-lock.
 *   3. Απαλό mesh στο hero — ΜΕ screen blend που δουλεύει και σε σκούρο
 *      φόντο (το παλιό multiply μονό του του έσβηνε στο #0B0D12).
 *   4. Micro-details: hover bloom, scaleX underline, σταθερά focus rings.
 *   5. Count-up για ΜΕΤΡΗΜΕΝΑ νούμερα (διαβάζει data-gd-count, δεν επινοεί).
 *   6. Skeleton shimmer για loading — χωρίς layout shift.
 *
 * ΚΑΝΟΝΑΣ: κάθε κίνηση μέσα στο @media (prefers-reduced-motion: no-preference).
 * Όποιος έχει reduce παίρνει το ΣΤΑΤΙΚΟ, ΠΛΗΡΕΣ design — όχι «μειωμένο».
 * Καμία κίνηση σε width/height/top/left/margin (layout thrashing).
 *
 * @package gamedeal
 */

/* =========================================================================
 * 1 · ΡΥΘΜΟΣ — όλη η κίνηση ρυθμίζεται από εδώ
 * ====================================================================== */
:root {
	--gd-dur-1: 140ms;        /* micro: colour σε hover */
	--gd-dur-2: 260ms;        /* μικρά στοιχεία */
	--gd-dur-3: 480ms;        /* cards, panels */
	--gd-dur-4: 820ms;        /* εμφάνιση σελίδας */
	--gd-dur-ambient: 24s;   /* hero mesh — αργά, σχεδόν αόρατο */

	--gd-ease-out: cubic-bezier(.22, 1, .36, 1);
	--gd-ease-inout: cubic-bezier(.65, 0, .35, 1);
	--gd-ease-spring: cubic-bezier(.25, 1, .5, 1.25);

	/* Ένταση: 0 = απενεργοποιεί τις λάμψεις χωρίς να πειράξει τη δομή */
	--gd-bloom: 1;
}

/* =========================================================================
 * 2 · ΖΩΝΤΑΝΗ ΡΑΓΑ — το «Carbon Rail» παίρνει σφίξιμα
 *
 * Η ράγα είναι η υπογραφή του δικτύου. Εδώ της δίνουμε φως που περνάει
 * πάνω της, και έναν σπαντικό «παλμό» όταν κλειδώνει μια κατάσταση
 * (data-gd-lock="1" — π.χ. ένα κουμπί που μόλις έγινε επιλογή).
 * Χωρίς JS μένει η ακριβής παλιά όψη: το ::after έχει opacity 0.
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

	.gd-rail::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		opacity: 0;
		z-index: 2;
		background: linear-gradient(
			100deg,
			transparent 0%,
			rgba(255, 255, 255, calc(.5 * var(--gd-bloom))) 42%,
			rgba(255, 255, 255, calc(.72 * var(--gd-bloom))) 50%,
			rgba(255, 255, 255, calc(.5 * var(--gd-bloom))) 58%,
			transparent 100%
		);
		background-size: 45% 100%;
		background-repeat: no-repeat;
		mix-blend-mode: plus-lighter;
	}

	/* Η λάμψη δεν τρέχει μονίμως — μπαίνει μόνο στο lock, μία φορά. */
	.gd-rail[data-gd-lock="1"]::after {
		animation: gd-rail-sheen 1100ms var(--gd-ease-out) 1 forwards;
	}

	@keyframes gd-rail-sheen {
		0%   { opacity: 0;  background-position: -45% 0; }
		18%  { opacity: 1; }
		82%  { opacity: 1; }
		100% { opacity: 0;  background-position: 145% 0; }
	}

	/* Παλμός στη ράγα όταν «κλειδώνει» κάτι. */
	.gd-rail[data-gd-lock="1"] {
		animation: gd-rail-lock 620ms var(--gd-ease-out) 1;
	}

	@keyframes gd-rail-lock {
		0%   { box-shadow: inset 0 0  0 0 rgba(255, 255, 255, 0); }
		35%  { box-shadow: inset 0 0 26px 0 var(--site-accent-soft); }
		100% { box-shadow: inset 0 0  0 0 rgba(255, 255, 255, 0); }
	}

	/* Το «Live» σημεάδι χτυπά λίγο πιο έντονα όταν κλειδώνει. */
	.gd-rail[data-gd-lock="1"] .gd-dot {
		animation-duration: .9s;
	}
}

/* =========================================================================
 * 3 · HERO MESH — απαλή ατμοσφαίρα
 *
 * Το style.css ήδη κινεί τα gd-ball (drift 47/59/71s). Εδώ προσθέτω ένα
 * πολύ απαλό mesh φως πίσω τους.
 *
 * ΤΟ ΣΗΜΑΝΤΙΚΟ: χρησιμοποιώ `screen` (όχι `multiply`). Το multiply
 * πάνω σε σκούρο φόντο (#0B0D12) δίνει ΜΑΥΡΟ και χάνεται — το mesh
 * ήταν αόρατο. Το screen φωτίζει και σε σκούρο και σε λευκό.
 *
 * Δεν αγγίζει ποτέ το κείμενο: τα blobs είναι από πίσω (z-index 0) και το
 * περιεχόμενο είναι z-index 1 (αυτό το κάνει ήδη το style.css).
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

	.gd-hero::before,
	.gd-hero::after {
		content: "";
		position: absolute;
		inset: -35%;
		z-index: 0;
		pointer-events: none;
		mix-blend-mode: screen;
		opacity: .55;
		will-change: transform;
	}

	/* Πρώτο blob: λάιμ, πάνω-αριστερά. */
	.gd-hero::before {
		background: radial-gradient(42% 38% at 26% 22%,
			rgba(216, 255, 62, .30) 0%,
			rgba(216, 255, 62, .10) 45%,
			transparent 72%);
		animation: gd-mesh-a var(--gd-dur-ambient) var(--gd-ease-inout) infinite alternate;
	}

	/* Δεύτερο blob: τιρκουάζ, κάτω-δεξιά, πιο αργό και αντίθετη φορά. */
	.gd-hero::after {
		background: radial-gradient(38% 36% at 74% 72%,
			rgba(90, 208, 255, .22) 0%,
			rgba(90, 208, 255, .07) 48%,
			transparent 74%);
		opacity: .42;
		animation: gd-mesh-b calc(var(--gd-dur-ambient) * 1.45) var(--gd-ease-inout) infinite alternate;
	}

	@keyframes gd-mesh-a {
		0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
		100% { transform: translate3d(4%, 3%, 0) scale(1.06); }
	}

	@keyframes gd-mesh-b {
		0%   { transform: translate3d(3%, 2%, 0) scale(1.04); }
		100% { transform: translate3d(-4%, -3%, 0) scale(1); }
	}
}

/* =========================================================================
 * 4 · MICRO-DETAILS
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* --- Card hover: ανάγλυψη + ανύψωση ------------------------------- */
	.gd-card,
	.gd-door,
	.gd-entry {
		transition:
			transform var(--gd-dur-3) var(--gd-ease-out),
			box-shadow var(--gd-dur-3) var(--gd-ease-out),
			border-color var(--gd-dur-2) var(--gd-ease-out);
	}

	.gd-card:hover,
	.gd-entry:hover {
		transform: translateY(-3px);
		box-shadow:
			0 18px 44px -28px rgba(16, 24, 40, .42),
			0 2px 8px -4px rgba(16, 24, 40, .18);
		border-color: var(--line-strong);
	}

	.gd-door:hover {
		transform: translateY(-2px);
		box-shadow: 0 26px 60px -34px rgba(16, 24, 40, .48);
	}

	/* --- Underline που χτίζεται (scaleX, όχι width) --------------------- */
	.gd-link-underline {
		position: relative;
		text-decoration: none;
	}

	.gd-link-underline::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--gd-dur-2) var(--gd-ease-out);
	}

	.gd-link-underline:hover::after,
	.gd-link-underline:focus-visible::after {
		transform: scaleX(1);
	}

	/* --- Focus rings που ΔΕΝ τρέμουν ----------------------------------- */
	.gd-btn:focus-visible,
	.gd-door:focus-visible,
	.gd-card:focus-visible,
	.gd-link-underline:focus-visible,
	input:focus-visible,
	select:focus-visible,
	button:focus-visible {
		outline: 2px solid var(--accent-ink);
		outline-offset: 2px;
		/* Σταθερό: καμία transition στο outline, αλλιώς τρέμει */
		transition: none;
	}

	/* --- Πάτημα κουμπιού: μικρή, «χορτάτια» αντίδραση ------------------ */
	.gd-btn:active {
		transform: translateY(1px) scale(.995);
		transition:
			transform 90ms var(--gd-ease-out),
			background-color var(--gd-dur-1) var(--gd-ease-out);
	}

	/* --- Στατιστικά: άλλαξε χρώμα απαλά ------------------------------ */
	.gd-stat .v {
		transition: color var(--gd-dur-3) var(--gd-ease-out);
	}

	/* --- Το live σημεάδι στη ράγα: απαλό «ανασνοφή» -------------------- */
	.gd-dot {
		transition: box-shadow var(--gd-dur-2) var(--gd-ease-out);
	}

	.gd-rail-in:hover .gd-dot {
		box-shadow: 0 0 0 7px var(--site-accent-soft);
	}
}

/* =========================================================================
 * 5 · COUNT-UP — μόνο για ΜΕΤΡΗΜΕΝΑ νούμερα
 *
 * Το JS διαβάζει το data-gd-count (που βάζει το gd_num() / τα components).
 * Δεν δημιουργούμε, δεν μαντεύουμε, δεν επινοούμε — απλώς «μετράω» έναν
 * αριθμό που ήδη υπάρχει στο DOM. Αν δεν υπάρχει attribute, το JS δεν
 * αγγίζει το στοιχείο.
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

	[data-gd-count] {
		font-variant-numeric: tabular-nums;
	}

	/* Ενδιάμεσα: χρώμα που «θερμαίνεται» — ΠΟΤΕ layout shift (tabular-nums
	   κλειδώνει το πλάτος του αριθμού). */
	[data-gd-count][data-gd-counting="1"] {
		transition: color var(--gd-dur-2) var(--gd-ease-out);
		color: var(--accent-ink);
	}
}

/* =========================================================================
 * 6 · SKELETON — χωρίς layout shift
 *
 * Το .gd-shimmer στο style.css είναι gradient ΚΕΙΜΕΝΟΥ (background-clip:text).
 * Αυτό είναι ΟΙΚΕΙΟ skeleton: σκούρα μπάζα που λάμπει. Χρήσιμο για AJAX
 * που δεν έχει ακόμα δεδομένα. Δεν σπρώχνει τίποτα — μόνο transform.
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

	.gd-skeleton {
		position: relative;
		overflow: hidden;
		background: var(--line-soft);
		border-radius: var(--r-xs);
	}

	.gd-skeleton::after {
		content: "";
		position: absolute;
		inset: 0;
		transform: translateX(-100%);
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, .55) 50%,
			transparent 100%
		);
		animation: gd-shimmer-pass 1500ms var(--gd-ease-inout) infinite;
	}

	@keyframes gd-shimmer-pass {
		100% { transform: translateX(100%); }
	}
}

/* =========================================================================
 * 7 · ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ — όχι όμορφα, αλλά σωστά
 * ====================================================================== */

/* Reduced motion: το design μένει ΟΛΟΚΛΗΡΟ, απλώς ΣΤΑΤΙΚΟ.
   Το δηλώνω ρητά ώστε αν ποτέ πέσει κάτι, να το βλέπουμε. */
@media (prefers-reduced-motion: reduce) {
	.gd-hero::before,
	.gd-hero::after,
	.gd-skeleton::after,
	.gd-rail::after {
		animation: none !important;
		opacity: 0 !important;
	}

	.gd-card:hover,
	.gd-door:hover,
	.gd-entry:hover {
		transform: none;
	}

	/* Το .gd-reveal του style.css έχει ήδη fallback στο reduce — εδώ
	   εγγυαόμαστε ότι τίποτα δεν μέναι κρυφό. */
	.gd-reveal,
	.gd-reveal-x {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Υψηλή αντίθεση (Windows high contrast): το χρώμα γίνεται άχρηστο,
   οι κινήσεις και τα gradients επιβάλλονται — απλώς τα σβήνουμε. */
@media (forced-colors: active) {
	.gd-hero::before,
	.gd-hero::after,
	.gd-skeleton::after,
	.gd-rail::after {
		animation: none !important;
		mix-blend-mode: normal !important;
	}

	.gd-card,
	.gd-door,
	.gd-entry {
		border: 1px solid CanvasText;
	}
}

/* Εκτύπωση: καμία κίνηση, κανένα φως. */
@media print {
	.gd-hero::before,
	.gd-hero::after,
	.gd-skeleton::after,
	.gd-rail::after {
		animation: none !important;
		content: none !important;
	}

	.gd-card,
	.gd-door,
	.gd-entry {
		box-shadow: none !important;
		transform: none !important;
	}
}