/* Shared WULALA guild mascot treatment. Decorative only: it never blocks UI. */
:root {
  --wulala-guild-party: url("assets/wulala-guild-party-v1.png");
  --wulala-guild-explore: url("assets/wulala-guild-explore-v1.png");
  --wulala-guild-reward: url("assets/wulala-guild-reward-v1.png");
}

.social-hero,
.market-hero,
.guide-dispatch-bids,
.customer-dispatch-bids,
[data-page="home"] > .hero,
.guide-dashboard-hero {
  isolation: isolate;
  overflow: hidden;
}

.social-hero::before,
.market-hero::before,
.guide-dispatch-bids::before,
.customer-dispatch-bids::before,
[data-page="home"] > .hero::before,
.guide-dashboard-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -34px;
  bottom: -48px;
  width: min(44%, 330px);
  height: min(96%, 290px);
  min-width: 180px;
  background: var(--wulala-guild-party) right bottom / contain no-repeat;
  opacity: .24;
  pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(2, 8, 24, .28));
  animation: wulala-guild-float 7s ease-in-out infinite;
}

/* Each major journey gets its own scene, while keeping the same guild cast. */
.market-hero.guild-art-explore::before,
.customer-dispatch-bids::before {
  background-image: var(--wulala-guild-explore);
}

[data-page="completed"] > .hero.guild-art-reward::before {
  background-image: var(--wulala-guild-reward);
  width: min(40%, 310px);
  height: min(100%, 280px);
  right: -22px;
  bottom: -36px;
  opacity: .19;
  animation: wulala-guild-reward-float 8.5s ease-in-out infinite;
}

.social-hero > *,
.market-hero > *,
.guide-dispatch-bids > *,
.customer-dispatch-bids > *,
[data-page="home"] > .hero > *,
.guide-dashboard-hero > * { position: relative; z-index: 1; }

.guide-dispatch-bids::before,
.customer-dispatch-bids::before {
  width: min(31%, 240px);
  height: 210px;
  right: -32px;
  bottom: -52px;
  opacity: .13;
}

/* The operations view gets a quiet mark, not an illustration-heavy workspace. */
.app .brand { position: relative; isolation: isolate; overflow: hidden; }
.app .brand::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -18px;
  top: -13px;
  width: 84px;
  height: 84px;
  background: var(--wulala-guild-party) right center / contain no-repeat;
  opacity: .13;
  pointer-events: none;
  animation: wulala-guild-breathe 4.5s ease-in-out infinite;
}

@keyframes wulala-guild-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(-5px, -10px, 0) rotate(1deg); }
}

@keyframes wulala-guild-breathe {
  0%, 100% { transform: scale(1); opacity: .11; }
  50% { transform: scale(1.045); opacity: .17; }
}

@keyframes wulala-guild-reward-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  50% { transform: translate3d(-5px, -7px, 0) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .social-hero::before,
  .market-hero::before,
  .guide-dispatch-bids::before,
  .customer-dispatch-bids::before,
  [data-page="home"] > .hero::before,
  .guide-dashboard-hero::before,
  [data-page="completed"] > .hero.guild-art-reward::before,
  .app .brand::after { animation: none; }
}

@media (max-width: 620px) {
  .social-hero::before,
  .market-hero::before,
  [data-page="home"] > .hero::before,
  .guide-dashboard-hero::before { width: 58%; opacity: .13; }
  .guide-dispatch-bids::before,
  .customer-dispatch-bids::before { opacity: .08; }
}