/* ═══════════════════════════════════════════════════════════════════════════
   xoro.css — χορογραφία της αρχικής moudiotis.gr (16/10/2026) · δεξιότητα kinisi, Ροή Β
   Γλώσσα κίνησης (ρήματα data-v): mask-up · rise · slide · grow · build · tilt · pop · dock · draw.
   Κάθε στοιχείο ένα ρήμα από τη φύση του. Το τελικό καρέ είναι η στατική σύνθεση· ό,τι εμφανίζεται, μένει.
   Χρόνοι: --d καθυστέρηση, --t διάρκεια, --e καμπύλη, κλίμακα --wx-k (κινητό 0,78).
   Χωρίς JS / μειωμένη κίνηση: τελικό καρέ. Φορτώνει μετά το kinisi.css.
═══════════════════════════════════════════════════════════════════════════ */
:root {
  --wx-out: cubic-bezier(.16, 1, .3, 1);
  --wx-io:  cubic-bezier(.65, 0, .35, 1);
  /* ελατήριο ζ 0,5 · tₛ 0,9 s · υπερακόντιση 16 % — μόνο για ό,τι έχει «μάζα» (κουμπιά, σφραγίδες, εικονίδια-δίσκοι) */
  --wx-spring: linear(0, 0.028, 0.1021, 0.2082, 0.3337, 0.4676, 0.6007, 0.7262, 0.839, 0.9357, 1.0148, 1.0757, 1.1192, 1.1468, 1.1605, 1.1626, 1.1554, 1.1415, 1.123, 1.102, 1.08, 1.0586, 1.0387, 1.0211, 1.0062, 0.9942, 0.9852, 0.9789, 0.9751, 0.9735, 0.9737, 0.9753, 0.9778, 0.981, 0.9845, 0.988, 1);
  --wx-k: 1;
}
@media (max-width: 768px), (hover: none) { :root { --wx-k: .78; } }

/* ── κρατημένη αρχική κατάσταση: μόνο όταν το σενάριο έχει υποσχεθεί να τη λύσει (ΜΗ-01, 3,5 s) ── */
html.wdx-js:not(.wdx-fail) .wdx:not(.wdx-go) [data-v] { visibility: hidden; }
/* ορατότητα (ΜΗ-47): το στοιχείο μένει στο πρώτο καρέ ώσπου να φανεί· κρυμμένη καρτέλα ή σκηνή εκτός οθόνης = παύση */
html.wdx-gate .wdx-go [data-v]:not(.wdx-seen),
html.wdx-gate .wdx-go [data-v]:not(.wdx-seen)::before { animation-play-state: paused; }
html.wdx-bg *, .wdx-off, .wdx-off *, .wdx-off *::before { animation-play-state: paused !important; }

/* μάσκα κειμένου: ο τίτλος ανεβαίνει μέσα από δικό του πλαίσιο (η μάσκα ΕΞΩ από το στοιχείο που γράφει το i18n) */
.wdm { display: block; overflow: clip; padding: .14em 0 .2em; margin: -.14em 0 -.2em; }

/* μέσα στις σκηνές η γενική «εμφάνιση» του eng-animations δεν ισχύει: μία χορογραφία ανά στοιχείο */
.wdx [data-v][data-reveal], .wdx [data-v] [data-reveal] { opacity: 1 !important; animation: none !important; }
.wdx .eyebrow::before { transform: scaleX(1); transition: none; }

/* ── τα ρήματα ── */
.wdx-go [data-v] {
  animation-duration: calc(var(--t, .7s) * var(--wx-k));
  animation-delay: calc(var(--d, 0s) * var(--wx-k));
  animation-timing-function: var(--e, var(--wx-out));
  animation-fill-mode: backwards;
}
.wdx-go [data-v="mask-up"] { animation-name: wxMask; }
.wdx-go [data-v="rise"]    { animation-name: wxRise; }
.wdx-go [data-v="slide"]   { animation-name: wxSlide; }
.wdx-go [data-v="grow"]    { animation-name: wxGrow; transform-origin: var(--o, left center); }
.wdx-go [data-v="build"]   { animation-name: wxBuild; }
.wdx-go [data-v="tilt"]    { animation-name: wxTilt; transform-origin: 50% 100%; }
.wdx-go [data-v="pop"]     { animation-name: wxPop; --e: var(--wx-spring); transform-origin: var(--o, 50% 50%); }
.wdx-go [data-v="dock"]    { animation-name: wxDock; }
.wdx-go [data-v="draw"]    { animation-name: wxDraw; stroke-dasharray: 1; }
/* η χρυσή γραμμή της ετικέτας «σχεδιάζεται» λίγο μετά την ετικέτα */
.wdx-go .eyebrow[data-v]::before { animation: wxGrowT .7s var(--wx-out) calc((var(--d, 0s) + .3s) * var(--wx-k)) backwards; }

@keyframes wxMask  { from { translate: 0 125%; } }
@keyframes wxRise  { from { opacity: 0; translate: 0 var(--dy, 16px); } }
@keyframes wxSlide { from { opacity: 0; translate: var(--dx, -18px) 0; } }
@keyframes wxGrow  { from { scale: 0 1; } }
@keyframes wxGrowT { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wxBuild { from { clip-path: var(--c0, inset(0 100% 0 0 round var(--r, 0px))); }
                     to   { clip-path: inset(0 0 0 0 round var(--r, 0px)); } }
@keyframes wxTilt  { from { opacity: 0; transform: perspective(900px) rotateX(40deg) translateY(36px) scale(.92); } }
@keyframes wxPop   { from { opacity: 0; scale: .3; rotate: -16deg; } 18% { opacity: 1; } }
@keyframes wxDock  { from { opacity: 0; translate: var(--dx, 14%) 0; rotate: var(--rot, 6deg); } }
@keyframes wxDraw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ══════════ 0 · ΠΡΩΤΗ ΟΘΟΝΗ — διαδοχική άφιξη, μία γλώσσα ══════════
   Απόφαση 16/10/2026 (Δ. Μουδιώτης): απλή χορογραφία, όλα «φτάνουν» από δεξιά στη θέση τους με ορμή που σβήνει,
   το ένα μετά το άλλο. Κανένα ελατήριο/pop σε κείμενο ή κουμπί.
     0,05  ΤΕΧΝΙΚΟ ΓΡΑΦΕΙΟ  από 210 px δεξιά → θέση σε 1,5 s (μόνο translate: LCP)
     0,05  ΜΟΥΔΙΩΤΗΣ        από 290 px δεξιά → θέση σε 1,7 s (ξεκινά μαζί με την πρώτη γραμμή, φτάνει δεύτερο)
     1,10  & ΣΥΝΕΡΓΑΤΕΣ     γραφομηχανή (υπάρχον σενάριο της σελίδας, 50 ms/χαρακτήρα)
     1,60  Εγκρίσεις Τύπου · 1,80 Ταξινόμηση Οχημάτων · 2,00 Τεχνικές Μελέτες: από 126 px δεξιά και 48 px κάτω, 1,4 s
     2,45  «Ζητήστε προσφορά» · 2,65 τηλέφωνο: ίδια άφιξη (108/36 px)
     2,90–3,35 οι τέσσερις ετικέτες ολόκληρες, ανά 150 ms (96/36 px)· τέλος ≈ 4,7 s
   Καμπύλη «ορμή που σβήνει»: έξοδος expo με ελάχιστη υπέρβαση (1 %), ποτέ αναπήδηση. ×0,78 στο κινητό. */
@media (prefers-reduced-motion: no-preference) {
  /* 16/10 β: πιο αργή και πιο μεγάλη διαδρομή (×3 την πρώτη εκδοχή)· --wx-ad κλιμακώνει τις αποστάσεις (κινητό 0,45) */
  :root { --wx-arrive: cubic-bezier(.2, 1.01, .3, 1); --wx-ad: 1; }
  @keyframes wxArriveX { from { translate: calc(var(--ax, 210px) * var(--wx-ad)) 0; } }
  @keyframes wxArrive  { from { opacity: 0; translate: calc(var(--ax, 126px) * var(--wx-ad)) calc(var(--ay, 48px) * var(--wx-ad)); } 30% { opacity: 1; } }

  html .hero-name .line1 { animation: wxArriveX 1.5s var(--wx-arrive) calc(.05s * var(--wx-k)) backwards !important; --ax: 210px; }
  html .hero-name .line2 { animation: wxArriveX 1.7s var(--wx-arrive) calc(.05s * var(--wx-k)) backwards !important; --ax: 290px; }   /* ξεκινά μαζί με τη γραμμή 1, φτάνει 0,2 s μετά (μεγαλύτερη διαδρομή) */
  html .hero-eyebrow { animation: wxArrive 1.2s var(--wx-arrive) calc(1.3s * var(--wx-k)) backwards !important; --ax: 72px; --ay: 18px; }
  html .hero-eyebrow::before { animation-delay: calc(1.6s * var(--wx-k)) !important; }

  html .hero-headline { animation: none !important; opacity: 1 !important; }
  .hero-headline .hh-p, .hero-headline .hh-sep { display: inline-block; }
  .hero-headline span.hh-p:nth-of-type(1) { animation: wxArrive 1.4s var(--wx-arrive) calc(1.6s * var(--wx-k)) backwards; }
  .hero-headline em.hh-p                  { animation: wxArrive 1.4s var(--wx-arrive) calc(1.8s * var(--wx-k)) backwards; }
  .hero-headline .hh-p--3                 { animation: wxArrive 1.4s var(--wx-arrive) calc(2.0s * var(--wx-k)) backwards; }
  .hero-headline .hh-sep                  { animation: wxFade .8s ease-out calc(2.1s * var(--wx-k)) backwards; }
  .hero-headline .hh-sep--2               { animation-delay: calc(2.3s * var(--wx-k)); }
  @keyframes wxFade { from { opacity: 0; } }

  html .hero-actions { animation: none !important; opacity: 1 !important; }
  html .hero-actions .btn-hero-primary { animation: wxArrive 1.4s var(--wx-arrive) calc(2.45s * var(--wx-k)) backwards !important; --ax: 108px; --ay: 36px; }
  html .hero-actions .btn-hero-ghost   { animation: wxArrive 1.4s var(--wx-arrive) calc(2.65s * var(--wx-k)) backwards !important; --ax: 108px; --ay: 36px; }
  html .hero-actions .btn-hero-primary i { animation: none !important; }

  html .hero-cta-block .hero-pillar:nth-child(n) { animation: wxArrive 1.4s var(--wx-arrive) backwards !important; --ax: 96px; --ay: 36px; }
  html .hero-cta-block .hero-pillar:nth-child(1) { animation-delay: calc(2.9s * var(--wx-k)) !important; }
  html .hero-cta-block .hero-pillar:nth-child(2) { animation-delay: calc(3.05s * var(--wx-k)) !important; }
  html .hero-cta-block .hero-pillar:nth-child(3) { animation-delay: calc(3.2s * var(--wx-k)) !important; }
  html .hero-cta-block .hero-pillar:nth-child(4) { animation-delay: calc(3.35s * var(--wx-k)) !important; }
  html .hero-cta-block .hero-pillar i { animation: none; }

  .hero-cta-block .hero-pillar { transition: border-color .3s, background .3s, translate .3s var(--wx-arrive), box-shadow .3s; }
  .hero-cta-block .hero-pillar:hover { translate: 0 -3px; box-shadow: 0 6px 12px -12px rgba(193,109,72,0.18); }
  .btn-hero-ghost { transition: transform .25s var(--wx-arrive), box-shadow .3s; }
  .btn-hero-ghost:hover { transform: translateY(-2px); }
}
@media (max-width: 768px) { :root { --wx-ad: .45; } }

/* ══════════ 1 · ΕΜΠΕΙΡΙΑ & ΕΞΕΙΔΙΚΕΥΣΗ ══════════
   Πρωταγωνιστής ο τίτλος (μάσκα). Η γραμμή διάστασης «ανοίγει» από το κέντρο σαν μετροταινία, οι τέσσερις γωνίες
   του πλαισίου ανεβαίνουν, οι τρεις πτυχές μπαίνουν από αριστερά, το τεχνικό σχέδιο ακουμπά (κλίση),
   οι αριθμοί μετρούν. Ρήματα: mask-up · grow · pop · slide · tilt · rise + μετρητής. */
#about .section-heading { --t: .95s; --d: .05s; }
#about .dim-row { --o: 50% 50%; --t: .85s; --d: .4s; }
#about .apf-c   { --dy: 10px; --t: .6s; --d: calc(.55s + var(--k, 0) * .08s); }
#about .apf-c1 { --k: 0; --o: 0 0; } #about .apf-c2 { --k: 1; --o: 100% 0; } #about .apf-c3 { --k: 2; --o: 0 100%; } #about .apf-c4 { --k: 3; --o: 100% 100%; }
#about .apf-item { --dx: -28px; --t: .65s; --d: calc(.7s + var(--j, 0) * .12s); }
#about .apf-art  { --t: 1.05s; --d: .85s; }
#about .as-i     { --dy: 14px; --t: .6s; --d: calc(1.0s + var(--j, 0) * .12s); }

/* ══════════ 2 · ΟΙ ΥΠΗΡΕΣΙΕΣ ΜΑΣ ══════════ η ετικέτα γλιστρά, ο τίτλος ανεβαίνει· οι κάρτες κρατούν το «φερμουάρ» τους */
#services .eyebrow { --dx: -16px; --t: .6s; --d: 0s; }
#services .section-heading { --t: .95s; --d: .1s; }

/* ══════════ 3 · ΕΜΠΙΣΤΟΣΥΝΗ ══════════
   Τα τέσσερα πλαίσια χτίζονται από κάτω προς τα πάνω σαν τοίχος, οι αριθμοί μετρούν ώς την τιμή τους (μηχανισμός: το
   μέγεθος), οι τρεις δίσκοι και οι τίτλοι τους ανεβαίνουν στη θέση τους (χωρίς pop: απόφαση 16/10). */
#trust .trust-stat { --r: 4px; --c0: inset(100% 0 0 0 round 4px); --t: .8s; --d: calc(var(--j, 0) * .11s); }
#trust .trust-pillar-icon { --dy: 18px; --t: .8s; --d: calc(.55s + var(--j, 0) * .14s); }
#trust .trust-pillar h3   { --dy: 12px; --t: .6s; --d: calc(.8s + var(--j, 0) * .14s); }

/* ══════════ 4 · ΚΡΙΤΙΚΕΣ · ΣΥΝΕΡΓΑΤΕΣ ══════════ ίδια γλώσσα τίτλου· η λωρίδα των συνεργατών κινείται ήδη */
#reviews .eyebrow, #partners .eyebrow { --dx: -16px; --t: .6s; --d: 0s; }
#reviews .section-heading, #partners .section-heading { --t: .95s; --d: .1s; }
#partners .partners-note { --dy: 12px; --t: .65s; --d: .35s; }
/* τα λογότυπα συνεργατών ΔΕΝ χορογραφούνται: η λωρίδα τους κινείται ήδη συνεχώς (partners-carousel.js) */

/* ══════════ 5 · ΕΠΙΚΟΙΝΩΝΙΑ ══════════
   Αριστερά: τίτλος (μάσκα), η κάρτα του μηχανικού ακουμπά (κλίση), τα στοιχεία επαφής γλιστρούν από αριστερά.
   Δεξιά: ο τίτλος της φόρμας, τα πεδία χτίζονται εναλλάξ από αριστερά/δεξιά (clip), το κουμπί αποστολής ανεβαίνει (χωρίς pop). */
#contact .contact-info .eyebrow { --dx: -16px; --t: .6s; --d: 0s; }
#contact .section-heading { --t: .95s; --d: .1s; }
#contact .contact-lead { --dy: 14px; --t: .7s; --d: .35s; }
#contact .person-card  { --t: 1.05s; --d: .5s; }
#contact .contact-detail { --dx: -22px; --t: .6s; --d: calc(.8s + var(--j, 0) * .08s); }
#contact .contact-form-wrap h3 { --dy: 12px; --t: .65s; --d: .2s; }
#contact .form-fields .field { --r: 4px; --t: .7s; --d: calc(.4s + var(--j, 0) * .1s); }   /* χτίζονται εναλλάξ από αριστερά/δεξιά (--c0 από το JS) */
#contact .btn-submit { --dy: 14px; --t: .7s; --d: .95s; }

/* ═══ ΗΡΕΜΗ ΚΙΝΗΣΗ ΜΕ ΤΗΝ ΚΥΛΙΣΗ (18/10/2026, απόφαση Δ. Μουδιώτη) ══════════
   Ό,τι εμφανίζεται καθώς κυλά η σελίδα: ήρεμο και ομαλό. Μικρή διαδρομή
   (≈ 55 % της προηγούμενης), μεγαλύτερη διάρκεια (×1,3), μία μαλακή καμπύλη
   εξόδου για όλα, χωρίς υπέρβαση, χωρίς στροφή, χωρίς κλίμακα από το μηδέν.
   Η πρώτη οθόνη (hero) δεν θίγεται: έχει δική της χρονογραμμή. */
:root { --wx-calm: cubic-bezier(.22, .61, .36, 1); }
.wdx { --wx-k: 1.3; }
@media (max-width: 768px), (hover: none) { .wdx { --wx-k: 1.05; } }
.wdx-go [data-v] { animation-timing-function: var(--wx-calm) !important; }
@keyframes wxRise  { from { opacity: 0; translate: 0 calc(var(--dy, 16px) * .55); } }
@keyframes wxSlide { from { opacity: 0; translate: calc(var(--dx, -18px) * .55) 0; } }
@keyframes wxDock  { from { opacity: 0; translate: calc(var(--dx, 14%) * .4) 0; } }
@keyframes wxTilt  { from { opacity: 0; translate: 0 14px; } }
@keyframes wxPop   { from { opacity: 0; scale: .96; } }
@keyframes wxMask  { from { translate: 0 100%; } }
/* γενική εμφάνιση [data-reveal]: ίδια ηρεμία */
:root { --rv-y: 12px; --rv-x: 12px; --rv-t: .9s; }
@media (max-width: 768px) { :root { --rv-y: 8px; --rv-x: 0px; --rv-t: .7s; } }