/* ========================================================================= Services — effects layer Φορτώνεται σε single + archive, μαζί με το services-base.css. Φιλοσοφία: «μέτρια, με χαρακτήρα». Όλα τα effects ενεργοποιούνται μόνο όταν υπάρχει η κλάση .svc-anim στο (την προσθέτει inline script στο head μόνο εφόσον ο χρήστης ΔΕΝ έχει prefers-reduced-motion). Αν το βασικό JS αποτύχει να φορτώσει, προστίθεται .svc-anim-off ως δικλείδα και όλα γίνονται ορατά αμέσως. Έτσι δεν «κολλάει» ποτέ κρυμμένο περιεχόμενο. ========================================================================= */ /* ========================================================================= 1. Αρχικές «κρυμμένες» καταστάσεις (μόνο όταν τρέχει το animation) ========================================================================= */ .svc-anim:not(.svc-anim-off) .svc-section, .svc-anim:not(.svc-anim-off) .svc-cta { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .svc-anim:not(.svc-anim-off) .svc-section.is-in, .svc-anim:not(.svc-anim-off) .svc-cta.is-in { opacity: 1; transform: none; } /* Cards αρχείου: ξεκινούν χαμηλά, μπαίνουν με stagger (delay μέσω --svc-d) */ .svc-anim:not(.svc-anim-off) .svc-card { opacity: 0; transform: translateY(16px) scale(0.985); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--svc-d, 0s); will-change: opacity, transform; } .svc-anim:not(.svc-anim-off) .svc-card.is-in { opacity: 1; transform: none; } /* Card που φεύγει στο φιλτράρισμα */ .svc-anim .svc-card.is-leaving { opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } /* ========================================================================= 2. Είσοδος hero στο load ========================================================================= */ .svc-anim:not(.svc-anim-off) .svc-hero__text > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .svc-anim:not(.svc-anim-off) .svc-hero.is-ready .svc-hero__text > * { opacity: 1; transform: none; } /* Διαδοχικό stagger στα παιδιά του hero κειμένου */ .svc-anim .svc-hero.is-ready .svc-hero__text > *:nth-child(1) { transition-delay: 0.05s; } .svc-anim .svc-hero.is-ready .svc-hero__text > *:nth-child(2) { transition-delay: 0.13s; } .svc-anim .svc-hero.is-ready .svc-hero__text > *:nth-child(3) { transition-delay: 0.21s; } .svc-anim .svc-hero.is-ready .svc-hero__text > *:nth-child(4) { transition-delay: 0.29s; } /* Εικόνα hero: απαλή είσοδος + μικρό «ξεζουμάρισμα» */ .svc-anim:not(.svc-anim-off) .svc-hero__media { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: 0.15s; } .svc-anim:not(.svc-anim-off) .svc-hero.is-ready .svc-hero__media { opacity: 1; transform: none; } .svc-anim .svc-hero__img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .svc-anim .svc-hero.is-ready .svc-hero__img { transform: none; } /* ========================================================================= 3. Ομαλά accordions (animation max-height μέσω JS) ========================================================================= */ .svc-anim .svc-acc__panel { transition: max-height 0.32s ease, opacity 0.28s ease; } /* Κρατάμε το εικονίδιο + ομαλό στην αλλαγή */ .svc-acc__head .svc-acc__icon { transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .svc-anim .svc-acc__head:hover .svc-acc__icon { border-color: var(--svc-accent); transform: scale(1.08); } /* ========================================================================= 4. Micro-interactions ========================================================================= */ /* Κουμπιά: ελαφρύ «πάτημα» */ .svc-anim .svc-btn, .svc-anim .svc-filter { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; } .svc-anim .svc-btn:active, .svc-anim .svc-filter:active { transform: translateY(1px) scale(0.99); } button.svc-filter:hover { color: white; border:none; } .svc-anim .svc-btn--accent:hover { box-shadow: 0 8px 22px rgba(85, 157, 164, 0.45); } /* Pills: μικρή ανύψωση στο hover */ .svc-anim .svc-pill { transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .svc-anim .svc-pills .svc-pill:hover { transform: translateY(-2px); } /* Checklist: το τικ «ζωντανεύει» όταν μπαίνει η ενότητα */ .svc-anim:not(.svc-anim-off) .svc-section .svc-check svg { opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .svc-anim:not(.svc-anim-off) .svc-section.is-in .svc-check svg { opacity: 1; transform: none; } .svc-anim .svc-section.is-in .svc-check:nth-child(2) svg { transition-delay: 0.06s; } .svc-anim .svc-section.is-in .svc-check:nth-child(3) svg { transition-delay: 0.12s; } .svc-anim .svc-section.is-in .svc-check:nth-child(4) svg { transition-delay: 0.18s; } .svc-anim .svc-section.is-in .svc-check:nth-child(5) svg { transition-delay: 0.24s; } .svc-anim .svc-section.is-in .svc-check:nth-child(6) svg { transition-delay: 0.30s; } /* Benefit cards: ελαφρύ lift στο hover */ .svc-anim .svc-benefit { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .svc-anim .svc-benefit:hover { transform: translateY(-3px); } /* Παλμός στην κουκκίδα του eyebrow (πολύ διακριτικός) */ .svc-anim .svc-eyebrow__dot { animation: svc-dot-pulse 2.6s ease-in-out infinite; } @keyframes svc-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(85, 157, 164, 0.5); } 55% { box-shadow: 0 0 0 5px rgba(85, 157, 164, 0); } } /* ========================================================================= 5. Σεβασμός prefers-reduced-motion (δικλείδα ασφαλείας) ========================================================================= */ @media (prefers-reduced-motion: reduce) { .svc-anim .svc-section, .svc-anim .svc-cta, .svc-anim .svc-card, .svc-anim .svc-hero__text > *, .svc-anim .svc-hero__media, .svc-anim .svc-section .svc-check svg { opacity: 1 !important; transform: none !important; transition: none !important; } .svc-anim .svc-hero__img { transform: none !important; } .svc-anim .svc-eyebrow__dot { animation: none !important; } }