/* Ρυθμίσεις ειδικά για το ΣΠΦΣΚ, φορτώνει μετά το style.css.
   Εδώ μπαίνει ό,τι αφορά ΜΟΝΟ αυτό το site — ώστε το style.css να μένει
   καθαρό και επαναχρησιμοποιήσιμο. */

/* Το λογότυπο έχει λευκά στοιχεία (γέφυρα, κείμενο) πάνω σε διάφανο:
   πάνω σε σκούρο φαίνεται σωστά, αλλά του λείπει λίγο "βάρος" — μια
   ελαφριά σκιά το ξεχωρίζει από τη φωτογραφία του hero. */
.brand img{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

/* Το footer έχει ανοιχτόχρωμο (σχεδόν λευκό) φόντο — τα λευκά στοιχεία
   του λογότυπου (γέφυρα, κείμενο) θα χάνονταν μέσα του. Ένα σκούρο
   στρογγυλό "πιάτο" από πίσω τα κάνει και πάλι ευανάγνωστα και βγάζει
   τον κίτρινο αετό στα κανονικά του χρώματα, αντί για την αόρατη λευκή
   εκδοχή. */
.footer-logo{
  background: var(--text);
  border-radius: 50%;
  padding: 10px;
}

/* Ο τίτλος του hero πατάει πάνω σε φωτογραφία με φωτεινά σημεία — μια
   διακριτική σκιά κρατά την αναγνωσιμότητα χωρίς να φαίνεται "βαριά". */
.hero-title{ text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.hero-tagline{ text-shadow: 0 1px 12px rgba(0,0,0,.6); }

/* ---------- Φόντο-αετός σε όλη τη σελίδα ---------- */
/* Το body ζωγράφιζε συμπαγές var(--ink) — αν μείνει έτσι, καλύπτει το
   .blood-bg από πίσω (το canvas background του html/body πάντα ζωγραφίζεται
   κάτω από ΟΛΑ τα άλλα, ακόμα και στοιχεία με αρνητικό z-index). Το κάνουμε
   διάφανο εδώ ώστε το φόντο-εφέ να είναι το πραγματικό φόντο του site. */
body{ background: transparent; }

.blood-bg{
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--ink);
}
/* Δύο αντίγραφα του ίδιου εμβλήματος (πετρωμένο ανάγλυφο σε σκούρα πέτρα):
   ένα πολύ αχνό μόνιμο "υδατογράφημα", και ένα δεύτερο πιο έντονο που
   φαίνεται μόνο μέσα από έναν κυκλικό φακό γύρω από το ποντίκι (--mx/--my,
   βλ. blood-eagle.js). Το translate3d(--px,--py) δίνει μια πολύ ήπια
   αίσθηση βάθους/parallax καθώς κινείται το ποντίκι· το --sy προσθέτει μια
   δεύτερη, ήπια μετατόπιση δεμένη με το (ομαλοποιημένο) scroll της σελίδας
   (βλ. smooth-scroll.js — αίτημα "να κουνιέται ο αετός αρμονικά με το σκρολ"). */
.blood-bg-eagle{
  position: absolute; inset: 0;
  background-image: url("/images/logo/eagle-blood.png");
  background-repeat: no-repeat;
  background-position: center 40%;
  /* cover, όχι ένα μικρό κάδρο στη μέση — η πέτρινη υφή του ίδιου του
     background γεμίζει ολόκληρη τη σελίδα, χωρίς ορατά άκρα "πίνακα". */
  background-size: cover;
  opacity: .16;
  filter: saturate(1.15);
  transform-origin: 50% 35%;
  transition: opacity .5s ease;
  /* Ακίνητο (χωρίς flutter/skew) — μόνο το ήπιο parallax/scroll transform
     του --px/--py/--sy, ζητήθηκε ρητά να μη "ανεμίζει" πια σαν λάβαρο. */
  transform: translate3d(var(--px, 0px), calc(var(--py, 0px) + var(--sy, 0px)), 0);
}
.blood-bg-eagle--reveal{
  opacity: .5;
  -webkit-mask-image: radial-gradient(circle 260px at var(--mx, 50vw) var(--my, 50vh), #000 0%, transparent 72%);
          mask-image: radial-gradient(circle 260px at var(--mx, 50vw) var(--my, 50vh), #000 0%, transparent 72%);
}
/* Ο αετός "λιώνει" εκεί που βρίσκεται ο κέρσορας: ένα τρίτο αντίγραφο,
   παραμορφωμένο μέσω SVG filter (feTurbulence + feDisplacementMap, βλ.
   #eagle-melt-filter στο base.njk), αποκαλύπτεται μόνο μέσα σε έναν μικρό
   κύκλο γύρω από το ποντίκι (ίδιο μοτίβο --mx/--my με το --reveal). Έξω
   από τον κύκλο παραμένει το κανονικό, ακίνητο .blood-bg-eagle — γι' αυτό
   "επανέρχεται" μόνο του μόλις φύγει ο κέρσορας από το σημείο. */
.blood-bg-eagle--melt{
  opacity: .4;
  filter: saturate(1.15) url(#eagle-melt-filter);
  -webkit-mask-image: radial-gradient(circle 170px at var(--mx, 50vw) var(--my, 50vh), #000 0%, transparent 70%);
          mask-image: radial-gradient(circle 170px at var(--mx, 50vw) var(--my, 50vh), #000 0%, transparent 70%);
}
@media (prefers-reduced-motion: reduce){
  .blood-bg-eagle--reveal{ display: none; }
  .blood-bg-eagle--melt{ display: none; }
  .blood-bg-eagle{ opacity: .16; transform: none; }
}
@media (max-width: 640px){
  /* Σε μικρή οθόνη δεν υπάρχει ποντίκι — μένει μόνο το αχνό υδατογράφημα. */
  .blood-bg-eagle--reveal{ display: none; }
  .blood-bg-eagle--melt{ display: none; }
}