/* tree3d.css — the 3D diorama canvas inside #tree3d (see tree3d.js).
   The site owns .tree3d's size; this file only stacks the canvas over the fallback art
   and cross-fades them once the first 3D frame is on screen. */

.tree3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .7s ease;
  cursor: grab;
  touch-action: pan-y;               /* vertical swipes keep scrolling the page; horizontal ones turn the tree */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
.tree3d-canvas.is-bell { cursor: pointer; }
.tree3d-canvas.is-dragging { cursor: grabbing; }

.tree3d--ready .tree3d-canvas { opacity: 1; }
.tree3d--ready .tree3d-fallback {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.tree3d--fallback .tree3d-canvas { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tree3d-canvas,
  .tree3d--ready .tree3d-fallback { transition: none; }
}

/* JAN CHALLENGE: while the game runs a tap on the stage is the site's ジャン input (no drag to turn) */
.tree3d--game .tree3d-canvas {
  cursor: pointer;
  touch-action: manipulation;
}