/* ================================================================
   ICON EFFECTS — Open Mind icon library
   Βάλε μία κλάση σε οποιοδήποτε <svg> εικονίδιο (ή στο στοιχείο που το περιέχει).
   Συνεχές εφέ:    ie-spin, ie-pulse, ie-bounce, ie-ring, ie-heartbeat, ie-wiggle,
                   ie-float, ie-flip, ie-fade, ie-swing, ie-tada, ie-glow
   Μόνο στο hover: ie-h-spin, ie-h-pop, ie-h-bounce, ie-h-ring, ie-h-wiggle,
                   ie-h-flip, ie-h-rise, ie-h-tilt
                   (λειτουργεί και όταν περνάς πάνω από γονικό στοιχείο με κλάση ie-trigger,
                   π.χ. <a class="btn ie-trigger"><svg class="ie-h-ring">…</svg> Κλήση</a>)
   Κατά την εμφάνιση (χρειάζεται icon-effects.js):
                   ie-draw   → η γραμμή «ζωγραφίζεται» (για outline εικονίδια)
                   ie-in     → εμφανίζεται με μικρό «pop» όταν έρθει στην οθόνη
   Κύκλος παλμού πίσω από εικονίδιο (π.χ. κουμπί κλήσης/WhatsApp):
                   <span class="ie-ping"><svg>…</svg></span>
   Ταχύτητα:       ie-slow, ie-fast
   Σεβόμαστε το «μείωση κίνησης» του λειτουργικού (prefers-reduced-motion).
   ================================================================ */

.ie-spin, .ie-pulse, .ie-bounce, .ie-ring, .ie-heartbeat, .ie-wiggle, .ie-float,
.ie-flip, .ie-fade, .ie-swing, .ie-tada, .ie-glow,
[class*="ie-h-"] {
  transform-box: fill-box;
  transform-origin: center;
  --ie-dur: 1s;
}
.ie-slow { --ie-dur: 2s !important; }
.ie-fast { --ie-dur: .55s !important; }

/* ---------- συνεχή ---------- */
.ie-spin      { animation: ie-spin calc(var(--ie-dur) * 1.4) linear infinite; }
.ie-pulse     { animation: ie-pulse calc(var(--ie-dur) * 1.6) ease-in-out infinite; }
.ie-bounce    { animation: ie-bounce var(--ie-dur) cubic-bezier(.28,.84,.42,1) infinite; }
.ie-ring      { animation: ie-ring calc(var(--ie-dur) * 2) ease-in-out infinite; transform-origin: 50% 10%; }
.ie-heartbeat { animation: ie-heartbeat calc(var(--ie-dur) * 1.3) ease-in-out infinite; }
.ie-wiggle    { animation: ie-wiggle calc(var(--ie-dur) * 1.5) ease-in-out infinite; }
.ie-float     { animation: ie-float calc(var(--ie-dur) * 3) ease-in-out infinite; }
.ie-flip      { animation: ie-flip calc(var(--ie-dur) * 2.2) ease-in-out infinite; }
.ie-fade      { animation: ie-fade calc(var(--ie-dur) * 1.6) ease-in-out infinite; }
.ie-swing     { animation: ie-swing calc(var(--ie-dur) * 2) ease-in-out infinite; transform-origin: 50% 0; }
.ie-tada      { animation: ie-tada calc(var(--ie-dur) * 2.4) ease-in-out infinite; }
.ie-glow      { animation: ie-glow calc(var(--ie-dur) * 2) ease-in-out infinite; }

@keyframes ie-spin { to { transform: rotate(360deg); } }
@keyframes ie-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }
@keyframes ie-bounce { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-22%); } 70% { transform: translateY(0); } 82% { transform: translateY(-6%); } }
@keyframes ie-ring { 0%,50%,100% { transform: rotate(0); } 5%,15%,25%,35% { transform: rotate(14deg); } 10%,20%,30%,40% { transform: rotate(-14deg); } }
@keyframes ie-heartbeat { 0%,40%,100% { transform: scale(1); } 10%,30% { transform: scale(1.18); } 20% { transform: scale(1.02); } }
@keyframes ie-wiggle { 0%,60%,100% { transform: rotate(0); } 10%,30%,50% { transform: rotate(-9deg); } 20%,40% { transform: rotate(9deg); } }
@keyframes ie-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12%); } }
@keyframes ie-flip { 0%,40% { transform: perspective(200px) rotateY(0); } 60%,100% { transform: perspective(200px) rotateY(360deg); } }
@keyframes ie-fade { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ie-swing { 0%,100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-12deg); } }
@keyframes ie-tada { 0%,60%,100% { transform: scale(1) rotate(0); } 5%,10% { transform: scale(.9) rotate(-4deg); } 15%,25%,35%,45% { transform: scale(1.12) rotate(4deg); } 20%,30%,40% { transform: scale(1.12) rotate(-4deg); } 50% { transform: scale(1) rotate(0); } }
@keyframes ie-glow { 0%,100% { filter: drop-shadow(0 0 0 currentColor); } 50% { filter: drop-shadow(0 0 6px currentColor); } }

/* ---------- hover ---------- */
[class*="ie-h-"] { transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s; }
.ie-h-spin:hover,   .ie-trigger:hover .ie-h-spin   { transform: rotate(180deg); }
.ie-h-pop:hover,    .ie-trigger:hover .ie-h-pop    { transform: scale(1.22); }
.ie-h-rise:hover,   .ie-trigger:hover .ie-h-rise   { transform: translateY(-18%); }
.ie-h-tilt:hover,   .ie-trigger:hover .ie-h-tilt   { transform: rotate(-12deg) scale(1.08); }
.ie-h-bounce:hover, .ie-trigger:hover .ie-h-bounce { animation: ie-bounce .8s cubic-bezier(.28,.84,.42,1) 1; }
.ie-h-ring:hover,   .ie-trigger:hover .ie-h-ring   { animation: ie-ring 1.4s ease-in-out 1; transform-origin: 50% 10%; }
.ie-h-wiggle:hover, .ie-trigger:hover .ie-h-wiggle { animation: ie-wiggle .9s ease-in-out 1; }
.ie-h-flip:hover,   .ie-trigger:hover .ie-h-flip   { animation: ie-flip 1.1s ease-in-out 1; }

/* ---------- κατά την εμφάνιση (με icon-effects.js) ---------- */
.ie-draw [pathLength], .ie-draw[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ie-draw.ie-visible [pathLength] { animation: ie-draw 1.4s ease forwards; }
@keyframes ie-draw { to { stroke-dashoffset: 0; } }

.ie-in { opacity: 0; transform: scale(.4) rotate(-20deg); transform-box: fill-box; transform-origin: center;
  transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.ie-in.ie-visible { opacity: 1; transform: none; }

/* ---------- παλμός γύρω από εικονίδιο ---------- */
.ie-ping { position: relative; display: inline-grid; place-items: center; }
.ie-ping::before, .ie-ping::after {
  content: ""; position: absolute; inset: -20%; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0; animation: ie-ping 2s cubic-bezier(0,.55,.45,1) infinite;
}
.ie-ping::after { animation-delay: 1s; }
@keyframes ie-ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- μείωση κίνησης ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="ie-"], [class*="ie-"]::before, [class*="ie-"]::after, .ie-draw [pathLength] {
    animation: none !important; transition: none !important;
  }
  .ie-in, .ie-draw [pathLength] { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}