/* ========================================
   Desk: the homepage as a scroll-driven 3D scene (js/desk-scene.js).
   Only shown when WebGL is available; otherwise the flat layout stays.
   ======================================== */

.desk {
  display: none;
  position: relative;
}

.has-desk .desk {
  display: block;
}

.has-desk .flat-layout {
  display: none;
}

/* The scene stays pinned while the chapters scroll over it */
.desk-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #f2eee8;
}

.desk-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.desk-canvas.is-pointing {
  cursor: pointer;
}

.desk-chapters {
  position: relative;
  margin-top: -100vh;
  margin-top: -100svh;
  /* Clicks fall through to the canvas, except on the captions */
  pointer-events: none;
}

.desk-chapter {
  position: relative;
  min-height: 125vh;
}

.desk-chapter:last-child {
  min-height: 130vh;
}

/* Where the camera arrives at each shot (read by the scene) */
.desk-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.desk-mark-portrait {
  display: none;
}

/* Headings and descriptions are painted onto the objects in the scene (the
   badge, a sticky note, tape on the lid, the screen, the notebook). The HTML
   stays for screen readers and search engines. */
.desk-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hover label that follows objects in the scene */
.desk-tip {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}

.desk-tip[hidden] {
  display: none;
}

/* Keyboard and screen-reader access to everything in the scene. Focus
   highlights the matching object instead of showing these buttons. */
.desk-list {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  list-style: none;
}

/* Phones and other tall screens: the notebook gets a second shot, articles
   then talks */
@media (max-aspect-ratio: 1/1) {
  .desk-mark-portrait {
    display: block;
    top: 90vh;
  }

  #desk-writing {
    min-height: 215vh;
  }
}

/* The corkboard in the scene takes the footer's place */
.has-desk .fs-cta-dark {
  display: none;
}

/* The leaf shadows come from the window light in the scene instead */
.has-desk .leaves-video-overlay {
  display: none;
}

/* The birds by the lanyard are the sound toggle here, not the fixed one */
.has-desk .sound-birds {
  display: none;
}