/* =========================================================================
   GameDeal — Registration · MOTION LAYER (2026)
   ---------------------------------------------------------------------------
   ΤΙ ΕΙΝΑΙ ΑΥΤΟ ΚΑΙ ΤΙ ΔΕΝ ΕΙΝΑΙ
   Το mu-registration.php έχει ήδη 2.6 KB δομικού CSS inline (34 selectors:
   grid, padding, border-radius, font-sizes). ΥΠΑΡΧΕΙ ΗΔΗ design — η δική μου
   πρώτη έκδοση το έγραφε ξανά και θα το παραμπόλησε. Αυτό το αρχείο
   τώρα προσθέτει ΜΟΝΟ ΚΙΝΗΣΗ. Δεν αγγίζει margin/padding/font/grid:
   αν αλλάξει το υπάρχον layout, το υπάρχον CSS είναι η αλήθεια.

   Η ΦΟΡΜΑ ΕΙΜΑΙ 100% ΛΕΙΤΟΥΡΓΙΚΗ ΧΩΡΙΣ ΑΥΤΟ ΤΟ ΑΡΧΕΙΟ.
   Χωρίς CSS/JS: όπως ήταν πάντα. Χωρίς JS: τα πεδία ΜΕΝΟΥΝ ΟΡΑΤΑ
   (η κατάσταση «κρυφά» ζει κάτω από το .gd-reg-armed, που το βάζει
   το ίδιο το JS). Άρα καμία απώλεια λειτουργίας.

   ΠΡΑΓΜΑΤΙΚΗ ΔΟΜΗ (διαβασμένη στο live HTML):
     .gd-reg-in                 → wrapper (ήδη styled από το inline CSS)
     .gd-reg-in.gd-reg-done     → η σελίδα επιτυχίας
     .gd-reg-q                  → το label της ερώτησης («Γιατί σε νοιάζει;»)
     .gd-reg-why-grid > .gd-reg-why > input[radio] + text
     .gd-reg-fields             → τα email/password
     .gd-reg-submit             → ΤΟ <button>
     .gd-reg-errors             → λάθη (ΠΡΙΝ τη φόρμα)
   ========================================================================= */

/* --------------------------------------------------------------------------
   ΒΑΣΙΚΑ ΡΥΘΜΙΚΑ ΣΥΜΒΟΛΑ
   Οι χρόνοι δεν είναι τυχαίοι: σε συνέχεια πρέπει κάθε κίνηση να
   «δένεται» στην προηγούμενη. Το 40ms είναι η αντίστοιχη καθυστέρηση
   σε στοιχεία που εμφανίζονται το ένα μετά το άλλο.
   -------------------------------------------------------------------------- */
:root {
	--gd-reg-in:  .55s;   /* εμφάνιση/απόκρυψη πεδίων */
	--gd-reg-fast: .22s;  /* hover, αλλαγή χρώματος */
	--gd-reg-step:  90ms;  /* απόσταση μεταξύ δύο στατιστικών */
	--gd-reg-spring: cubic-bezier(.34, 1.56, .64, 1); /* «χάνεται και έρχεται» */
	--gd-reg-ease:  cubic-bezier(.4, 0, .2, 1);      /* απλή, ομαλή κίνηση */
}

/* --------------------------------------------------------------------------
   1 · Η ΚΙΝΗΣΗ ΠΟΥ ΕΛΕΙΠΕ ΟΛΗ ΤΗΝ ΠΡΟΗ
   Η σελίδα είχε 2 κινούμενα στοιχεία σε ολόκληρη σελίδα και ΚΑΜΙΑ
   @keyframes. Ξεκινάμε από την αύρα πίσω από την κάρτα — αυτή που
   προκαλεί το πρώτο «ω, κάτι ζωντανό εδώ» πριν καν διαβάσεις λέξη.
   -------------------------------------------------------------------------- */
@keyframes gd-reg-breathe {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1);    opacity: .55; }
	50%      { transform: translate3d(0, -7px, 0) scale(1.03); opacity: .8; }
}

