/* ============================================================
   Pickpoint WMS — interactive warehouse scene
   ============================================================ */

.whouse {
  padding: 6rem 0 5rem;
  background: var(--ink-850);
  color: var(--white);
  border-top: 1px solid var(--ink-line);
}
.whouse .section__sub { color: var(--fog-300); }
.whouse__scene {
  position: relative;
  aspect-ratio: 1400 / 640;
  max-width: 1180px;
  margin: 0 auto;
}
.whouse__scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Clickable hotspots ---------- */
.whouse-spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  z-index: 2;
}
.whouse-spot__dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--ink-900);
  box-shadow: 0 0 0 1px var(--amber);
}
.whouse-spot__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  animation: spotPulse 2.4s ease-out infinite;
}
@keyframes spotPulse {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}
.whouse-spot__label {
  white-space: nowrap;
  background: var(--ink-900);
  border: 1px solid rgba(148, 170, 205, 0.3);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--white);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.whouse-spot:hover .whouse-spot__label,
.whouse-spot:focus-visible .whouse-spot__label {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-900);
}
.whouse-spot:focus-visible { outline: none; }

/* Small screens: the scene stays as an illustration and the
   eight areas become a tappable list underneath. */
.whouse__list { display: none; }

/* ---------- Scene animations ----------
   Trucks and forklift share one 16s master timeline:
   inbound truck arrives 0-12%, unloading happens mid-cycle,
   and both trucks are away/returning at the end of the loop. */

.wh-wheel { transform-box: fill-box; transform-origin: center; }

/* Inbound truck: arrive → dock → depart */
.wh-truck-in { animation: whTruckIn 16s ease-in-out infinite; }
@keyframes whTruckIn {
  0% { transform: translateX(-300px); }
  12% { transform: translateX(0); }
  82% { transform: translateX(0); }
  97%, 100% { transform: translateX(-300px); }
}
.wh-wheel--in { animation: whWheelIn 16s ease-in-out infinite; }
@keyframes whWheelIn {
  0% { transform: rotate(0deg); }
  12% { transform: rotate(540deg); }
  82% { transform: rotate(540deg); }
  97%, 100% { transform: rotate(0deg); }
}

/* Outbound truck: loaded and waiting → departs → reverses back in */
.wh-truck-out { animation: whTruckOut 16s ease-in-out infinite; }
@keyframes whTruckOut {
  0%, 42% { transform: translateX(0); }
  56% { transform: translateX(320px); }
  84% { transform: translateX(320px); }
  98%, 100% { transform: translateX(0); }
}
.wh-wheel--out { animation: whWheelOut 16s ease-in-out infinite; }
@keyframes whWheelOut {
  0%, 42% { transform: rotate(0deg); }
  56% { transform: rotate(540deg); }
  84% { transform: rotate(540deg); }
  98%, 100% { transform: rotate(0deg); }
}

/* Carrier branding: each 16s truck loop shows a different carrier,
   cycling AusPost / Toll / DHL over a 48s super-cycle. Swaps are
   timed for when each truck is off-screen. */
.wh-brand { opacity: 0; animation: whBrand 48s linear infinite; }
.wh-brand--first { opacity: 1; }
.wh-brand-in1 { animation-delay: 0s; }
.wh-brand-in2 { animation-delay: -32s; }
.wh-brand-in3 { animation-delay: -16s; }
.wh-brand-out1 { animation-delay: -37s; }
.wh-brand-out2 { animation-delay: -21s; }
.wh-brand-out3 { animation-delay: -5s; }
@keyframes whBrand {
  0%, 33.2% { opacity: 1; }
  33.34%, 100% { opacity: 0; }
}

/* Forklift: collect pallet at dock → drive to rack → lift →
   deposit (box appears in racking) → lower → return empty */
.wh-fork { animation: whFork 16s ease-in-out infinite; }
@keyframes whFork {
  0%, 18% { transform: translateX(0); }
  34% { transform: translateX(86px); }
  56% { transform: translateX(86px); }
  74% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.wh-fork-lift { animation: whForkLift 16s ease-in-out infinite; }
@keyframes whForkLift {
  0%, 34% { transform: translateY(0); }
  43% { transform: translateY(-70px); }
  50% { transform: translateY(-70px); }
  60% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.wh-fork-box { animation: whForkBox 16s linear infinite; }
@keyframes whForkBox {
  0%, 15% { opacity: 0; }
  17%, 45% { opacity: 1; }
  47%, 100% { opacity: 0; }
}
.wh-rack-ghost { animation: whRackGhost 16s linear infinite; }
@keyframes whRackGhost {
  0%, 45% { opacity: 0; }
  48%, 95% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* Order picker walking the aisle with a trolley */
.wh-picker { animation: whPicker 11s ease-in-out infinite alternate; }
@keyframes whPicker {
  0%, 8% { transform: translate(400px, 532px); }
  92%, 100% { transform: translate(700px, 532px); }
}
.wh-picker-bob { animation: whPickerBob 0.55s ease-in-out infinite alternate; }
@keyframes whPickerBob {
  from { transform: translateY(0); }
  to { transform: translateY(-2.5px); }
}

/* Conveyor: scrolling belt + cartons */
.wh-belt-line { animation: whBeltLine 1.1s linear infinite; }
@keyframes whBeltLine {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -22; }
}
.wh-belt-box { animation: whBelt 7s linear infinite; }
.wh-belt-box--2 { animation-delay: 2.3s; }
.wh-belt-box--3 { animation-delay: 4.6s; }
@keyframes whBelt {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(210px); opacity: 0; }
}

.wh-cloud { animation: whBob 6s ease-in-out infinite; }
.wh-cloud--2 { animation-delay: 1.5s; }
@keyframes whBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.wh-data1 { animation: whData1 3s ease-in-out infinite; }
@keyframes whData1 {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(88px, 52px); opacity: 0; }
}
.wh-data2 { animation: whData2 3s ease-in-out 1.2s infinite; }
@keyframes whData2 {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(66px, -38px); opacity: 0; }
}

.wh-camlight { animation: whBlink 1.8s steps(1) infinite; }
@keyframes whBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.15; }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .whouse { padding: 4.2rem 0 3.6rem; }
  .whouse-spot { display: none; }
  .whouse__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1.6rem;
    list-style: none;
  }
  .whouse__list a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
    background: var(--ink-800);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    color: var(--white);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
  }
  .whouse__list a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    flex-shrink: 0;
  }
}