/*
 * Jamie Krueger — Personal Site Homepage
 *
 * Design: A room scene with a desk, viewed from behind a person sitting
 * in an office chair. Clickable desk objects link to project pages.
 * Pure CSS pixel art aesthetic — no images, no JS, no build tools.
 *
 * Unit strategy:
 *   - All sizes use vw units so everything scales proportionally with
 *     the viewport, including on zoom. px units are only used in the
 *     mobile breakpoint where vw would be too small.
 *   - Borders use vw (not px) so they scale with zoom. Mapping:
 *     1px≈0.1vw, 2px≈0.15vw, 3px≈0.2vw, 4px≈0.25vw, 6px≈0.35vw
 *
 * Aspect ratio strategy:
 *   - .room-content locks the room to 16:9 (height: min(56.25vw, 100vh)),
 *     centered vertically. All %-based child positioning (wall, desk, etc.)
 *     resolves against this box, staying proportional to vw-based sizes.
 *   - On tall viewports, wall and floor extend beyond the 16:9 area:
 *     scene::before repeats the wall stripes above, scene background
 *     repeats the floor dot pattern below.
 *   - On 16:9 or wider viewports, room-content fills the scene — no change.
 *
 * 3D / perspective notes:
 *   - Desk surface uses perspective(900px) rotateX(10deg) for depth illusion
 *   - transform-style: preserve-3d on desk-surface allows children to
 *     counter-rotate with rotateX(-10deg) to appear upright (monitors, mug)
 *   - preserve-3d causes 3D hit-testing: elements need translateZ() to
 *     stay above the desk plane for reliable pointer events
 *   - Desk objects avoid pointer-events:none on children — with preserve-3d,
 *     pointer-events:none causes events to fall through to background
 *     elements instead of bubbling to the parent <a> tag
 *
 * Hover shadow strategy:
 *   - On hover, objects lift with translate(0, -0.35vw)
 *   - Box-shadow Y offset increases (0.25vw → 0.5vw) to compensate,
 *     keeping the shadow nearly stationary on the desk surface
 */

/* ===== Reset & Pixel Art Foundation ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Press Start 2P', monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  background: #e8e8e8;
}

/* ===== Scene ===== */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Floor pattern — extends below 16:9 area on tall viewports.
     Matches .floor's background so the pattern tiles seamlessly. */
  background-color: #d0d0d0;
  background-image:
    radial-gradient(circle, #d8d8d8 0.05vw, transparent 0.05vw),
    radial-gradient(circle, #c6c6c6 0.05vw, transparent 0.05vw);
  background-size: 0.4vw 0.4vw, 0.6vw 0.6vw;
  background-position: 0 0, 0.2vw 0.2vw;
}

/* Wall stripes — extends above the 16:9 area on tall viewports.
   Matches .wall's background so the pattern tiles seamlessly.
   +1px prevents sub-pixel gap between this and .room-content where
   the scene's floor-colored background would peek through. */
.scene::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: max(0px, calc((100vh - 56.25vw) / 2 + 1px));
  background-color: #e8e8e8;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 10vw,
      #dcdcdc 10vw, #dcdcdc 10.2vw
    );
}

/* 16:9 content area — all room elements live inside this wrapper so their
   %-based positions resolve against a fixed aspect ratio, staying proportional
   to vw-based object sizes at any viewport shape. Centered vertically. */
.room-content {
  position: absolute;
  width: 100%;
  height: min(56.25vw, 100vh);  /* 16:9 = 9/16 = 0.5625 */
  top: max(0px, calc((100vh - 56.25vw) / 2));
  left: 0;
}

/* ===== Site Title ===== */
.site-title {
  position: absolute;
  top: 1.5vw;
  left: 2vw;
  z-index: 10;
  font-size: 1.4vw;
  color: #3b2a1a;
  margin: 0;
  letter-spacing: 0.05em;
}

/* ===== Wall ===== */
.wall {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  z-index: 0;
  background-color: #e8e8e8;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 10vw,
      #dcdcdc 10vw, #dcdcdc 10.2vw
    );
}

/* Ambient shadow near baseboard */
.wall::before {
  content: '';
  position: absolute;
  bottom: 1vw;
  left: 0;
  right: 0;
  height: 3vw;
  background:
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 1;
}

/* Baseboard */
.wall::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1vw;
  background: #c8c8c8;
  border-top: 0.25vw solid #d4d4d4;
  border-bottom: 0.25vw solid #b0b0b0;
  z-index: 2;
}

/* ===== Window ===== */
/* Positioned at right third of wall so mountains stay visible behind monitors */
.window {
  position: absolute;
  top: 8%;
  left: 100%;
  transform: translateX(-50%);
  width: 46%;
  height: 72%;
  z-index: 1;
  overflow: hidden;

  /* Stepped sky gradient */
  background:
    linear-gradient(
      180deg,
      #385880 0%, #385880 20%,
      #4878a0 20%, #4878a0 40%,
      #68a0c8 40%, #68a0c8 60%,
      #90c0d8 60%, #90c0d8 80%,
      #c0d8e8 80%
    );

  /* Beveled wood frame */
  border: 0.35vw solid;
  border-color: #8a7c60 #4a3c28 #4a3c28 #8a7c60;
  box-shadow:
    inset 0 0 0 0.15vw #6a5c40,
    0.25vw 0.25vw 0 rgba(0, 0, 0, 0.3);
}

