/* Ι.Ν. ΚΟΙΜΗΣΕΩΣ ΤΗΣ ΘΕΟΤΟΚΟΥ, 40 ΕΚΚΛΗΣΙΕΣ — ΤΟ ΣΗΜΑ ΤΟΥ ΝΑΟΥ, ΖΩΝΤΑΝΟ (SXEDIO-OPSI D).

   Το σήμα ζωγραφίζεται ΜΙΑ φορά, ως εικόνα. Μέσα στην εικόνα δεν κινείται τίποτα: το ίχνος έχει χιλιάδες κόμβους και κάθε
   κίνηση μέσα του θα το ξαναζωγράφιζε ολόκληρο σε κάθε καρέ. Κινούνται μόνο τέσσερα λεπτά στρώματα γύρω του (ένα κάτω, τρία
   πάνω), και αλλάζουν μόνο διαφάνεια και θέση.

   ΜΕΤΡΗΜΕΝΟ 6/10/2026: με την ανάσα μόνο στο χρυσό (μια λεπτή καμάρα, η πόρτα, λίγες τελείες) και κορυφή .28, στο σήμα των
   168px άλλαζε το 4% των pixel κατά 19 στάθμες το πολύ: το μάτι το έβλεπε ακίνητο. Γι' αυτό το φως μέσα στον ναό, και κορυφές
   ως .58. Η ίδια μέτρηση τώρα: tests/ekklisia-opsi.test.ts κρατά τα όρια, ops/ΑΝΕΒΑΣΜΑ.md λέει πώς ξαναμετριέται.

     zsima-fengos   ένα ζεστό φως ΚΑΤΩ από την εικόνα: φαίνεται μέσα από τα ανοίγματα του σχεδίου (παράθυρα, καμάρες, η πόρτα),
                    σαν το φως των κεριών μέσα στον ναό. Ανασαίνει μαζί με το χρυσό· στο μεγάλο σήμα μετακινείται πολύ αργά.
     zsima-therme   το χρυσό του σήματος σε πιο ανοιχτό χρυσό. Στην ηρεμία ανασαίνει σαν φλόγα κεριού, άνισα, όχι σαν παλμός.
     zsima-lampsi   μια λωρίδα φως που περνά ΜΟΝΟ πάνω από το χρυσό, όταν το πατήσεις (τη στέλνει το sima.js).
     zsima-kyklos   ένας κύκλος που ανοίγει και σβήνει, όπως η καμπάνα μετά το χτύπημα. Μόνο στο μεγάλο σήμα.

   Χωρίς JavaScript: το σήμα ανασαίνει, και στο πάτημα απλώς ζεσταίνεται. Καμία κίνηση στο πέρασμα του ποντικιού.
   Ο κανόνας του κώδικα ισχύει: ΚΑΝΕΝΑ μπλοκ «μειωμένης κίνησης». Στο χαρτί που τυπώνεται τα τρία στρώματα δεν υπάρχουν.
   Χρώματα: μόνο από το xromata.css. Όλα εδώ είναι «screen»: το φύλλο φορτώνεται και στο γραφείο των εγγράφων. */
@import url("xromata.css") screen;

@media screen {
  .zsima { position: relative; display: inline-block; flex: none; aspect-ratio: 1; border-radius: 50%; line-height: 0; vertical-align: middle; }
  button.zsima { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  /* `position: relative`: το φως που είναι ΠΡΙΝ από την εικόνα μένει από κάτω της, τα τρία στρώματα που είναι ΜΕΤΑ μένουν από πάνω */
  .zsima-eikona { position: relative; display: block; width: 100%; height: 100%; }
  .zsima-megalo { width: 168px; }
  .zsima-mesaio { width: 96px; }
  .zsima-kefali { width: 48px; }
  .zsima-grafeio { width: 44px; }
  @media (max-width: 480px) { .zsima-megalo { width: 132px; } }

  /* τα στρώματα: ποτέ στον δρόμο του δαχτύλου */
  .zsima-fengos, .zsima-therme, .zsima-lampsi, .zsima-kyklos { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
  .zsima-therme { display: block; opacity: 0; will-change: opacity; }
  /* το φως μέσα στον ναό: ένας κύκλος που σβήνει πριν φτάσει στο περίγραμμα του σήματος, με κέντρο λίγο πάνω από την πόρτα */
  .zsima-fengos { border-radius: 50%; background: radial-gradient(circle at 50% 58%, var(--xryso-fos) 0%, var(--fengos-mesa) 28%, var(--fengos-exo) 46%); opacity: 0; will-change: opacity, transform; }

  /* Η ΑΝΑΣΑ: άνιση, σαν φλόγα κεριού, όχι σαν παλμός. Το χρυσό και το φως ανασαίνουν μαζί. */
  .zsima-anasa .zsima-therme, .zsima-anasa .zsima-fengos { animation: sima-anasa 11s ease-in-out infinite; }
  @keyframes sima-anasa {
    0% { opacity: .06; }
    17% { opacity: .42; }
    30% { opacity: .16; }
    46% { opacity: .58; }
    61% { opacity: .2; }
    79% { opacity: .46; }
    100% { opacity: .06; }
  }
  /* στο μεγάλο σήμα το φως μετακινείται λίγο και πολύ αργά, σε άλλον ρυθμό από την ανάσα: δεν επαναλαμβάνεται ποτέ ίδιο */
  .zsima-megalo.zsima-anasa .zsima-fengos { animation: sima-anasa 11s ease-in-out infinite, sima-plano 17s ease-in-out infinite alternate; }
  @keyframes sima-plano {
    0% { transform: translate(-1.5%, 1%) scale(1); }
    100% { transform: translate(1.5%, -1%) scale(1.06); }
  }

  /* η λάμψη: η μάσκα είναι το χρυσό του σήματος και ζωγραφίζεται μία φορά· κινείται μόνο η λωρίδα από κάτω της */
  .zsima-lampsi { overflow: hidden; -webkit-mask: url("eikones/sima-xryso.svg") center / 100% 100% no-repeat; mask: url("eikones/sima-xryso.svg") center / 100% 100% no-repeat; }
  .zsima-lampsi > span { position: absolute; top: -10%; bottom: -10%; left: -70%; width: 40%; background: linear-gradient(90deg, transparent, var(--lampsi), transparent); opacity: .9; transform: translateX(0) skewX(-18deg); will-change: transform; }
  @supports not ((mask-image: none) or (-webkit-mask-image: none)) { .zsima-lampsi { display: none; } }

  /* ο κύκλος: αόρατος ώσπου να πατηθεί το σήμα */
  .zsima-kyklos { box-sizing: border-box; border: 1.5px solid var(--xryso); border-radius: 50%; opacity: 0; will-change: transform, opacity; }

  /* χωρίς JavaScript (το sima.js σημαδεύει το σήμα στο πρώτο πάτημα): μια σκέτη απάντηση στο δάχτυλο */
  .zsima-zontano:not(.zsima-xypnio):active .zsima-therme { animation: none; opacity: .8; }
}
@media print { .zsima-fengos, .zsima-therme, .zsima-lampsi, .zsima-kyklos { display: none !important; } }