/* Each component arrives in its own part of the page. Text stays fully visible. */
.hero { overflow: clip; }
.motion-enabled .hero-photo { height: calc(100% + 120px); top: -60px; transform: translate3d(0,var(--hero-drift,0px),0) scale(1.06); will-change: transform; }
.motion-enabled .hero-copy { transform: translate3d(0,var(--hero-copy-drift,0px),0); }
.motion-enabled .motion-unit {
  translate: var(--motion-x,0px) var(--motion-y,0px);
  rotate: var(--motion-turn,0deg);
  transition: translate 380ms cubic-bezier(.22,.61,.36,1), rotate 380ms cubic-bezier(.22,.61,.36,1);
}
span.motion-unit:not(.text-link) { display: inline-block; }

/* The example's transform animation remains responsible for gathering its notes. */
.motion-enabled .example-message { transition: translate 380ms cubic-bezier(.22,.61,.36,1), transform 480ms cubic-bezier(.2,.8,.2,1), box-shadow 480ms; }

.motion-enabled .book {
  --rest-turn: -3deg;
  --hover-lift: 0px;
  --hover-depth: 0deg;
  transform: translate3d(var(--scatter-x,0px),calc(var(--scatter-y,0px) + var(--hover-lift)),0) rotate(calc(var(--rest-turn) + var(--scatter-turn,0deg))) rotateY(var(--hover-depth));
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.motion-enabled .book:nth-child(2) { --rest-turn: 2deg; }
.motion-enabled .book:nth-child(3) { --rest-turn: 4deg; }
.motion-enabled .book:is(:hover,:focus-visible) { --hover-lift: -18px; --hover-depth: -12deg; }
.motion-enabled .book:has(.paper-opening) { transition: none; }

.room,.made,.library { position: relative; }
.loose-papers { position: absolute; right: 16px; top: 70px; width: 50px; height: 90px; pointer-events: none; opacity: .62; z-index: 0; }
.loose-papers i { position: absolute; display: block; width: 19px; height: 27px; left: 15px; top: 26px; border-radius: 1px; background: repeating-linear-gradient(0deg,transparent 0 6px,#735c4529 6px 7px),#d5bea0; box-shadow: 1px 2px 4px #0003; }
.loose-papers i:nth-child(2) { width: 22px; height: 30px; background-color: #e4d9c6; }
.loose-papers i:nth-child(3) { width: 17px; height: 24px; background-color: #bc9773; }

/* A touch gesture stays native; the movement is smaller, but still present. */
@media (max-width:760px) {
  .motion-enabled .hero-photo { height: calc(100% + 70px); top: -35px; transform: translate3d(0,var(--hero-drift,0px),0) scale(1.03); }
  .loose-papers { right: 6px; top: 28px; opacity: .4; width: 30px; transform: scale(.75); transform-origin: top right; }
  .motion-enabled .book { transition: transform 280ms cubic-bezier(.22,.61,.36,1); }
  .motion-enabled .book:is(:hover,:focus-visible) { --hover-lift: -8px; --hover-depth: -5deg; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-enabled .hero-photo { height: 100%; top: 0; transform: none; }
  .motion-enabled .hero-copy,.motion-enabled .book { transform: none !important; }
  .motion-unit { translate: none !important; rotate: none !important; transition: none !important; }
  .loose-papers { display: none; }
}

/* Keep scattered objects inside their stage without widening the document. */
.section { overflow-x: clip; }

/* Lenis keeps native document scrolling; its clock sleeps when movement stops. */
html.lenis,html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis textarea,.lenis dialog,.lenis .shelf { overscroll-behavior: contain; }