/* Shared, restrained motion layer for the approved /demo2/ mockup. */
:root{
 --almyra-motion-duration:820ms;
 --almyra-motion-distance:34px;
 --almyra-motion-ease:cubic-bezier(.16,1,.3,1)
}

.motion-ready .motion-intro{
 animation:almyra-intro 920ms var(--almyra-motion-ease) 100ms both
}
.motion-ready .hero-note.motion-intro{animation-delay:380ms}
@keyframes almyra-intro{
 from{opacity:0;transform:translate3d(0,28px,0)}
 to{opacity:1;transform:none}
}

/* [ADAPT 2026-08-28] BUG ΠΡΑΓΜΑΤΙΚΗΣ ΘΕΣΗΣ (όχι transient/animation state) —
   επιβεβαιωμένο: `.hero-copy` παίρνει ΚΑΙ αυτό `.motion-intro` (το JS το
   προσθέτει σε `.hero-copy,.hero-note` μαζί). Οποιοδήποτε `transform` σε CSS
   animation — ΑΚΟΜΑ ΚΙ ΑΝ το keyframe `to{}` γράφει `transform:none` — κάνει
   το στοιχείο containing block για απόλυτα τοποθετημένα παιδιά (spec: το
   computed transform μετά την animation είναι matrix identity, όχι literal
   `none`). Αυτό ΠΑΤΑΕΙ το ΣΚΟΠΙΜΟ `.hero > .pb-row, .hero > .pb-row >
   .pb-col.hero-copy{position:static}` του home-sections.css (γραμμή 145) —
   το `.hero-note` (right:30px;bottom:24px) άρχισε να αγκυρώνεται στο στενό
   `.hero-copy` (~900px, αριστερό μισό) αντί στο πλατύ `.hero` (position:
   relative, γραμμή 115), δηλαδή μετακινήθηκε ολόκληρο προς το κέντρο/
   αριστερά — ΜΟΝΙΜΗ μετατόπιση θέσης, όχι πάγωμα animation.
   Fix: το `.hero-copy` παίρνει ΤΟ ΙΔΙΟ fade αλλά ΧΩΡΙΣ transform, ώστε να
   μην αποκτήσει ποτέ containing block. Το `.hero-note` κρατά το πλήρες
   fade+rise. Μηδενική οπτική διαφορά στο ίδιο το `.hero-copy` (η κίνησή του
   ήταν ήδη σχεδόν αόρατη — μόνο opacity 0→1 φαινόταν ουσιαστικά). */
.motion-ready .hero-copy.motion-intro{
 animation-name:almyra-intro-fade-only
}
@keyframes almyra-intro-fade-only{
 from{opacity:0}
 to{opacity:1}
}

.motion-ready .motion-reveal{
 opacity:0;
 transform:translate3d(0,var(--almyra-motion-distance),0);
 transition:
  opacity var(--almyra-motion-duration) var(--almyra-motion-ease),
  transform var(--almyra-motion-duration) var(--almyra-motion-ease);
 transition-delay:var(--motion-delay,0ms);
 will-change:opacity,transform
}
.motion-ready .motion-reveal[data-motion="fade"]{transform:none}
.motion-ready .motion-reveal[data-motion="left"],
.motion-ready .motion-reveal[data-motion="right"]{
 transform:translate3d(0,var(--almyra-motion-distance),0)
}
.motion-ready .motion-reveal[data-motion="scale"]{transform:scale(.94)}
.motion-ready .motion-reveal.is-visible{
 opacity:1;
 transform:none;
 will-change:auto
}

.motion-ready .motion-hover{
 transition:
  transform 280ms var(--almyra-motion-ease),
  box-shadow 280ms var(--almyra-motion-ease),
  background-color 220ms ease
}
.motion-ready .motion-cta,
.motion-ready .motion-cta i,
.motion-ready .motion-cta::after{
 transition:
  transform 260ms var(--almyra-motion-ease),
  box-shadow 260ms ease,
  background-color 220ms ease,
  border-color 220ms ease,
  color 220ms ease
}
.motion-ready .motion-link{transition:color 180ms ease,opacity 180ms ease}

.faq-list details[open]>p,
.faq details[open]>p{
 animation:almyra-answer-in 260ms var(--almyra-motion-ease) both
}
@keyframes almyra-answer-in{
 from{opacity:0;transform:translate3d(0,-5px,0)}
 to{opacity:1;transform:none}
}

@media (hover:hover) and (pointer:fine){
 .motion-ready .motion-hover:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 52px rgba(4,42,54,.16)
 }
 .motion-ready .motion-cta:hover{transform:translateY(-2px)}
 .motion-ready .motion-cta:hover i,
 .motion-ready .motion-cta:hover::after{transform:translateX(6px)}
}

@media (max-width:767.98px){
 :root{
  --almyra-motion-duration:680ms;
  --almyra-motion-distance:26px
 }
 .motion-ready .motion-reveal[data-motion="left"],
 .motion-ready .motion-reveal[data-motion="right"]{
  transform:translate3d(0,var(--almyra-motion-distance),0)
 }
 .motion-ready .motion-reveal.is-visible{transform:none}

 /* [ADAPT 2026-08-28] ΜΟΝΟ το rental-grid slider card απενεργοποιείται σε
    mobile — ζήτημα ιδιοκτήτη: το γενικό mobile-off (προηγούμενη έκδοση αυτού
    του αρχείου) έσβησε ΟΛΑ τα animations σε mobile, ενώ το πραγματικό
    touch-conflict ήταν μόνο στο Swiper slider (`.rental-grid .nqsl-slide-in`
    — δικό του transform στο touch-drag παλεύει με το `.motion-reveal`/
    `.motion-hover` transform+will-change πάνω στο ίδιο element). Τα υπόλοιπα
    fade-in/hover/cta σε mobile ξαναδουλεύουν κανονικά. */
 .rental-grid .nqsl-slide-in.motion-reveal,
 .rental-grid .nqsl-slide-in.motion-hover{
  transition:none!important;
  transform:none!important;
  opacity:1!important;
  will-change:auto!important
 }
}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .motion-intro,
 .motion-reveal,
 .motion-hover,
 .motion-cta,
 .motion-cta i,
 .motion-cta::after{
  animation:none!important;
  transition:none!important;
  transform:none!important
 }
 .motion-link{transition:none!important}
 .motion-reveal{opacity:1!important}
 .faq-list details[open]>p,
 .faq details[open]>p{animation:none!important}
}