/* BloggerAdda Motion & Visual Layer v6.3.0
 * Adds non-destructive motion, graphics and micro-interactions.
 * Existing layout/architecture remains unchanged.
 */
:root{--ba-motion-ease:cubic-bezier(.22,1,.36,1);--ba-glow:rgba(76,82,255,.22);--ba-cyan:#16c7ff;--ba-purple:#7048ff}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Reveal system */
.ba-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .75s var(--ba-motion-ease),transform .75s var(--ba-motion-ease)}
.ba-reveal.ba-inview{opacity:1;transform:none}
.ba-reveal-left{transform:translate3d(-34px,0,0)}
.ba-reveal-right{transform:translate3d(34px,0,0)}
.ba-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ba-motion-ease),transform .6s var(--ba-motion-ease)}
.ba-stagger.ba-inview>*{opacity:1;transform:none}
.ba-stagger.ba-inview>*:nth-child(2){transition-delay:.07s}.ba-stagger.ba-inview>*:nth-child(3){transition-delay:.14s}.ba-stagger.ba-inview>*:nth-child(4){transition-delay:.21s}.ba-stagger.ba-inview>*:nth-child(5){transition-delay:.28s}.ba-stagger.ba-inview>*:nth-child(6){transition-delay:.35s}

/* Subtle ambient visual field */
.hero,.ba-page-hero,.ba-archive-hero,.ba-single-hero,.ba-service-hero,.ba-course-hero{position:relative;isolation:isolate;overflow:hidden}
.hero:before,.ba-page-hero:before,.ba-archive-hero:before,.ba-single-hero:before,.ba-service-hero:before,.ba-course-hero:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-180px;top:-190px;background:radial-gradient(circle,rgba(112,72,255,.18),transparent 68%);filter:blur(4px);z-index:-1;animation:baFloat 10s ease-in-out infinite}
.hero:after,.ba-page-hero:after,.ba-archive-hero:after,.ba-single-hero:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;left:-180px;bottom:-190px;background:radial-gradient(circle,rgba(22,199,255,.14),transparent 68%);z-index:-1;animation:baFloat 12s ease-in-out infinite reverse}
@keyframes baFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,18px,0) scale(1.05)}}

/* Hero visual life */
.visual-shell,.ba-device-mockup,.screen-card,.mock-browser,.art-window{transition:transform .35s var(--ba-motion-ease),box-shadow .35s var(--ba-motion-ease);will-change:transform}
.hero-visual:hover .visual-shell,.ba-visual-hover:hover{transform:translateY(-6px) rotateX(1.5deg) rotateY(-1.5deg);box-shadow:0 38px 90px rgba(22,31,60,.18)}
.floating,.badge-round{animation:baBob 5.5s ease-in-out infinite}
.floating:nth-of-type(2){animation-delay:-1.1s}.floating:nth-of-type(3){animation-delay:-2.2s}.badge-round{animation-duration:7s}
@keyframes baBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.visual-hero .lines span,.mini-hero i{position:relative;overflow:hidden}
.visual-hero .lines span:after,.mini-hero i:after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:baShimmer 3.6s ease-in-out infinite}
@keyframes baShimmer{55%,100%{transform:translateX(130%)}}

/* Cards: tilt, spotlight, animated border */
.ba-motion-card,.service-card,.course,.person,.product-small,.proof-card,.topic-grid a,.ba-post-card,.ba-service-card,.ba-course-card,.ba-team-card,.ba-portfolio-card,.ba-widget,.work-card,.faq-list article,.ba-feature-card{position:relative;isolation:isolate;transition:transform .28s var(--ba-motion-ease),box-shadow .28s var(--ba-motion-ease),border-color .28s ease;will-change:transform}
.ba-motion-card:before,.service-card:before,.course:before,.person:before,.product-small:before,.proof-card:before,.ba-post-card:before,.ba-service-card:before,.ba-course-card:before,.ba-team-card:before,.ba-portfolio-card:before,.work-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(100,115,255,.16),transparent 58%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:-1}
.ba-motion-card:hover:before,.service-card:hover:before,.course:hover:before,.person:hover:before,.product-small:hover:before,.proof-card:hover:before,.ba-post-card:hover:before,.ba-service-card:hover:before,.ba-course-card:hover:before,.ba-team-card:hover:before,.ba-portfolio-card:hover:before,.work-card:hover:before{opacity:1}
.ba-motion-card:hover,.service-card:hover,.course:hover,.person:hover,.product-small:hover,.proof-card:hover,.topic-grid a:hover,.ba-post-card:hover,.ba-service-card:hover,.ba-course-card:hover,.ba-team-card:hover,.ba-portfolio-card:hover,.work-card:hover{transform:translateY(-6px);box-shadow:0 24px 55px rgba(17,27,58,.14)}