@keyframes gd-reg-rise {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes gd-reg-ring {
	0%   { box-shadow: 0 0 0 0 rgba(242, 169, 0, .40); }
	70%  { box-shadow: 0 0 0 16px rgba(242, 169, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(242, 169, 0, 0); }
}

@keyframes gd-reg-sweep {
	from { transform: translate3d(-120%, 0, 0); }
	to   { transform: translate3d(120%, 0, 0); }
}

/* Η αύρα. Οι χρώματα είναι ΤΑ ΙΔΙΑ με τα υπάρχοντα tokens του θέματος
   (--signal #F2A900, --accent-ink #00707F) — δεν επιβάλλουμε παλέτα. */
.gd-reg-in::before {
	content: "";
	position: absolute;
	inset: -18px;
	border-radius: calc(var(--r-lg, 16px) + 10px);
	background:
		radial-gradient(440px 250px at 15% 0%, rgba(242, 169, 0, .22), transparent 65%),
		radial-gradient(390px 240px at 88% 100%, rgba(0, 112, 127, .15), transparent 67%);
	filter: blur(8px);
	z-index: -1;
	pointer-events: none;
	animation: gd-reg-breathe 11s var(--gd-reg-ease) infinite;
}

/* Το .gd-reg-in χρειάζεται position:relative για να κρατήσει την αύρα.
   Δεν επηρεάζει το layout (position relative δεν μετακινεί τίποτα). */
.gd-reg-in {
	position: relative;
}

/* --------------------------------------------------------------------------
   2 · Η ΕΡΩΤΗΣΗ — «Γιατί σε νοιάζει;»
   Υπάρχει ήδη :hover με αλλαγή border-color. Προσθέτω ΜΟΝΟ την ανάβαση:
   το στοιχείο σηκώνεται 2px σαν να «ακούει» ότι πλησιάζεις.
   Το transform ΔΕΝ προκαλεί reflow — μόνο composite layer.
   -------------------------------------------------------------------------- */
.gd-reg-why {
	transition: transform var(--gd-reg-fast) var(--gd-reg-spring),
	            border-color var(--gd-reg-fast) var(--gd-reg-ease),
	            background-color var(--gd-reg-fast) var(--gd-reg-ease);
	will-change: auto; /* μόνο στο hover αξίζει, όχι μόνιμα */
}

.gd-reg-why:hover {
	transform: translate3d(0, -2px, 0);
}

/* Επιλεγμένο: ένας «παλμός» γύρω από την επιλογή — ΟΧΙ χρώμα, για να
   μη διαφωνούμε με το υπάρχον :has(input:checked) του inline CSS. */
.gd-reg-why:has(input:checked) {
	animation: gd-reg-pulse 1.2s var(--gd-reg-ease) 1;
}

@keyframes gd-reg-pulse {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.022); }
	100% { transform: scale(1); }
}

/* Ο κόκκινος λάιμ marker όταν επιλέγεί. Το υπάρχον CSS δεν έχει
   ::before στα inputs, άρα δεν μπερδεύεται με τίποτα. */
.gd-reg-why input[type="radio"] {
	transition: box-shadow .3s var(--gd-reg-ease);
}

.gd-reg-why input[type="radio"]:checked {
	animation: gd-reg-ring 1s var(--gd-reg-ease) 1;
}