/* Mountain silhouette (Wasatch Front) */
.window__mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: #4a5868;
  clip-path: polygon(
    0% 100%,
    0% 75%,
    3% 68%, 6% 72%,
    10% 58%, 14% 55%,
    18% 44%, 21% 48%,
    24% 38%, 27% 42%,
    30% 34%, 33% 30%,
    36% 33%, 39% 27%,
    42% 24%, 45% 22%,
    48% 24%, 51% 28%,
    54% 26%, 57% 30%,
    60% 34%, 63% 38%,
    66% 42%, 69% 40%,
    72% 48%, 75% 52%,
    78% 56%, 81% 58%,
    84% 62%, 87% 65%,
    90% 68%, 93% 72%,
    96% 75%, 100% 78%,
    100% 100%
  );
}

/* Snow caps on tallest peaks */
.window__mountains::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: #d8e0e8;
  clip-path: polygon(
    39% 100%, 39% 70%,
    42% 58%, 45% 52%,
    48% 58%, 48% 100%,
    53% 100%, 53% 72%,
    54% 62%, 57% 72%,
    57% 100%
  );
}

/* Window pane cross divider */
.window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 0.2vw),
      #6a5c40 calc(50% - 0.2vw),
      #6a5c40 calc(50% + 0.2vw),
      transparent calc(50% + 0.2vw)
    ),
    linear-gradient(
      0deg,
      transparent calc(50% - 0.2vw),
      #6a5c40 calc(50% - 0.2vw),
      #6a5c40 calc(50% + 0.2vw),
      transparent calc(50% + 0.2vw)
    );
}

/* ===== Floor ===== */
.floor {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: #d0d0d0;
  background-image:
    radial-gradient(circle, #d8d8d8 0.05vw, transparent 0.05vw),
    radial-gradient(circle, #c6c6c6 0.05vw, transparent 0.05vw);
  background-size: 0.4vw 0.4vw, 0.6vw 0.6vw;
  background-position: 0 0, 0.2vw 0.2vw;
}

/* Stepped depth gradient on floor */
.floor::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      0deg,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 100%
    );
  pointer-events: none;
}

/* ===== Desk ===== */
.desk {
  position: absolute;
  top: 28%;
  left: 10%;
  right: 10%;
  bottom: 6%;
  z-index: 2;
}

/* ===== Desk Surface ===== */
.desk-surface {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  transform: perspective(900px) rotateX(10deg);
  transform-origin: center bottom;
  /* preserve-3d lets children counter-rotate to appear upright on the tilted desk */
  transform-style: preserve-3d;

  background-color: #8B6914;
  background-image:
    linear-gradient(
      180deg,
      #4a3020 0%,
      #5c3d2e 35%,
      #6e4a3a 65%,
      #5c3d2e 100%
    );

  border: 0.25vw solid;
  border-color: #6e4a3a #3a2214 #3a2214 #6e4a3a;
}

/* ===== Desk Front Edge ===== */
.desk-front {
  position: absolute;
  top: 62%;
  left: 0;
  right: 0;
  height: 2vw;
  background: #4a3020;
  border: 0.25vw solid;
  border-color: #4a3020 #2e1a0e #2e1a0e #5a3e2c;
  border-top: 0.15vw solid #2e1a0e;
  box-shadow: 0 0.25vw 0 #1a0e06;
}


/* ===== Desk Legs ===== */
.desk-leg {
  position: absolute;
  top: calc(62% + 2vw);
  width: 1vw;
  bottom: 0;
  background: #402818;
  border: 0.2vw solid;
  border-color: #503626 #28160a #28160a #503626;
  box-shadow: 0.25vw 0.25vw 0 rgba(0, 0, 0, 0.25);
  z-index: -1;
}

.desk-leg--left { left: 6%; }
.desk-leg--right { right: 6%; }

/* ===== Monitors ===== */
.monitor {
  position: absolute;
  width: 30%;
  z-index: 4;
  pointer-events: none;
  /* Counter-rotates the desk's 10deg tilt so monitors appear upright */
  transform: rotateX(-10deg);
  transform-origin: center bottom;
}

/* Monitors placed with only a 0.5% gap between them (left ends at 50%, right starts at 50.5%) */
.monitor--left {
  top: -8vw;
  left: 20%;
}

.monitor--right {
  top: -8vw;
  left: 50.5%;
}

.monitor__screen {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a18;
  border: 0.25vw solid;
  border-color: #444 #222 #222 #444;
  position: relative;
  overflow: hidden;
}

