/* Bus C motion: only the visible, badged YouTube category button. */
@property --bus-badge-orbit-angle {
  syntax: "<angle>";
  initial-value: 40deg;
  inherits: false;
}
.nav-group-title[data-category="유튜브"]:has(> .product-badge) {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px #a94c7b66;
  --bus-badge-shine-color: #ffffff55;
}
html[data-theme="dark"] .nav-group-title[data-category="유튜브"]:has(> .product-badge) {
  --bus-badge-shine-color: #ffffff1f;
}
/* Without conic/mask support the inset border above stays static. If custom
   property interpolation is unavailable, 40deg/400deg have identical pixels. */
@supports (background: conic-gradient(from 40deg, transparent, #ff91bd)) and (mask-composite: exclude) {
  .nav-group-title[data-category="유튜브"]:has(> .product-badge)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: conic-gradient(from var(--bus-badge-orbit-angle), transparent 0deg 258deg, #b93068 285deg, #ff87b1 310deg, #ffe0ee 326deg, transparent 348deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: bus-badge-orbit-c 3.6s linear infinite;
  }
}
.nav-group-title[data-category="유튜브"]:has(> .product-badge) > .product-badge {
  position: relative;
  background-image: linear-gradient(110deg, transparent 35%, var(--bus-badge-shine-color) 49%, transparent 62%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  animation: bus-badge-shine-c 3.4s ease-in-out .7s infinite;
}
.nav-group-title[data-category="유튜브"]:has(> .product-badge) > .product-badge::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -5px;
  width: 8px;
  height: 8px;
  background: #e0fff3;
  clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  opacity: .3;
  transform: scale(.7);
  pointer-events: none;
  animation: bus-badge-sparkle-c 3.4s ease-in-out .7s infinite;
}
.nav-group-title[data-category="유튜브"]:has(> .product-badge) > .badge-hot::after { background: #ffe0ee; }
.nav-group-title[data-category="유튜브"]:has(> .product-badge) > .badge-recommended::after { background: #ecddff; }
@keyframes bus-badge-orbit-c {
  from { --bus-badge-orbit-angle: 40deg; }
  to { --bus-badge-orbit-angle: 400deg; }
}
@keyframes bus-badge-shine-c {
  0%,48% { background-position: 180% 0; }
  78%,100% { background-position: -180% 0; }
}
@keyframes bus-badge-sparkle-c {
  0%,40%,100% { opacity: .25; transform: scale(.7) rotate(0deg); }
  65% { opacity: .95; transform: scale(1.12) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-group-title[data-category="유튜브"]:has(> .product-badge)::before {
    animation: none;
    --bus-badge-orbit-angle: 40deg;
  }
  .nav-group-title[data-category="유튜브"]:has(> .product-badge) > .product-badge {
    animation: none;
    background-image: none;
  }
  .nav-group-title[data-category="유튜브"]:has(> .product-badge) > .product-badge::after {
    animation: none;
    opacity: .65;
    transform: scale(.8) rotate(45deg);
  }
}