.search-loading-screen {
  position: relative;
  display: flex;
  min-height: 600px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 32px;
  background: #fafafa;
  text-align: center;
  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}

.search-results-stage.is-loading,
.search-results-stage.is-revealing {
  position: relative;
}

.search-results-stage.is-loading {
  min-height: 600px;
}

.search-results-stage.is-loading .search-loading-screen,
.search-results-stage.is-revealing .search-loading-screen {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.search-loading-screen.is-leaving {
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
}

.search-loading-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(212, 212, 216, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 212, 216, 0.32) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
}

.search-loading-background i {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.search-loading-background i:first-child {
  top: 8%;
  left: 12%;
  background: #a7f3d0;
}
.search-loading-background i:last-child {
  right: 12%;
  bottom: 8%;
  background: #e4e4e7;
}

.search-loading-content {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  padding: 45px 20px;
}

.search-loading-query {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 42px;
  padding: 10px 18px;
  border: 1px solid #e4e4e7;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.06);
  font-size: 14px;
  font-weight: 800;
}

.search-loading-query > b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #047857;
  animation: search-loading-dot 1s infinite alternate;
}

.search-loading-query span {
  color: #71717a;
}
.search-loading-query strong {
  padding: 4px 9px;
  border-radius: 6px;
  background: #f4f4f5;
  color: #18181b;
}

.search-loading-illustration {
  position: relative;
  width: min(100%, 340px);
  height: 220px;
  margin: -14px auto 13px;
}
.search-static-cart { position:absolute;z-index:1;top:97px;left:138px;width:58px;height:59px;filter:drop-shadow(0 4px 5px rgba(235,142,10,.2));transform-origin:center;animation:search-cart-focus 8s ease-in-out infinite; }
.search-magnifier { position:absolute;z-index:2;top:25px;left:76px;width:188px;height:188px;filter:drop-shadow(0 14px 11px rgba(30,38,55,.18));animation:search-magnifier-search 8s cubic-bezier(.45,.05,.55,.95) infinite; }
.search-product { position:absolute;z-index:1;filter:drop-shadow(0 10px 8px rgba(82,82,91,.14)); }
.search-product-shirt { top:14px;left:24px;width:72px;transform-origin:center;animation:search-shirt-focus 8s ease-in-out infinite; }
.search-product-headphones { top:25px;right:14px;width:68px;transform-origin:center;animation:search-headphones-focus 8s ease-in-out infinite; }
.search-product-bicycle { bottom:19px;left:1px;width:94px;transform-origin:center;animation:search-bicycle-focus 8s ease-in-out infinite; }
.search-product-bottle { right:25px;bottom:9px;width:49px;transform-origin:center;animation:search-bottle-focus 8s ease-in-out infinite; }
.search-spark { position:absolute;z-index:3;width:10px;height:10px;border:3px solid #7dd3fc;border-radius:50%;animation:search-spark-pulse 1.8s ease-in-out infinite; }
.search-spark-one { top:0;left:148px; }.search-spark-two { top:24px;right:1px;width:8px;height:8px;border:0;border-radius:0;background:#67e8f9;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation-delay:.45s; }.search-spark-three { right:5px;bottom:61px;border-color:#c4b5fd;animation-delay:.9s; }

.search-loading-radar {
  position: relative;
  display: grid;
  width: 160px;
  height: 160px;
  place-items: center;
  margin: 0 auto 32px;
}

.search-loading-radar > span {
  position: absolute;
  inset: 0;
  border: 2px solid #047857;
  border-radius: 50%;
  animation: search-radar 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.search-loading-radar > span:last-of-type {
  animation-delay: 1.25s;
}

.search-loading-radar > div {
  position: relative;
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #f4f4f5;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, #fafafa);
  box-shadow: 0 16px 28px rgba(24, 24, 27, 0.11);
  color: #047857;
  font-size: 53px;
  animation: search-float 3s ease-in-out infinite;
}

.search-loading-radar > div > b {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: #047857;
  box-shadow: 0 0 13px #047857;
  animation: search-laser 2s ease-in-out infinite;
}

.search-loading-content h1 {
  min-height: 82px;
  margin: 0 auto 14px;
  color: #18181b;
  font-size: clamp(27px, 4vw, 46px);
  line-height: 1.45;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.search-loading-content h1.is-changing {
  opacity: 0;
  transform: translateY(8px);
}
.search-loading-content > p {
  margin: 0 0 36px;
  color: #71717a;
  font-size: 16px;
  font-weight: 600;
}

.search-loading-progress {
  width: min(100%, 410px);
  margin: auto;
  text-align: right;
}
.search-loading-progress > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #52525b;
  font-size: 13px;
  font-weight: 800;
}
.search-loading-progress > div > b {
  color: #047857;
  font:
    900 25px Outfit,
    Cairo,
    sans-serif;
  direction: ltr;
}

.search-loading-progress > i {
  display: block;
  height: 15px;
  overflow: hidden;
  padding: 2px;
  border: 1px solid #d4d4d8;
  border-radius: 999px;
  background: #e4e4e7;
  box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.08);
}

.search-loading-progress em {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(to left, #047857, #34d399);
  transition: width 0.05s linear;
}

.search-results-content.is-visible {
  animation: search-results-reveal 0.35s ease both;
}

@keyframes search-loading-dot {
  to {
    transform: scale(1.8);
    opacity: 0.4;
  }
}
@keyframes search-radar {
  0% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.4);
  }
  70%,
  100% {
    transform: scale(1.12);
    opacity: 0;
    box-shadow: 0 0 0 40px rgba(4, 120, 87, 0);
  }
}
@keyframes search-float {
  50% {
    transform: translateY(-8px);
  }
}
@keyframes search-magnifier-search {
  0%,100% { transform:translate(0,0) rotate(0); }
  18% { transform:translate(-56px,-28px) rotate(-9deg); }
  25% { transform:translate(-50px,-24px) rotate(-7deg) scale(1.04); }
  42% { transform:translate(57px,-27px) rotate(8deg); }
  50% { transform:translate(51px,-22px) rotate(6deg) scale(1.04); }
  67% { transform:translate(-67px,37px) rotate(-7deg); }
  75% { transform:translate(-61px,33px) rotate(-5deg) scale(1.04); }
  91% { transform:translate(34px,39px) rotate(7deg); }
  96% { transform:translate(30px,35px) rotate(5deg) scale(1.04); }
}
@keyframes search-cart-focus { 0%,7%,100% { transform:scale(1.2); } 12%,92% { transform:scale(1); } }
@keyframes search-shirt-focus { 0%,15%,28%,100% { transform:translateY(0) scale(1); } 20%,24% { transform:translateY(-7px) scale(1.27); } }
@keyframes search-headphones-focus { 0%,39%,53%,100% { transform:translateY(0) scale(1); } 45%,49% { transform:translateY(-7px) scale(1.27); } }
@keyframes search-bicycle-focus { 0%,64%,78%,100% { transform:translateY(0) scale(1); } 70%,74% { transform:translateY(-7px) scale(1.24); } }
@keyframes search-bottle-focus { 0%,88%,100% { transform:translateY(0) scale(1); } 93%,97% { transform:translateY(-7px) scale(1.3); } }
@keyframes search-spark-pulse { 50% { transform:scale(1.6);opacity:.35; } }
@keyframes search-laser {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(92px);
  }
}
@keyframes search-results-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-magnifier,
  .search-product,
  .search-static-cart,
  .search-spark {
    animation: none;
  }
}

@media (max-width: 700px) {
  .search-results-stage.is-loading {
    min-height: 470px;
  }
  .search-loading-screen {
    min-height: 470px;
    border-radius: 23px;
  }
  .search-loading-query {
    max-width: 100%;
    margin-bottom: 30px;
    font-size: 11px;
  }
  .search-loading-illustration { width:250px;height:164px;margin:-12px auto 10px;transform:scale(.78);transform-origin:top center; }
  .search-loading-radar {
    width: 125px;
    height: 125px;
    margin-bottom: 24px;
  }
  .search-loading-radar > div {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    font-size: 42px;
  }
  .search-loading-content h1 {
    min-height: 67px;
    font-size: 24px;
  }
  .search-loading-content > p {
    margin-bottom: 28px;
    font-size: 13px;
  }
  .search-loading-progress {
    width: min(100%, 300px);
  }
}