/* ═══════════════════════════════════════════════════════════════════════
   M D GROUPS — κίνηση & αλληλεπίδραση
   Καθαρό CSS, χωρίς JavaScript. Οι εφέ κύλισης χρησιμοποιούν
   scroll-driven animations· όπου δεν υποστηρίζονται, το περιεχόμενο
   εμφανίζεται κανονικά (progressive enhancement).
   ══════════════════════════════════════════════════════════════════ */

/* — ο header είναι sticky: τα άγκιστρα δεν πρέπει να κρύβονται από κάτω — */
[id] { scroll-margin-top: 96px; }


/* ═══ 1. ΕΝΑΛΛΑΣΣΟΜΕΝΟ ΡΗΜΑ ΣΤΟΝ ΤΙΤΛΟ ══════════════════════════════
   Τέσσερις λέξεις στοιβαγμένες στο ίδιο κελί, εναλλάσσονται κυκλικά.
   Χρονικό animation — δουλεύει παντού. */

.md-verb {
  display: grid;
  grid-template-areas: "verb";
}
.md-verb > span {
  grid-area: verb;
  opacity: 0;
  animation: mdVerbCycle 12.8s linear infinite;
}
.md-verb > span:nth-child(1) { animation-delay: 0s; }
.md-verb > span:nth-child(2) { animation-delay: 3.2s; }
.md-verb > span:nth-child(3) { animation-delay: 6.4s; }
.md-verb > span:nth-child(4) { animation-delay: 9.6s; }

@keyframes mdVerbCycle {
  0%                { opacity: 0; }
  1.9%,  23.1%      { opacity: 1; }
  25%,   100%       { opacity: 0; }
}


/* ═══ 2. ΕΦΕ ΚΥΛΙΣΗΣ (scroll-driven) ═══════════════════════════════════
   Όλα μέσα σε @supports: αν ο browser δεν τα υποστηρίζει, τίποτα
   δεν κρύβεται και η σελίδα παραμένει πλήρως αναγνώσιμη. */

@supports (animation-timeline: view()) {

  /* — μπάρα προόδου ανάγνωσης στην κορυφή — */
  [data-progress] {
    animation: mdProgress linear forwards;
    animation-timeline: scroll(root block);
  }
  @keyframes mdProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* — σκιά στο navbar μόλις ξεκινήσει η κύλιση — */
  [data-navbar] {
    animation: mdNavShadow linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90px;
  }
  @keyframes mdNavShadow {
    from { box-shadow: 0 0 0 transparent; }
    to   { box-shadow: var(--shadow-md); }
  }

  /* — εμφάνιση στοιχείων καθώς μπαίνουν στο κάδρο — */
  [data-reveal] {
    animation: mdReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
  @keyframes mdReveal {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  /* κλιμακωτή καθυστέρηση: κάθε κάρτα ξεκινά λίγο αργότερα από την προηγούμενη */
  [data-stagger="1"] { animation-range: entry 0% cover 30%; }
  [data-stagger="2"] { animation-range: entry 0% cover 38%; }
  [data-stagger="3"] { animation-range: entry 0% cover 46%; }

  /* — οι γραμμές τίτλων «τραβιούνται» από αριστερά προς τα δεξιά — */
  [data-rule] {
    animation: mdRuleDraw linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }
  @keyframes mdRuleDraw {
    from { width: 0%; }
    to   { width: 100%; }
  }

  /* — ήπιο parallax στις μεγάλες φωτογραφίες — */
  [data-parallax] {
    animation: mdParallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes mdParallax {
    from { transform: translateY(-4.5%) scale(1.14); }
    to   { transform: translateY(4.5%)  scale(1.14); }
  }
}


/* ═══ 3. ΜΕΝΟΥ ΚΙΝΗΤΟΥ (burger) ════════════════════════════════════════
   Χωρίς JavaScript: το μενού ανοίγει με :target. Επειδή κάθε σύνδεσμος
   δείχνει σε ενότητα της σελίδας, το πάτημα ενός συνδέσμου αλλάζει το
   target και το μενού κλείνει μόνο του. */

/* — το εικονίδιο burger — */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  margin-left: auto;
  border: 1px solid var(--color-divider);
  padding: 0 10px;
}
.nav-burger span {
  display: block;
  height: 1.5px;
  width: 22px;
  background: var(--color-text);
  transition: width 0.25s cubic-bezier(.2,.7,.2,1), background-color 0.25s linear;
}
.nav-burger span:nth-child(2) { width: 15px; }
.nav-burger:hover { border-color: var(--color-accent); }
.nav-burger:hover span { background: var(--color-accent); }
.nav-burger:hover span:nth-child(2) { width: 22px; }

/* — το κουμπί κλεισίματος (Χ) μέσα στο μενού — */
.nav-close {
  display: none;
  position: absolute;
  top: clamp(18px, 5vw, 26px);
  right: clamp(20px, 5vw, 32px);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-divider);
}
.nav-close span {
  position: absolute;
  width: 20px; height: 1.5px;
  background: var(--color-text);
  transition: background-color 0.25s linear;
}
.nav-close span:nth-child(1) { transform: rotate(45deg); }
.nav-close span:nth-child(2) { transform: rotate(-45deg); }
.nav-close:hover { border-color: var(--color-accent); }
.nav-close:hover span { background: var(--color-accent); }

@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .nav-close  { display: flex; }

  /* πλήρης οθόνη — position:fixed, ώστε το :target να μην μετακινεί τη σελίδα */
  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0 clamp(24px, 8vw, 56px);
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.32s cubic-bezier(.2,.7,.2,1),
                transform 0.32s cubic-bezier(.2,.7,.2,1),
                visibility 0.32s;
  }
  .nav-menu:target {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* οι σύνδεσμοι: μεγάλοι, στοιχισμένοι, με λεπτή γραμμή ανάμεσα */
  .nav-menu > a:not(.nav-close):not(.btn) {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(26px, 8vw, 38px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    padding: clamp(16px, 4vw, 22px) 0;
    border-bottom: 1px solid var(--color-divider);
    color: var(--color-text);
  }
  /* το πρώτο <a> είναι το «Χ», άρα ο πρώτος σύνδεσμος είναι ο 2ος του τύπου */
  .nav-menu > a:nth-of-type(2) {
    border-top: 1px solid var(--color-divider);
  }
  .nav-menu > a:not(.nav-close):not(.btn):active { color: var(--color-accent); }

  /* αρίθμηση 01 · 02 · 03 … στο ύφος του σχεδίου */
  .nav-menu { counter-reset: mdnav; }
  .nav-menu > a:not(.nav-close):not(.btn)::before {
    counter-increment: mdnav;
    content: "0" counter(mdnav);
    display: inline-block;
    min-width: 2.6em;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    vertical-align: middle;
    color: var(--color-accent);
  }

  .nav-menu > .btn {
    margin-top: clamp(24px, 6vw, 36px);
    min-height: 52px;
    font-size: 16px;
  }

  /* κλιμακωτή είσοδος των συνδέσμων όταν ανοίγει το μενού */
  .nav-menu:target > a { animation: mdMenuIn 0.42s cubic-bezier(.2,.7,.2,1) both; }
  .nav-menu:target > a:nth-of-type(2) { animation-delay: 0.05s; }
  .nav-menu:target > a:nth-of-type(3) { animation-delay: 0.10s; }
  .nav-menu:target > a:nth-of-type(4) { animation-delay: 0.15s; }
  .nav-menu:target > a:nth-of-type(5) { animation-delay: 0.20s; }
  .nav-menu:target > a:nth-of-type(6) { animation-delay: 0.25s; }
  @keyframes mdMenuIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* το εικονίδιο burger γίνεται διακριτικά «ενεργό» όσο το μενού είναι ανοιχτό */
  .nav:has(.nav-menu:target) .nav-burger span { background: var(--color-accent); }
}


/* ═══ 4. ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΜΕ ΤΟ ΠΟΝΤΙΚΙ ═════════════════════════════════ */

/* — σύνδεσμοι πλοήγησης: γραμμή που ξεδιπλώνεται (μόνο σε οθόνη υπολογιστή) — */
@media (min-width: 861px) {
  .nav-menu a:not(.btn) {
    position: relative;
    padding-bottom: 3px;
  }
  .nav-menu a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
  }
  .nav-menu a:not(.btn):hover::after { transform: scaleX(1); }
}