/* VS Code — sidebar, tab bar, status bar */
.monitor--left .monitor__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Activity bar (far left icon strip) */
    linear-gradient(#16161e, #16161e) 0 0 / 4% 100% no-repeat,
    linear-gradient(#ccc, #ccc) 1.2% 4% / 1.8% 0.5vw no-repeat,
    linear-gradient(#888, #888) 1.2% 12% / 1.8% 0.5vw no-repeat,
    linear-gradient(#888, #888) 1.2% 20% / 1.8% 0.5vw no-repeat,
    linear-gradient(#888, #888) 1.2% 28% / 1.8% 0.5vw no-repeat,
    /* Active indicator on first icon */
    linear-gradient(#ccc, #ccc) 0 3% / 0.5% 1.2vw no-repeat,
    /* Sidebar */
    linear-gradient(#1e1e2e, #1e1e2e) 4% 0 / 16% 100% no-repeat,
    /* Sidebar section header */
    linear-gradient(#aaa, #aaa) 5.5% 8% / 12% 0.15vw no-repeat,
    /* Folder (open) */
    linear-gradient(#dcb67a, #dcb67a) 5.5% 12% / 2% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 8.5% 12% / 8% 0.15vw no-repeat,
    /* Indented files under folder */
    linear-gradient(#6688cc, #6688cc) 7% 16% / 1.8% 0.15vw no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 10% 16% / 7% 0.15vw no-repeat,
    linear-gradient(#e8ab53, #e8ab53) 7% 20% / 1.8% 0.15vw no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 10% 20% / 5.5% 0.15vw no-repeat,
    linear-gradient(#4ec994, #4ec994) 7% 24% / 1.8% 0.15vw no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 10% 24% / 8% 0.15vw no-repeat,
    linear-gradient(#6688cc, #6688cc) 7% 28% / 1.8% 0.15vw no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 10% 28% / 6% 0.15vw no-repeat,
    /* Second folder (collapsed) */
    linear-gradient(#dcb67a, #dcb67a) 5.5% 34% / 2% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 8.5% 34% / 6% 0.15vw no-repeat,
    /* More files */
    linear-gradient(#e8ab53, #e8ab53) 7% 38% / 1.8% 0.15vw no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 10% 38% / 7% 0.15vw no-repeat,
    linear-gradient(#6688cc, #6688cc) 7% 42% / 1.8% 0.15vw no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 10% 42% / 5% 0.15vw no-repeat,
    linear-gradient(#4ec994, #4ec994) 7% 46% / 1.8% 0.15vw no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 10% 46% / 9% 0.15vw no-repeat,
    /* Tab bar */
    linear-gradient(#2d2d3d, #2d2d3d) 20% 0 / 80% 6% no-repeat,
    linear-gradient(#1e1e2e, #1e1e2e) 20% 0 / 20% 6% no-repeat,
    linear-gradient(#8a8a8a, #8a8a8a) 24% 2.5% / 10% 0.15vw no-repeat,
    /* Status bar */
    linear-gradient(#1e1e2e, #1e1e2e) 0 100% / 100% 5% no-repeat;
}

/* VS Code — editor code lines */
.monitor--left .monitor__screen::after {
  content: '';
  position: absolute;
  top: 8%;
  left: 20%;
  right: 4%;
  bottom: 7%;
  background:
    /* Line numbers */
    linear-gradient(#555, #555) 0 0.3vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 0.9vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 1.5vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 2.1vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 2.7vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 3.3vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 3.9vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 4.5vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 5.1vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 5.7vw / 3% 0.15vw no-repeat,
    /* Code lines — keywords, strings, vars */
    linear-gradient(#c586c0, #c586c0) 5% 0.3vw / 12% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 19% 0.3vw / 18% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 40% 0.3vw / 10% 0.15vw no-repeat,
    linear-gradient(#4ec994, #4ec994) 5% 0.9vw / 8% 0.15vw no-repeat,
    linear-gradient(#ce9178, #ce9178) 15% 0.9vw / 30% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 8% 1.5vw / 10% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 20% 1.5vw / 14% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 37% 1.5vw / 20% 0.15vw no-repeat,
    linear-gradient(#c586c0, #c586c0) 8% 2.1vw / 8% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 18% 2.1vw / 22% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 2.7vw / 15% 0.15vw no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 22% 2.7vw / 8% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 8% 3.3vw / 18% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 28% 3.3vw / 25% 0.15vw no-repeat,
    linear-gradient(#c586c0, #c586c0) 5% 3.9vw / 10% 0.15vw no-repeat,
    linear-gradient(#ce9178, #ce9178) 17% 3.9vw / 35% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 4.5vw / 12% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 19% 4.5vw / 16% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 8% 5.1vw / 20% 0.15vw no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 30% 5.1vw / 12% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 5.7vw / 6% 0.15vw no-repeat;
}

/* Terminal — title bar */
.monitor--right .monitor__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Title bar */
    linear-gradient(#2d2d2d, #2d2d2d) 0 0 / 100% 6% no-repeat,
    /* Window controls */
    linear-gradient(#e85050, #e85050) 2% 2.5% / 1.5% 0.15vw no-repeat,
    linear-gradient(#e8b830, #e8b830) 5% 2.5% / 1.5% 0.15vw no-repeat,
    linear-gradient(#50c040, #50c040) 8% 2.5% / 1.5% 0.15vw no-repeat,
    linear-gradient(#888, #888) 40% 2.5% / 15% 0.15vw no-repeat;
}

/* Terminal — output lines + prompt */
.monitor--right .monitor__screen::after {
  content: '';
  position: absolute;
  top: 8%;
  left: 3%;
  right: 3%;
  bottom: 3%;
  background:
    /* Prompt prefix */
    linear-gradient(#50c040, #50c040) 0 0.3vw / 5% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 7% 0.3vw / 40% 0.15vw no-repeat,
    /* Output */
    linear-gradient(#ccc, #ccc) 0 0.9vw / 60% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 0 1.5vw / 45% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 0 2.1vw / 72% 0.15vw no-repeat,
    linear-gradient(#e85050, #e85050) 0 2.7vw / 30% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 0 3.3vw / 55% 0.15vw no-repeat,
    linear-gradient(#50c040, #50c040) 0 3.9vw / 5% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 7% 3.9vw / 50% 0.15vw no-repeat,
    /* More output */
    linear-gradient(#ccc, #ccc) 0 4.5vw / 65% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 0 5.1vw / 38% 0.15vw no-repeat,
    linear-gradient(#50c040, #50c040) 0 5.7vw / 5% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 7% 5.7vw / 42% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 0 6.3vw / 58% 0.15vw no-repeat,
    /* Active prompt at bottom */
    linear-gradient(#50c040, #50c040) 0 100% / 5% 0.15vw no-repeat,
    linear-gradient(#ccc, #ccc) 7% 100% / 12% 0.15vw no-repeat,
    /* Blinking cursor */
    linear-gradient(#ccc, #ccc) 20% 100% / 0.15vw 0.6vw no-repeat;
}

/* ===== VS Code Scrolling Code Animation ===== */
/* Covers the editor content area with an opaque background,
   hiding the static code lines in ::after beneath it.
   overflow:hidden clips the tall scrolling ::before to the visible area. */
.code-scroll {
  position: absolute;
  top: 8%;
  left: 20%;
  right: 4%;
  height: 6.5vw;
  overflow: hidden;
  z-index: 2;
  background: #0a0a18;
}

/* Opaque cover at the bottom of the editor — hides line 11 from the
   scrolling ::before so only the clip-path typing reveal is visible there.
   Sits above ::before (auto) but below .code-typing (z-index: 3). */
.code-scroll::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.35vw;
  background: #0a0a18;
  z-index: 2;
}

/* Tall strip of code lines (20 lines = 10 unique × 2 for seamless loop).
   Scrolls upward in discrete steps — when it reaches -50%, the visual
   is identical to 0%, so the loop resets invisibly. */
.code-scroll::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12vw;
  animation: scroll-code 30s infinite;
  background:
    /* Line numbers 1-10 */
    linear-gradient(#555, #555) 0 0.3vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 0.9vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 1.5vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 2.1vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 2.7vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 3.3vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 3.9vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 4.5vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 5.1vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 5.7vw / 3% 0.15vw no-repeat,
    /* Line numbers 11-20 (duplicate, offset +6vw) */
    linear-gradient(#555, #555) 0 6.3vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 6.9vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 7.5vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 8.1vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 8.7vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 9.3vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 9.9vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 10.5vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 11.1vw / 3% 0.15vw no-repeat,
    linear-gradient(#555, #555) 0 11.7vw / 3% 0.15vw no-repeat,
    /* Lines 1-10 */
    linear-gradient(#c586c0, #c586c0) 5% 0.3vw / 12% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 19% 0.3vw / 18% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 40% 0.3vw / 10% 0.15vw no-repeat,
    linear-gradient(#4ec994, #4ec994) 5% 0.9vw / 8% 0.15vw no-repeat,
    linear-gradient(#ce9178, #ce9178) 15% 0.9vw / 30% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 8% 1.5vw / 10% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 20% 1.5vw / 14% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 37% 1.5vw / 20% 0.15vw no-repeat,
    linear-gradient(#c586c0, #c586c0) 8% 2.1vw / 8% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 18% 2.1vw / 22% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 2.7vw / 15% 0.15vw no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 22% 2.7vw / 8% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 8% 3.3vw / 18% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 28% 3.3vw / 25% 0.15vw no-repeat,
    linear-gradient(#c586c0, #c586c0) 5% 3.9vw / 10% 0.15vw no-repeat,
    linear-gradient(#ce9178, #ce9178) 17% 3.9vw / 35% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 4.5vw / 12% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 19% 4.5vw / 16% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 8% 5.1vw / 20% 0.15vw no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 30% 5.1vw / 12% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 5.7vw / 6% 0.15vw no-repeat,
    /* Lines 11-20 (duplicate, offset +6vw for seamless loop) */
    linear-gradient(#c586c0, #c586c0) 5% 6.3vw / 12% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 19% 6.3vw / 18% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 40% 6.3vw / 10% 0.15vw no-repeat,
    linear-gradient(#4ec994, #4ec994) 5% 6.9vw / 8% 0.15vw no-repeat,
    linear-gradient(#ce9178, #ce9178) 15% 6.9vw / 30% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 8% 7.5vw / 10% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 20% 7.5vw / 14% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 37% 7.5vw / 20% 0.15vw no-repeat,
    linear-gradient(#c586c0, #c586c0) 8% 8.1vw / 8% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 18% 8.1vw / 22% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 8.7vw / 15% 0.15vw no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 22% 8.7vw / 8% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 8% 9.3vw / 18% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 28% 9.3vw / 25% 0.15vw no-repeat,
    linear-gradient(#c586c0, #c586c0) 5% 9.9vw / 10% 0.15vw no-repeat,
    linear-gradient(#ce9178, #ce9178) 17% 9.9vw / 35% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 10.5vw / 12% 0.15vw no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 19% 10.5vw / 16% 0.15vw no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 8% 11.1vw / 20% 0.15vw no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 30% 11.1vw / 12% 0.15vw no-repeat,
    linear-gradient(#569cd6, #569cd6) 5% 11.7vw / 6% 0.15vw no-repeat;
}

/* Discrete scroll: hold while typing, then shift up one line (0.6vw).
   Shift syncs with typing hide at 9.5% of each phase.
   At 100% (-6vw), the visual matches 0% because lines 11-20 = lines 1-10. */
@keyframes scroll-code {
  0%, 9.5%    { transform: translateY(0); }
  10%, 19.5%  { transform: translateY(-0.6vw); }
  20%, 29.5%  { transform: translateY(-1.2vw); }
  30%, 39.5%  { transform: translateY(-1.8vw); }
  40%, 49.5%  { transform: translateY(-2.4vw); }
  50%, 59.5%  { transform: translateY(-3.0vw); }
  60%, 69.5%  { transform: translateY(-3.6vw); }
  70%, 79.5%  { transform: translateY(-4.2vw); }
  80%, 89.5%  { transform: translateY(-4.8vw); }
  90%, 99.5%  { transform: translateY(-5.4vw); }
  100%        { transform: translateY(-6.0vw); }
}

/* Typing line — reveals syntax-colored code left-to-right via clip-path.
   Two synced animations: clip for the reveal, bg for cycling line colors.
   Background changes while clip is at 100% (hidden), so the swap is invisible. */
/* Static line number for the typing line — always visible, not clipped */
.code-typing-num {
  position: absolute;
  z-index: 3;
  bottom: 0.05vw;
  left: 0;
  width: 3%;
  height: 0.15vw;
  background: #555;
}

.code-typing {
  position: absolute;
  z-index: 3;
  bottom: 0.05vw;
  left: 0;
  width: 100%;
  height: 0.15vw;
  animation:
    code-type-clip 30s infinite,
    code-type-bg 30s step-end infinite;
}

/* Clip-path reveal: smoothly reveals each line, holds, then snaps hidden.
   Per-keyframe timing functions control each phase:
   linear = smooth reveal (typing), step-end = hold then snap (pause + hide) */
@keyframes code-type-clip {
  0%    { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  8%    { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  9.5%  { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  10%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  18%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  19.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  20%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  28%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  29.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  30%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  38%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  39.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  40%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  48%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  49.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  50%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  58%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  59.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  60%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  68%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  69.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  70%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  78%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  79.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  80%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  88%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  89.5% { clip-path: inset(0 100% 0 0); animation-timing-function: step-start; }
  90%   { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  98%   { clip-path: inset(0 40% 0 0);  animation-timing-function: step-end; }
  99.5%, 100% { clip-path: inset(0 100% 0 0); }
}

/* Background cycles through each line's syntax colors using the same
   positioned-background-layer technique as the static scrolling lines.
   This ensures the typed line looks identical to the static lines.
   step-end timing snaps to the next while the clip is hidden. */
@keyframes code-type-bg {
  0%  { background:
    linear-gradient(#c586c0, #c586c0) 5% 0 / 12% 100% no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 19% 0 / 18% 100% no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 40% 0 / 10% 100% no-repeat; }
  10% { background:
    linear-gradient(#4ec994, #4ec994) 5% 0 / 8% 100% no-repeat,
    linear-gradient(#ce9178, #ce9178) 15% 0 / 30% 100% no-repeat; }
  20% { background:
    linear-gradient(#569cd6, #569cd6) 8% 0 / 10% 100% no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 20% 0 / 14% 100% no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 37% 0 / 20% 100% no-repeat; }
  30% { background:
    linear-gradient(#c586c0, #c586c0) 8% 0 / 8% 100% no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 18% 0 / 22% 100% no-repeat; }
  40% { background:
    linear-gradient(#569cd6, #569cd6) 5% 0 / 15% 100% no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 22% 0 / 8% 100% no-repeat; }
  50% { background:
    linear-gradient(#dcdcaa, #dcdcaa) 8% 0 / 18% 100% no-repeat,
    linear-gradient(#9cdcfe, #9cdcfe) 28% 0 / 25% 100% no-repeat; }
  60% { background:
    linear-gradient(#c586c0, #c586c0) 5% 0 / 10% 100% no-repeat,
    linear-gradient(#ce9178, #ce9178) 17% 0 / 35% 100% no-repeat; }
  70% { background:
    linear-gradient(#569cd6, #569cd6) 5% 0 / 12% 100% no-repeat,
    linear-gradient(#dcdcaa, #dcdcaa) 19% 0 / 16% 100% no-repeat; }
  80% { background:
    linear-gradient(#9cdcfe, #9cdcfe) 8% 0 / 20% 100% no-repeat,
    linear-gradient(#b5cea8, #b5cea8) 30% 0 / 12% 100% no-repeat; }
  90% { background:
    linear-gradient(#569cd6, #569cd6) 5% 0 / 6% 100% no-repeat; }
}

.monitor__neck {
  width: 10%;
  height: 1.2vw;
  margin: 0 auto;
  background: #333;
  border-left: 0.15vw solid #444;
  border-right: 0.15vw solid #222;
}

.monitor__base {
  width: 40%;
  height: 0.8vw;
  margin: 0 auto;
  background: #333;
  border: 0.15vw solid;
  border-color: #444 #222 #222 #444;
}

/* ===== Keyboard ===== */
.keyboard {
  position: absolute;
  top: 52%;
  left: 46%;
  transform: translateX(-50%);
  width: 21.6%;
  height: 4vw;
  background-color: #2a2a2a;
  border: 0.25vw solid;
  border-color: #444 #222 #222 #444;
  z-index: 3;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0, transparent 0.6vw,
      #333 0.6vw, #333 0.7vw
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 0.7vw,
      #333 0.7vw, #333 0.8vw
    );
}

/* ===== Mouse ===== */
.mouse {
  position: absolute;
  top: 54%;
  left: calc(46% + 12.5%);
  width: 2.5vw;
  height: 3.5vw;
  background: #2a2a2a;
  border: 0.2vw solid;
  border-color: #444 #222 #222 #444;
  z-index: 3;
  pointer-events: none;
  animation: mouse-move 0.4s ease-in-out infinite alternate;
}

@keyframes mouse-move {
  0%   { transform: translateY(-0.25vw); }
  100% { transform: translateY(0); }
}

/* Button divider line */
.mouse::before {
  content: '';
  position: absolute;
  top: 0.15vw;
  left: 50%;
  transform: translateX(-50%);
  width: 0.15vw;
  height: 40%;
  background: #444;
}

/* ===== Desk Objects (shared) ===== */
/* z-index: 5 keeps clickable objects above monitors (z:4) */
.desk-object {
  position: absolute;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 5;
}

.desk-object:hover {
  transform: translate(0, -0.35vw);
  z-index: 6;
}

/* ===== MTG Card (back) ===== */
.mtg-card {
  bottom: 18%;
  left: 20%;
  width: 2.5vw;
  height: 3.5vw;
  background: #2a1808;
  border: 0.25vw solid #1a0c04;
  box-shadow: 0.25vw 0.25vw 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
  /* translateZ(1vw) lifts card above the desk plane in preserve-3d context
     to prevent hover dead zones from 3D hit-testing misses */
  transform: translateZ(1vw);
}

/* Shadow Y offset increases on hover (0.25→0.5vw) to keep shadow stationary as card lifts */
.mtg-card:hover {
  transform: translateZ(1vw) translate(0, -0.35vw);
  box-shadow: 0.25vw 0.5vw 0 rgba(0, 0, 0, 0.5);
}

.mtg-card__back {
  width: 100%;
  height: 100%;
  position: relative;
  background: #4e3f19;
}

/* Red orbs in corners */
.mtg-card__back::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(#c36120, #c36120) 8% 6% / 0.2vw 0.2vw no-repeat,
    linear-gradient(#c36120, #c36120) 92% 6% / 0.2vw 0.2vw no-repeat,
    linear-gradient(#c36120, #c36120) 8% 94% / 0.2vw 0.2vw no-repeat,
    linear-gradient(#c36120, #c36120) 92% 94% / 0.2vw 0.2vw no-repeat;
}

/* Light brown oval */
.mtg-card__oval {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 75%;
  background: #8e5c2d;
  clip-path: polygon(
    30% 0%, 70% 0%,
    90% 8%, 100% 20%,
    100% 80%, 90% 92%,
    70% 100%, 30% 100%,
    10% 92%, 0% 80%,
    0% 20%, 10% 8%
  );
}

/* 5 mana orbs in pentagon — W(yellow), U(blue), B(black), R(red), G(green) */
.mtg-card__oval::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* White/Yellow — top center */
    linear-gradient(#eac02f, #eac02f) 50% 25% / 0.22vw 0.22vw no-repeat,
    /* Blue — top right */
    linear-gradient(#438bac, #438bac) 72% 43% / 0.22vw 0.22vw no-repeat,
    /* Black — bottom right */
    linear-gradient(#332914, #332914) 65% 66% / 0.22vw 0.22vw no-repeat,
    /* Red — bottom left */
    linear-gradient(#d73f27, #d73f27) 35% 66% / 0.22vw 0.22vw no-repeat,
    /* Green — top left */
    linear-gradient(#64cb12, #64cb12) 28% 43% / 0.22vw 0.22vw no-repeat;
}

/* ===== Coffee Mug (side profile, pixel art) ===== */
/* Counter-rotated like monitors to stand upright on tilted desk.
   translateZ(0.05vw) lifts mug just above desk plane so box-shadow
   renders visibly underneath in the preserve-3d context. */
.coffee-mug {
  top: 60%;
  right: 25%;
  width: 4.2vw;
  height: 3.6vw;
  transform: rotateX(-10deg) translateZ(0.05vw);
  transform-origin: center bottom;
}

/* Must repeat full transform chain (rotateX + translateZ) on hover,
   not just translate, to avoid losing counter-rotation */
.coffee-mug:hover {
  transform: rotateX(-10deg) translateZ(0.05vw) translate(0, -0.35vw);
}

/* Shadow Y offset increases on hover to keep shadow stationary as mug lifts */
.coffee-mug:hover .coffee-mug__body {
  box-shadow: 0.25vw 0.5vw 0 rgba(0, 0, 0, 0.35);
}

.coffee-mug__body {
  position: absolute;
  width: 3vw;
  height: 100%;
  bottom: 0;
  left: 0;
  background: #d0c8b8;
  border: 0.25vw solid;
  border-color: #e0d8c8 #8a7a6a #8a7a6a #e0d8c8;
  box-shadow: 0.25vw 0.25vw 0 rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.15s ease;
}

/* Pixel steam */
.coffee-mug__body::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2vw;
  height: 2.5vw;
  opacity: 0.4;
  background:
    /* Left wisp */
    linear-gradient(#fff, #fff) 15% 80% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 10% 65% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 18% 50% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 12% 35% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 20% 20% / 0.15vw 0.15vw no-repeat,
    /* Center wisp */
    linear-gradient(#fff, #fff) 50% 85% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 55% 70% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 48% 55% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 54% 40% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 46% 25% / 0.15vw 0.15vw no-repeat,
    /* Right wisp */
    linear-gradient(#fff, #fff) 80% 78% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 85% 62% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 78% 46% / 0.15vw 0.15vw no-repeat,
    linear-gradient(#fff, #fff) 86% 30% / 0.15vw 0.15vw no-repeat;
  animation: steam 2s ease-in-out infinite;
}

@keyframes steam {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
  50% { transform: translateX(-50%) translateY(-0.3vw); opacity: 0.2; }
}

.coffee-mug__handle {
  position: absolute;
  top: 0.72vw;
  right: 0;
  width: 1vw;
  height: 1.7vw;
  background: transparent;
  border: 0.25vw solid;
  border-color: #b09880 #8a7a6a #8a7a6a #b09880;
  border-left: none;
}

.coffee-mug__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.4vw;
  color: #5a4a3a;
}

/* ===== Notebook ===== */
.notebook {
  bottom: 12%;
  right: 9%;
  width: 6.5vw;
  height: 8.3vw;
  background: #f0ead4;
  border: 0.2vw solid;
  border-color: #f8f2dc #b0a888 #b0a888 #f8f2dc;
  box-shadow: 0.25vw 0.25vw 0 rgba(0, 0, 0, 0.35);
  /* translateZ(1vw) lifts notebook above the desk plane in preserve-3d context
     to prevent hover dead zones from 3D hit-testing misses */
  transform: rotate(3deg) translateZ(1vw);
}

/* Shadow Y offset increases on hover to keep shadow stationary as notebook lifts */
.notebook:hover {
  transform: rotate(3deg) translateZ(1vw) translate(0, -0.35vw);
  box-shadow: 0.25vw 0.5vw 0 rgba(0, 0, 0, 0.4);
}

.notebook__binding {
  position: absolute;
  top: 0;
  left: 0.3vw;
  width: 0.65vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.notebook__ring {
  width: 0.55vw;
  height: 0.3vw;
  border: 0.15vw solid #666;
  background: transparent;
}

.notebook__page {
  position: absolute;
  top: 0.4vw;
  left: 1.25vw;
  right: 0.3vw;
  bottom: 0.4vw;
  padding-top: 1vw; /* Pushes lines below the "Notes" label */
}

.notebook__line {
  width: 100%;
  height: 0.1vw;
  background: #b0c4d8;
  margin-bottom: 0.55vw;
}

.notebook__label {
  position: absolute;
  top: 0.4vw;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.4vw;
  color: #334;
}

/* ===== Chair & Person (back view) ===== */
.chair-person {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 56%;
  width: 27vw;
  z-index: 3;
  pointer-events: none;
}

/* Head — dark hair from behind */
.person__head {
  position: absolute;
  top: -2vw;
  left: 50%;
  transform: translateX(-50%);
  width: 10vw;
  height: 7.5vw;
  background: #8b7348;
  border: 0.25vw solid;
  border-color: #9e8558 #6e5a38 #6e5a38 #9e8558;
  z-index: 3;
}

/* Ears */
.person__head::before,
.person__head::after {
  content: '';
  position: absolute;
  top: 2.8vw;
  width: 1.3vw;
  height: 2vw;
  background: #c8a888;
  border: 0.15vw solid #a88868;
}

.person__head::before { left: -1.5vw; }
.person__head::after { right: -1.5vw; }

/* Shoulders / upper body — hoodie */
.person__body {
  position: absolute;
  top: 6.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 17vw;
  height: 12vw;
  background: #2a4468;
  border: 0.25vw solid;
  border-color: #3a5478 #1a3458 #1a3458 #3a5478;
  z-index: 1;
}

/* Neck */
.person__body::before {
  content: '';
  position: absolute;
  top: -1.8vw;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5vw;
  height: 2.2vw;
  background: #c8a888;
  border-left: 0.15vw solid #a88868;
  border-right: 0.15vw solid #a88868;
}

/* Arms — extend from shoulders forward onto desk.
   perspective + rotateX tilts them to match the desk surface angle,
   so they appear to rest on the same plane as desk objects. */
.person__arm {
  position: absolute;
  width: 3.5vw;
  height: 10vw;
  background: #2a4468;
  border: 0.25vw solid;
  border-color: #3a5478 #1a3458 #1a3458 #3a5478;
  z-index: 0;
  transform-origin: center bottom;
  transform: perspective(900px) rotateX(12deg);
}

/* Hand */
.person__arm::before {
  content: '';
  position: absolute;
  top: -1.3vw;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5vw;
  height: 1.3vw;
  background: #c8a888;
  border: 0.15vw solid #a88868;
}

/* Left arm — reaching to keyboard */
.person__arm--left {
  top: -1vw;
  left: 4vw;
  animation: typing-left 0.4s ease-in-out infinite alternate;
}

/* Right arm — reaching to mouse */
.person__arm--right {
  top: -1vw;
  right: 4vw;
  animation: typing-right 0.4s ease-in-out infinite alternate;
}

@keyframes typing-left {
  0%   { transform: perspective(900px) rotateX(12deg) translateY(0); }
  100% { transform: perspective(900px) rotateX(12deg) translateY(-0.3vw); }
}

@keyframes typing-right {
  0%   { transform: perspective(900px) rotateX(12deg) translateY(-0.3vw); }
  100% { transform: perspective(900px) rotateX(12deg) translateY(0); }
}

/* Chair back — dark mesh */
.chair__back {
  position: absolute;
  top: 9.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 20vw;
  height: 14.5vw;
  background: #2a2a2a;
  border: 0.25vw solid;
  border-color: #444 #222 #222 #444;
  z-index: 2;
}

/* Mesh pattern on chair back */
.chair__back::before {
  content: '';
  position: absolute;
  inset: 0.35vw;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0, transparent 1vw,
      rgba(255, 255, 255, 0.05) 1vw, rgba(255, 255, 255, 0.05) 1.1vw
    );
}

/* Chair seat */
.chair__seat {
  position: absolute;
  top: 24vw;
  left: 50%;
  transform: translateX(-50%);
  width: 23vw;
  height: 2vw;
  background: #2a2a2a;
  border: 0.2vw solid;
  border-color: #3a3a3a #1a1a1a #1a1a1a #3a3a3a;
  z-index: 1;
}

/* Chair post/stem */
.chair__post {
  position: absolute;
  top: 25.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 2vw;
  height: 12vw;
  background: #333;
  border-left: 0.2vw solid #444;
  border-right: 0.2vw solid #222;
  z-index: 1;
}

/* Chair base (5-star base from above = horizontal bar) */
.chair__base {
  position: absolute;
  top: 37vw;
  left: 50%;
  transform: translateX(-50%);
  width: 23vw;
  height: 1.5vw;
  background: #333;
  border: 0.2vw solid;
  border-color: #444 #222 #222 #444;
  z-index: 1;
}

/* Caster wheels */
.chair__base::before,
.chair__base::after {
  content: '';
  position: absolute;
  bottom: -1.2vw;
  width: 1.8vw;
  height: 1.2vw;
  background: #222;
  border: 0.15vw solid #333;
}

.chair__base::before { left: -0.8vw; }
.chair__base::after { right: -0.8vw; }

/* ===== Responsive: mobile stacked layout =====
   On mobile, the room scene is hidden entirely. Desk objects are shown
   as a vertically centered scrolling list on a plain background.
   All vw units are overridden with fixed px because vw is too small
   on narrow viewports. */
@media (max-width: 640px) {
  html, body {
    overflow: auto;
  }

  .scene {
    height: auto;
    min-height: 100vh;
    background: #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    gap: 2rem;
  }

  .scene::before { display: none; }

  /* display:contents dissolves the 16:9 wrapper so children participate
     directly in .scene's flex layout alongside .desk's contents */
  .room-content { display: contents; }

  .wall,
  .floor,
  .desk-front,
  .desk-leg,
  .monitor,
  .keyboard,
  .mouse,
  .chair-person {
    display: none;
  }

  .site-title {
    position: static;
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  /* display:contents dissolves desk from layout so children participate
     directly in scene's flex context */
  .desk {
    position: relative;
    inset: auto;
    display: contents;
  }

  .desk-surface {
    position: relative;
    height: auto;
    transform: none;
    transform-style: flat; /* Disable preserve-3d — no perspective needed on mobile */
    background: none !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0;
  }

  /* position:relative (not static) preserves containing block for absolutely
     positioned children like steam, handle, and mug label.
     Inset reset (auto) overrides desktop absolute positioning. */
  .desk-object {
    position: relative !important;
    transform: none !important;
    flex-shrink: 0;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }


  .desk-object:hover {
    transform: translateY(-4px) !important;
  }

  /* MTG Card — fixed mobile sizes */
  .mtg-card {
    width: 80px;
    height: 112px;
    border-width: 2px;
  }

  .mtg-card__back {
    border-width: 2px;
  }

  .mtg-card__oval::before {
    background:
      linear-gradient(#eac02f, #eac02f) 50% 25% / 5px 5px no-repeat,
      linear-gradient(#438bac, #438bac) 72% 43% / 5px 5px no-repeat,
      linear-gradient(#332914, #332914) 65% 66% / 5px 5px no-repeat,
      linear-gradient(#d73f27, #d73f27) 35% 66% / 5px 5px no-repeat,
      linear-gradient(#64cb12, #64cb12) 28% 43% / 5px 5px no-repeat;
  }

  .mtg-card__back::after {
    background:
      linear-gradient(#c36120, #c36120) 8% 6% / 4px 4px no-repeat,
      linear-gradient(#c36120, #c36120) 92% 6% / 4px 4px no-repeat,
      linear-gradient(#c36120, #c36120) 8% 94% / 4px 4px no-repeat,
      linear-gradient(#c36120, #c36120) 92% 94% / 4px 4px no-repeat;
  }

  /* Coffee Mug — fixed mobile sizes */
  .coffee-mug {
    width: 100px;
    height: 80px;
    margin-top: 30px; /* Extra top margin accounts for steam animation above mug */
  }

  .coffee-mug__body {
    width: 72px;
    height: 100%;
    border-width: 3px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  }

  .coffee-mug__body::before {
    width: 50px;
    height: 60px;
    opacity: 0.4;
    background:
      linear-gradient(#fff, #fff) 15% 80% / 3px 3px no-repeat,
      linear-gradient(#fff, #fff) 10% 65% / 3px 3px no-repeat,
      linear-gradient(#fff, #fff) 18% 50% / 3px 3px no-repeat,
      linear-gradient(#fff, #fff) 50% 85% / 3px 3px no-repeat,
      linear-gradient(#fff, #fff) 55% 70% / 3px 3px no-repeat,
      linear-gradient(#fff, #fff) 48% 55% / 3px 3px no-repeat,
      linear-gradient(#fff, #fff) 80% 78% / 3px 3px no-repeat,
      linear-gradient(#fff, #fff) 85% 62% / 3px 3px no-repeat;
  }

  .coffee-mug__handle {
    top: 16px;
    width: 24px;
    height: 38px;
    border-width: 3px;
  }

  .coffee-mug__label {
    font-size: 8px;
  }

  /* Notebook — fixed mobile sizes */
  .notebook {
    width: 160px;
    height: 200px;
    transform: none !important;
    border-width: 3px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  }

  .notebook:hover {
    transform: translateY(-4px) !important;
    box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.4);
  }

  .notebook__binding {
    left: 8px;
    width: 14px;
  }

  .notebook__ring {
    width: 12px;
    height: 7px;
    border-width: 2px;
  }

  .notebook__page {
    top: 10px;
    left: 28px;
    right: 8px;
    bottom: 10px;
    padding-top: 20px; /* Pushes lines below the "Notes" label */
  }

  .notebook__line {
    height: 2px;
    margin-bottom: 14px;
  }

  .notebook__label {
    top: 10px;
    font-size: 10px;
  }
}