/*
  WebAssisto — demo overview page-specific stylesheet
  Source: extracted verbatim from the <style> block inside the approved
  "WebAssisto Demos.dc.html" Designer export, limited to the rules that
  are unique to this page. Rules already present in assets/css/site.css
  (.c-nav-link, .c-btn-header:hover, .c-footer-link, focus-visible, the
  .c-root font-family base rules) are reused from there, not duplicated
  here, to avoid two sources of truth for shared chrome.
*/

.c-btn-ghost:hover { border-color:#eceae4; color:#eceae4 !important; }

.c-demo-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.c-demo-card:hover { transform:translateY(-6px); box-shadow:0 24px 46px rgba(0,0,0,0.4); }
.c-demo-card:hover .c-demo-cta { background:#c4ef4d; }

/* Kapsalon: elegant fade/slide reveal */
@keyframes c-kap-fade1 { 0%,8% { opacity:0; transform:translateY(10px); } 26%,100% { opacity:1; transform:translateY(0); } }
@keyframes c-kap-fade2 { 0%,20% { opacity:0; transform:translateY(10px); } 38%,100% { opacity:1; transform:translateY(0); } }
@keyframes c-kap-fade3 { 0%,32% { opacity:0; transform:translateY(10px); } 50%,100% { opacity:1; transform:translateY(0); } }
.c-kap-1 { animation:c-kap-fade1 6s ease-in-out infinite; }
.c-kap-2 { animation:c-kap-fade2 6s ease-in-out infinite; }
.c-kap-3 { animation:c-kap-fade3 6s ease-in-out infinite; }

/* Hovenier: organic layered growth */
@keyframes c-hov-grow1 { 0%,6% { transform:scaleY(0); } 24%,100% { transform:scaleY(1); } }
@keyframes c-hov-grow2 { 0%,18% { transform:scaleY(0); } 36%,100% { transform:scaleY(1); } }
@keyframes c-hov-grow3 { 0%,30% { transform:scaleY(0); } 48%,100% { transform:scaleY(1); } }
.c-hov-1 { animation:c-hov-grow1 6s ease-in-out infinite; transform-origin:bottom; }
.c-hov-2 { animation:c-hov-grow2 6s ease-in-out infinite; transform-origin:bottom; }
.c-hov-3 { animation:c-hov-grow3 6s ease-in-out infinite; transform-origin:bottom; }

/* Garage: structured panels locking in */
@keyframes c-gar-lock1 { 0%,4% { opacity:0; transform:translateX(-8px); } 20%,100% { opacity:1; transform:translateX(0); } }
@keyframes c-gar-lock2 { 0%,16% { opacity:0; transform:translateX(8px); } 32%,100% { opacity:1; transform:translateX(0); } }
@keyframes c-gar-lock3 { 0%,28% { opacity:0; transform:scale(0.9); } 44%,100% { opacity:1; transform:scale(1); } }
@keyframes c-gar-scan { 0%,100% { top:0%; } 50% { top:96%; } }
.c-gar-1 { animation:c-gar-lock1 6s ease-in-out infinite; }
.c-gar-2 { animation:c-gar-lock2 6s ease-in-out infinite; }
.c-gar-3 { animation:c-gar-lock3 6s ease-in-out infinite; }
.c-gar-scan { animation:c-gar-scan 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .c-kap-1, .c-kap-2, .c-kap-3, .c-hov-1, .c-hov-2, .c-hov-3, .c-gar-1, .c-gar-2, .c-gar-3, .c-gar-scan, .c-demo-card {
    animation:none !important; transition:none !important;
  }
  .c-kap-1, .c-kap-2, .c-kap-3, .c-gar-1, .c-gar-2, .c-gar-3 { opacity:1 !important; transform:none !important; }
  .c-hov-1, .c-hov-2, .c-hov-3 { transform:scaleY(1) !important; }
  .c-gar-scan { opacity:0 !important; }
  .c-demo-card:hover { transform:none !important; }
}

@media (max-width:860px) {
  .c-demo-grid { grid-template-columns:1fr !important; }
}