/* ধোপা মামা — shared animations (loaded on every page) */
@keyframes dm-rise{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes dm-left{from{opacity:0;translate:-40px 0}to{opacity:1;translate:0 0}}
@keyframes dm-right{from{opacity:0;translate:40px 0}to{opacity:1;translate:0 0}}
@keyframes dm-zoom{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@keyframes dm-drop{from{opacity:0;translate:0 -100%}to{opacity:1;translate:0 0}}
@keyframes dm-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes dm-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes dm-shine{0%{left:-70%}60%,100%{left:130%}}
@keyframes dm-bubble{0%{translate:0 0;opacity:0}15%{opacity:.7}100%{translate:var(--dx,0) -520px;opacity:0}}
@keyframes dm-wobble{0%,100%{rotate:0deg}25%{rotate:-2.5deg}75%{rotate:2.5deg}}
@keyframes dm-grad{0%{background-position:0 50%}100%{background-position:200% 50%}}
@keyframes dm-pop{0%{scale:.6;opacity:0}70%{scale:1.08}100%{scale:1;opacity:1}}

/* page entrance */
body{animation:dm-fade .5s ease both}
@keyframes dm-fade{from{opacity:0}to{opacity:1}}
header{animation:dm-drop .6s cubic-bezier(.2,.8,.2,1) both}
header .brand img.logo-full{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
header .brand:hover img.logo-full{transform:scale(1.05);box-shadow:0 8px 22px -6px rgba(18,181,203,.65)}
footer .brand img.logo-full{transition:transform .35s}
footer .brand:hover img.logo-full{transform:scale(1.05) rotate(-1deg)}
.top nav a{transition:background .25s,color .25s,transform .25s}
.top nav a:hover{transform:translateY(-2px)}
.ic{transition:background .2s,transform .25s}
.ic:hover{transform:translateY(-2px)}
.ic i{animation:dm-pop .5s .4s both}

/* scroll progress bar */
#dm-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;background:linear-gradient(90deg,#12b5cb,#1d6fe8,#ff9f1c,#12b5cb);background-size:200% 100%;animation:dm-grad 3s linear infinite;pointer-events:none}

/* scroll reveal (only when JS is on, so content never stays hidden) */
.dm-js .rv{opacity:0}
.dm-js .rv.in{opacity:1;animation:dm-rise .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0s)}
.dm-js .rv.rv-l.in{animation-name:dm-left}
.dm-js .rv.rv-r.in{animation-name:dm-right}
.dm-js .rv.rv-z.in{animation-name:dm-zoom}

/* buttons: shine sweep + press */
.btn,.sel,.abtn{position:relative;overflow:hidden}
.btn:after,.sel:after,.abtn:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover:after,.sel:hover:after,.abtn:hover:after{animation:dm-shine .9s}
.btn:active,.sel:active,.abtn:active{scale:.96}
.btn .i{transition:translate .25s}
.btn:hover .i{translate:5px 0}

/* cards: lift + icon motion */
.sc,.st,.t,.ci,.tc,.pe,.p,.cat,.tm,.lc,.six>*{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.sc:hover,.st:hover,.ci:hover,.tc:hover,.pe:hover,.six>*:hover{transform:translateY(-7px);box-shadow:0 22px 40px -18px rgba(11,36,71,.35)}
.sc .ico,.ci .ico,.six .ico,.st .ico{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.sc:hover .ico,.ci:hover .ico,.six>*:hover .ico,.st:hover .ico{transform:rotate(-8deg) scale(1.15)}
.ico{animation:dm-float 4.5s ease-in-out infinite}
.sc:nth-child(2n) .ico,.ci:nth-child(2n) .ico{animation-delay:-1.2s}
.sc:nth-child(3n) .ico,.ci:nth-child(3n) .ico{animation-delay:-2.4s}
.eyebrow{background:linear-gradient(90deg,var(--aqua),var(--blue),var(--aqua));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:dm-grad 4s linear infinite}

/* images */
.bn>img,.pg-hero img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hs-slide.on img{animation:dm-kb 9s ease-out both}
@keyframes dm-kb{from{scale:1.08}to{scale:1}}
.hs-copy>*{animation:dm-rise .8s cubic-bezier(.2,.8,.2,1) both}
.hs-copy>:nth-child(2){animation-delay:.12s}.hs-copy>:nth-child(3){animation-delay:.24s}.hs-copy>:nth-child(4){animation-delay:.36s}

/* forms */
.fld input,.fld textarea,.fld select,input,textarea,select{transition:border-color .25s,box-shadow .25s,background .25s}
.fld input:focus,.fld textarea:focus,.fld select:focus{box-shadow:0 0 0 4px rgba(29,111,232,.15)}
.fld:focus-within label{color:var(--blue)}

/* floating whatsapp */
.wa{animation:dm-pop .6s .8s both,dm-pulse 2.4s 1.6s infinite}
.wa:hover{scale:1.12;transition:scale .25s}

/* footer */
footer .soc a,footer .soc{transition:transform .3s}
footer .soc a:hover{transform:translateY(-4px) rotate(-6deg)}
footer li{transition:translate .25s,color .25s}
footer li:hover{translate:5px 0}

/* floating soap bubbles (decor, added by JS) */
.dm-bubbles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.dm-bubbles i{position:absolute;bottom:-40px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(18,181,203,.25) 60%,rgba(29,111,232,.12));border:1px solid rgba(29,111,232,.18);opacity:0;animation:dm-bubble linear infinite}
main,footer{position:relative;z-index:1}

/* back-to-top */
#dm-top{position:fixed;left:16px;bottom:18px;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;z-index:60;font-size:20px;box-shadow:0 8px 20px -6px rgba(11,36,71,.6);opacity:0;translate:0 20px;pointer-events:none;transition:opacity .3s,translate .3s,background .2s}
#dm-top.on{opacity:1;translate:0 0;pointer-events:auto}
#dm-top:hover{background:var(--blue)}

@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .dm-js .rv{opacity:1}
 .dm-bubbles,#dm-progress{display:none}
}

/* logo (navbar + footer) */
.brand img.logo-full{width:auto;height:50px;max-width:100%;object-fit:contain;background:#f6f8f5;border-radius:8px;padding:3px 8px;display:block}
footer .brand img.logo-full{height:64px;margin-bottom:2px}
@media(max-width:560px){header .brand img.logo-full{height:42px}}