/* ═══════════════════════════════════════════════════════════════════════════
   wd-xoro.css — χορογραφία της σελίδας Web Design (16/10/2026)
   Δεξιότητα kinisi, Ροή Β: κάθε σκηνή (.wdx) παίζει μία φορά όταν μπει στο κάδρο.
   Κάθε κινούμενο στοιχείο έχει ΔΙΚΟ ΤΟΥ ρήμα (data-v): mask-up · rise · slide · grow · build · tilt ·
   on · pop · dock · draw · type · window · tour. Το τελικό καρέ είναι η στατική σύνθεση: ό,τι
   εμφανίζεται, μένει (πάνελ, χρώμα, αντικείμενα). Χωρίς JS / με μειωμένη κίνηση: τελικό καρέ.
   Χρόνοι: --d (καθυστέρηση), --t (διάρκεια), --e (καμπύλη), κλίμακα --wx-k (κινητό 0,78).
═══════════════════════════════════════════════════════════════════════════ */
:root {
  --wx-out: cubic-bezier(.16, 1, .3, 1);
  --wx-io:  cubic-bezier(.65, 0, .35, 1);
  --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);   /* ζ 0,5 · tₛ 0,9 s — μόνο για ό,τι έχει «μάζα» */
  --wx-k: 1;
}
@media (max-width: 768px), (hover: none) { :root { --wx-k: .78; } }

/* ── Κρατημένη αρχική κατάσταση: μόνο όταν το σενάριο έχει υποσχεθεί να τη λύσει (ΜΗ-01) ── */
html.wdx-js:not(.wdx-fail) .wdx:not(.wdx-go) [data-v] { visibility: hidden; }

/* ── Μάσκα κειμένου: ο τίτλος ανεβαίνει μέσα από δικό του πλαίσιο ── */
.wdm { display: block; overflow: clip; padding: .12em 0 .18em; margin: -.12em 0 -.18em; }

/* ── Η γλώσσα κίνησης ── */
.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="on"]      { animation-name: wxOn; }
.wdx-go [data-v="pop"]     { animation-name: wxPop; --e: var(--wx-spring); transform-box: fill-box; 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 [data-v="type"]    { animation-name: wxType; --e: steps(22, end); }
.wdx-go [data-v="window"]  { animation-name: wxWindow; }
.wdx-go [data-v="tour"]    { animation-name: wxTour; --e: var(--wx-io); animation-timing-function: var(--wx-io); }

@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 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 wxOn    { 0% { clip-path: inset(50% 0 50% 0); opacity: .15; } 22% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); } }
@keyframes wxPop   { from { opacity: 0; scale: .3; rotate: -16deg; } 18% { opacity: 1; } }
@keyframes wxDock  { from { opacity: 0; translate: 14% 0; rotate: 6deg; } }
@keyframes wxDraw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wxType  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wxWindow{ from { opacity: 0; translate: var(--dx, -44px) 0; clip-path: inset(0 0 100% 0 round 10px); }
                     35% { opacity: 1; }
                     to   { translate: 0 0; clip-path: inset(0 0 0 0 round 10px); } }
@keyframes wxTour  { 0% { translate: 0 0; } 64% { translate: 0 var(--tx, -70%); } 72% { translate: 0 var(--tx, -70%); } 100% { translate: 0 0; } }

/* ══════════ 1 · HERO ══════════
   Πρωταγωνιστής: ο τίτλος (μάσκα) και το σκηνικό (wd-kinisi). Οι τέσσερις υπηρεσίες χτίζονται από κάτω προς τα πάνω,
   κάθε εικονίδιο σχεδιάζεται. Όλα τελειώνουν πριν το 1,4 s. */
.wd-page .wdh-eyebrow { --dx: -14px; --t: .6s; --d: 0s; }
.wd-page .wd-page-title { --t: .95s; --d: .08s; }
.wd-page .wd-page-desc  { --dy: 14px; --t: .7s; --d: .3s; }
.wd-page .btn-primary   { --dy: 14px; --t: .7s; --d: .42s; }
.wd-page .wdh-phone     { --dy: 14px; --t: .7s; --d: .5s; }
.wdh-svc { --r: 10px; --c0: inset(100% 0 0 0 round 10px); --t: .75s; --d: calc(.85s + var(--i) * .09s); }
.wdh-svc[data-v] { overflow: visible; }
.wdh-ic svg * { stroke-dasharray: 200; }
.wdx-go .wdh-ic svg * { animation: wxIcon .9s var(--wx-out) calc((.9s + var(--i, 0) * .09s) * var(--wx-k)) backwards; }
@keyframes wxIcon { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }

/* ══════════ 2 · ΤΙ ΦΤΙΑΧΝΟΥΜΕ ══════════
   Σκηνή = μόνιμο χρωματιστό πάνελ + αντικείμενο που ακουμπά πάνω του + τυπογραφία.
   Τα πάνελ χτίζονται από διαφορετική άγκυρα το καθένα, τα αντικείμενα φτάνουν με δικό τους ρήμα:
   01 ακουμπά (κλίση) · 02 ανάβει (οθόνη) · 03 πετάγεται (ελατήριο) · 04 δένει (ολίσθηση). */
.wdo .wd-offerings-label { --dx: -16px; --t: .6s; --d: 0s; }
.wdo .wdo-title { --t: .95s; --d: .06s; }
.wdo .wdo-lead  { --dy: 14px; --t: .7s; --d: .3s; }

.wdo-card { --cd: calc(.3s + var(--i, 0) * .1s); }
.wdo-card > .wdo-rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4; background: var(--acc); pointer-events: none; --t: .8s; --d: var(--cd); }
.wdo-card .wdo-plate { --r: 10px; --t: .85s; --d: var(--cd); }
.wdo-card:nth-child(1) .wdo-plate { --c0: inset(0 100% 0 0 round 10px); }
.wdo-card:nth-child(2) .wdo-plate { --c0: inset(0 0 100% 0 round 10px); }
.wdo-card:nth-child(3) .wdo-plate { --c0: inset(100% 0 0 0 round 10px); }
.wdo-card:nth-child(4) .wdo-plate { --c0: inset(0 0 0 100% round 10px); }
.wdo-card:nth-child(1) .wdo-shot img { --t: 1.05s; --d: calc(var(--cd) + .3s); }
.wdo-card:nth-child(2) .wdo-shot img { --t: .9s;   --d: calc(var(--cd) + .34s); }
.wdo-card:nth-child(3) .wdo-shot img { --t: .95s;  --d: calc(var(--cd) + .3s); }
.wdo-card:nth-child(4) .wdo-shot img { --t: 1.15s; --d: calc(var(--cd) + .3s); }
.wdo-card .wd-offer-num  { --dx: -10px;  --t: .5s; --d: calc(var(--cd) + .42s); }
.wdo-card .wd-offer-name { --t: .75s; --d: calc(var(--cd) + .46s); }
.wdo-card .wd-offer-text { --dy: 12px; --t: .6s; --d: calc(var(--cd) + .58s); }
.wdo-card .wdo-feats li  { --dx: -12px; --t: .5s; --d: calc(var(--cd) + .68s + var(--j, 0) * .07s); }