/* Buttons */
.btn,.button,.wp-element-button,.woocommerce a.button,.woocommerce button.button,.ba-share-button,.nav-cta{position:relative;overflow:hidden;transform:translateZ(0);transition:transform .22s var(--ba-motion-ease),box-shadow .22s ease,background .22s ease}
.btn:after,.button:after,.wp-element-button:after,.woocommerce a.button:after,.woocommerce button.button:after,.nav-cta:after{content:"";position:absolute;top:-80%;left:-40%;width:32%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(20deg) translateX(-220%);transition:transform .65s var(--ba-motion-ease);pointer-events:none}
.btn:hover:after,.button:hover:after,.wp-element-button:hover:after,.woocommerce a.button:hover:after,.woocommerce button.button:hover:after,.nav-cta:hover:after{transform:rotate(20deg) translateX(520%)}
.btn:hover,.button:hover,.wp-element-button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(58,70,235,.2)}

/* Heading accent */
.eyebrow,.ba-eyebrow{position:relative}
.eyebrow:before,.ba-eyebrow:before{transform-origin:left;animation:baLinePulse 3.2s ease-in-out infinite}
@keyframes baLinePulse{0%,100%{transform:scaleX(.72);opacity:.65}50%{transform:scaleX(1);opacity:1}}

/* Auto-generated article graphic */
.ba-article-visual{margin:34px 0;border:1px solid #dfe5f1;border-radius:24px;background:linear-gradient(135deg,#f8faff,#eef3ff);padding:26px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(220px,.95fr);gap:28px;align-items:center;overflow:hidden;position:relative}
.ba-article-visual:before{content:"";position:absolute;width:210px;height:210px;border:42px solid rgba(88,78,255,.11);border-radius:50%;right:-70px;top:-70px}
.ba-article-visual-copy{position:relative;z-index:2}.ba-article-visual-copy span{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;color:#4d58df;text-transform:uppercase;margin-bottom:10px}.ba-article-visual-copy h3{font-size:clamp(24px,3vw,38px)!important;line-height:1.12!important;margin:0 0 12px!important;color:#10182d!important}.ba-article-visual-copy p{margin:0!important;color:#59667d!important}
.ba-article-graphic{min-height:220px;border-radius:20px;background:linear-gradient(145deg,#465cff,#764cff);padding:22px;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(60,66,220,.2)}
.ba-article-graphic .ba-bars{position:absolute;left:22px;right:22px;top:28px}.ba-article-graphic .ba-bars i{display:block;height:12px;border-radius:999px;background:rgba(255,255,255,.9);margin:12px 0}.ba-article-graphic .ba-bars i:nth-child(2){width:78%}.ba-article-graphic .ba-bars i:nth-child(3){width:56%}.ba-article-graphic .ba-orbit{position:absolute;width:170px;height:170px;border:34px solid rgba(255,255,255,.16);border-radius:50%;right:-34px;bottom:-42px;animation:baSpin 16s linear infinite}.ba-article-graphic .ba-dot{position:absolute;width:16px;height:16px;border-radius:50%;background:#c8ff5b;right:35px;top:35px;box-shadow:0 0 0 8px rgba(200,255,91,.14);animation:baPulse 2.2s ease-in-out infinite}
@keyframes baSpin{to{transform:rotate(360deg)}}@keyframes baPulse{50%{transform:scale(1.2);box-shadow:0 0 0 14px rgba(200,255,91,0)}}

/* Service and guide decorative icons */
.ba-auto-icon{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#425dff,#7549ff);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(64,76,230,.22);margin-bottom:18px}
.ba-auto-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Reading progress */
.ba-reading-progress{position:fixed;left:0;top:0;width:0;height:3px;background:linear-gradient(90deg,#20c8ff,#584eff,#8b45ff);z-index:99999;box-shadow:0 2px 10px rgba(81,77,255,.35)}

/* Animated counters */
.ba-counter-ready{font-variant-numeric:tabular-nums}

/* Portfolio mockups */
.work-screen,.ba-portfolio-visual,.product-mock,.feature-art{position:relative;overflow:hidden}
.work-screen:after,.ba-portfolio-visual:after,.product-mock:after,.feature-art:after{content:"";position:absolute;inset:-40% auto -40% -30%;width:25%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);animation:baSweep 6s ease-in-out infinite}
@keyframes baSweep{0%,58%{left:-35%}100%{left:130%}}

/* Blog images */
.ba-post-card img,.entry-content img,.wp-post-image{transition:transform .55s var(--ba-motion-ease),filter .55s ease}
.ba-post-card:hover img{transform:scale(1.045)}
.entry-content figure{overflow:hidden;border-radius:18px}.entry-content figure:hover img{transform:scale(1.02)}

/* Footer social pulse */
.ba-social a,.footer-social a{transition:transform .22s var(--ba-motion-ease),border-color .22s,background .22s}.ba-social a:hover,.footer-social a:hover{transform:translateY(-4px) rotate(-3deg);background:#4f57ff;border-color:#4f57ff;color:#fff}

/* Floating toolbar */
.ba-floating-actions a{transition:transform .2s var(--ba-motion-ease),background .2s,box-shadow .2s}.ba-floating-actions a:hover{transform:translateX(-5px) scale(1.04);box-shadow:0 12px 28px rgba(22,31,58,.25)}

/* Responsive safeguards */
@media(max-width:980px){.ba-article-visual{grid-template-columns:1fr}.ba-article-graphic{min-height:190px}.ba-motion-card:hover,.service-card:hover,.course:hover,.person:hover,.product-small:hover,.proof-card:hover,.ba-post-card:hover,.ba-service-card:hover,.ba-course-card:hover,.ba-team-card:hover,.ba-portfolio-card:hover,.work-card:hover{transform:translateY(-3px)}}
@media(max-width:640px){.ba-article-visual{padding:20px;border-radius:20px}.ba-article-graphic{min-height:165px}.hero:before,.ba-page-hero:before,.ba-archive-hero:before,.ba-single-hero:before{width:260px;height:260px}.floating,.badge-round{animation:none}.ba-stagger>*{transform:translateY(14px)}}

/* Accessibility/performance */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ba-reveal,.ba-stagger>*,.floating,.badge-round,.hero:before,.hero:after,.ba-page-hero:before,.ba-page-hero:after,.visual-hero .lines span:after,.mini-hero i:after,.work-screen:after,.ba-portfolio-visual:after,.product-mock:after,.feature-art:after,.ba-article-graphic .ba-orbit,.ba-article-graphic .ba-dot,.eyebrow:before,.ba-eyebrow:before{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}}


/* v6.3.1 targeted visual correction — locked layout, no redesign */
/* Featured product: reserve a real area for the preview so it never covers CTA/content. */
body.bloggeradda-custom-home .product-feature{display:flex!important;flex-direction:column!important;min-height:650px!important;padding:40px 40px 330px!important}
body.bloggeradda-custom-home .product-feature>span,
body.bloggeradda-custom-home .product-feature>h3,
body.bloggeradda-custom-home .product-feature>p,
body.bloggeradda-custom-home .product-feature>.btn{position:relative!important;z-index:4!important}
body.bloggeradda-custom-home .product-feature>.btn,
body.bloggeradda-custom-home .product-feature>.btn-light{display:inline-flex!important;align-self:flex-start!important;width:auto!important;min-width:190px!important;background:#fff!important;color:#0d1527!important;border:1px solid rgba(255,255,255,.7)!important;opacity:1!important}
body.bloggeradda-custom-home .product-feature>.btn:hover{background:#f3f6ff!important;color:#3157df!important}
body.bloggeradda-custom-home .product-feature .product-mock{left:40px!important;right:40px!important;bottom:38px!important;z-index:2!important;max-height:245px!important}
body.bloggeradda-custom-home .product-feature .product-mock .hero-block{height:120px!important}
/* Exactly one icon per product/course card: native emoji/letter remains; generic injected icon is disabled. */
body.bloggeradda-custom-home .product-small>.ba-auto-icon,
body.bloggeradda-custom-home .course .ba-auto-icon{display:none!important}
body.bloggeradda-custom-home .product-small>div:first-child{font-size:42px!important;line-height:1!important;margin-bottom:18px!important}
body.bloggeradda-custom-home .course-top{min-height:86px!important;align-items:flex-start!important}
body.bloggeradda-custom-home .course-top>span{line-height:1!important}

/* Proper About FAQ accordion */
.ba-about-faq-v62 .accordion{display:grid;gap:12px}
.ba-about-faq-v62 .faq{border:1px solid #dfe5ef!important;border-radius:17px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 10px 30px rgba(20,35,70,.05)}
.ba-about-faq-v62 .faq button{width:100%!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;border:0!important;background:#fff!important;color:#111a2d!important;padding:20px 22px!important;text-align:left!important;font:700 16px/1.4 Inter,sans-serif!important;cursor:pointer!important}
.ba-about-faq-v62 .faq button b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#4057e9;font-size:19px;line-height:1;transition:transform .2s ease;flex:0 0 30px}
.ba-about-faq-v62 .faq>div{display:none;padding:0 22px 21px;color:#5e6b80;line-height:1.75}
.ba-about-faq-v62 .faq.open>div{display:block}
.ba-about-faq-v62 .faq.open button{color:#3157df!important}
.ba-about-faq-v62 .faq.open button b{transform:rotate(45deg);background:#3157df;color:#fff}

/* Contextual visual system for every Blogger Help page */
.ba-help-visual{margin:34px 0 50px;border:1px solid #dce4f1;border-radius:28px;background:linear-gradient(135deg,#f7faff,#eef3ff);padding:30px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;overflow:hidden;position:relative;box-shadow:0 24px 70px rgba(34,58,110,.09)}
.ba-help-visual:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;border:46px solid rgba(84,78,255,.08);right:-90px;top:-100px}
.ba-help-visual-copy{position:relative;z-index:2}.ba-help-visual-copy>span{font-size:11px;font-weight:800;letter-spacing:.13em;color:#4057e9}.ba-help-visual-copy h2{font-size:clamp(30px,4vw,48px)!important;line-height:1.08!important;color:#10182d!important;margin:10px 0 13px!important}.ba-help-visual-copy p{color:#5f6d84!important;max-width:680px}
.ba-help-visual-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}.ba-help-visual-steps b{border:1px solid #d8e0ef;border-radius:13px;background:#fff;padding:12px;color:#25334d;font-size:12px}.ba-help-visual-steps i{display:block;color:#5364ef;font-style:normal;font-size:10px;margin-bottom:3px}
.ba-help-dashboard{min-height:250px;border-radius:22px;background:linear-gradient(145deg,#435cff,#744aff);padding:22px;position:relative;overflow:hidden;box-shadow:0 24px 55px rgba(62,70,222,.22)}
.ba-help-dots{display:flex;gap:6px}.ba-help-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.72)}
.ba-help-chart{height:125px;margin-top:20px;border-radius:16px;background:rgba(10,18,52,.18);display:flex;align-items:flex-end;gap:12px;padding:18px}.ba-help-chart span{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(#c8ff5b,#79e7a6);animation:baHelpBars 3.4s ease-in-out infinite}.ba-help-chart span:nth-child(1){height:35%}.ba-help-chart span:nth-child(2){height:62%;animation-delay:-.5s}.ba-help-chart span:nth-child(3){height:48%;animation-delay:-1s}.ba-help-chart span:nth-child(4){height:82%;animation-delay:-1.5s}@keyframes baHelpBars{50%{transform:scaleY(.82);transform-origin:bottom}}
.ba-help-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.ba-help-panels i{height:44px;border-radius:10px;background:rgba(255,255,255,.18)}
.ba-help-hub-grid>a{position:relative}.ba-help-card-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#415cff,#7449ff);color:#fff;display:grid;place-items:center;font-weight:800;margin:15px 0 16px;box-shadow:0 12px 28px rgba(64,76,230,.2)}

@media(max-width:1050px){.ba-help-visual{grid-template-columns:1fr}.ba-help-dashboard{min-height:220px}}
@media(max-width:760px){body.bloggeradda-custom-home .product-feature{min-height:auto!important;padding:28px!important}body.bloggeradda-custom-home .product-feature .product-mock{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:28px!important;max-height:none!important}.ba-help-visual{padding:22px;margin:24px 0 38px}.ba-help-visual-steps{grid-template-columns:1fr 1fr}.ba-help-dashboard{min-height:190px}.ba-about-faq-v62 .faq button{font-size:15px!important;padding:17px!important}.ba-about-faq-v62 .faq>div{padding:0 17px 18px}}
@media(prefers-reduced-motion:reduce){.ba-help-chart span{animation:none!important}}

/* =========================================================
   v6.3.2 — HOME PRODUCTS SECTION ONLY
   Compact 2x2 cards + readable CTA + non-overlapping mockup
   ========================================================= */
@media (min-width:1081px){
  body.bloggeradda-custom-home .products .product-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr) minmax(250px,.82fr)!important;
    grid-template-rows:repeat(2,minmax(235px,auto))!important;
    gap:18px!important;
    align-items:stretch!important;
  }
  body.bloggeradda-custom-home .products .product-feature{
    grid-column:1!important;
    grid-row:1 / 3!important;
    min-height:488px!important;
    height:100%!important;
    padding:36px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    overflow:hidden!important;
  }
  body.bloggeradda-custom-home .products .product-feature .product-mock{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-height:none!important;
    margin:28px 0 0!important;
    padding:16px!important;
    border-radius:22px!important;
    z-index:1!important;
  }
  body.bloggeradda-custom-home .products .product-feature .product-mock .hero-block{
    height:92px!important;
    margin-bottom:12px!important;
  }
  body.bloggeradda-custom-home .products .product-feature .product-mock .row span{
    height:48px!important;
  }
  body.bloggeradda-custom-home .products .product-small{
    min-height:235px!important;
    height:100%!important;
    padding:26px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }
  body.bloggeradda-custom-home .products .product-small>div:first-child{
    margin:0 0 16px!important;
    font-size:38px!important;
  }
  body.bloggeradda-custom-home .products .product-small h3{
    margin:0 0 12px!important;
    font-size:23px!important;
    line-height:1.2!important;
  }
  body.bloggeradda-custom-home .products .product-small p{
    margin:0 0 18px!important;
    line-height:1.65!important;
  }
  body.bloggeradda-custom-home .products .product-small small{
    margin-top:auto!important;
    padding-top:2px!important;
  }
}

body.bloggeradda-custom-home .products .product-feature>a.btn,
body.bloggeradda-custom-home .products .product-feature>a.btn-light{
  position:relative!important;
  z-index:10!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:190px!important;
  min-height:50px!important;
  margin:4px 0 0!important;
  padding:0 22px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#0d1527!important;
  -webkit-text-fill-color:#0d1527!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
  overflow:visible!important;
  box-shadow:0 12px 28px rgba(9,18,45,.16)!important;
}
body.bloggeradda-custom-home .products .product-feature>a.btn:before,
body.bloggeradda-custom-home .products .product-feature>a.btn:after{
  display:none!important;
}
body.bloggeradda-custom-home .products .product-feature>a.btn:hover{
  background:#f3f6ff!important;
  color:#3157df!important;
  -webkit-text-fill-color:#3157df!important;
  transform:translateY(-2px)!important;
}

@media (max-width:1080px){
  body.bloggeradda-custom-home .products .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  body.bloggeradda-custom-home .products .product-feature{
    grid-column:1/-1!important;
    grid-row:auto!important;
    min-height:auto!important;
    padding:32px!important;
  }
  body.bloggeradda-custom-home .products .product-feature .product-mock{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    margin-top:26px!important;
  }
  body.bloggeradda-custom-home .products .product-small{
    min-height:230px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  body.bloggeradda-custom-home .products .product-small small{margin-top:auto!important}
}
@media (max-width:640px){
  body.bloggeradda-custom-home .products .product-grid{grid-template-columns:1fr!important}
  body.bloggeradda-custom-home .products .product-feature{padding:25px!important}
  body.bloggeradda-custom-home .products .product-feature .product-mock{padding:13px!important;margin-top:22px!important}
  body.bloggeradda-custom-home .products .product-feature .product-mock .hero-block{height:78px!important}
  body.bloggeradda-custom-home .products .product-feature .product-mock .row span{height:42px!important}
  body.bloggeradda-custom-home .products .product-small{min-height:auto!important;padding:24px!important}
}