/* Hub v244: a live Graphic-room designer and the official entrance floor mark. */

@media (min-width: 1024px) {
  .hub-office-simulation-v235::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 82%;
    left: 50%;
    width: clamp(88px, 11%, 150px);
    aspect-ratio: 2048 / 1329;
    transform: translate(-50%, -50%) perspective(170px) rotateX(58deg);
    transform-origin: center bottom;
    background: url("/assets/company-logo.png") center / contain no-repeat;
    opacity: .66;
    mix-blend-mode: multiply;
    filter: saturate(.9) contrast(1.08);
    pointer-events: none;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-designing"] {
    --courier-accent-v235: #2f78b7;
    top: 24.5%;
    left: 30.5%;
    width: clamp(52px, 4.8vw, 66px);
    height: clamp(74px, 6.7vw, 92px);
    animation: hub-office-graphic-room-loop-v244 12s ease-in-out infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-designing"] .hub-office-courier-shell-v235 {
    background-image: url("/assets/hub-office-courier-graphic-v235.webp");
    animation: hub-office-courier-step-v235 .72s ease-in-out infinite alternate;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-designing"] .hub-office-speech-v235 {
    top: -39px;
    left: -58px;
    width: clamp(126px, 10vw, 140px);
    border-radius: 12px 12px 5px 12px;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-designing"] .hub-office-speech-v235::after {
    right: 14px;
    left: auto;
  }
}

@keyframes hub-office-graphic-room-loop-v244 {
  0%, 100% { top: 24.5%; left: 30.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  24% { top: 22.8%; left: 27.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  50% { top: 24.8%; left: 23.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  76% { top: 23.2%; left: 27%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-designing"][data-work-state="active"] {
    top: 24.5%;
    left: 30.5%;
    opacity: 1;
    animation: none !important;
    transform: translate(-50%, -100%);
  }
}