/* Ορατή εστίαση πληκτρολογίου. Το υπάρχον CSS δεν έχει :focus-visible. */
.gd-reg-why:has(input:focus-visible) {
	outline: 3px solid rgba(0, 112, 127, .5);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3 · ΤΑ ΠΕΔΙΑ — ξεκλειδώνουν όταν απαντηθεί η ερώτηση
   Αυτό είναι το ΜΕΓΑΛΟ addition: η φόρμα κάνει ένα πρώτο click και
   μετά ανοίγει — μια μικρή «συνομιλία» αντί για φόρμα-τοίχο.

   ΑΣΦΑΛΕΙΑ: όλα κρύβονται ΜΟΝΟ κάτω από το .gd-reg-armed, που το
   βάζει το JS. Χωρίς JS η φόρμα είναι όπως ήταν πάντα: ανοιχτή.
   Χρησιμοποιούμε max-height (όχι display:none) ώστε η μετάβαση να
   γίνει — αλλά το κρυφό στοιχείο ΠΑΜΕΝΟ ΑΣΑΦΕΣ αν το JS σπάσει.
   -------------------------------------------------------------------------- */
.gd-reg-armed .gd-reg-fields,
.gd-reg-armed .gd-reg-submit,
.gd-reg-armed .gd-reg-fine {
	overflow: hidden;
	max-height: 90px;
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition:
		max-height var(--gd-reg-in) var(--gd-reg-ease),
		opacity .4s var(--gd-reg-ease),
		transform .45s var(--gd-reg-ease);
}

.gd-reg-armed .gd-reg-fields.is-open,
.gd-reg-armed .gd-reg-submit.is-open,
.gd-reg-armed .gd-reg-fine.is-open {
	max-height: 2000px;
	opacity: 1;
	transform: none;
}

/* Η πρόταση «μία επιλογή, δε γράφεις τίποτα» χάνει τον λόγο ύπαρξης
   μόλις απαντηθεί — απλώς χαμηλώνει, δεν εξαφανίζεται. */
.gd-reg-hint {
	transition: opacity .5s var(--gd-reg-ease);
}

/* Λεπτομέρεια που δεν έχει κανείς άλλος: όταν το κουμπί ξεκλειδώνει,
   παίρνει μια σύντομη «ανάσα» (ένα ελαφρύ scale) — σαν να πήρε ανάσα
   ο χρήστης πριν γράψει. ΜΙΑ φορά, όχι βρόχος. */
.gd-reg-armed .gd-reg-submit.is-open {
	animation: gd-reg-rise .5s var(--gd-reg-ease) .1s both;
}

/* --------------------------------------------------------------------------
   4 · ΤΟ ΚΟΥΜΠΙ — παλικάρι στο submit
   Μία φωτεινή λάμψη που περνά από αριστερά προς τα δεξιά. ΜΟΝΟ μία
   φορά στο hover: βρόχος στο hover ένιωθε ως «τρεμάμενη» πόρτα.
   -------------------------------------------------------------------------- */
.gd-reg-submit {
	position: relative;
	overflow: hidden;
	isolation: isolate;   /* το ::after δεν περνά στο ::after του θέματος */
	transition: transform var(--gd-reg-fast) var(--gd-reg-spring),
	            box-shadow var(--gd-reg-fast) var(--gd-reg-ease);
}

.gd-reg-submit::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
	transform: translate3d(-120%, 0, 0);
	pointer-events: none;
}

.gd-reg-submit:hover {
	transform: translate3d(0, -1px, 0);
}

.gd-reg-submit:hover::after,
.gd-reg-submit:focus-visible::after {
	animation: gd-reg-sweep .8s var(--gd-reg-ease) 1;
}

/* Στην υποβολή η ίδια λάμψη ξανά — να δεις αμέσως ότι κάτι ξεκίνησε,
   πριν περάσει ο χρόνος του server. */
.gd-reg-in.is-sending .gd-reg-submit::after {
	animation: gd-reg-sweep .95s var(--gd-reg-ease) 1;
}

