/* One scene on the cabinet, not a full-screen effect over Ajay's identity.
   The canvas travels with the paper: scrolling never needs a JS listener. */
.world__ink {
  position: absolute;
  inset: 0;
  z-index: 51;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Transactional enhancement: never remove the drawings before a real frame.
   Their geometry and real buttons remain, including native keyboard focus. */
html[data-surface="gl"] .object .engraving { opacity: 0; transform: none; }
html[data-surface="gl"] .object__art::after { display: none; }

/* A collected still life, not fifteen medals in identical shelf cells.
   Layout belongs to the document, not GPU readiness: loading a shader or
   losing a context must not rearrange fifteen buttons under the visitor. */
html[data-state] .still-life__case { display: none; }
html[data-state] .still-life__box { aspect-ratio: 100 / 66; }
html[data-state] .object__label {
  font-size: clamp(.7rem, .9vw, .85rem);
  font-weight: 500;
  text-transform: none;
  letter-spacing: .015em;
}
html[data-state] .object__caption { top: calc(100% - var(--foot, 0%) + 1rem); }
html[data-state="field"] #savvica { left: 3%; top: 4%; width: 16%; rotate: -8deg; }
html[data-state="field"] #barclays { left: 24%; top: 0%; width: 16%; rotate: 4deg; }
html[data-state="field"] #lintel { left: 45%; top: 43%; width: 16%; rotate: -4deg; }
html[data-state="field"] #citylifestyle { left: 65%; top: 5%; width: 18%; rotate: 8deg; }
html[data-state="field"] #aigl { left: 85%; top: 1%; width: 13%; rotate: 11deg; }
html[data-state="field"] #caravel { left: 0%; top: 33%; width: 19%; rotate: -8deg; }
html[data-state="field"] #blackline { left: 21%; top: 32%; width: 16%; rotate: 6deg; }
html[data-state="field"] #portafilter { left: 38%; top: 4%; width: 32%; rotate: -12deg; }
html[data-state="field"] #greenroom { left: 70%; top: 33%; width: 15%; rotate: 8deg; }
html[data-state="field"] #fishtail { left: 83%; top: 35%; width: 17%; rotate: -10deg; }
html[data-state="field"] #milk { left: 1%; top: 67%; width: 20%; rotate: -5deg; }
html[data-state="field"] #swab { left: 23%; top: 66%; width: 20%; rotate: 10deg; }
html[data-state="field"] #bar { left: 43%; top: 68%; width: 20%; rotate: 4deg; }
html[data-state="field"] #slate { left: 65%; top: 69%; width: 16%; rotate: -7deg; }
html[data-state="field"] #firetruck { left: 83%; top: 69%; width: 17%; rotate: 5deg; }

/* Translate is part of the flight too; switching its containing-block offset
   instantly would teleport the very object the scene is meant to preserve. */
html[data-surface="gl"] .chapter {
  translate: 0 0;
  transition:
    left var(--focal) var(--press),
    top var(--focal) var(--press),
    width var(--focal) var(--press),
    rotate var(--focal) var(--press),
    translate var(--focal) var(--press),
    opacity 300ms linear;
}

/* The spouts, liquid and cup belong to the same GL scene as the portafilter.
   All other chapter effects retain their existing static/CSS performance. */
html[data-surface="gl"] .world__effects[data-active="pour"] .fx--pour { display: none; }

@media (max-width: 760px) {
  html[data-state] .still-life__box { aspect-ratio: 100 / 235; }
  html[data-state="plate"] .still-life__box { aspect-ratio: 100 / 190; }
  html[data-state] .object__label { font-size: .7rem; line-height: 1.35; }
  html[data-state] .object__caption { width: 72%; top: calc(100% - var(--foot, 0%) + .6rem); }
  html[data-state] #portafilter .object__caption { width: 58%; left: 40%; }
  html[data-state="field"] #savvica { left: 0%; top: 2%; width: 34%; rotate: -7deg; }
  html[data-state="field"] #barclays { left: 33%; top: 0%; width: 34%; rotate: 4deg; }
  html[data-state="field"] #lintel { left: 65%; top: 3%; width: 34%; rotate: -4deg; }
  html[data-state="field"] #caravel { left: 0%; top: 20%; width: 36%; rotate: -7deg; }
  html[data-state="field"] #portafilter { left: 32%; top: 19%; width: 39%; rotate: -10deg; }
  html[data-state="field"] #citylifestyle { left: 65%; top: 20%; width: 35%; rotate: 8deg; }
  html[data-state="field"] #blackline { left: 0%; top: 40%; width: 34%; rotate: 4deg; }
  html[data-state="field"] #swab { left: 32%; top: 39%; width: 38%; rotate: -6deg; }
  html[data-state="field"] #greenroom { left: 66%; top: 39%; width: 35%; rotate: 6deg; }
  html[data-state="field"] #milk { left: 0%; top: 58%; width: 37%; rotate: -4deg; }
  html[data-state="field"] #bar { left: 33%; top: 59%; width: 37%; rotate: 4deg; }
  html[data-state="field"] #fishtail { left: 65%; top: 60%; width: 37%; rotate: -9deg; }
  html[data-state="field"] #slate { left: 0%; top: 79%; width: 33%; rotate: -7deg; }
  html[data-state="field"] #aigl { left: 34%; top: 78%; width: 32%; rotate: 8deg; }
  html[data-state="field"] #firetruck { left: 66%; top: 81%; width: 34%; rotate: 3deg; }
  /* Make room for the continuous pour without painting over the words. */
  html[data-surface="gl"][data-state="plate"] .still-life__box:has(#portafilter[data-open]) {
    aspect-ratio: 100 / 170;
    min-height: 32rem;
  }
  html[data-surface="gl"] #portafilter[data-open] { top: 10%; width: 58%; }
  html[data-surface="gl"] #portafilter[data-open] .plate {
    left: -34.5%;
    width: 169%;
    top: calc(125% + 1.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .world__ink { display: none !important; }
  html[data-surface="gl"] .object .engraving { opacity: 1; }
}

@media print {
  .world__ink { display: none !important; }
}