/* — κουμπιά: ανασηκώνονται ελαφρά — */
.btn {
  transition: transform 0.18s cubic-bezier(.2,.7,.2,1),
              background-color 0.18s linear,
              box-shadow 0.18s linear;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0);    box-shadow: none; }

/* — κάρτες υπηρεσιών: το περίγραμμα και τα σημάδια παίρνουν το χρώμα τόνου — */
.blueprint {
  transition: border-color 0.25s linear,
              transform 0.25s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.25s linear;
}
#ypiresies .blueprint:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}
.blueprint > .corner { transition: color 0.25s linear; }
#ypiresies .blueprint:hover > .corner { color: var(--color-accent); }

/* — έργα: με το hover η φωτογραφία επιστρέφει στο φυσικό της χρώμα — */
#erga figure .duotone::after {
  transition: opacity 0.45s cubic-bezier(.2,.7,.2,1);
}
#erga figure:hover .duotone::after { opacity: 0; }

#erga figure .duotone { transition: border-color 0.25s linear; }
#erga figure:hover .duotone { border-color: var(--color-accent); }
#erga figure:hover .duotone > .corner { color: var(--color-accent); }

#erga figcaption strong { transition: color 0.25s linear; }
#erga figure:hover figcaption strong { color: var(--color-accent-700); }

/* — βήματα διαδικασίας: ο αριθμός μεγαλώνει διακριτικά — */
#arxi ol li span:first-child {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
  transform-origin: 0 50%;
}
#arxi ol li:hover span:first-child { transform: scale(1.18); }

/* — πεδία φόρμας — */
.input { transition: border-color 0.2s linear, background-color 0.2s linear; }

/* — σύνδεσμοι επικοινωνίας: υπογράμμιση που ξεδιπλώνεται — */
#epikoinonia dd a, footer a {
  position: relative;
}
#epikoinonia dd a::after, footer a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
}
#epikoinonia dd a:hover::after, footer a:hover::after { transform: scaleX(1); }

/* — το marquee σταματά όταν περνάς από πάνω, για να διαβαστεί — */
[data-marquee] { animation-play-state: running; }
[data-marquee]:hover { animation-play-state: paused; }


/* ═══ 5. ΣΕΒΑΣΜΟΣ ΣΤΙΣ ΡΥΘΜΙΣΕΙΣ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑΣ ═══════════════════════
   Όποιος έχει ζητήσει «λιγότερη κίνηση» βλέπει τη σελίδα ακίνητη
   και πλήρως ορατή. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-rule]   { width: 100% !important; }
  [data-parallax] { transform: scale(1.14) !important; }
  .md-verb > span            { opacity: 0; }
  .md-verb > span:first-child { opacity: 1; }
}