.gd-reg-in.is-sending .gd-reg-submit {
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   5 · ΤΑ ΜΗΝΥΜΑΤΑ ΛΑΘΩΝ — πρέπει να τραβούν την προσοχή
   Υπάρχει ήδη οπτικός κόκκινος. Προσθέτω ΜΟΝΟ την είσοδο — και
   δυναμική εισαγωγή ώστε να μην χτυπάει το viewport κατά τη φόρτωση.
   -------------------------------------------------------------------------- */
.gd-reg-errors {
	animation: gd-reg-rise .45s var(--gd-reg-ease) both;
}

/* Αν τα λάθη είναι πολλά, χτυπάει ΔΥΟ ΦΟΡΕΣ — ένας «τόνος» προσοχής. */
.gd-reg-errors[data-gd-many="1"] {
	animation: gd-reg-rise .45s var(--gd-reg-ease) both,
	           gd-reg-shake .42s var(--gd-reg-ease) .35s 1;
}

@keyframes gd-reg-shake {
	0%, 100% { transform: translate3d(0, 0, 0); }
	22%      { transform: translate3d(-5px, 0, 0); }
	58%      { transform: translate3d(4px, 0, 0); }
	82%      { transform: translate3d(-2px, 0, 0); }
}

/* --------------------------------------------------------------------------
   6 · Η ΣΕΛΙΔΑ ΕΠΙΤΥΧΙΑΣ — ένα καθαρό ✓, χωρίς confetti
   Το site είναι σοβαρό. Ένα checkmark που μπαίνει με «spring» κάνει
   το «έγινε» χωρίς να γίνει παισνιτζί.
   Το ::before είναι ΜΟΝΟ ΣΤΟ .gd-btn — τα inputs/label δεν έχουν.
   -------------------------------------------------------------------------- */
.gd-reg-done .gd-btn {
	animation: gd-reg-check .6s var(--gd-reg-spring) .12s both;
}

.gd-reg-done .gd-btn::before {
	content: "✓";
	display: inline-block;
	margin-right: .45em;
	transform-origin: center;
}

@keyframes gd-reg-check {
	0%   { transform: scale(.55) rotate(-16deg); opacity: 0; }
	60%  { transform: scale(1.16) rotate(3deg);  opacity: 1; }
	100% { transform: scale(1) rotate(0);        opacity: 1; }
}

/* Το «γιατί σε νοιάζει» που κράτησε ο χρήστης — η μνήμη του λόγου του. */
.gd-reg-done .gd-reg-why {
	animation: gd-reg-rise .55s var(--gd-reg-ease) .2s both;
}

/* Τα στατιστικά μπαίνουν ένα-ένα. Ο δείκτης --gd-i τον βάζει το JS. */
.gd-reg-stats > *,
.gd-reg-proof-grid > * {
	animation: gd-reg-rise .55s var(--gd-reg-ease) both;
	animation-delay: calc(var(--gd-i, 0) * var(--gd-reg-step));
}

/* --------------------------------------------------------------------------
   7 · ΟΙ ΜΕΤΡΗΜΕΝΟΙ ΑΡΙΘΜΟΙ
   Ο motion.js (γενικός) κάνει count-up στα [data-gd-count]. Εδώ
   χρειάζεται ΜΟΝΟ το μπουζ — το ίδιο το count-up είναι δουλειά του
   motion.js, δεν το ξαναγράφω.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8 · PREFERENCES — υπόχρεωση, όχι επιλογή
   Με reduce: ΟΛΑ ΣΤΑΤΙΚΑ ΚΑΙ Η ΦΟΡΜΑ ΑΝΟΙΧΤΑ. Η κρυφή κατάσταση είναι
   διακόσμηση, όχι λειτουργία — όποιος ζητάει λιγότερη κίνηση
   δικαιούται να δει τα πεδία αμέσως.
   Το JS ΜΕ ΑΥΤΟ ΤΟ MEDIA QUERY ΔΕΝ ΤΡΕΧΕΙ ΚΑΘΟΛΟΥ (βλ. motion-reg.js),
   οπότε το .gd-reg-armed δεν μπαίνει ποτέ — αλλά το κρατώ ρητά
   για σιγουριά αν ποτέ αλλάξει η σειρά φορτώσεων.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gd-reg-in::before { animation: none; opacity: .34; }

	.gd-reg-why:hover,
	.gd-reg-why:has(input:checked) { transform: none; animation: none; }

	.gd-reg-why input[type="radio"]:checked { animation: none; }

	.gd-reg-submit:hover { transform: none; }

	.gd-reg-submit:hover::after,
	.gd-reg-submit:focus-visible::after,
	.gd-reg-in.is-sending .gd-reg-submit::after {
		animation: none;
		transform: translate3d(-120%, 0, 0);
	}

	.gd-reg-errors,
	.gd-reg-errors[data-gd-many="1"],
	.gd-reg-in.is-sending .gd-reg-submit,
	.gd-reg-submit.is-open,
	.gd-reg-done .gd-btn,
	.gd-reg-done .gd-reg-why,
	.gd-reg-stats > *,
	.gd-reg-proof-grid > * {
		animation: none;
		opacity: 1;
		transform: none;
	}

	/* Ανοικτά πεδία, χωρίς μετάβαση. */
	.gd-reg-armed .gd-reg-fields,
	.gd-reg-armed .gd-reg-submit,
	.gd-reg-armed .gd-reg-fine {
		max-height: none;
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   9 · FORCED COLORS — το κράτος ζητάει δικά του χρώματα
   Αντί να ενώνουμε τεχνητές παλέτες (που μπερδεύουν), καθαρίζουμε.
   Οι κινήσεις μένουν — η κίνηση ΔΕΝ χρειάζεται χρώμα.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
	.gd-reg-in::before {
		animation: none;
		background: none;
	}

	.gd-reg-why input[type="radio"]:checked {
		animation: none;   /* τα box-shadow δεν χρωματίζονται εδώ */
	}

	.gd-reg-submit::after {
		animation: none;   /* η λάμψη δεν ταιριάζει με forced colors */
		transform: translate3d(-120%, 0, 0);
	}
}

/* --------------------------------------------------------------------------
   10 · PRINT — η φόρμα είναι χρήσιμή και σε χαρτί
   Κανένας αέρας λάμψης σε χαρτί, και τα πεδία τυπώνονται.
   -------------------------------------------------------------------------- */
@media print {
	.gd-reg-in::before { display: none; }

	.gd-reg-fields,
	.gd-reg-submit,
	.gd-reg-fine {
		max-height: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.gd-reg-done .gd-btn::before { content: none; }
}