/* Desk items. Art lives in js/items/*.js; this file covers layout, idle states and hover animations. */

.item {
  position: absolute;
  z-index: 20;
  display: block;
  pointer-events: none; /* only painted shapes are hoverable, not empty bounding boxes */
  -webkit-tap-highlight-color: transparent;
}

.item > svg,
.item svg { display: block; width: 100%; height: 100%; }
.item svg { pointer-events: visiblePainted; }
/* Contact shadows shouldn't trigger hovers. */
.item svg ellipse[fill*="shadow"] { pointer-events: none; }

.item:focus-visible { outline-offset: 6px; border-radius: 6px; }

/* ---------- Lamp ---------- */

.lamp__bulb,
.lamp__beam { transition: opacity .25s; }
.lamp__beam { mix-blend-mode: screen; pointer-events: none; }
#stage:not(.lights-on) .lamp__bulb { opacity: .12; }
#stage:not(.lights-on) .lamp__beam { opacity: 0; }

/* ---------- Hologram (emissive: sits above the room shade) ---------- */

.item--hologram { z-index: 40; }

.holo { position: absolute; inset: 0; }

.holo__base {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100% !important;
  height: 64px !important;
}

.holo__ring {
  stroke: var(--holo);
  filter: drop-shadow(0 0 4px var(--holo));
  animation: holo-pulse 2.4s ease-in-out infinite;
}

.holo__beam {
  position: absolute;
  left: 50%;
  bottom: 36px;
  width: 236px;
  height: 260px;
  translate: -50% 0;
  clip-path: polygon(37% 100%, 63% 100%, 100% 0, 0 0);
  background: linear-gradient(0deg, rgba(110, 243, 255, .42), rgba(110, 243, 255, .06) 75%, transparent);
  mix-blend-mode: screen;
  animation: holo-beam 3.2s ease-in-out infinite;
  pointer-events: none;
}

.holo__stage {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 14px;
  height: 190px;
  perspective: 700px;
  pointer-events: auto;
  animation: holo-flicker 6s steps(1) infinite;
}

.holo__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: holo-spin 16s linear infinite;
}

.holo__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  backface-visibility: hidden;
  font-family: var(--font-holo);
  color: #c8fcff;
  text-shadow: 0 0 6px var(--holo), 0 0 18px rgba(110, 243, 255, .7);
  opacity: .92;
}

.holo__face--back { transform: rotateY(180deg); }

/* scanlines */
.holo__face::after {
  content: '';
  position: absolute;
  inset: 10px 0;
  background: repeating-linear-gradient(0deg, rgba(0, 20, 30, .35) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.holo__line { display: block; white-space: nowrap; animation: holo-glitch 7s infinite; }
.holo__line--0 { font-size: 34px; font-weight: 700; letter-spacing: .08em; }
.holo__line--1 { font-size: 19px; letter-spacing: .3em; animation-delay: -2.3s; }
.holo__line--2 { font-size: 15px; letter-spacing: .42em; color: #9ff8ff; animation-delay: -4.1s; }

.item--hologram.is-active .holo__stage { animation: none; filter: brightness(1.25); }
.item--hologram.is-active .holo__spin { animation-duration: 6s; }

@keyframes holo-spin { to { transform: rotateY(360deg); } }
@keyframes holo-pulse { 50% { opacity: .55; } }
@keyframes holo-beam { 50% { opacity: .7; } }
@keyframes holo-flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: .55; }
  42% { opacity: 1; }
  77% { opacity: .75; }
  78% { opacity: .35; }
  79% { opacity: 1; }
}
@keyframes holo-glitch {
  0%, 92%, 100% { transform: none; }
  93% { transform: translateX(4px) skewX(-12deg); }
  94% { transform: translateX(-3px); }
  95% { transform: none; }
}

/* ---------- 3D printer ---------- */

.item--printer { --p: 0; }
.prn { position: absolute; inset: 0; perspective: 1000px; }
.prn__body { position: absolute; inset: 0; }

.prn__led { fill: #fff1d0; filter: drop-shadow(0 0 6px #ffe0a0); }

/* Bed drops one layer at a time while the head stays on its rail. */
.prn__bed { transform: translateY(calc(var(--p) * 80px - 115px)); }
.prn__progress { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--p)); }
.prn__bar { transform-box: fill-box; transform-origin: 0 0; transform: scaleX(var(--p)); }
.prn__x { animation: prn-sweep 1.1s ease-in-out infinite alternate; }
.prn__status-led { animation: blink 1.6s steps(1) infinite; }

@keyframes prn-sweep {
  from { transform: translateX(128px); }
  to { transform: translateX(172px); }
}

.prn__door {
  position: absolute;
  left: 24px;
  top: 66px;
  width: 230px;
  height: 196px;
  border: 6px solid #1c1e24;
  border-radius: 4px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 35%, rgba(255, 255, 255, .09) 55%, rgba(255, 255, 255, .02) 70%),
    rgba(120, 140, 170, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px #000;
  transform-origin: 0 50%;
  transition: transform .8s var(--ease-spring);
  pointer-events: auto;
}

