/* ==========================================================================
   3D layers (1.1.0). Each one draws into a canvas inside its own element and
   adds .dn3d-on once the first frame is up; until then (or without WebGL)
   the CSS version underneath is what people see.
   ========================================================================== */

/* The bookshelf hero */
.shelf.dn3d-on { background: none; box-shadow: none; padding: 0; min-height: clamp(380px, 36vw, 520px); }
.shelf.dn3d-on::before { display: none; }
.shelf.dn3d-on .dn3d-canvas { position: absolute; inset: 0; cursor: pointer; }
.shelf.dn3d-on .shelf__row, .shelf.dn3d-on .shelf__plank { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; min-height: 0; }
.shelf.dn3d-on .book { opacity: 1 !important; animation: none !important; }
@media (max-width: 599px) { .shelf.dn3d-on { min-height: 340px; } }

/* The gift box */
.gbox3d { position: relative; aspect-ratio: 5 / 4; width: 100%; }
.gbox3d .dn3d-canvas { position: absolute; inset: 0; cursor: grab; }
.gbox3d.dn3d-on .crate { display: none; }
.gbox3d:not(.dn3d-on) { aspect-ratio: auto; }

/* The attar cabinet's hero bottle */
.cabinet__bottle .dn3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cabinet__bottle.dn3d-on .cabinet__bottle-img { visibility: hidden; }
.cabinet__bottle { position: relative; }