/* ===== LEO TECH LAB — Animation layer (drop-in, framework-independent) ===== */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* Page load */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .6s ease both}

/* Scroll reveal (JS adds classes) */
@keyframes revealUp{from{opacity:0;translate:0 32px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes revealLeft{from{opacity:0;translate:-36px 0}to{opacity:1;translate:0 0}}
@keyframes revealRight{from{opacity:0;translate:36px 0}to{opacity:1;translate:0 0}}
@keyframes revealZoom{from{opacity:0;scale:.88}to{opacity:1;scale:1}}
@keyframes dropIn{from{opacity:0;translate:0 -100%}to{opacity:1;translate:0 0}}
@keyframes popIn{from{opacity:0;scale:.92;translate:0 16px}to{opacity:1;scale:1;translate:0 0}}

.anim-pre{opacity:0}
.anim-in{animation:revealUp .75s var(--ease-out) var(--d,0s) backwards}
.anim-in[data-anim="left"]{animation-name:revealLeft}
.anim-in[data-anim="right"]{animation-name:revealRight}
.anim-in[data-anim="zoom"]{animation-name:revealZoom}
.anim-in[data-anim="drop"]{animation-name:dropIn;animation-duration:.7s}

/* Modals / popups */
.fixed.inset-0 > div{animation:popIn .4s var(--ease-spring) both}
.fixed.inset-0{animation:pageIn .25s ease both}

/* Cards: lift + shadow + image zoom */
.group.rounded-3xl,.group.rounded-2xl{transition:translate .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s,background-color .3s}
.group.rounded-3xl:hover,.group.rounded-2xl:hover{translate:0 -8px;box-shadow:0 18px 40px -12px rgba(125,18,50,.28)}
.group img{transition:transform .6s var(--ease-out)}
.group:hover img{transform:scale(1.07)}

/* Buttons & links */
button,a[class*="rounded"]{transition-property:color,background-color,border-color,box-shadow,transform,translate,scale,opacity;transition-duration:.25s;transition-timing-function:var(--ease-out)}
button:not(:disabled):hover,a[class*="bg-brand-magenta"]:hover,a[class*="bg-[#7D1232]"]:hover{translate:0 -2px;box-shadow:0 10px 22px -8px rgba(125,18,50,.45)}
button:not(:disabled):active,a[class*="rounded"]:active{translate:0 0;scale:.96}

/* Shine sweep on primary buttons */
button[class*="bg-brand-magenta"],a[class*="bg-brand-magenta"],button[class*="bg-[#7D1232]"]{position:relative;overflow:hidden}
button[class*="bg-brand-magenta"]::after,a[class*="bg-brand-magenta"]::after,button[class*="bg-[#7D1232]"]::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
button[class*="bg-brand-magenta"]:hover::after,a[class*="bg-brand-magenta"]:hover::after,button[class*="bg-[#7D1232]"]:hover::after{left:140%;transition:left .8s var(--ease-out)}

/* Inputs */
input,textarea,select{transition:box-shadow .25s,border-color .25s,scale .25s var(--ease-out)}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(125,18,50,.12)}

/* Header link underline slide */
header a,nav a{position:relative}

/* Badges gentle float / pulse */
@keyframes softFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes softPulse{0%,100%{scale:1}50%{scale:1.08}}
.anim-float{animation:softFloat 3.5s ease-in-out infinite}
header [class*="bg-red-600"][class*="rounded-full"]{animation:softPulse 1.8s ease-in-out infinite}

/* Hero decorative circles drift */
@keyframes drift{0%,100%{translate:0 0}50%{translate:14px -12px}}
[class*="rounded-full"][class*="bg-white/10"],[class*="rounded-full"][class*="bg-white/5"]{animation:drift 9s ease-in-out infinite}

/* Smooth scroll + top progress bar */
html{scroll-behavior:smooth}
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#7D1232,#c2185b);z-index:9999;pointer-events:none}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .anim-pre{opacity:1}
}

/* ===== WhatsApp Channel card (editable from admin > Business Settings) ===== */
.chc{position:fixed;right:16px;bottom:78px;z-index:40;width:min(340px,calc(100vw - 32px));box-sizing:border-box;background:#fff;border:1px solid rgba(154,140,152,.3);border-radius:28px;padding:20px 22px 22px;box-shadow:0 18px 50px -14px rgba(30,30,36,.32);font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;color:#1E1E24;animation:popIn .5s var(--ease-spring) both}
.chc-static{position:relative;right:auto;bottom:auto;width:100%;max-width:340px;animation:none;background:#FBF7F0}
.chc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.chc-title{margin:0;font-size:17px;line-height:1.3;font-weight:800;color:#1E1E24}
.chc-side{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-top:2px}
.chc-badge{font-size:12px;font-weight:600;color:#9A8C98;white-space:nowrap}
.chc-x{border:0;background:transparent;color:#9A8C98;font-size:20px;line-height:1;width:22px;height:22px;padding:0;cursor:pointer;border-radius:9999px}
.chc-x:hover{color:#1E1E24;background:rgba(154,140,152,.18);translate:0 0;box-shadow:none}
.chc ul{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:6px;font-size:14px;line-height:1.4;color:#4b4551}
.chc li{display:flex;gap:8px}
.chc li::before{content:"\2726";color:#7D1232;font-size:12px;line-height:1.7;flex-shrink:0}
.chc-btn{display:block;text-align:center;text-decoration:none;background:#7D1232;color:#fff;font-weight:800;font-size:15px;padding:14px 18px;border-radius:9999px;box-shadow:0 8px 18px -8px rgba(125,18,50,.55);transition:background-color .25s,transform .25s var(--ease-out)}
.chc-btn:hover{background:#650E28;transform:translateY(-2px)}
.chc-btn:active{transform:scale(.97)}
@media (max-width:480px){.chc{padding:16px 18px 18px}.chc-title{font-size:16px}}

/* ===== Fix: floating widgets must never overlap on small screens ===== */

/* short screens: card scrolls instead of being cut off at the top */
.chc:not(.chc-static){max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto}