/* ==========================================================================
   ecomhutsy.com — motion system (loaded after theme.bundle.css)
   1) performance fixes  2) icon-font flash fix  3) engine styles  4) shapes
   ========================================================================== */

/* ---------- 1. Performance ---------------------------------------------- */

/* Pause infinite decorative animations while their section is off-screen. */
[data-offscreen] *,
[data-offscreen] *::before,
[data-offscreen] *::after { animation-play-state: paused !important; }

/* Stacked frosted blur on every tile was the main scroll-jank cost.
   Repeated tiles get a crisp glossy finish instead of live blur. */
main :is(.home-tile, .home-markets__logo, .svc-card, .eh-clientele__card, .eh-ai-promo__card) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* glossy tinted glass face + colourful gradient rim (matches ecomhutsy.org) */
html:root body.crystal-site main .home-tile:not(.home-tile--dark),
html:root body.crystal-site main .svc-card {
  border: 1px solid transparent !important;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%) padding-box,
    linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(246, 248, 255, .9)) padding-box,
    linear-gradient(130deg, rgba(9, 92, 255, .32), rgba(255, 255, 255, .95) 45%, rgba(76, 59, 255, .26)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -10px 24px rgba(124, 92, 255, .06), 0 18px 40px -28px rgba(60, 40, 170, .4);
}

/* Reveal: start sooner and lighter so sections never sit blank mid-scroll. */
.fade-in-up { transform: translate3d(0, 28px, 0); }
.fade-in-up.visible { transform: none; }

/* ---------- 2. Material Symbols flash ("expand_more" text) -------------- */

.material-symbols-outlined {
  display: inline-block;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}
html:not(.icons-ready) .material-symbols-outlined { color: transparent !important; }

/* ---------- 3. Motion engine --------------------------------------------- */

.eh-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10000;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #095cff, #4c3bff 55%, #ff8a1f);
  box-shadow: 0 0 12px rgba(9, 92, 255, .45);
}

.eh-has-spotlight { position: relative; }
.eh-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(9, 92, 255, .14), rgba(76, 59, 255, .05) 40%, transparent 66%);
  transition: opacity .5s ease;
  will-change: transform;
}

.eh-tilt { transform-style: preserve-3d; transition: transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease !important; }
.eh-tilt.is-tilting { transition: transform .14s linear, box-shadow .3s ease !important; box-shadow: 0 34px 70px -34px rgba(20, 45, 140, .45) !important; z-index: 2; }
.eh-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 38%, transparent 60%);
  transition: opacity .4s ease;
}
.home-tile--dark .eh-sheen { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(120, 160, 255, .22), transparent 55%); }
.eh-tilt.is-tilting .eh-sheen { opacity: 1; }
.eh-tilt :is(.material-symbols-outlined, img, svg) { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.eh-tilt.is-tilting :is(.material-symbols-outlined, img:first-of-type, svg:first-of-type) { transform: translate3d(0, -3px, 0) scale(1.08) rotate(-3deg); }

.eh-magnetic { transition: translate .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, background-color .3s ease !important; }
.eh-magnetic { position: relative; overflow: hidden; isolation: isolate; }
.eh-magnetic::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .36) 48%, transparent 64%);
  transform: translateX(-120%);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.eh-magnetic:hover::after { transform: translateX(120%); }

/* ---------- 4. Ambient glossy shapes ------------------------------------- */

.eh-has-shapes { position: relative; isolation: isolate; }
.eh-shapes { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.eh-shapes i, .eh-shapes b { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.eh-shapes i:nth-child(1) { width: 520px; height: 520px; top: -180px; left: -160px; background: radial-gradient(circle at 35% 35%, rgba(9, 92, 255, .12), transparent 65%); animation: ehDrift 22s ease-in-out infinite alternate; }
.eh-shapes i:nth-child(2) { width: 420px; height: 420px; right: -140px; top: 35%; background: radial-gradient(circle at 40% 40%, rgba(255, 146, 52, .1), transparent 65%); animation: ehDrift 26s ease-in-out -6s infinite alternate-reverse; }
.eh-shapes i:nth-child(3) { width: 300px; height: 300px; left: 40%; bottom: -140px; background: radial-gradient(circle, rgba(76, 59, 255, .1), transparent 65%); animation: ehDrift 30s ease-in-out -12s infinite alternate; }
.eh-shapes b {
  width: 150px;
  height: 150px;
  right: 6%;
  top: 10%;
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(230, 238, 255, .25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 60px -30px rgba(9, 60, 200, .28);
  border: 1px solid rgba(255, 255, 255, .8);
  opacity: .5;
  animation: ehTumble 28s ease-in-out infinite alternate;
}
.eh-shapes.v2 b { left: 5%; right: auto; top: auto; bottom: 12%; width: 110px; height: 110px; border-radius: 50%; }
.eh-shapes.v3 b { top: auto; bottom: 8%; width: 120px; height: 120px; border-radius: 32px; animation-duration: 34s; }
@keyframes ehDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(60px, 40px, 0) scale(1.12); } }
@keyframes ehTumble { 0% { transform: translate3d(0, 0, 0) rotate(-8deg); } 100% { transform: translate3d(-30px, 36px, 0) rotate(14deg); } }

@media (max-width: 768px) {
  .eh-shapes b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eh-shapes i, .eh-shapes b { animation: none; }
}

/* ==========================================================================
   Header & footer motion (shared by ecomhutsy.org and ecomhutsy.com)
   ========================================================================== */

/* ---- smart header: glass on scroll, hides on scroll down, returns on scroll up */
.eh-smart-header { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background-color .35s ease !important; will-change: transform; }
.eh-smart-header.eh-header-hidden { transform: translate3d(0, -110%, 0) !important; }
.site-header.eh-header-scrolled,
.site-header-stack.eh-header-scrolled #site-nav {
  background: rgba(255, 255, 255, .97) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(15, 30, 80, .06), 0 14px 34px -24px rgba(15, 30, 90, .35) !important;
}

/* ---- nav links: gradient underline grows from the centre */
.site-nav > a, .site-nav .eh-nav-drop-toggle, .site-nav__link {
  background-image: linear-gradient(90deg, #0b5cff, #4c3bff) !important;
  background-repeat: no-repeat !important;
  background-position: 50% calc(100% - 2px) !important;
  background-size: 0% 2px !important;
  transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color .25s ease !important;
}
.site-nav > a:hover, .site-nav .eh-nav-drop-toggle:hover, .site-nav__link:hover,
.site-nav > a[aria-current="page"], .site-nav__link.is-active, .site-nav__link.active { background-size: 70% 2px !important; }

/* ---- dropdowns: fade + slide + scale, items stagger in */
.eh-nav-drop.is-open .eh-nav-drop-menu,
.nav-dropdown.is-open .nav-dropdown__menu { animation: ehDropIn .38s cubic-bezier(.22, 1, .36, 1) both; transform-origin: top center; }
.eh-nav-drop.is-open .eh-nav-drop-item,
.nav-dropdown.is-open .nav-dropdown__item { animation: ehItemIn .42s cubic-bezier(.22, 1, .36, 1) both; }
:is(.eh-nav-drop.is-open .eh-nav-drop-item, .nav-dropdown.is-open .nav-dropdown__item):nth-child(2) { animation-delay: .04s; }
:is(.eh-nav-drop.is-open .eh-nav-drop-item, .nav-dropdown.is-open .nav-dropdown__item):nth-child(3) { animation-delay: .08s; }
:is(.eh-nav-drop.is-open .eh-nav-drop-item, .nav-dropdown.is-open .nav-dropdown__item):nth-child(4) { animation-delay: .12s; }
:is(.eh-nav-drop.is-open .eh-nav-drop-item, .nav-dropdown.is-open .nav-dropdown__item):nth-child(5) { animation-delay: .16s; }
:is(.eh-nav-drop.is-open .eh-nav-drop-item, .nav-dropdown.is-open .nav-dropdown__item):nth-child(n + 6) { animation-delay: .2s; }
@keyframes ehDropIn { from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ehItemIn { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
.eh-nav-drop-item, .nav-dropdown__item { transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .25s ease !important; }
.eh-nav-drop-item:hover, .nav-dropdown__item:hover { transform: translate3d(4px, 0, 0); }

/* ---- logo: glossy light sweep every few seconds + mark lift on hover */
.site-brand, .site-nav__brand { position: relative; overflow: hidden; }
.site-brand::after, .site-nav__brand::after {
  position: absolute;
  inset: -20% auto -20% -40%;
  width: 30%;
  content: "";
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: ehLogoSweep 9s ease-in-out 2s infinite;
}
@keyframes ehLogoSweep { 0%, 82% { left: -40%; } 100% { left: 130%; } }
.site-brand-mark, .site-nav__brand-logo { transition: transform .5s cubic-bezier(.2, 1.3, .3, 1); }
.site-brand:hover .site-brand-mark, .site-nav__brand:hover .site-nav__brand-logo { transform: rotate(-6deg) scale(1.08); }

/* ---- header CTA: soft breathing glow */
.site-dashboard, .site-nav__cta { box-shadow: 0 12px 26px -12px rgba(11, 60, 255, .6); }
@keyframes ehCtaGlow {
  0%, 100% { box-shadow: 0 10px 24px -12px rgba(11, 60, 255, .55); }
  50% { box-shadow: 0 14px 34px -10px rgba(76, 59, 255, .75), 0 0 0 4px rgba(11, 92, 255, .08); }
}

/* ---- footer: travelling light line on top */
.eh-has-footer-line { position: relative; }
.eh-footer-line {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 2px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent) no-repeat,
    linear-gradient(90deg, rgba(11, 92, 255, .15), rgba(11, 92, 255, .7) 30%, rgba(76, 59, 255, .7) 70%, rgba(76, 59, 255, .15));
  background-size: 18% 100%, 100% 100%;
  animation: ehFooterLine 6s linear infinite;
}
@keyframes ehFooterLine { from { background-position: -20% 0, 0 0; } to { background-position: 120% 0, 0 0; } }

/* ---- footer links & social buttons */
.site-footer-links a, .site-footer-legal a, .eh-corp-footer__list a, .eh-corp-footer__legal a {
  display: inline-block;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .25s ease !important;
}
.site-footer-links a:hover, .site-footer-legal a:hover, .eh-corp-footer__list a:hover, .eh-corp-footer__legal a:hover { transform: translate3d(5px, 0, 0); color: #0b5cff !important; }
.eh-corp-footer__social-btn { transition: translate .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease !important; }
.eh-corp-footer__social-btn:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 16px 30px -16px rgba(11, 60, 255, .6) !important; }

/* ---- footer world pins: radar ping */
.site-footer-world .pin { position: absolute; }
.site-footer-world .pin::before {
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  content: "";
  background: #0b5cff;
  box-shadow: 0 0 0 0 rgba(11, 92, 255, .5);
  animation: ehPing 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
.site-footer-world .pin-b::before { animation-delay: .6s; }
.site-footer-world .pin-c::before { animation-delay: 1.2s; }
.site-footer-world .pin-d::before { animation-delay: 1.8s; background: #f59e0b; }
@keyframes ehPing { 0% { box-shadow: 0 0 0 0 rgba(11, 92, 255, .5); } 80%, 100% { box-shadow: 0 0 0 14px rgba(11, 92, 255, 0); } }

/* ---- back to top (glass) */
.eh-totop {
  position: fixed;
  right: 26px;
  bottom: 104px;
  z-index: 9989;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .8);
  cursor: pointer;
  color: #fff;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, .5), transparent 55%),
    linear-gradient(135deg, #0b5cff, #2747e0 55%, #4c6bff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 30px -14px rgba(11, 60, 255, .7);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.9);
  pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.eh-totop.is-in { opacity: 1; transform: none; pointer-events: auto; }
.eh-totop:hover { transform: translate3d(0, -3px, 0); }
.eh-totop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 720px) {
  .eh-totop { right: 16px; bottom: 92px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-brand::after, .site-nav__brand::after, .site-dashboard, .site-nav__cta, .eh-footer-line, .site-footer-world .pin::before { animation: none !important; }
  .eh-smart-header { transition: none !important; }
}

/* Perf: stacked live blur inside page content is the main scroll cost — keep it only on the header. */
body.crystal-site main * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }