#poda {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 6px auto 0;
  width: 100%;
  max-width: 340px;
}

.grid {
  position: absolute;
  height: 340px;
  width: 100%;
  max-width: 480px;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -60px;
  background-image:
    linear-gradient(to right, #150f16 1px, transparent 1px),
    linear-gradient(to bottom, #150f16 1px, transparent 1px);
  background-size: 1rem 1rem;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  z-index: 0;
  filter: blur(1px);
  pointer-events: none;
}

.white,
.border,
.darkBorderBg,
.glow {
  max-height: 70px;
  max-width: 314px;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 0;
  border-radius: 12px;
  filter: blur(3px);
}

.input {
  background-color: #08060a;
  border: none;
  width: 301px;
  max-width: 100%;
  height: 56px;
  border-radius: 10px;
  color: #fff;
  padding-inline: 59px;
  font-size: 18px;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  position: relative;
  z-index: 2;
}

.input::placeholder {
  color: #7a6b70;
  font-family: var(--font);
  letter-spacing: normal;
}

.input:focus {
  outline: none;
}

#main:focus-within > #input-mask {
  display: none;
}

#input-mask {
  pointer-events: none;
  width: 100px;
  height: 20px;
  position: absolute;
  background: linear-gradient(90deg, transparent, #08060a);
  top: 18px;
  left: 70px;
  z-index: 3;
}

#pink-mask {
  pointer-events: none;
  width: 30px;
  height: 20px;
  position: absolute;
  background: var(--red);
  top: 10px;
  left: 5px;
  filter: blur(20px);
  opacity: 0.8;
  transition: all 2s;
  z-index: 3;
}

#main:hover > #pink-mask {
  opacity: 0;
}

.white {
  max-height: 63px;
  max-width: 307px;
  border-radius: 10px;
  filter: blur(2px);
}

.white::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(83deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.4);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%,
    #ffd7da,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%,
    #ff8d96,
    rgba(0, 0, 0, 0) 58%
  );
  transition: all 2s;
}

.border {
  max-height: 59px;
  max-width: 303px;
  border-radius: 11px;
  filter: blur(0.5px);
}

.border::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(70deg);
  position: absolute;
  width: 600px;
  height: 600px;
  filter: brightness(1.3);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #1a1013,
    #ff2231 5%,
    #1a1013 14%,
    #1a1013 50%,
    #ff5a68 60%,
    #1a1013 64%
  );
  transition: all 2s;
}

.darkBorderBg {
  max-height: 65px;
  max-width: 312px;
}

.darkBorderBg::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #6a0a12,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%,
    #b3121f,
    rgba(0, 0, 0, 0) 60%
  );
  transition: all 2s;
}

#poda:hover > .darkBorderBg::before { transform: translate(-50%, -50%) rotate(-98deg); }
#poda:hover > .glow::before { transform: translate(-50%, -50%) rotate(-120deg); }
#poda:hover > .white::before { transform: translate(-50%, -50%) rotate(-97deg); }
#poda:hover > .border::before { transform: translate(-50%, -50%) rotate(-110deg); }

#poda:focus-within > .darkBorderBg::before { transform: translate(-50%, -50%) rotate(442deg); transition: all 4s; }
#poda:focus-within > .glow::before { transform: translate(-50%, -50%) rotate(420deg); transition: all 4s; }
#poda:focus-within > .white::before { transform: translate(-50%, -50%) rotate(443deg); transition: all 4s; }
#poda:focus-within > .border::before { transform: translate(-50%, -50%) rotate(430deg); transition: all 4s; }

.glow {
  overflow: hidden;
  filter: blur(30px);
  opacity: 0.45;
  max-height: 130px;
  max-width: 354px;
}

.glow::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  position: absolute;
  width: 999px;
  height: 999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #000,
    #ff2231 5%,
    #000 38%,
    #000 50%,
    #ff5a68 60%,
    #000 87%
  );
  transition: all 2s;
}

@keyframes rotate {
  100% { transform: translate(-50%, -50%) rotate(450deg); }
}

#filter-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  z-index: 4;
  height: 40px;
  width: 38px;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a0810, #000, #3a0a12);
  border: 1px solid transparent;
  cursor: default;
  pointer-events: none;
  transition: transform 0.4s var(--spring);
}

#filter-icon svg {
  grid-area: 1 / 1;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--spring);
}

#filter-icon .icon-idle {
  fill: #6f5257;
}

#filter-icon .icon-clear {
  fill: #ff8d96;
  opacity: 0;
  transform: scale(0.5) rotate(-60deg);
}

#poda.has-value #filter-icon {
  cursor: pointer;
  pointer-events: auto;
}

#poda.has-value #filter-icon .icon-idle {
  opacity: 0;
  transform: scale(0.5);
}

#poda.has-value #filter-icon .icon-clear {
  opacity: 1;
  transform: none;
}

#poda:focus-within #filter-icon .icon-idle {
  fill: #a8848a;
}

#filter-icon:hover {
  transform: scale(1.08);
}

#filter-icon:hover .icon-clear {
  fill: #fff;
}

#filter-icon:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.filterBorder {
  height: 42px;
  width: 40px;
  position: absolute;
  overflow: hidden;
  top: 7px;
  right: 7px;
  border-radius: 10px;
  z-index: 3;
}

.filterBorder::before {
  content: "";
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.35);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #6d2830,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 50%,
    #6d2830,
    rgba(0, 0, 0, 0) 100%
  );
  animation: rotate 4s linear infinite;
}

#main {
  position: relative;
  z-index: 2;
}

#search-icon {
  position: absolute;
  left: 20px;
  top: 15px;
  z-index: 3;
  pointer-events: none;
}

#poda.is-busy #search-icon {
  animation: icon-pulse 1s var(--ease-in-out) infinite;
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.88); }
}