/* Fabrico — motion layer.
   Purely additive: no colour, spacing or layout of the captured design changes.
   Everything is gated behind html.fab-anim (added by assets/js/animations.js),
   so with JS off — or with "reduce motion" — the site renders exactly as before. */

/* ---------- 2. scroll reveal ---------- */
html.fab-anim .fab-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--fab-i, 0) * 70ms);
  will-change: opacity, transform;
}
html.fab-anim .fab-reveal.is-in { opacity: 1; transform: none; }
/* side reveals for two-column rows */
html.fab-anim .fab-reveal--left { transform: translate3d(-26px, 0, 0); }
html.fab-anim .fab-reveal--right { transform: translate3d(26px, 0, 0); }
html.fab-anim .fab-reveal--zoom { transform: scale(.965); }

/* ---------- 3. hover feel ---------- */
html.fab-anim .fab-hover {
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease;
}
html.fab-anim .fab-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 60, 36, .16) !important;
}
/* image inside a hovered card breathes a little */
html.fab-anim .fab-hover .v-image__image,
html.fab-anim .fab-zoom .v-image__image,
html.fab-anim .fab-zoom img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
html.fab-anim .fab-hover:hover .v-image__image,
html.fab-anim .fab-zoom:hover .v-image__image,
html.fab-anim .fab-zoom:hover img { transform: scale(1.06); }
html.fab-anim .fab-zoom, html.fab-anim .fab-hover .v-image { overflow: hidden; }

/* buttons + chips */
html.fab-anim .v-btn { transition: transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .2s ease, background-color .2s ease, color .2s ease; }
html.fab-anim .v-btn:not(.v-btn--disabled):hover { transform: translateY(-2px); }
html.fab-anim .v-btn:not(.v-btn--disabled):active { transform: translateY(0) scale(.985); }
html.fab-anim .v-chip { transition: transform .2s ease, box-shadow .2s ease; }
html.fab-anim .v-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }

/* links (footer city list, nav) get a soft underline grow */
html.fab-anim footer a, html.fab-anim .v-footer a { transition: opacity .2s ease, transform .2s ease; }
html.fab-anim footer a:hover, html.fab-anim .v-footer a:hover { opacity: .82; transform: translateY(-1px); }

/* service / feature icons */
html.fab-anim .fab-pop { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
html.fab-anim .fab-pop:hover { transform: scale(1.08) rotate(-2deg); }

/* ---------- 4. accordions & panels ---------- */
html.fab-anim .v-expansion-panel-header { transition: background-color .25s ease, color .25s ease; }
html.fab-anim .v-expansion-panel-header .v-icon { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
html.fab-anim .v-expansion-panel--active > .v-expansion-panel-header .v-icon { transform: rotate(180deg); }
html.fab-anim .v-expansion-panel-content.fab-panel-in > .v-expansion-panel-content__wrap,
html.fab-anim .v-expansion-panel-content.fab-panel-in { animation: fabPanelIn .32s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes fabPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 5. header + back-to-top ---------- */
html.fab-anim header.v-app-bar { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, background-color .3s ease; }
html.fab-anim header.v-app-bar.fab-scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .12) !important; }
html.fab-anim .fab-totop {
  position: fixed; right: 20px; bottom: 96px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: #006037; color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 96, 55, .34);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility .28s;
}
html.fab-anim .fab-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
html.fab-anim .fab-totop:hover { background: #007a4e; transform: translateY(-3px); }

/* ---------- 6. floating action buttons (WhatsApp / Call / App) ---------- */
html.fab-anim .fixed-on-screen .button-container { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; }
html.fab-anim .fixed-on-screen .button-container:hover { transform: translateX(-4px) scale(1.04); }
html.fab-anim .fixed-on-screen .whatsapp-container { animation: fabPulse 2.8s ease-in-out infinite; }
@keyframes fabPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); } 50% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } }

/* ---------- 7. form fields ---------- */
html.fab-anim .v-text-field .v-input__slot,
html.fab-anim .v-select .v-input__slot { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
html.fab-anim .v-input--is-focused .v-input__slot { box-shadow: 0 2px 10px rgba(51, 204, 153, .22); }
html.fab-anim .fab-select-menu { animation: fabMenuIn .18s ease-out both; transform-origin: top center; }
@keyframes fabMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- 8. carousels / rails ---------- */
html.fab-anim .v-slide-group__prev, html.fab-anim .v-slide-group__next { transition: transform .2s ease, opacity .2s ease; }
html.fab-anim .v-slide-group__next:not(.v-slide-group__next--disabled):hover { transform: translateX(3px); }
html.fab-anim .v-slide-group__prev:not(.v-slide-group__prev--disabled):hover { transform: translateX(-3px); }
/* slide cross-fade is done by the slider itself (assets/js/app.js) — no CSS animation here,
   an animation would override the inline opacity it transitions. */

/* ---------- 9. toast ---------- */
html.fab-anim .fab-toast { transition: opacity .28s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fab-anim .fab-reveal,
  html.fab-anim .v-expansion-panel-content.fab-panel-in,
  html.fab-anim .fixed-on-screen .whatsapp-container,
  html.fab-anim .fab-select-menu { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  html.fab-anim .fab-hover:hover, html.fab-anim .v-btn:hover, html.fab-anim .fab-pop:hover { transform: none !important; }
}