/* — σύνθεση πάνελ + αντικείμενο (μόνιμη, δεν εξαρτάται από την κίνηση) — */
.wdo-shot { background:
    linear-gradient(rgba(120,170,255,.045) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(120,170,255,.045) 1px, transparent 1px) 0 0 / 18px 18px, #050b18; }
.wdo-plate { position: absolute; inset: 12px; z-index: 1; border-radius: 10px; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.2), transparent 52%),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(152deg, color-mix(in srgb, var(--acc) 78%, #0a1426) 0%, color-mix(in srgb, var(--acc) 46%, #0a1426) 52%, color-mix(in srgb, var(--acc) 22%, #07101f) 100%);
  border: 1px solid color-mix(in srgb, var(--acc) 70%, #fff 8%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 30px -16px rgba(0,0,0,.65); }
.wdo-card:nth-child(4) .wdo-plate { background:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.16), transparent 52%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(152deg, color-mix(in srgb, var(--acc) 62%, #140a08) 0%, color-mix(in srgb, var(--acc) 34%, #0b0807) 55%, color-mix(in srgb, var(--acc) 16%, #070a12) 100%); }
.wdo-shot--img img, .wdo-shot--three img { position: absolute; z-index: 2; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); transform: none; transition: scale .6s var(--wx-out); }
.wdo-shot--three img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; scale: 1.3; filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.wd-offer-card:hover .wdo-shot--img img { scale: 1.05; transform: none; }
.wd-offer-card:hover .wdo-shot--three img { scale: 1.4; transform: none; }
.wdo-shot--img img { scale: 1; }
@media (max-width: 640px) {
  .wdo-plate { inset: 8px; border-radius: 8px; }
  .wdo-shot--img img { inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
  .wdo-card > .wdo-rule { height: 2px; }
}

/* ══════════ 3 · ΟΙ ΔΟΥΛΕΙΕΣ ΜΑΣ ══════════
   Κάθε έργο είναι σκηνή: το παράθυρο ανοίγει από την πλευρά του, γράφεται το όνομα του ιστότοπου,
   η σελίδα μέσα του «ξεφυλλίζεται» μία φορά (αληθινή, ολόκληρη σελίδα) και ξαναγυρίζει στην κορυφή.
   Η πληροφορία έρχεται από την αντίθετη πλευρά. */
.wd-work-header .wd-work-label { --dx: -16px; --t: .6s; --d: 0s; }
.wd-work-header .wd-work-title { --t: .95s; --d: .06s; }
.wd-work-header .wd-work-sub   { --dy: 14px; --t: .7s; --d: .3s; }

.wd-project-card .wd-proj-browser { --dx: -44px; --t: 1s; --d: 0s; }
.wd-project-card--rev .wd-proj-browser { --dx: 44px; }
.wd-project-card .wd-proj-dot { --o: 50% 50%; --t: .45s; --d: calc(.5s + var(--k, 0) * .07s); }
.wd-project-card .wd-proj-dot:nth-child(1) { --k: 0; } .wd-project-card .wd-proj-dot:nth-child(2) { --k: 1; } .wd-project-card .wd-proj-dot:nth-child(3) { --k: 2; }
.wd-project-card .wd-proj-url { --t: .7s; --d: .75s; }
.wd-project-card .wd-proj-tall { --t: 6.6s; --d: 1.5s; --tx: -74%; }
.wd-project-card .wd-proj-num  { --dy: 8px; --t: .5s; --d: .25s; }
.wd-project-card .wd-proj-role { --dx: 22px; --t: .7s; --d: .34s; }
.wd-project-card--rev .wd-proj-role { --dx: -22px; }
.wd-project-card .wd-proj-desc { --dy: 12px; --t: .65s; --d: .5s; }
.wd-project-card .wd-proj-tags li { --dy: 8px; --t: .45s; --d: calc(.7s + var(--j, 0) * .07s); }
.wd-project-card .wd-proj-link { --dx: -14px; --t: .6s; --d: .98s; }

.wd-proj-frame-wrap { background: #0a1428; }
.wd-proj-frame-wrap img.wd-proj-tall { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: initial; will-change: auto; }
.wd-proj-frame-wrap .wd-proj-url, .wd-proj-url { display: block; }

/* ══════════ 4 · ΠΩΣ ΔΟΥΛΕΥΟΥΜΕ ══════════
   Η πρόοδος του επισκέπτη ΕΙΝΑΙ ο μηχανισμός: καθώς κατεβαίνει, ο κανόνας γεμίζει και κάθε βήμα ανάβει.
   Κάθε βήμα είναι μικρή σκηνή με δικά της ρήματα. Υπολογιστής: δεμένο με την κύλιση (μόνο scaleX)· κινητό: με το κάδρο. */
.wds-how .wds-label { --dx: -16px; --t: .6s; --d: 0s; }
.wds-how .wds-title, .wds-faq .wds-title { --t: .95s; --d: .06s; }
.wds-how .wds-lead { --dy: 14px; --t: .7s; --d: .3s; }

.wds-track { position: relative; padding-top: 30px; }
.wds-rail, .wds-rail-fill { position: absolute; left: 29px; right: calc((100% - 54px) / 4 - 29px); top: 7px; height: 2px; pointer-events: none; }
.wds-rail { background: rgba(140,180,255,.18); }
.wds-rail-fill { background: linear-gradient(90deg, #3b82f6, #7ee2b8); transform-origin: left center; transform: scaleX(var(--p, 1)); }
html.wdx-js:not(.wdx-fail) .wds-rail-fill { --p: 0; }
.wds-steps li { overflow: visible; transition: border-color .5s, background-color .5s; }
.wds-steps li::before { content: none; }
.wds-node { position: absolute; left: 21px; top: -30px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  background: #7ee2b8; border: 2px solid #7ee2b8; box-shadow: 0 0 0 5px rgba(126,226,184,.16); transition: background-color .35s, border-color .35s, box-shadow .35s; }
html.wdx-js:not(.wdx-fail) .wds-steps li:not(.is-on) .wds-node { background: #0b1b38; border-color: rgba(140,180,255,.4); box-shadow: none; }
html.wdx-js:not(.wdx-fail) .wds-steps li:not(.is-on) { border-color: rgba(140,180,255,.1); }
.wds-steps li.is-on { border-color: rgba(111,168,255,.4); background-color: rgba(10,24,52,.9); }
.wds-steps li.is-on .wds-n { color: #7ee2b8; }
.wds-steps li .wds-n { transition: color .4s; }

.wds-ill { display: block; width: 64px; height: 64px; margin: 0 0 14px; color: #6fa8ff; }
.wds-ill svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.wds-ill [data-v] { transform-box: fill-box; }
.wds-ill .fa { fill: rgba(111,168,255,.14); }
.wds-ill .ok { stroke: #7ee2b8; }
.wds-ill .okf { fill: rgba(126,226,184,.2); stroke: #7ee2b8; }
.wds-ill [data-v="draw"] { stroke-dasharray: 1; }

.wds-steps li .wds-n { --dx: -10px; --t: .45s; --d: 0s; }
.wds-steps li .wdm h3 { --t: .75s; --d: .5s; }
.wds-steps li p { --dy: 12px; --t: .6s; --d: .7s; }
/* 1 · Γνωριμία: δύο φυσαλίδες πετάγονται από την ουρά τους, μιλούν και πληκτρολογούν */
.wds-steps li:nth-child(1) .a1 { --o: 0% 100%; --t: .75s; --d: .05s; }
.wds-steps li:nth-child(1) .a2 { --o: 100% 100%; --t: .75s; --d: .32s; }
.wds-steps li:nth-child(1) .a3 { --t: .5s; --d: .5s; }
.wds-steps li:nth-child(1) .a4 { --dy: 5px; --t: .4s; --d: calc(.75s + var(--k, 0) * .1s); }
/* 2 · Γραπτή προσφορά: το φύλλο σχεδιάζεται, οι γραμμές γράφονται, η σφραγίδα πέφτει */
.wds-steps li:nth-child(2) .a1 { --t: .8s; --d: .05s; }
.wds-steps li:nth-child(2) .a3 { --o: 0% 50%; --t: .5s; --d: calc(.4s + var(--k, 0) * .12s); }
.wds-steps li:nth-child(2) .a2 { --o: 50% 50%; --t: .9s; --d: .95s; }
/* 3 · Σχέδιο και προεπισκόπηση: το παράθυρο ανοίγει, τα μπλοκ δένουν, ο δείκτης φτάνει */
.wds-steps li:nth-child(3) .a1 { --c0: inset(0 0 100% 0 round 3px); --r: 3px; --t: .7s; --d: .05s; }
.wds-steps li:nth-child(3) .a2 { --t: .6s; --d: calc(.4s + var(--k, 0) * .12s); }
.wds-steps li:nth-child(3) .a3 { --dx: -16px; --t: .6s; --d: .95s; }
/* 4 · Δημοσίευση: η υδρόγειος σχεδιάζεται και η επιβεβαίωση ανάβει */
.wds-steps li:nth-child(4) .a1 { --t: .8s; --d: .05s; }
.wds-steps li:nth-child(4) .a2 { --t: .7s; --d: calc(.3s + var(--k, 0) * .1s); }
.wds-steps li:nth-child(4) .a3 { --o: 50% 50%; --t: .9s; --d: .95s; }
.wds-steps li:nth-child(4) .a4 { --t: .5s; --d: 1.2s; }

/* Συχνές ερωτήσεις: δύο στήλες που μπαίνουν από αντίθετες πλευρές */
.wds-faq .wds-label { --dx: -16px; --t: .6s; --d: 0s; }
.wds-faq .wds-q { --d: calc(.35s + var(--j, 0) * .09s); }
.wds-faq .wds-q[data-v="build"] { --r: 6px; --c0: inset(0 100% 0 0 round 6px); --t: .75s; }
.wds-faq .wds-q[data-v="slide"] { --dx: 28px; --t: .7s; }
.wds-faq .wds-upd { --dy: 8px; --t: .5s; --d: 1s; }

@media (max-width: 1100px) {
  .wds-rail, .wds-rail-fill, .wds-node { display: none; }
  .wds-track { padding-top: 0; }
}
@media (max-width: 760px) { .wds-ill { width: 52px; height: 52px; margin-bottom: 10px; } }

/* ══════════ 5 · ΤΕΛΙΚΗ ΠΡΟΣΚΛΗΣΗ ══════════
   Το μπλε πάνελ χτίζεται από τα δεξιά (ίδια γλώσσα με τα πάνελ των καρτών)· το νούμερο μετρά· καμία ατέρμονη παλμική κίνηση. */
.wd-cta .wd-cta-card { --dy: 26px; --t: .8s; --d: 0s; }
.wd-cta .wd-cta-right { --r: 0px; --c0: inset(0 0 0 100%); --t: .9s; --d: .2s; }
.wd-cta .wd-cta-label { --dx: -14px; --t: .6s; --d: .35s; }
.wd-cta .wd-cta-title { --t: .9s; --d: .42s; }
.wd-cta .wd-cta-text  { --dy: 12px; --t: .65s; --d: .62s; }
.wd-cta .wd-cta-price-block { --dy: 14px; --t: .7s; --d: .55s; }
.wd-cta .wd-cta-btn { --t: .9s; --d: .95s; --o: 50% 50%; }
.wd-cta .wd-cta-perks li { --dx: 16px; --t: .5s; --d: calc(1.1s + var(--j, 0) * .08s); }
.wd-cta-price-num { animation: none; }       /* αντικαθιστά τον ατέρμονο παλμό (ΜΗ-02): το νούμερο μετρά μία φορά */

/* ΟΡΑΤΟΤΗΤΑ (ΜΗ-47): ό,τι δεν φαίνεται, δεν κινείται. Το wdx-gate μπαίνει μόνο όταν ζει ο διακόπτης του σεναρίου,
   ώστε χωρίς JS / χωρίς IntersectionObserver να μην μείνει τίποτα παγωμένο στο πρώτο καρέ. */
html.wdx-gate .wdx-go [data-v]:not(.wdx-seen),
html.wdx-gate .wdx-go .wdh-ic:not(.wdx-seen) svg * { animation-play-state: paused; }
html.wdx-bg *, html.wdx-bg *::before, html.wdx-bg *::after,
.wdx-off, .wdx-off *, .wdx-off *::before, .wdx-off *::after { animation-play-state: paused !important; }

html.motion-paused .wdx [data-v], html.motion-paused .wdx-go .wdh-ic svg * { animation: none !important; }
html.motion-paused.wdx-js .wdx [data-v] { visibility: visible !important; }
@media (prefers-reduced-motion: reduce) {
  .wdx-go [data-v], .wdx-go .wdh-ic svg * { animation: none !important; }
  html.wdx-js .wdx [data-v] { visibility: visible !important; }
  .wds-rail-fill { transform: scaleX(1); }
}

/* ══════════ Σύνθεση (στατική, ανεξάρτητη από την κίνηση) ══════════ */
.wdx-num { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.wdo-shot--three .wdo-plate { inset: 30px 10px 10px; }
.wds-ill [data-v] { transform-origin: var(--o, 50% 50%); }
.wd-project-card .wd-proj-browser { will-change: auto; }