.prn__handle {
  position: absolute;
  right: 8px;
  top: 38%;
  width: 7px;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8a8f99, #e8e9ec, #8a8f99);
  box-shadow: 2px 3px 4px rgba(0, 0, 0, .5);
}

/* ---------- Soldering station ---------- */

.sol__tip { fill: #8f949c; transition: fill .6s; }
.sol__glow { opacity: 0; transition: opacity .6s; mix-blend-mode: screen; }
.sol__temp { fill: #ff5a3a; filter: drop-shadow(0 0 3px #ff3a1a); }
.sol__heat-led { transition: fill .3s; }
.sol__smoke {
  position: absolute;
  left: 2px;
  top: 92px;
  width: 34px;
  height: 30px;
  pointer-events: none;
}

/* ---------- Trophy ---------- */

.trophy__face { transform-box: view-box; transform-origin: 65px 60px; transform: scale(0); }
.trophy__mouth,
.trophy__brows { opacity: 0; }
.trophy__look { transition: transform .08s linear; }
.trophy__body { transform-box: view-box; transform-origin: 65px 194px; }
.trophy__shadow { transform-box: fill-box; transform-origin: center; }
.trophy__prop { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); }
.trophy__rotor { transform-box: fill-box; transform-origin: center; }
.trophy__blur { opacity: 0; }

/* ---------- FPGA ---------- */

.fpga__board {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  transform-origin: 50% 100%;
  transform: perspective(800px) rotateX(57deg);
  pointer-events: auto;
  filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .5));
}

.fpga__board svg { overflow: visible; }
.fpga__power { fill: #45ff8a; filter: drop-shadow(0 0 3px #45ff8a); }
.fpga__led { fill: #3a0b10; transition: fill .08s; }
.fpga__led.on { fill: #ff3a4e; filter: drop-shadow(0 0 3px #ff3a4e); }
.seg { fill: #2a0808; }
.seg.on { fill: #ff2d2d; filter: drop-shadow(0 0 2px #ff2d2d); }
.fpga__sw-knob { transition: transform .15s; }
.fpga__sw.up .fpga__sw-knob { transform: translateY(-8px); }

/* ---------- Typewriter ---------- */

.tw__key { transition: transform .06s; }
.tw__key.down { transform: translateY(2.5px); }
.tw__carriage { transition: transform .08s linear; }

/* ---------- Car ---------- */

.car__wheel { transform-box: view-box; }

/* ================= Hover animation states (driven by js/items/*.js) ================= */

/* Car */
.item--car.is-driving .car__wheel { animation: wheel-spin .18s linear infinite; }
@keyframes wheel-spin { to { rotate: -360deg; } }
.car__vehicle { transform-box: view-box; transform-origin: 144px 84px; }

/* Soldering: hot tip, glow, rising smoke */
.item--solder.is-hot .sol__tip { fill: #ff7a1a; }
.item--solder.is-hot .sol__glow { opacity: 1; }
.item--solder.is-hot .sol__heat-led { fill: #ff3a1a; }

.sol__smoke i {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 220, 230, .55), transparent 70%);
  filter: blur(3px);
  opacity: 0;
}

.item--solder.is-hot .sol__smoke i { animation: smoke 2.4s ease-out infinite; }
.item--solder.is-hot .sol__smoke i:nth-child(2) { animation-delay: .6s; }
.item--solder.is-hot .sol__smoke i:nth-child(3) { animation-delay: 1.2s; }
.item--solder.is-hot .sol__smoke i:nth-child(4) { animation-delay: 1.8s; }

@keyframes smoke {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: .9; }
  50% { transform: translate(10px, -50px) scale(2); opacity: .55; }
  100% { transform: translate(-6px, -120px) scale(3.6); opacity: 0; }
}

/* Printer door swings open on its left hinge */
.item--printer.is-active .prn__door { transform: rotateY(-108deg); }

/* Trophy: eyes → surprise → propellers → fly away (motion itself is WAAPI in js/items/trophy.js) */
.trophy__face { transition: transform .35s var(--ease-spring); }
.item--trophy.eyes-on .trophy__face { transform: scale(1); }

.trophy__pupil { transform-box: fill-box; transform-origin: center; transition: transform .15s; }
.trophy__brows { transition: opacity .15s, transform .2s var(--ease-spring); }
.trophy__mouth { transition: opacity .15s; }
.item--trophy.is-shocked .trophy__pupil { transform: scale(.55); }
.item--trophy.is-shocked .trophy__brows { opacity: 1; transform: translateY(-4px); }
.item--trophy.is-shocked .trophy__mouth { opacity: 1; }

.trophy__prop { transition: transform .45s var(--ease-spring); }
.item--trophy.props-on .trophy__prop { transform: scale(1); }
.item--trophy.props-on .trophy__rotor { animation: rotor .09s linear infinite; }
.item--trophy.props-on .trophy__prop--r .trophy__rotor { animation-direction: reverse; }
.item--trophy.props-on .trophy__blur { opacity: 1; transition: opacity .3s .2s; }
@keyframes rotor {
  0% { transform: scaleX(1); }
  25% { transform: scaleX(.1); }
  50% { transform: scaleX(-1); }
  75% { transform: scaleX(-.1); }
  100% { transform: scaleX(1); }
}