/* Hero copy sits above the warehouse; the conveyor remains part of the world. */
.immersive .hero-heading {
  left: clamp(28px, 6vw, 110px);
  top: 43%;
  bottom: auto;
  transform: translateY(-50%);
  max-width: 60%;
  pointer-events: auto;
}
.immersive .hero-kicker {
  color: #e5ddcd;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
}
.immersive .hero-heading h1 {
  font-size: clamp(48px, 5.8vw, 104px);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.98;
  margin: 24px 0;
  color: #fff7e8;
}
.immersive .hero-heading h1 span { color: #b6d8ef; }
.immersive .hero-heading .hero-intro {
  font-size: clamp(14px, 1.2vw, 19px);
  line-height: 1.65;
  color: #ede8dd;
  margin: 0;
  max-width: none;
  text-align: left;
}
.hero-links { display: flex; gap: 12px; margin-top: 28px; }
.hero-links :is(a, .hero-trade) {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 49px;
  padding: 14px 21px;
  border: 1px solid #eee8d955;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
}
.hero-primary { background: #f8f1e1; color: #24363d; }
.hero-secondary { background: #172b35a6; color: #fff3dd; }
.hero-primary:hover { background: #fffaf0; }
.hero-secondary:hover { background: #304b59; }
.immersive .world-shade {
  background: linear-gradient(90deg, #11212cdb 0%, #11212cab 28%, #11212c36 57%, transparent 78%),
    linear-gradient(180deg, #0e202c88 0%, transparent 23%, transparent 75%, #0d202acc 100%);
}
.immersive .world-footer { justify-content: flex-end; }
.immersive .warehouse { cursor: default; }
.immersive .cat-position { width: clamp(100px, 7.4%, 140px); }
.immersive .cat { animation: none; }
.conveyor-layer, .detector-layer {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
.conveyor-layer { z-index: 1; opacity: 0.78; }
.detector-layer { z-index: 3; }
.immersive .scanner-readout {
  z-index: 4;
  right: auto;
  min-width: 148px;
  text-align: center;
  transform: translateX(-50%) rotate(2deg);
  font-size: 11px;
  letter-spacing: 1px;
}
.scan-glow { fill: #79ecc1; opacity: 0; }
.scan-beam { fill: none; stroke: #ccffeb; stroke-width: 2; opacity: 0; }
.detector-screen { fill: #267c9f; opacity: 0.8; }
.detector-light { fill: #a3c6cb; }
[data-scan="scanning"] .scan-glow { fill: #ffd081; opacity: 0.16; }
[data-scan="scanning"] .scan-beam { opacity: 0.9; stroke: #ffdf91; animation: scan-sweep 1.4s ease-in-out infinite alternate; }
[data-scan="scanning"] :is(.detector-screen, .detector-light) { fill: #ffd081; }
[data-scan="scanning"] .scanner-readout { background: #493b20; color: #ffe4ab; border-color: #d4aa60; }
[data-scan="detected"] .scan-glow { opacity: 0.2; }
[data-scan="detected"] :is(.detector-screen, .detector-light),
[data-scan="cleared"] :is(.detector-screen, .detector-light) { fill: #a7f4bb; }
[data-scan="detected"] .scanner-readout,
[data-scan="cleared"] .scanner-readout { background: #d1eed8; color: #1d4433; border-color: #8abb9b; }
.motion-stopped .scan-beam { animation-play-state: paused; }
.motion-stopped .dust i { animation-play-state: paused; }
html[data-theme="night"] :is(.conveyor-layer, .detector-layer) { filter: brightness(0.73) saturate(0.8); }
@keyframes scan-sweep { from { transform: translateY(-37px); } to { transform: translateY(37px); } }
@media (max-width: 1000px) {
  .immersive .hero-heading { max-width: 75%; top: 40%; }
  .immersive .hero-heading h1 { font-size: clamp(48px, 7vw, 72px); }
}
@media (max-width: 640px) {
  .immersive .hero-heading { left: 24px; right: 20px; top: 19%; max-width: none; transform: none; }
  .immersive .hero-kicker { font-size: 9px; letter-spacing: 2px; }
  .immersive .hero-heading h1 { font-size: clamp(38px, 10.7vw, 64px); margin: 18px 0; }
  .immersive .hero-heading .hero-intro { font-size: 13px; }
  .hero-links { margin-top: 21px; gap: 8px; }
  .hero-links :is(a, .hero-trade) { font-size: 12px; padding: 12px 16px; gap: 22px; min-height: 45px; }
  .immersive .scene-controls { bottom: calc(57px + env(safe-area-inset-bottom)); }
  .immersive .world-footer { align-items: flex-end; }
  .immersive .cat-position { width: clamp(80px, 13.2dvh, 112px); }
  .immersive .world-shade {
    background: linear-gradient(180deg, #10232ccb 0%, #10232cab 40%, transparent 67%, #10263222 79%, #102632e6 100%);
  }
}
@media (max-height: 700px) and (max-width: 640px) {
  .immersive .hero-heading { top: 16%; }
  .immersive .hero-heading h1 { font-size: 36px; margin: 12px 0; }
  .hero-links { margin-top: 12px; }
  .immersive .hero-heading .hero-intro { font-size: 12px; }
}
@media (max-height: 550px) and (min-width: 641px) {
  .immersive .hero-heading { top: 44%; }
  .immersive .hero-heading h1 { font-size: 40px; margin: 12px 0; }
  .immersive .hero-heading .hero-intro { font-size: 12px; }
  .hero-links { margin-top: 12px; }
  .hero-links :is(a, .hero-trade) { min-height: 40px; padding: 10px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-beam { animation: none !important; }
}

/* The employee profile is discovered on the back wall, as part of the warehouse. */
.immersive .site-header .shift-switch { margin-left: auto; }
.wall-poster {
  position: absolute;
  left: 74.16%;
  top: 29.22%;
  z-index: 2;
  width: 72px;
  aspect-ratio: 0.76;
  display: flex;
  flex-direction: column;
  padding: 7px 6px 6px;
  color: #28362f;
  background: #e6e5d1;
  border: 1px solid #9c967b;
  box-shadow: 2px 3px 2px #34291e66;
  transform: rotate(-5deg) skewY(1deg);
  transform-origin: 50% 0;
  container-type: inline-size;
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.poster-tape {
  position: absolute;
  top: -5px;
  width: 26%;
  height: 10px;
  left: 39%;
  background: #78a4b7b8;
  transform: rotate(3deg);
}
.poster-top {
  font: 600 5cqw/1.4 monospace;
  letter-spacing: .2px;
  padding-bottom: 5px;
  border-bottom: 1px solid #7e8c7455;
  text-align: center;
}
.poster-portrait {
  display: grid;
  place-items: center;
  position: relative;
  margin: 4px 0;
  flex: 1;
}
.poster-portrait::before {
  content: "";
  position: absolute;
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #abc2c7;
}
.poster-portrait img { position: relative; width: 100%; height: auto; }
.poster-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  padding-top: 4px;
  border-top: 1px solid #7e8c7455;
}
.poster-bottom strong { font-size: 16cqw; letter-spacing: -.4px; }
.poster-bottom > span { font-size: 5cqw; line-height: 1.4; }
.wall-poster:hover, .wall-poster:focus-visible {
  transform: rotate(-2deg) scale(1.06);
  box-shadow: 2px 4px 5px #34291e88;
}
.wall-poster:focus-visible { outline: 3px solid #b9ddf6; outline-offset: 4px; }
html[data-theme="night"] .wall-poster { filter: brightness(.8); }
@media (prefers-reduced-motion: reduce) {
  .wall-poster { transition: none; }
  .wall-poster:hover, .wall-poster:focus-visible { transform: rotate(-5deg) skewY(1deg); }
}

/* A clicked smile stays on his face, within the detector's existing depth layers. */
.cat-smile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.cat.smiling .cat-smile { opacity: 1; }

.hero-links { flex-wrap: wrap; }
.hero-trade { background: #f8f1e1; color: #24363d; cursor: not-allowed; }
.hero-trade:disabled { opacity: .88; }

/* Phones watch the automatic conveyor; desktop keeps the scene controls. */
@media (max-width: 640px), (max-width: 1000px) and (pointer: coarse) {
  .immersive .scene-controls { display: none; }
}